通过 props 传递数据即可.&br&譬如定义一个表格组件&br&&div class=&highlight&&&pre&&code class=&language-text&&export default {
name: 'Table',
props: ['columns', 'dataList']
template: `
&th v-for=&column in columns&&{{column.label}}&/th&
&tr v-for=&item in dataList&&
&td v-for=&column in columns&&{{item[column.key]}}&/td&
&/code&&/pre&&/div&&br&使用的时候&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&o&&&&/span&&span class=&nx&&c&/span&&span class=&o&&-&/span&&span class=&nx&&table&/span&
&span class=&o&&:&/span&&span class=&nx&&columns&/span&&span class=&o&&=&/span&&span class=&s2&&&[{key:'id', label:'ID'}, {key:'name', label:'名称'}]&&/span&
&span class=&o&&:&/span&&span class=&nx&&data&/span&&span class=&o&&-&/span&&span class=&nx&&list&/span&&span class=&o&&=&/span&&span class=&s2&&&[{id:'123', name: 'abc'}, {id:'111', name: 'ccc'}]&&/span&
&span class=&o&&&&&/span&&span class=&err&&/c-table&&/span&
&/code&&/pre&&/div&&br&这样就简单的完成了, 表格组件其实还会复杂很多, 包括使用 is 来做动态 CELL 之类的.&br&最近正在写一个, 回头开源出来.
通过 props 传递数据即可.譬如定义一个表格组件export default {
name: 'Table',
props: ['columns', 'dataList']
template: `
&th v-for="column in columns"&{{column.label}}&/th&
&tr v-for="i…
&p&&b&2015&/b&&b&年已经过去了，作为一个前端开发者，我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点，希望这些项目能够越来越好，帮助到更多的前端开发者们。&/b&&/p&&p&&b&此榜单根据github&/b&&b&上star&/b&&b&数作为排名依据，一个人力量有限，如果收集有遗漏欢迎补充。&/b&&/p&&p&&b&1&/b&&b&、名称：Bootstrap&/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者： Twitter&/p&&p&人气：在Github上有91007 stars&/p&&p&描述：主流框架中毋庸置疑的老大，Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。&/p&&p&核心概念/原则: RWD 和移动优先制。&/p&&p&浏览器支持： Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for
IE8)&/p&&p&响应式: Yes&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Bootstrap · The world's most popular mobile-first and responsive front-end framework.&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///twbs/bootstrap& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&twbs/bootstrap · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&2&/b&&b&、名称：html5-boilerplate&/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者：Paul Irish&/p&&p&人气：在Github上有32,349 stars&/p&&p&描述：HTML5 Boilerplate 帮你构建
快速, 健壮, 并且
适应力强 的web app或网站。&/p&&p&核心概念/原则：响应式&/p&&p&浏览器支持：Firefox, Chrome, Safari, IE8+,Edge,Opera&/p&&p&预处理器：None&/p&&p&响应式：Yes&/p&&p&模块化：Yes&/p&&p&官网地址：&a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5 Boilerplate: T&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///h5bp/html5-boilerplate& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&h5bp/html5-boilerplate · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&3&/b&&b&、名称：Meteor&/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者：immir&/p&&p&人气：在Github上有31,092 stars&/p&&p&描述：Meteor是新一代的开发即时web应用的开源框架，它能帮助你在最少的时间内完成开发。&/p&&p&核心概念/原则：响应式&/p&&p&预处理器: Less&/p&&p&响应式: Yes&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Meteor&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///meteor/meteor/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&meteor/meteor · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&4&/b&&b&、名称：Semantic UI &/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者: Jack Lukic&/p&&p&人气: 在Github上有22,325 stars&/p&&p&描述: “基于自然语言有效原则的UI组件框架”&/p&&p&核心概念/原则: 语义，标签的矛盾性、响应式&/p&&p&浏览器支持：Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only),
Android 4, Blackberry 10。&/p&&p&预处理器: Less&/p&&p&响应式: Yes&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Semantic UI&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///Semantic-Org/Semantic-UI& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Semantic-Org/Semantic-UI · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&5&/b&&b&、名称：Foundation&/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者: ZURB&br&人气: 在Github上有22,206+ stars&br&描述: “世界上最优秀的响应式前端框架”&br&核心概念/原则: RWD 、手机优先、语义的&/p&&p&浏览器支持： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+&br&预处理器: Sass&br&响应式: Yes&br&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Foundation | The most advanced responsive front-end framework in the world.&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///zurb/foundation-sites& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&zurb/foundation-sites · GitHub&i class=&icon-external&&&/i&&/a&&br&&/p&&br&&p&&b&6&/b&&b&、名称：Materialize&/b&&/p&&p&类别/语言：CSS&/p&&p&创建者：Google&/p&&p&人气：在Github上有15,288stars&/p&&p&描述：Materialize是一个个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作，为您提供默认的样式，结合了您的自定义组件。此外，他们还改进动画和过渡，为开发人员提供流畅的体验。&/p&&p&核心概念/原则：响应式&/p&&p&预处理器：Sass&/p&&p&响应式：Yes&/p&&p&模块化：Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Documentation&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///Dogfalo/materialize& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Dogfalo/materialize · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&浏览器支持：Chrome 35+, Firefox 31+, Safari 7+, IE 10+&/p&&p&&b&7&/b&&b&、名称：Pure&/b&&/p&&p&类别/语言：CSS&/p&&p&创建者: Yahoo&/p&&p&人气: 在Github上有13,161 stars&/p&&p&描述: “您可以在每一个web项目中使用的一组小的和响应式的CSS模块”&/p&&p&核心概念/原则:SMACSS,极简的.&/p&&p&浏览器支持：Firefox的最新版本, Chrome, S IE7+; iOS 6.x, 7.x; Android 4.x&/p&&p&预处理器: None&/p&&p&响应式: Yes&br&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A//purecss.io/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&purecss.io/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///yahoo/pure& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&yahoo/pure · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&8&/b&&b&、名称：Vue&/b&&/p&&p&类别/语言：CSS、JavaScript&/p&&p&创建者：尤雨溪&/p&&p&人气：在Github上有12,214 stars&/p&&p&描述：Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。&/p&&p&核心概念/原则：响应式&/p&&p&浏览器支持：Firefox, Chrome, Safari, IE9+，Android
4.2+，iOS 7+&/p&&p&预处理器：None&/p&&p&响应式：Yes&/p&&p&模块化：Yes&/p&&p&官网地址：&a href=&///?target=http%3A//vuejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue.js&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///vuejs/vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuejs/vue · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&9&/b&&b&、名称：Skeleton&/b&&/p&&p&类别/语言：CSS、JavaScript&/p&&p&创建者：Dave Gamache&/p&&p&人气：在Github上有10,622stars&/p&&p&描述：Skeleton 是一个小的 JS 和 CSS 文件的集合,可帮你快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。&/p&&p&核心概念/原则：响应式&/p&&p&浏览器支持：Firefox, Chrome, Safari, IE10+,Opera&/p&&p&预处理器：None&/p&&p&响应式：Yes&/p&&p&模块化：Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Skeleton: Responsive CSS Boilerplate&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///dhg/Skeleton& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dhg/Skeleton · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&10.&/b&&b&名称： Amaze UI &/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者：云适配&/p&&p&最后更新时间：2015年12月&/p&&p&人气：在Github上有6425 stars&/p&&p&描述：国内首个开源HTML5跨屏前端框架，中文排版支持更优、本土化组件丰富。&/p&&p&并在2015年11月推出基于
React.js 的专属移动端 Web 组件库Amaze UI touch。&/p&&p&核心概念/原则：组件化、移动优先、轻量级、高性能。&/p&&p&浏览器支持： Firefox, Chrome, Safari, IE8+&/p&&p&响应式: Yes&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A//amazeui.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Amaze UI | 中国首个开源 HTML5 跨屏前端框架&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///amazeui/amazeui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&amazeui/amazeui · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&11&/b&&b&、名称：UIkit &/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者: YOOtheme&/p&&p&人气: 在Github上有6,050+ stars&/p&&p&描述: “一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。”&/p&&p&核心概念/原则:RWD, 手机优先.&/p&&p&预处理器: Less, Sass&/p&&p&响应式: Yes&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&UIkit&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///uikit/uikit& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&uikit/uikit · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&浏览器支持： Chrome, Firefox, Safari, IE9+&/p&&p&&b&12&/b&&b&、名称：Yui&/b&&/p&&p&类别/语言：CSS、JavaScript&/p&&p&创建者：Yahoo&/p&&p&人气：在Github上有3,200+ stars&/p&&p&描述：Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证&/p&&p&核心概念/原则：响应式&/p&&p&预处理器: None&/p&&p&响应式：Yes&/p&&p&模块化：Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///yui/yui3& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&yui/yui3 · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&浏览器支持：Firefox, Chrome, Safari, IE10+,Opera&/p&&p&&b&13.&/b&&b&名称：kissy&/b&&/p&&p&类别/语言： JavaScript&/p&&p&创建者：淘宝前端&/p&&p&最后更新时间：2015年7月&/p&&p&人气：在Github上有2035 stars&/p&&p&描述：KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。&/p&&p&框架大小: 37 KB&/p&&p&核心概念/原则: 模块化，跨终端，高扩展性&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&KISSY - A Powerful JavaScript Framework&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///kissyteam/kissy/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&kissyteam/kissy · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&14.&/b&&b&名称：MUI&/b&&/p&&p&类别/语言： HTML、CSS、JavaScript&/p&&p&创建者：Dclould&/p&&p&最后更新时间：2016年1月&/p&&p&人气：在Github上有2012 stars&/p&&p&描述：MUI-最接近原生App体验的前端框架框架。&/p&&p&核心概念/原则: 多端发布、高性能&/p&&p&响应式: NO&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A//dev./mui/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MUI-最接近原生APP体验的高性能前端框架&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///dcloudio/mui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dcloudio/mui · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&15.&/b&&b&名称：Arale&/b&&/p&&p&类别/语言： JavaScript&/p&&p&创建者：支付宝前端&/p&&p&最后更新时间：2015年7月&/p&&p&人气：在Github上有1252 stars&/p&&p&描述：&a href=&///?target=http%3A//aralejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Arale&i class=&icon-external&&&/i&&/a& 是一个开放、简单、易用的前端基础类库。&/p&&p&框架大小:未知&/p&&p&核心概念/原则: 开放、简单、易用&/p&&p&浏览器支持：Firefox, Chrome, Safari, IE6+&/p&&p&响应式: Yes&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A//aralejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Arale - 随心构建互联网应用&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///aralejs/aralejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&aralejs/aralejs.org · GitHub&i class=&icon-external&&&/i&&/a&&/p&&br&&p&&b&16.&/b&&b&名称：JX&/b&&/p&&p&类别/语言：Javascript&/p&&p&创建者：腾讯前端&/p&&p&最后更新时间：2015年12月&/p&&p&人气：在Github上有952 stars&/p&&p&描述：JX 是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的Web App。&/p&&p&框架大小: 未知&/p&&p&核心概念/原则: 保持最优执行效率&/p&&p&浏览器支持：
兼容主流浏览器&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A//alloyteam.github.io/JX/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JX - 腾讯 Web 前端开发框架&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///AlloyTeam/JX& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AlloyTeam/JX · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&17.&/b&&b&名称：GMU&/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者：百度前端&/p&&p&最后更新时间：2015年12月&/p&&p&人气：在Github上有940stars&/p&&p&描述：GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! Web App。&/p&&p&核心概念/原则: 简单易用、轻量级&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///fex-team/GMU& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&fex-team/GMU · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&18.&/b&&b&名称：ZUI&/b&&/p&&p&类别/语言： HTML、CSS、JavaScript&/p&&p&创建者：蝉道&/p&&p&最后更新时间：2015年7月&/p&&p&人气：在Github上有616 stars&/p&&p&描述：开源HTML5前端框架&/p&&p&核心概念/原则:简单易用、轻量级、易于定制&/p&&p&浏览器支持：未知&/p&&p&官网地址：&a href=&///?target=http%3A//zui.sexy/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ZUI - 开源HTML5跨屏框架&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///easysoft/zui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&easysoft/zui · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&19.&/b&&b&名称：Clouda Touch.js&/b&&/p&&p&类别/语言：JavaScript&/p&&p&创建者：百度云&/p&&p&人气：在Github上有387 stars&/p&&p&描述：Touch.js是移动设备上的手势识别与事件库,也是在百度内部广泛使用的开发。&/p&&p&核心概念/原则: 无入侵设计、媲美原生的交互、极简的API&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A//touch./& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Touch.js&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///Clouda-team/touch.& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Clouda-team/touch. · GitHub&i class=&icon-external&&&/i&&/a&&/p&&p&&b&20.&/b&&b&名称：Arkui&/b&&/p&&p&类别/语言：HTML、CSS、JavaScript&/p&&p&创建者：豆瓣&/p&&p&人气：在Github上有129 stars&/p&&p&模块化: Yes&/p&&p&官网地址：&a href=&///?target=http%3A///arkui/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&arkui&i class=&icon-external&&&/i&&/a&&/p&&p&Github地址：&a href=&///?target=https%3A///mockee/arkui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mockee/arkui · GitHub&i class=&icon-external&&&/i&&/a&&/p&
2015年已经过去了，作为一个前端开发者，我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点，希望这些项目能够越来越好，帮助到更多的前端开发者们。此榜单根据github上star数作为排名依据，一个人力量有限，如果收集有遗漏欢迎补充。1、…
没人邀请，看到这个问题不错，路过怒答。（多图预警）&br&&br&前百度工程师，曾负责百度 &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端集成解决方案&i class=&icon-external&&&/i&&/a& 的核心设计与开发工作。我现在称这个领域为【前端工程】。没错，这是我最爱唠叨的问题域。&br&&br&这是一个非常有趣的 &u&&b&非主流前端领域&/b&&/u&，这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题，入行到现在一直在学习和实践中。&br&&br&在我的印象中，facebook是这个领域的鼻祖，有兴趣、有梯子的同学可以去看看facebook的页面源代码，体会一下什么叫工程化。&br&&br&接下来，我想从原理展开讲述，多图，较长，希望能有耐心看完。&br&&br&&br&---------------------------- 我是一条分割线 ----------------------------&br&&br&&img src=&/07c2bdef6ccef3ada425d61e3062dd09_b.jpg& data-rawwidth=&389& data-rawheight=&238& class=&content_image& width=&389&&&br&&br&让我们返璞归真，从原始的前端开发讲起。上图是一个“可爱”的index.html页面和它的样式文件a.css，用文本编辑器写代码，无需编译，本地预览，确认OK，丢到服务器，等待用户访问。前端就是这么简单，好好玩啊，门槛好低啊，分分钟学会有木有！&br&&br&&img src=&/d53b504bbc9f1887eddf06d_b.jpg& data-rawwidth=&400& data-rawheight=&98& class=&content_image& width=&400&&&br&&br&然后我们访问页面，看到效果，再查看一下网络请求，200！不错，太(TM)完美了！那么，研发完成。。。。了么？&br&&br&等等，这还没完呢！对于大公司来说，那些变态的访问量和性能指标，将会让前端一点也不“好玩”。&br&&br&看看那个a.css的请求吧，如果每次用户访问页面都要加载，是不是很影响性能，很浪费带宽啊，我们希望最好这样：&br&&br&&img src=&/6a8ca252211cec85a31ac4_b.jpg& data-rawwidth=&401& data-rawheight=&98& class=&content_image& width=&401&&&br&利用304，让浏览器使用本地缓存。但，这样也就够了吗？不成！304叫协商缓存，这玩意还是要和服务器通信一次，我们的优化级别是变态级，所以必须彻底灭掉这个请求，变成这样：&br&&br&&img src=&/fd74ab2bf02d79dd7aff180e_b.jpg& data-rawwidth=&400& data-rawheight=&98& class=&content_image& width=&400&&&br&强制浏览器使用本地缓存（cache-control/expires），不要和服务器通信。好了，请求方面的优化已经达到变态级别，那问题来了：你都不让浏览器发资源请求了，这缓存咋更新？&br&&br&很好，相信有人想到了办法：&b&&u&通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源&/u&&/b&。好像这样：&br&&br&&img src=&/8ad1ade55f5_b.jpg& data-rawwidth=&304& data-rawheight=&110& class=&content_image& width=&304&&&br&下次上线，把链接地址改成新的版本，就更新资源了不是。OK，问题解决了么？！当然没有！大公司的变态又来了，思考这种情况：&br&&br&&img src=&/7dc885bf_b.jpg& data-rawwidth=&579& data-rawheight=&310& class=&origin_image zh-lightbox-thumb& width=&579& data-original=&/7dc885bf_r.jpg&&&br&页面引用了3个css，而某次上线只改了其中的a.css，如果所有链接都更新版本，就会导致b.css，c.css的缓存也失效，那岂不是又有浪费了？！&br&&br&重新开启变态模式，我们不难发现，要解决这种问题，必须让url的修改与文件内容关联，也就是说，只有文件内容变化，才会导致相应url的变更，从而实现文件级别的精确缓存控制。&br&&br&什么东西与文件内容相关呢？我们会很自然的联想到利用 &a href=&///?target=http%3A///view/.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&数据摘要要算法&i class=&icon-external&&&/i&&/a& 对文件求摘要信息，摘要信息与文件内容一一对应，就有了一种可以精确到单个文件粒度的缓存控制依据了。好了，我们把url改成带摘要信息的：&br&&br&&img src=&/dbc1d_b.jpg& data-rawwidth=&588& data-rawheight=&310& class=&origin_image zh-lightbox-thumb& width=&588& data-original=&/dbc1d_r.jpg&&&br&这回再有文件修改，就只更新那个文件对应的url了，想到这里貌似很完美了。你觉得这就够了么？大公司告诉你：图样图森破！&br&&br&唉~~~~，让我喘口气&br&&br&现代互联网企业，为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到CDN节点上，网页中引用的资源也会变成对应的部署路径：&br&&br&&img src=&/0866cb58bcfa06b162e0d91_b.jpg& data-rawwidth=&574& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&574& data-original=&/0866cb58bcfa06b162e0d91_r.jpg&&&br&好了，当我要更新静态资源的时候，同时也会更新html中的引用吧，就好像这样：&br&&br&&img src=&/16d6d6c32e52ef1d1a835fb2ed15f864_b.jpg& data-rawwidth=&574& data-rawheight=&456& class=&origin_image zh-lightbox-thumb& width=&574& data-original=&/16d6d6c32e52ef1d1a835fb2ed15f864_r.jpg&&&br&这次发布，同时改了页面结构和样式，也更新了静态资源对应的url地址，现在要发布代码上线，亲爱的前端研发同学，你来告诉我，咱们是先上线页面，还是先上线静态资源？&br&&ol&&li&&b&&u&先部署页面，再部署资源&/u&&/b&：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。&br&&/li&&li&&b&&u&先部署资源，再部署页面&/u&&/b&：在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。&/li&&/ol&好的，上面一坨分析想说的就是：先部署谁都不成！都会导致部署过程中发生页面错乱的问题。所以，访问量不大的项目，可以让研发同学苦逼一把，等到半夜偷偷上线，先上静态资源，再部署页面，看起来问题少一些。&br&&br&但是，大公司超变态，没有这样的“绝对低峰期”，只有“相对低峰期”。So，为了稳定的服务，还得继续追求极致啊！&br&&br&这个奇葩问题，起源于资源的 &u&&b&覆盖式发布&/b&&/u&，用 待发布资源 覆盖 已发布资源，就有这种问题。解决它也好办，就是实现 &u&&b&非覆盖式发布&/b&&/u&。&br&&br&&img src=&/9b3a9df114d14a14130a70abf5733837_b.jpg& data-rawwidth=&631& data-rawheight=&456& class=&origin_image zh-lightbox-thumb& width=&631& data-original=&/9b3a9df114d14a14130a70abf5733837_r.jpg&&&br&看上图，用文件的摘要信息来对资源文件进行重命名，把摘要信息放到资源文件发布路径中，这样，内容有修改的资源就变成了一个新的文件发布到线上，不会覆盖已有的资源文件。上线过程中，先全量部署静态资源，再灰度部署页面，整个问题就比较完美的解决了。&br&&br&所以，大公司的静态资源优化方案，基本上要实现这么几个东西：&br&&br&&blockquote&&ol&&li&配置超长时间的本地缓存
—— 节省带宽，提高性能&br&&/li&&li&采用内容摘要作为缓存更新依据
—— 精确的缓存控制&br&&/li&&li&静态资源CDN部署
—— 优化网络请求&br&&/li&&li&更资源发布路径实现非覆盖式发布
—— 平滑升级&br&&/li&&/ol&&/blockquote&&br&全套做下来，就是相对比较完整的静态资源缓存控制方案了，而且，还要注意的是，静态资源的缓存控制要求在&b&&u&前端所有静态资源加载的位置都要做这样的处理&/u&&/b&。是的，所有！什么js、css自不必说，还要包括js、css文件中引用的资源路径，由于涉及到摘要信息，引用资源的摘要信息也会引起引用文件本身的内容改变，从而形成级联的摘要变化，大概示意图就是：&br&&br&&img src=&/edf10bb428d39d721e1e_b.jpg& data-rawwidth=&709& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&709& data-original=&/edf10bb428d39d721e1e_r.jpg&&&br&好了，目前我们快速的学习了一下前端工程中关于静态资源缓存要面临的优化和部署问题，新的问题又来了：这(TM)让工程师怎么写码啊！！！&br&&br&要解释优化与工程的结合处理思路，又会扯出一堆有关模块化开发、资源加载、请求合并、前端框架等等的工程问题，以上只是开了个头，解决方案才是精髓，但要说的太多太多，有空再慢慢展开吧。或者大家可以去我的blog看其中的一些拆解：&a href=&///?target=https%3A///fouber/blog& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&fouber/blog · GitHub&i class=&icon-external&&&/i&&/a&&br&&br&&blockquote&总之，前端性能优化绝逼是一个工程问题！&br&&/blockquote&&br&以上不是我YY的，可以观察 百度 或者 facebook 的页面以及静态资源源代码，查看它们的资源引用路径处理，以及网络请中静态资源的缓存控制部分。再次赞叹facebook的前端工程建设水平，跪舔了。&br&&br&建议前端工程师多多关注前端工程领域，也许有人会觉得自己的产品很小，不用这么变态，但很有可能说不定某天你就需要做出这样的改变了。而且，如果我们能把事情做得更极致，为什么不去做呢？&br&&br&另外，也不要觉得这些是运维或者后端工程师要解决的问题。如果由其他角色来解决，&u&&b&大家总是把自己不关心的问题丢给别人&/b&&/u&，那么前端工程师的开发过程将受到极大的限制，这种情况甚至在某些大公司都不少见！&br&&br&妈妈，我再也不玩前端了。。。。5555&br&&br&&br&&br&========================[ 10.29更新 ]========================&br&这里更新一下：&br&&br&在评论中， &a data-hash=&4b1a0d3f97fddca9ed6fc820a7be261c& href=&///people/4b1a0d3f97fddca9ed6fc820a7be261c& class=&member_mention& data-editable=&true& data-title=&@陈钢& data-tip=&p$b$4b1a0d3f97fddca9ed6fc820a7be261c&&@陈钢&/a&&a data-hash=&aed& href=&///people/aed& class=&member_mention& data-editable=&true& data-title=&@fleuria& data-tip=&p$b$aed&&@fleuria&/a& @林翔 提到了rails，刚刚去看了一下，确实是完成了以上所说的优化细节，对整个静态资源的管理上的思考于本答案描述的一致。很遗憾我直到今天（）才了解到rails中的assets pipeline。这里向以上3位同学道歉，原谅我的无知。&br&&br&不过整篇回答没有讲解到具体的解决方案实现思路，只是介绍了前端在工程化方向的思考，答案本身是可用的，了解rails的人也可以把此答案当做是对rails中assets pipeline设计原理的分析。&br&&br&rails通过把静态资源变成erb模板文件，然后加入&%= asset_path 'image.png' %&，上线前预编译完成处理，不得不承认，fis的实现思路跟这个几乎完全一样，但我们当初确实不知道有rails的这套方案存在。&br&&br&相关资料：英文版：&a href=&///?target=http%3A//guides.rubyonrails.org/asset_pipeline.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The Asset Pipeline&i class=&icon-external&&&/i&&/a&，中文版：&a href=&///?target=http%3A//guides.ruby-china.org/asset_pipeline.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Asset Pipeline&i class=&icon-external&&&/i&&/a&&br&========================[ 10.31更新 ]========================&br&用 &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&F.I.S&i class=&icon-external&&&/i&&/a& 包装了一个小工具，完整实现整个回答所说的最佳部署方案，并提供了源码对照，可以感受一下项目源码和部署代码的对照。&br&源码项目：&a href=&///?target=https%3A///fouber/static-resource-digest-project& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&fouber/static-resource-digest-project · GitHub&i class=&icon-external&&&/i&&/a&&br&部署项目：&a href=&///?target=https%3A///fouber/static-resource-digest-project-release& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&fouber/static-resource-digest-project-release · GitHub&i class=&icon-external&&&/i&&/a&&br&部署项目可以理解为线上发布后的结果，可以在部署项目里查看所有资源引用的md5化处理。&br&&br&这个示例也可以用于和assets pipeline做比较。fis没有assets的目录规范约束，而且可以以独立工具的方式组合各种前端开发语言（coffee、less、sass/scss、stylus、markdown、jade、ejs、handlebars等等你能想到的），并与其他后端开发语言结合。&br&&br&assets pipeline的设计思想值得独立成工具用于前端工程，fis就当做这样的一个选择吧。
没人邀请，看到这个问题不错，路过怒答。（多图预警）前百度工程师，曾负责百度
的核心设计与开发工作。我现在称这个领域为【前端工程】。没错，这是我最爱唠叨的问题域。这是一个非常有趣的 非主流前端领域，这个领域要探索的是如何用工…
&b&（λ-VIEW 目前已经更新到 3.0 ，本文回答的内容已经不符合目前的情况了，稍后我会做同步的更新，指明新版本的操作方法）&/b&&br&&br&这个问题是我自己问的，因为这一点困扰了我很久。但是这个月初的时候，我抽了一些时间写了这个工具。它能够将复杂的 JavaScript 代码简化到极易阅读的程度。具体的原理和细节我在后面解释，我们先看看使用体验——&br&&br&&img src=&/8ab994db2ad02ebeeefe_b.jpg& data-rawwidth=&1663& data-rawheight=&931& class=&origin_image zh-lightbox-thumb& width=&1663& data-original=&/8ab994db2ad02ebeeefe_r.jpg&&&br&上图是原始的 AngularJS 源码，可以看到左侧的行号已经超过 2 万行，直接阅读这样的代码无异于&b&划着独木舟在大海里寻找孤岛&/b&，其难度可想而知。不过当我们对其进行处理后（点击上方的 After 按钮），情况就不同了，如下图所示：&br&&br&&img src=&/d147c0a90b16ba5c7e2e6_b.jpg& data-rawwidth=&1663& data-rawheight=&931& class=&origin_image zh-lightbox-thumb& width=&1663& data-original=&/d147c0a90b16ba5c7e2e6_r.jpg&&&br&诶？2 万行代码怎么只剩下两行了？仔细一看，哦，原来这才是 AngularJS 的「真容」！整个 AngularJS 只是由一个立即调用的匿名函数（这里用 {λ} 表示），以及一行额外的处理代码组成。通常我们阅读代码的原则是——&b&先从最外层轮廓上对代码本身获得一个直观的认识，然后再深入到具体的细节里，&/b&这能从根本上避免在刚开始就陷入细节的泥潭。这个工具正是建立在这一原则之上的。或者说，它可以帮助你更好的贯彻这一原则。（我们在稍后会用它来和其他常见的 IDE、文本编辑器进行对比，这会让你对此看得更清楚）&br&&br&现在我想看看 AngularJS 中的那个匿名函数里到底做了些什么。于是我点击
{λ} 部分，紧接着就变成了下面的样子：&br&&br&&img src=&/4a7000a04bfede4ab6eb4b36_b.jpg& data-rawwidth=&1663& data-rawheight=&931& class=&origin_image zh-lightbox-thumb& width=&1663& data-original=&/4a7000a04bfede4ab6eb4b36_r.jpg&&&br&你会注意到：&br&&ol&&li&顶部标识出了当前函数的路径 &Program& / λ-0 （&Program& 代表顶级作用域，而 λ-0 是我们目前所处于的位置，它是顶级作用域下的第 0 号匿名函数）&/li&&li&左侧列举出了当前作用域内定义的子函数&/li&&li&右侧的源代码区域出现的&b&不是&/b&原始的 JavaScript 代码，而是经过美化的——花括号都不见了，而是改为使用缩进；分号都去除了；等等&/li&&/ol&&br&今天先写到这里，后续会补上&br&&br&待续1：这个工具是怎么实现的？&br&待续2：和 IDE 相比这个工具有什么优缺点？&br&待续3：后续会增加什么功能？&br&&br&我强烈建议你亲自上 &a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&喵德利&i class=&icon-external&&&/i&&/a& （我已经部署好了） 试一试，因为有些细节如果由我在此描述难免太冗长，但你一旦自己亲身体验，就会立刻体会到。&br&&br&&i& 更新&/i&&br&&br&&b&这个工具是怎么实现的？&/b&&br&&br&这个工具看起来很复杂。这可能会产生出让人钦佩的误解。事实上我确实做了一些工作，但并不像看起来那么艰巨。如果列举一下，整个工作实际上是由以下部分合力完成的：&br&&br&&ol&&li&ACE 编辑器，提供了代码编辑支持&/li&&li&Esprima 解析器，能够将 JavaScript 源代码解析为 AST（抽象语法树）&/li&&li&jQuery 库，帮助我便捷的进行 DOM 操作&/li&&li&Bootstrap 库，简化了界面布局和组织的工作&/li&&li&我自己的代码，实现了最终的功能&/li&&/ol&&br&可见我确实做了一些事。但更主要的工作还是由 1-4 的部分完成的。如果你觉得这个软件很不错，或许上述库的作者们更应当被感谢。&br&&br&特别值得一提的是 Esprima，它是这整个软件所用到的核心部件。我首先使用它来完成 AST（抽象语法树）的构建，紧接着，我会遍历这颗 AST 树，然后重新按照我想要的方式生成一颗 DOM 树。这样就完成了一次重渲染，将原始的 JavaScript 代码改写为了更简洁的形式。&br&&br&当然，在遍历 AST 树的过程中也要做一些简单的分析工作。否则就无法实现将子函数抽取出来这样的操作了。不过这个分析操作实在很简单，也没什么可谈的。后续我会在分析过程上做很多工作，实现更多实用的功能。详细的情况可以参见后续的路线图部分。&br&&br&&b&和 WebStorm 之类的 IDE 相比有什么优缺点？&/b&&br&&br&术业有专攻。尽管 WebStorm 之类的 IDE 提供了强大的「编辑」功能。但是从实践的角度来说，这些编辑器在用于阅读代码时还存在诸多不足。&br&&br&比较典型的一点是，编辑器总是老老实实的把原始的排版格式呈现出来。而实际上我们需要的是更加紧凑、标准、一致、适度简化后的呈现。例如下面的对比图所示：&br&&br&&img src=&/c2d5badc689f47c8630c76fe_b.jpg& data-rawwidth=&535& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&535& data-original=&/c2d5badc689f47c8630c76fe_r.jpg&&&br&&br&上图是同一段代码（选自 AngularJS）处理前后的对比。我们可以注意到一些细节：&br&&br&&ol&&li&分号被移除了&/li&&li&花括号被移除了（改为用缩进来表示层次关系）&/li&&li&行间距被适当增大了，看起来没那么拥挤了&/li&&li&函数调用时，前后括号和参数之间都增加了空白&/li&&li&最重要的是，代码从 6 行变成了 4 行，缩短了&/li&&/ol&&br&任何程序员——任何真正尝试过阅读陌生的大型项目的程序员，应该都能够理解这种形式简化将带来的实际好处。它让你更加专注于代码的逻辑，而不是形式。&br&&br&我们的代码阅读软件能够理解代码的结构，并能够将其转换为更加简洁的形式，这一点有时候能给我们带来意想不到的帮助——例如阅读在 web 环境下那些被压缩过的代码。下图的代码截取自某站点：&br&&br&&img src=&/bf2ec34c2b9b_b.jpg& data-rawwidth=&1657& data-rawheight=&343& class=&origin_image zh-lightbox-thumb& width=&1657& data-original=&/bf2ec34c2b9b_r.jpg&&&br&这样的代码是经过压缩的——删掉了空格、缩进、换行等字符并改写了变量名等——阅读几乎是不可能的。但有些人却必须要从这样的代码里找出感兴趣的东西，比如大家熟悉的白帽子安全人员。&br&&br&相对一般的 IDE，专门的代码阅读软件在处理这样的问题上更加得心应手。&br&&br&综上所述，WebStorm 之类的软件在「编辑」、「项目管理」方面更加强大，但在「阅读」、「分析」方面，专门的代码阅读工具会更加方便。&br&&br&&b&未来的发展路线图——后续功能开发计划&/b&&br&&br&（待续）
（λ-VIEW 目前已经更新到 3.0 ，本文回答的内容已经不符合目前的情况了，稍后我会做同步的更新，指明新版本的操作方法）这个问题是我自己问的，因为这一点困扰了我很久。但是这个月初的时候，我抽了一些时间写了这个工具。它能够将复杂的 JavaScript 代码…
&b&常用热键&/b&&br&多重文本选择：ctrl + cmd + g&br&多重光标选择：shift + ctrl + up/down&br&选择标签本身：shift + ctrl + a&br&选择标签内容：shift + cmd + a&br&重新打开刚刚关闭的标签页：cmd + shift + t&br&括号前后移动光标：ctrl + m&br&向光标前插入一行：shift + cmd + enter&br&向光标后插入一行：cmd + enter&br&快速折叠文件内所有函数：cmd + k ,1 （数字表示级别）&br&折叠属性：cmd + k, t （编辑 HTML 模板最有用）&br&&br&很多热键是可以组合的的，比如需求：如何把某 `class=&edit&` 的 `div` 元素的标签名改成 `fieldset` ？&br&三步就可以了，选择所有 `class=&edit&`，再扩选到标签，再命名了就好了。&br&&br&&b&命令面板 shift + cmd + p&/b&&br&那些用热键没什么必要的、第三方扩展添加的常用操作在这里。&br&比如 Lorem ipsum，Color Picker，Rot 13，HTML Entity Encode，Install Package 等等&br&&br&&b&Project 配置&/b&&br&prj-name.sublime-project，主要是单独设定一致的缩进格式和文件排除（在 cmd + p, GOTO 命令时加快速度）选项：&div class=&highlight&&&pre&&code class=&language-json&&&span class=&p&&{&/span&
&span class=&nt&&&folders&&/span&&span class=&p&&:&/span&
&span class=&p&&[&/span&
&span class=&p&&{&/span&
&span class=&nt&&&path&&/span&&span class=&p&&:&/span& &span class=&s2&&&path_to_project&&/span&&span class=&p&&,&/span&
&span class=&nt&&&folder_exclude_patterns&&/span&&span class=&p&&:&/span& &span class=&p&&[&/span&&span class=&s2&&&img&&/span&&span class=&p&&,&/span&&span class=&s2&&&x-library&&/span&&span class=&p&&]&/span&
&span class=&p&&}&/span&
&span class=&p&&],&/span&
&span class=&nt&&&settings&&/span&&span class=&p&&:&/span&
&span class=&p&&{&/span&
&span class=&nt&&&translate_tabs_to_spaces&&/span&&span class=&p&&:&/span& &span class=&kc&&true&/span&&span class=&p&&,&/span&
&span class=&nt&&&tab_size&&/span&&span class=&p&&:&/span& &span class=&mi&&4&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&&b&配置移动化&/b&&br&最好全部定义在 `path_to_sublime/Packages/User/` 目录中，然后用一个 repo 保存它们，这样随时可以同步到你的所有设备上，并且不同的操纵系统有不同的文件来进行配置。&br&&br&&b&终端调用&/b&&br&定义一个链接：&div class=&highlight&&&pre&&code class=&language-bash&&ln -s &span class=&s2&&&/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl&&/span& ~/bin/subl
&/code&&/pre&&/div&然后任何时候可以调用了，比如在 sublime 中打开当前目录所有文件：&div class=&highlight&&&pre&&code class=&language-bash&&subl .
&/code&&/pre&&/div&&br&&b&Snippets&/b&&br&自定义一些贴心的代码片断是必须的。&br&这个也保存到在 User 目录比较好，扩展名为 `.sublime-snippet` 。&br&比如定义一个 `ci` 为 `&a href=&///?target=http%3A//%28args%29& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&(args)&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&` ，保存在 User/js-snippets/console-info.sublime-snippet ：&div class=&highlight&&&pre&&code class=&language-xml&&&span class=&nt&&&snippet&&/span&
&span class=&nt&&&content&&/span&&span class=&cp&&&![(${1})]]&&/span&&span class=&nt&&&/content&&/span&
&span class=&nt&&&tabTrigger&&/span&ci&span class=&nt&&&/tabTrigger&&/span&
&span class=&nt&&&scope&&/span&source.js&span class=&nt&&&/scope&&/span&
&span class=&nt&&&description&&/span&&span class=&nt&&&/description&&/span&
&span class=&nt&&&/snippet&&/span&
&/code&&/pre&&/div&&br&&b&Build&/b&&br&cmd + b 是编译，比如我添加了直接调用 node.js ，这样测试一些函数最方便了，不用打开浏览器。&br&文件名参考，User/node.sublime-build：&div class=&highlight&&&pre&&code class=&language-json&&&span class=&p&&{&/span&
&span class=&nt&&&cmd&&/span&&span class=&p&&:&/span& &span class=&p&&[&/span&&span class=&s2&&&/usr/local/bin/node&&/span&&span class=&p&&,&/span& &span class=&s2&&&$file&&/span&&span class=&p&&],&/span&
&span class=&nt&&&selector&&/span&&span class=&p&&:&/span& &span class=&s2&&&source.js&&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&&b&主题&/b&&br&可以兼容使用 TextMate 的主题。现在我最喜欢的主题是 Solarized Light 了，字体是 Menlo 或 Monaco 。&br&&br&&b&宏&/b&&br&需要批量热键操作的话，可以定义宏： &a href=&///?target=http%3A//readthedocs.org/docs/sublime-text-unofficial-documentation/en/latest/extensibility/macros.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Macros — Sublime Text Unofficial Documentation&i class=&icon-external&&&/i&&/a&&br&&br&&b&扩展&/b&&br&宏无法达到要求时，定义一个扩展：1）&a href=&///?target=http%3A///tutorials/python-tutorials/how-to-create-a-sublime-text-2-plugin/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How to Create a Sublime Text 2 Plugin&i class=&icon-external&&&/i&&/a& 2） &a href=&///?target=http%3A///docs/plugin-examples& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sublime Text&i class=&icon-external&&&/i&&/a&&br&&br&&b&扩展管理&/b&&br&必装的是 Sublime Package Control： &a href=&///?target=http%3A//wbond.net/sublime_packages/package_control& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sublime Package Control&i class=&icon-external&&&/i&&/a&&br&然后可以随时查询，安装其他扩展，一些推荐的： &br&Prefixr、Alignment、HexViewer、JSFormat、Zen Coding（已更名，叫 Emmet）、FileDiffs、Color Picker&br&&br&---- update &br&&b&额外配置&/b&&br&推荐三个特别有用的：&br&&div class=&highlight&&&pre&&code class=&language-text&&&default_line_ending&: &unix&,
&trim_trailing_white_space_on_save&: true,
&ensure_newline_at_eof_on_save&: true,
&/code&&/pre&&/div&作用分别为：&br&default_line_ending 保证为 unix 风格的换行符（跨平台工作时特有用）。&br&trim_trailing_white_space_on_save 保证在文件保存时，移除每行结尾多余空格（升级过 JSHint 之后特有用）。&br&ensure_newline_at_eof_on_save 保证在文件保存时，在结尾插入一个换行符（让 git 提交时不生产额外的 diff）。&br&&br&&b&Goto&/b&&br&一共有四种 Goto ：&br&cmd+p
文件定位&br&cmd+;
词语定位 #&br&cmd+r
函数定位 @&br&cmd+g
行号定位 :&br&&br&第一种可以和其余三种搭配使用，比如 cmd+p 后，输入 util@parse 可以即时查询名字带 util 的文件中，以 parse 开头的函数。&br&&br&&b&Lint 扩展&/b&&br&SublimeLinter 试过多个同类扩展之后发现它最好用，并且支持多种语言、不需要热键——它在输入时就自动校验。&br&&br&&b&多文件中搜索&/b&&br&Where 中可以使用通配符，比如 *.js, *.less 将在项目中所有后缀为 js 和 less 的文件中搜索。
常用热键多重文本选择：ctrl + cmd + g多重光标选择：shift + ctrl + up/down选择标签本身：shift + ctrl + a选择标签内容：shift + cmd + a重新打开刚刚关闭的标签页：cmd + shift + t括号前后移动光标：ctrl + m向光标前插入一行：shift + cmd + enter向…
谢邀。&br&&br&实在太巧，三四天前我刚好做过这个效果。&br&&br&页面分为两个，一个是&b&列表页&/b&：&br&&img src=&/c6a7b9a8cd65a45b0579_b.jpg& data-rawwidth=&1327& data-rawheight=&1169& class=&origin_image zh-lightbox-thumb& width=&1327& data-original=&/c6a7b9a8cd65a45b0579_r.jpg&&一个是&b&内容页&/b&：&br&&img src=&/71b3fa94b9c4c20a57e909e479e83720_b.jpg& data-rawwidth=&1204& data-rawheight=&843& class=&origin_image zh-lightbox-thumb& width=&1204& data-original=&/71b3fa94b9c4c20a57e909e479e83720_r.jpg&&&br&&br&&br&先说列表页：&br&&br&你可以观察到我在列表页展开时是带有锚的，当列表页加载时，若 JS 检测到 URL 上有锚，展开对应的折叠列表；若 URL 上没有锚的时候，就展开第一个，并且滚动条不滚动。&br&&br&当点击折叠列表的 panel-heading 时，使用 history.pushState(null, null, url) ，改变 URL 上的锚，并展开该折叠列表以及滚动到该折叠列表的顶部。&br&&br&&br&然后说一下内容页里的「返回」：&br&&br&首先需要判断一下入口链接是什么，使用 document.referrer 即可。&br&&br&然后可能出现以下两种情况：&br&1、用户是从你的折叠列表进入该内容页的，那么你可以使用 history.back()，这时之前使用 history.pushState() 改变的锚还保留，而且会自动展开并滚动到这个锚所对应的折叠列表。&br&2、用户是直接在地址栏输入链接进入的，此时你可以直接用 location.href = url 将它跳转到它的上一级链接中。&br&&br&具体的效果你可以来我们网站看：&a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&计蒜客 - 让学习更有味&i class=&icon-external&&&/i&&/a&，要进入内容页需要登录才行~
谢邀。实在太巧，三四天前我刚好做过这个效果。页面分为两个，一个是列表页：一个是内容页：先说列表页：你可以观察到我在列表页展开时是带有锚的，当列表页加载时，若 JS 检测到 URL 上有锚，展开对应的折叠列表；若 URL 上没有锚的时候，就展开第一个，并…
我的建议：&br&1. 选本好书&br&&a href=&///?target=http%3A///subject/2994925/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/subject&/span&&span class=&invisible&&/2994925/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///subject/4886879/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/subject&/span&&span class=&invisible&&/4886879/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&2. 阅读源码&br&&a href=&///?target=https%3A///languages/JavaScript& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/languages/Ja&/span&&span class=&invisible&&vaScript&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&3. 实践、实践、再实践&br&&br&4. 关注行业动态，参与开源社区&br&这几个blog至少要订阅：&br&&a href=&///?target=http%3A//www.nczonline.net/blog/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&nczonline.net/blog/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///r/javascript/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/r/javascript&/span&&span class=&invisible&&/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
我的建议：1. 选本好书2. 阅读源码3. 实践、实践、再实践4. 关注行业动态，参与开源社区这几个blog至少要订阅：…
推荐你上这个网站&br&&a href=&///?target=https%3A///metrics/css/popularity& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/metric&/span&&span class=&invisible&&s/css/popularity&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&使用Chrome浏览器的时候，它会对页面的所有的CSS选择器做一个统计并且收集起来&br&&img src=&/6f4af5abea66e4087013b_b.jpg& data-rawwidth=&812& data-rawheight=&522& class=&origin_image zh-lightbox-thumb& width=&812& data-original=&/6f4af5abea66e4087013b_r.jpg&&&br&除了可以看到上面这样大而全的列表，还可以查看某个属性随着时间的使用情况变化，比如 &a data-hash=&69ed13f3ddc662d6ecde85& href=&///people/69ed13f3ddc662d6ecde85& class=&member_mention& data-tip=&p$b$69ed13f3ddc662d6ecde85&&@于江水&/a& 提到的 box-shadow&br&&img src=&/ec0ca462b5bd4db52d9d102_b.jpg& data-rawwidth=&833& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&833& data-original=&/ec0ca462b5bd4db52d9d102_r.jpg&&=======&br&看了几个后你会觉得有几个属性使用率比意料之中高，我的理解是因为用了Bootstrap这种框架&br&=======&br&好不容易从浏览器历史记录里找回来的网站，加到收藏夹了 ：）
推荐你上这个网站使用Chrome浏览器的时候，它会对页面的所有的CSS选择器做一个统计并且收集起来除了可以看到上面这样大而全的列表，还可以查看某个属性随着时间的使用情况变化，比如
提到的 box-shadow=======看了几个后你会觉…
兼容性问题：很多项目根本不需要考虑ie的。如果是做手机网页，所有新的api都能用。&br&css不好用：其实布局，居中的问题，用flexbox很容易就解决了。&br&动画效率：DOM的那套机制确实是慢，牵一发动全身。用css3动画的话，是有gpu加速的，不存在不流畅的问题，有点限制罢了。移动设备支持css3动画，不支持flash，你说谁更省资源，效率更高？&br&看出来楼主是很喜欢交互，没事做些炫酷网页效果的人。其实现有的css3，canvas能做出来很厉害的东西了。没事多来这里看看：&a href=&///?target=http%3A//codepen.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodePen - Front End Developer Playground & Code Editor in the Browser&i class=&icon-external&&&/i&&/a&
兼容性问题：很多项目根本不需要考虑ie的。如果是做手机网页，所有新的api都能用。css不好用：其实布局，居中的问题，用flexbox很容易就解决了。动画效率：DOM的那套机制确实是慢，牵一发动全身。用css3动画的话，是有gpu加速的，不存在不流畅的问题，有点…
1. 体积小很多很多。&br&2. HTTP 请求数少很多很多。&br&3. ctrl + 滚轮缩放十分平滑，无锯齿。&br&4. 用 SCSS 写CSS的话，尺寸计算其实很方便。&br&&br&能做的绝对不止是圆角按钮之类。你感受下：&br&&a href=&///?target=http%3A//ben7th.github.io/worldcup-css-flags/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ben7th.github.io/worldc&/span&&span class=&invisible&&up-css-flags/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&&img src=&/f9f0cf0d9c5ae64b185e3c_b.jpg& data-rawwidth=&440& data-rawheight=&365& class=&origin_image zh-lightbox-thumb& width=&440& data-original=&/f9f0cf0d9c5ae64b185e3c_r.jpg&&
1. 体积小很多很多。2. HTTP 请求数少很多很多。3. ctrl + 滚轮缩放十分平滑，无锯齿。4. 用 SCSS 写CSS的话，尺寸计算其实很方便。能做的绝对不止是圆角按钮之类。你感受下：
已有帐号？
无法登录？
社交帐号登录
14188 人关注
168 个回答
151 人关注
105 个回答
1150 人关注
264 个回答
266 人关注}