&figure&&img src=&https://pic1.zhimg.com/v2-e41c97ccfeed4fd_b.jpg& data-rawwidth=&380& data-rawheight=&132& class=&content_image& width=&380&&&/figure&&p&
前端发展速度已经远远超出了我们的预计范围，JS迅速的流行，前端基于JS的框架(&a href=&https://link.zhihu.com/?target=http%3A//stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library%3Fnoredirect%3D1%26lq%3D1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&framework&/a&s)/库(&a href=&https://link.zhihu.com/?target=http%3A//stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library%3Fnoredirect%3D1%26lq%3D1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&library&/a&s)更是层出不穷，且各自都有其自身的优势以及劣势，有些是向开发使用者提供整套的服务，比如MVC一整套，有些则是专注于某一个点，比如专注于dom操作或异步请求；&/p&&p&
最近被问到这个问题，其实到我被问到这问题之前，都没有认真的考虑过它们的区别，处于学习以及好奇心理，查阅了相关文档，其中包括知乎、stackoverflow等相关问题和文章，总算是略知一二，并以此写下来分享个看官们；&/p&&p&
框架与库之间最本质区别在于控制权：you call libs, frameworks call you（控制反转）&/p&&figure&&img src=&https://pic4.zhimg.com/v2-af3f30c3fbcb7a8b64c6_b.jpg& data-rawwidth=&640& data-rawheight=&272& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-af3f30c3fbcb7a8b64c6_r.jpg&&&/figure&&br&&p&&b&库&/b&：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；&br&&/p&&p&&b&框架&/b&：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。&/p&&br&&p&
我们尝试举个例子：你想烹饪一条鱼，这时你需要一些原料，比如油、盐、醋、葱、香料以及烹饪工具等，同时鱼也是你需要的主要材料，当你聚齐所有材料时，再经过烹饪就得到成品；现在我们进行对比，其中油、盐、醋、葱、香料以及烹饪工具和鱼其实就是库，组合到一起就成了框架，成品就是最终开发好的应用，或者这样能是你更好里的理解框架与库之间的区别；由此我们可以看到，其实框架和库关系还是很紧密的，他们以聚合的形式让我们在所要开发的应用中使用；现在尝试理解一下两图下图：&/p&&p&&figure&&img src=&https://pic3.zhimg.com/v2-c787ef9a79f0ae4d43014_b.jpg& data-rawwidth=&2008& data-rawheight=&1508& class=&origin_image zh-lightbox-thumb& width=&2008& data-original=&https://pic3.zhimg.com/v2-c787ef9a79f0ae4d43014_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-fe4e3bd9bf6a_b.jpg& data-rawwidth=&660& data-rawheight=&260& class=&origin_image zh-lightbox-thumb& width=&660& data-original=&https://pic2.zhimg.com/v2-fe4e3bd9bf6a_r.jpg&&&/figure&
在实际中，像angular、backbone、vue就属于框架，而jQuery、react、underscore就是库，在前者中我们完全可以自由的使用后者，同时也可以没有前者的基础之上使用后者，都是很自由，控制权始终在我们的手中，但是使用框架时候就必须按照它的规范来进行模块化的开发；&/p&&p&可能有人会问react也是库么？的确它就是一个库，为什么呢？&/p&&p&评论区：React和react-router, react-redux结合起来才叫框架，本身只是充当一个前端渲染的库而已；感谢&a href=&https://www.zhihu.com/people/0c0d169c5c394dc1e88d& data-hash=&0c0d169c5c394dc1e88d& class=&member_mention& data-hovercard=&p$b$0c0d169c5c394dc1e88d&&@米斯特white&/a&的提出&br&&/p&&br&&br&开头有说到框架是有一套解决方案的，react就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些&br&&p&如果你读到这篇文章，希望能对理解框架与库有一定的帮助，另外如果文章有不对的地方还望指出，会及时修改；&br&&/p&&p&以下是参考链接：&/p&&p&&a href=&https://link.zhihu.com/?target=http%3A//stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library%3Fnoredirect%3D1%26lq%3D1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&What is the difference between a framework and a library?&/a&&/p&&p&&a href=&https://link.zhihu.com/?target=http%3A//stackoverflow.com/questions/3057526/framework-vs-toolkit-vs-library& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Framework vs. Toolkit vs. Library&/a&&br&&/p&&br&&i&本文首发于知乎&/i&
前端发展速度已经远远超出了我们的预计范围，JS迅速的流行，前端基于JS的框架(s)/库(s)更是层出不穷，且各自都有其自身的优势以及劣势，有些是向开发使用者提供整套的服务，比如MVC一整套，有些则是专注于某一个点，比如专注于dom操作或异…
&p&一个网站构成需要&/p&&p&产品+交互设计+视觉设计+前端开发+后端开发，你得先搞清楚你干得啥。其中，交互设计+视觉设计决定了网站长啥样。&/p&&p&Bootstrap严格意义上讲，只能是一个UI框架，提供了一些现成UI元素，讲白了就是让前端少写一堆CSS代码而已。别以为用了这个就能让网站漂亮。那还要视觉设计干嘛。好看的网站，什么UI框架都帮不了你。都是按着视觉稿手工一行行代码拼出来的。&/p&
一个网站构成需要产品+交互设计+视觉设计+前端开发+后端开发，你得先搞清楚你干得啥。其中，交互设计+视觉设计决定了网站长啥样。Bootstrap严格意义上讲，只能是一个UI框架，提供了一些现成UI元素，讲白了就是让前端少写一堆CSS代码而已。别以为用了这个就…
&figure&&img src=&https://pic2.zhimg.com/v2-8fbb9acad19ea6_b.jpg& data-rawwidth=&1356& data-rawheight=&654& class=&origin_image zh-lightbox-thumb& width=&1356& data-original=&https://pic2.zhimg.com/v2-8fbb9acad19ea6_r.jpg&&&/figure&&p&作者：殷勇&br&编辑：尾尾&br&2016年马上过去了，像过去六年中的每一年一样，Web前端领域又产生了“面目全非”而又“耳目一新”的变化，不但旧事物持续不断地被淘汰，新事物也难保坐久江山，大有岌岌可危之势。开源界如群雄逐鹿，不断生产新的概念、新的框架、新的工具，去年中一些流行的技术今年大多得到了进一步的演进和升级，活跃度非常高，却仍然不能保证前端的未来属于它们。在今年整体资本市场冷却的大环境下，&em&to B&/em&业务的创业公司显现出了较强的生命力，这种类型的业务也给Web前端的工作带来了明显的差异性，工程师整体技能方向也展露出一丝不一样的分支。本文将从下至上、由低到高的维度盘点过去一年中Web前端领域发生的重要事件以及影响未来2017的关键性因素。视野所限，不尽完整。&/p&&p&&strong&目录&/strong&&/p&&p&一、更新的网络与软件环境&/p&&ul&&li&&p&1.1 HTTP/2 的持续普及&/p&&/li&&li&&p&1.2 Internet Explorer 8&/p&&/li&&/ul&&p&二、如何编写(Java)Script&/p&&ul&&li&&p&2.1 ES2016？ES2017？Babel！&/p&&/li&&li&&p&2.2 TypeScript&/p&&/li&&li&&p&2.3 promise、generator 与 async/await&/p&&/li&&li&&p&2.4 fetch&/p&&/li&&/ul&&p&三、Node.js服务与工具&/p&&ul&&li&Koa 2&/li&&/ul&&p&四、框架纷争&/p&&ul&&li&&p&4.1 jQuery已死？&/p&&/li&&li&&p&4.2 Angular 2&/p&&/li&&li&&p&4.3 Vue.js 2.0&/p&&/li&&li&&p&4.4 React&/p&&/li&&li&&p&4.5 React-Native&/p&&/li&&li&&p&4.6 Redux 与 Mobx&/p&&/li&&li&&p&4.7 Bootstrap 4&/p&&/li&&/ul&&p&五、工程化与架构&/p&&ul&&li&&p&5.1 Rollup 与 Webpack 2&/p&&/li&&li&&p&5.2 npm、jspm、Bower与Yarn&/p&&/li&&li&&p&5.3 同构&/p&&/li&&/ul&&p&六、未来技术与职业培养&/p&&ul&&li&&p&6.1 大数据方向&/p&&/li&&li&&p&6.2 WebVR&/p&&/li&&li&&p&6.3 WebAssembly&/p&&/li&&li&&p&6.4 WebComponents&/p&&/li&&li&&p&6.5 关于微信小程序&/p&&/li&&/ul&&p&七、总结&/p&&ul&&li&&p&7.1 工程化&/p&&/li&&li&&p&7.2 角色定位&/p&&/li&&li&&p&7.3 写在最后&/p&&/li&&/ul&&h2&一、更新的网络与软件环境&/h2&&h3&1.1 HTTP/2 的持续普及&/h3&&p&今年中，几乎所有的现代桌面浏览器都已经支持了HTTP/2协议，移动端依靠降级为SPDY依旧可以覆盖几乎所有平台，这样使得从协议上优化页面的性能成为了可能。&/p&&p&同时，前端静态资源打包的必要性成为了一定程度上的争论焦点，打包合并作为传统的前端性能优化方案，它的存留对前端工程化影响极大，Facebook公司著名的静态资源动态打包方案的优越性也会被弱化。社区上多篇文章纷纷发表对HTTP/2的性能实验数据，却不尽相同。&/p&&p&在2017年，我相信所有大型站点都会切换HTTP/2，但依旧不会放弃对静态资源打包合并的依赖。而且，对于Server Push等高级特性，也不会有太多的应用。&/p&&h3&1.2 Internet Explorer 8&/h3&&p&三年前还在考虑兼容IE6的前端技术社区，在前不久&a href=&https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzIwNjQwMzUwMQ%3D%3D%26mid%3D%26idx%3D1%26sn%3D26f5ec9b8ca5bbchksm%3D4ef0a329cc3b205f651851cacb2a2fd5a0fa7281359caf83b7cd240e%26scene%3D21%23wechat_redirect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&天猫宣布不再支持IE8&/a&后又引起了一股躁动。IE8是Windows XP操作系统支持的最高IE版本，放弃IE8意味着放弃了使用IE的所有XP用户。&/p&&p&其实在2016年的今天，前端社区中框架、工具的发展早已不允许IE8的存在，Angular 早在1.3版本就果断放弃了IE8，React 也在年初的v15版本上宣布放弃。在PC领域，你依旧可以使用像Backbone.js一样的其他框架继续对IE进行支持，但无论是从研发效率上还是从运行时效率上，放弃它都是更好的选择。&/p&&p&由于对HTML5兼容性不佳，在2017年，相信IE9也会逐渐被社区放弃，以取得更好的性能、更少的代码体积。&/p&&h2&二、如何编写(Java)Script&/h2&&h3&2.1 ES2016？ES2017？Babel！&/h3&&p&去年定稿的ES2015（亦称ES6）带来了大量令人激动的新语言特性，并快速被V8和SpiderMonkey所实现。但由于浏览器版本碎片化问题，目前编写生产环境代码仍然以ES5为主。今年年中发布的ES2017带来的新特性数量少的可怜，但这正好给了浏览器厂商消化ES2015的时间，在ES2017到来之前喘口气——是的，明年的ES2017势必又会带来一大波新特性。&/p&&p&JS解释引擎对新特性的支持程度并不能阻碍狂热的开发者使用他们，在接下来的很长时间，业界对Babel的依赖必然有增无减。Babel生态对下一代ECMAScript的影响会进一步加大，人们通过先增加新的Babel-plugin，后向ECMA提案的方式成为了ECMAScript进化的常态。开发者编写的代码能直接运行在浏览器上的会越来越少。&/p&&p&但使用Babel导致的编译后代码体积增大的问题并没有被特别关注，由于polyfill可能被重复引入，部署到生产环境的代码带有相当一部分冗余。&/p&&h3&2.2 TypeScript&/h3&&p&作为ECMAScript语言的超集，&a href=&https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzIwNjQwMzUwMQ%3D%3D%26mid%3D%26idx%3D1%26sn%3D58f39dd96edf0b6ascene%3D21%23wechat_redirect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TypeScript&/a&在今年取得了优异的成绩，Angular 2放弃了传说中的AtScript，成为了TypeScript的最大客户。人们可以像编写Java一样编写JavaScript，有效提升了代码的表述性和类型安全性。&/p&&p&但凡事有两面，TypeScript的特性也在不断升级，在生产环境中，你可能需要一套规范来约束开发者，防止滥用导致的不兼容，这反而增加了学习成本、应用复杂性和升级安全性。个中优劣，仍需有大量的工程实践去积累经验。&/p&&p&此外，TypeScript也可以看做一种转译器，与Babel有着类似的新特性支持。在2017年，我们期待TypeScript与Babel会发展成怎样的一种微妙关系。&/p&&h3&2.3 promise、generator 与 async/await&/h3&&p&在回调地狱问题上，近两年我们不断被新的方案乱花了眼。过去我们会利用&a href=&https://link.zhihu.com/?target=http%3A//npm.org/async& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&async&/a&来简化异步流的设计，直到“正房”Promise的到来。但它们只是callback模式的语法糖，并没有完全消除callback的使用。&/p&&p&ES2015带来的generator/yield似乎成为了解决异步编程的一大法宝，虽然它并非为解决异步编程所设计的。但generaor的运行是十分繁琐的，因此另一个工具&a href=&https://link.zhihu.com/?target=http%3A//npmjs.org/co& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&co&/a&又成为了使用generator的必备之选。Node.js社区的Koa框架初始就设计为使用generator编写洋葱皮一样的控制流。&/p&&p&但昙花一现，转眼间async/await的语法，配合Promise编写异步代码的方式立即席卷整个前端社区，虽然async/await仍然在ES2017的草案中，但在今天，不写async/await立刻显得你的设计落后社区平均水平一大截。&/p&&p&在Node.js上，v7已经支持在harmony参数下的async/await直接解释，在明年4月份的v8中，将会正式支持，届时，Koa 2的正式版也会发布，几乎完全摒弃了generator。&/p&&h3&2.4 fetch&/h3&&p&受到回调问题的影响，传统的XMLHttpRequest有被fetch API 取代之势。如今，成熟的polyfill如&a href=&https://link.zhihu.com/?target=http%3A//npmjs.org/whatwg-fetch& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&whatwg-fetch&/a&、&a href=&https://link.zhihu.com/?target=http%3A//npmjs.org/node-fetch& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&node-fetch&/a&、&a href=&https://link.zhihu.com/?target=http%3A//npmjs.org/isomorphic-fetch& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&isomorphic-fetch&/a&在npm上的每日下载量都非常大，即便对于兼容性不好的移动端，开发者也不愿使用繁琐的AJAX。借助async/await的语法，使用fetch API能让代码更简洁。&/p&&h2&三、Node.js服务与工具&/h2&&h3&3.1 Koa 2&/h3&&p&Koa与流行的Express属于“同根生”的关系，它们由同一团队打造。相比Express，新的Koa框架更轻量、更灵活。但Koa的设计在短时间内曾经出现了较大的变动，这主要受到了async/await语法对异步编程的影响。在v2版本中，Koa的middleware抛弃generator转而支持async，所有第三方middleware实现，要么自行升级，要么使用&a href=&https://link.zhihu.com/?target=http%3A//npmjs.org/Koa-convert& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Koa-convert&/a&进行包装转换。&/p&&p&目前Koa在Node.js社区的HTTP服务端框架中受到关注度比较高，不过其在npm上latest目前仍处于1.x阶段，预计在2017年4月份发布Node.js v8后，就会升级到2.x。&/p&&p&Koa的轻量级设计意味着你需要大量第三方中间件去实现一个完整的Web应用，目前鲜有看到对Koa的大规模重度使用，因此也就对其无从评价。相信在明年，越来越多的产品应该会尝试部署Koa 2，届时，对第三方资源的依赖冲突也会尖锐起来，这需要一个过程才能让Koa的生态完备起来。预计在2018年，我们会得到一个足够健壮的Koa技术栈。这会促进Node.js在服务端领域的扩展，轻量级的Web服务将会逐渐成为市场上的主流。&/p&&h2&四、框架纷争&/h2&&h3&4.1 jQuery已死？&/h3&&p&今年六月份jQuery发布了3.0版本，距离2.0发布已经有三年多的时间，但重大的更新几乎没有。由于老旧浏览器的逐渐放弃和升级，jQuery需要处理的浏览器兼容性问题越来越少，专注于API易用性和效率越来越多。&/p&&p&随着如Angular、React、Ember、Vue.js等大量具备视图数据单双向绑定能力的框架被普及，使用jQuery编写指令式的代码操作DOM的人越来越少。早在2015年便有人声称jQuery已死，社区中也进行了大量雷同的讨论，今天我们看到确实jQuery的地位已大不如前，著名的sizzle选择器在今天已完全可由&em&querySelector*&/em&原生方法替代，操作DOM也可以由框架根据数据的变动自动完成。&/p&&p&明年jQuery在构建大型前端产品的过程中的依赖会被持续弱化，但其对浏览器特性的理解和积淀将对现有的和未来的类Angular的MVVM框架的开发依旧具有很大的借鉴意义。&/p&&h3&4.2 Angular 2&/h3&&p&好事多磨，Angular 2的正式版终于在今年下半年发布，相比于1.x，新的版本几乎是完全重新开发的框架，已经很难从设计中找到1.x的影子。陡峭的学习曲线也随之而来，npm、ES2015 Modules、Decorator、TypeScript、Zone.js、RxJS、JIT/AOT、E2E Test，几乎都是业界这两年中的最新概念，这着实给初学者带来了不小的困难。&/p&&p&Angular 2也更面向于开发单页应用（SPA），这是对ES2015 Modules语法描述的模块进行打包（bundle）的必然结果，因此Angular 2也更依赖于Webpack等“bundler”工具。&/p&&p&虽然Angular 声称支持TypeScript、ECMAScript和Dart三种语言，不过显然业界对Dart没什么太大兴趣，而对于ECMAScript和TypeScript，两种语言模式下Angular 2在API和构建流程上都有着隐式的（文档标注不明的）差异化，这必然会给开发者以困扰。加上业界第三方工具和组件的支持有限，TypeScript几乎是现在开发者唯一的选择。&/p&&p&此外，Angular团队已声明并没有完全放弃对1.x组件的支持，通过特有的兼容API，你可以在2.x中使用针对1.x开发的组件。鉴于不明确的风险，相信很少有团队愿意这样折腾。&/p&&p&现在在产品中使用Angular 2，在架构上，你需要考虑生产环境和开发环境下两种完全不同的构建模式，也就是JIT和AOT，这需要你有两套不一样的编译流程和配置文件。在不同环境下模块是否符合期望，可以用E2E、spec等方式来进行自动化测试，好的，那么Angular 2的测试API又可能成了技术壁垒，它的复杂度可能更甚Angular本身。可以确信，在业务压力的迫使下，绝大部分团队都会放弃编写测试。&/p&&p&总之，Angular 2是一个非常具有竞争力的框架，其设计非常具有前瞻性，但也由于太过复杂，很多特性都会成为鸡肋，被开发者所无视。由于React和Vue.js的竞争，Angular 2对社区的影响肯定不如其前辈1.x版本，且其更高级的特性如Server Render还没有被工程化实践，因此相信业界还会持续观望，甚至要等到下一个4.x版本的发布。&/p&&h3&4.3 Vue.js 2.0&/h3&&p&Vue.js 绝对是类MVVM框架中的一匹黑马，由作者一人打造，更可贵的是作者还是华人。Vue.js在社区内的影响非常之大，特别是2.0的发布，社区快速生产出了无数基于Vue.js的解决方案，这主要还是受益于其简单的接口API和友好的文档。可见作为提供商，产品的简单易用性显得尤为重要。在性能上，Vue.js基于ES5 Setter，得到了比Angular 1.x脏检查机制成倍的性能提升。而2.0在模块化上又更进一步，开发难度更低，维护性更好。可以说Vue.js准确地戳中了普通Web开发者的痛点。在国内，Vue.js与Weex达成了合作，期待能给社区带来怎样的惊喜。&/p&&h3&4.4 React&/h3&&p&目前看来，React似乎仍是今年最流行的数据视图层解决方案，并且几乎已经成为了每名前端工程师的标配技能。今年React除了版本从0.14直接跃升至15，放弃了IE8以外，并没有更多爆发式的发展。人们对于使用JSX语法编写Web应用已经习以为常，就像过去十年间写jQuery一样。&/p&&p&React的代码在维护性能上显而易见，如果JSX编写得当，在重渲染性能上也具备优势，但如果只部署在浏览器环境中，那么首屏性能将会受到负面影响，毕竟在现阶段，纯前端渲染仍然快不过后端渲染，况且后端具备天生的chunked分段输出优势。我们在业界中可以看到一些负面的案例，比如某新闻应用利用React全部改写的case，就是对React的一种误用，完全不顾其场景劣势。&/p&&p&围绕着React发展的替代品和配套工具依旧很活跃，&a href=&https://link.zhihu.com/?target=https%3A//github.com/developit/pReact& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&preact&/a&以完全兼容的API和小巧的体积为卖点，&a href=&https://link.zhihu.com/?target=https%3A//github.com/trueadm/inferno& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&inferno&/a&以更快的速度为卖点，等等。每个框架都想在Virtual DOM上有所创新，但它们的提升都不是革命性的，由此而带来的第三方插件不兼容性，这种风险是开发者不愿承担的，笔者认为它们最大的意义在于能为React的内部实现提供另外的思路。就像在自然界，生物多样性是十分必要的，杂交能带来珍贵的进化优势。&/p&&h3&4.5 React-native&/h3&&p&今年是React-native（一下简称RN）支持双端开发的第一年，不断有团队分享了自己在RN上的实践成果，似乎前途一片大好，RN确实有效解决了传统客户端受限于发版周期、H5受限于性能的难题，做到了鱼和熊掌兼得的理想目标。&/p&&p&但我们仍然需要质疑：首先，RN目前以两周为周期发布新版本，没有LTS，每个版本向前不兼容。也就是说，你使用0.39.0的版本编写bundle代码，想运行在0.35.0的runtime上，这几乎会100%出问题。在这种情况下，如何制定客户端上RN的升级策略？如果升级，那么业务上如何针对一个以上的runtime版本编写代码？如果不升级，那么这意味着你需要自己维护一个LTS。要知道目前每个RN的版本都会有针对前版本的bug fix，相信没有团队有精力可以在一个老版本上同步这些，如果不能，那业务端面对的将是一个始终存在bug的runtime，其开发心理压力可想而知。&/p&&p&其次，虽然RN声称支持Android与iOS双端，但在实践中却存在了极多系统差异性，有些体现在了RN文档中，有一些则体现在了issue中，包括其他一些问题，GitHub上RN的近700个issue足以让人望而却步。如果不能高效处理开发中遇到的各种匪夷所思的问题，那么工期就会出现严重风险。此外，RN在Android和iOS上的性能也不尽相同，Android上更差一些，即便你完成了整个业务功能，却还要在性能优化上消耗精力。并且无论如何优化，单线程模型既要实现流畅的转场动画，又要操作一系列数据，需要很高的技巧才能保证可观的性能表现。在具体的实践中，对于H5，往往由于时间关系，业务上先会上一个还算过得去的版本，过后再启动性能优化。然而对于RN，很有可能达到“过得去”的标准都需要大量的重构工作。&/p&&p&再次，RN虽然以Native渲染元素，但毕竟是运行在JavaScript Core内核之上，依旧是单线程，相对于H5这并没有对性能有革命性质的提升。Animated动画、大ListView滚动都是老生常谈的性能瓶颈，为了解决一些复杂组件所引起的性能和兼容性问题，诸多团队纷纷发挥主动能动性，自己建设基于Native的高性能组件，这有两方面问题，一是不利于分发共享，因为它严重依赖特定的客户端环境，二是它仍依赖客户端发版，仍需要客户端的开发，违背了RN最最重要的初衷。可以想象，在大量频繁引用Native组件后，RN又退化成了H5+Hybrid模式，其UI的高性能优势将会在设备性能不断升级下被削弱，同时其无stable版本反而给开发带来了更多不可预测的风险变量。&/p&&p&最后，RN仍然难以调试和测试，特别是依赖了特定端上组件之后，本地的自动化测试几乎成为了不可能，而绝大多数客户端根本不支持自动化测试。而调试只能利用remote debugger有限的能力，在性能分析上都十分不便。&/p&&p&可以说RN的出现带给了移动开发以独特的新视角，使得利用JavaScript开发Native成为了可能，NativeScript、Weex等类似的解决方案也发展开来。显然RN目前最大的问题仍然是不够成熟和稳定，利用RN替代Native依然存在着诸多风险，这对于重量级的、长期维护的客户端产品可能并不是特别适合，比如Facebook自己。RN的优势显而易见，但其问题也是严重的，需要决策者对个方面利弊都有所了解，毕竟这种试错的成本不算小。&/p&&p&由于时间关系，市场上并没有一个产品在RN的应用上有着足够久的实践经验，大部分依然属于“我们把RN部署到客户端了”的阶段，我们也无法预测这门技术的长久表现，现在评价RN的最终价值还为时尚早。在2017年，期待RN团队能做出更长足的进步，但不要太乐观，以目前的状态来看，想达到stable状态还是有着相当大的难度。&/p&&h3&4.6 Redux 与 Mobx&/h3&&p&&a href=&https://link.zhihu.com/?target=https%3A//github.com/Reactjs/redux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Redux&/a& 成功成为了 React 技术栈中的最重要成员之一。与Vue.js一样，Redux也是凭借着比其他Flux框架更简单易懂的API才能脱颖而出。不过已经很快有人开始厌烦它每写一个应用都要定义action、reducer、store以及一大堆函数式调用的繁琐做法了。&/p&&p&&a href=&https://link.zhihu.com/?target=http%3A//www.infoq.com/cn/articles/mobxjs.github.io/mobx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Mobx&/a&也是基于ES5 setter，让开发者可以不用主动调用action函数就可以触发视图刷新，它只需要一个store对象以及几个decorator就能完成配置，确实比Redux简单得多。&/p&&p&在数据到视图同步上，无论使用什么样的框架，都有一个至关重要的问题是需要开发者自己操心，那就是在众多数据变动的情形下，如何保证视图以最少的但合理的频率去刷新，以节省极其敏感的性能消耗。在Redux或Mobx上都会出现这个问题，而Mobx尤甚。为了配合提升视图的性能，你依然需要引入action、transaction等高级概念。在控制流与视图分离的架构中，这是开发者无可避免的关注点，而对于Angular、Vue.js，框架会帮你做很多事情，开发者需要考虑的自然少了许多。&/p&&h3&4.7 Bootstrap 4&/h3&&p&Bootstrap 4处于&a href=&https://link.zhihu.com/?target=https%3A//v4-alpha.getbootstrap.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&alpha&/a&阶段已经非常久了，即使现在3.x已经停止了维护，它似乎受到了Twitter公司业务不景气的影响，GitHub上的&a href=&https://link.zhihu.com/?target=https%3A//github.com/twbs/bootstrap/issues& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&issue&/a&还非常多。Bootstrap是建设内部平台最佳的CSS框架，特别是对于那些对前端不甚了解的后端工程师。我们不清楚Bootstrap还能坚持多久，如果Twitter不得不放弃它，最好的归宿可能是把它交给第三方开源社区去维护。&/p&&h2&五、工程化与架构&/h2&&h3&5.1 Rollup 与 Webpack 2&/h3&&p&&a href=&https://link.zhihu.com/?target=http%3A//rollupjs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Rollup&/a&是近一年兴起的又一打包工具，其最大卖点是可以对ES2015 Modules的模块直接打包，以及引入了Tree-Shaking算法。通过引入Babel-loader，Webpack一样可以对ES2015 Modules进行打包，于是Rollup的亮点仅在于Tree-Shaking，这是一种能够去除冗余，减少代码体积的技术。通过分析AST（抽象语法树），Rollup可以发现那些不会被使用的代码，并去除它。&/p&&p&不过Tree-Shaking即将不是Rollup的专利了，Webpack 2也将支持，并也原生支持ES6 Modules。这可以说是“旁门左道”对主流派系进行贡献的一个典型案例。&/p&&p&Webpack是去年大热的打包工具，俨然已经成为了替代grunt/gulp的最新构建工具，但显然并不是这样。笔者一直认为Webpack作为一个&em&module bundler&/em&，做了太多与其无关的事情，从而表象上看来这就是一个工程构建工具。经典的构建需要有任务的概念，然后控制任务的执行顺序，这正是Ant、Grunt、Gulp做的事情。Webpack不是这样，它最重要的概念是&em&entry&/em&，一个或者多个，它必须是类JavaScript语言编写的磁盘文件，所有其他如CSS、HTML都是围绕着entry被处理的。估计你很难一眼从配置文件中看出Webpack对当前项目进行了怎样的“构建”，不过似乎社区中并没有人提出过异议，一切都运行得很好。&/p&&blockquote&&p&题外话：如何使用Webpack构建一个没有任何JavaScript代码的工程？&/p&&/blockquote&&p&新的Angular 2使用Webpack 2编译效果更加，不过，已经提了一年的Webpack 2，至今仍处于beta阶段，好在现在已经rc，相信离release不远了。&/p&&h3&5.2 npm、jspm、Bower与Yarn&/h3&&p&在模块管理器这里，npm依旧是王者，但要说明的是，npm的全称是node package mamager，主要用来管理运行在Node上的模块，但现在却托管了大量只能运行在浏览器上的模块。造成这种现象的几个原因：&/p&&ol&&li&Webpack的大量使用，使得前端也可以并习惯于使用CommonJS类型的模块；&/li&&li&没有更合适的替代者，Bower以前不是，以后更不会是。&/li&&/ol&&p&前端的模块化规范过去一直处于战国纷争的年代。在Node上CommonJS没什么意见。在浏览器上，虽然现在有了ES2015 Modules，却缺少了模块加载器，未来可能是&a href=&https://link.zhihu.com/?target=https%3A//github.com/systemjs/systemjs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SystemJS&/a&，但现在仍处于草案阶段。无论哪种，都仍处于JavaScript语言层面，而完整的前端模块化还要包括CSS与HTML，以及一些二进制资源。目前最贴近的方案也就只能是JSX+CSS in JS的模式了，这在Webpack环境下大行其道。这种现象甚至影响了Angular 2、Ember 2等框架的设计。从这点看来，jspm只是一个加了层包装的壳子，完全没有任何优势。&/p&&p&npm本身也存在着各种问题，这在实践中总会影响效率、安全以及一致性，Facebook果断地出品了Yarn——npm的替代升级版，支持离线模式、严格的依赖版本管理等在工程中非常实用的特性。&/p&&p&至于前端模块化，JavaScript有CommonJS和ES2015 Modules就够了，但工程中的组件，可能还需要在不同的框架环境中重复被开发，它们依旧不兼容。未来的话，WebComponents可能是一个比较优越的方案。&/p&&h3&5.3 同构&/h3&&p&同构的设计在软件行业早就被提出，不过在Web前端，还是在Node.js、特别是React的出现后，才真正成为了可能，因为React内核的运行并不依赖于浏览器DOM环境。&/p&&p&React的同构是一个比较低成本的方案，只要注意代码的执行环境，前后端确实可以共享很大一部分代码，随之带来的一大收益是有效克服了SPA这种前端渲染的页面在首屏性能上的瓶颈，这是所有具备视图能力的框架Angular、Vue.js、React等的共性问题，而现在，它们都在一种程度上支持server render。&/p&&p&可以想到的做前后端同构面临的几个问题：&/p&&ol&&li&静态资源如何引入，CSS in JS模式需要考虑在Node.js上的兼容性；&/li&&li&数据接口如何fetch，在浏览器上是AJAX，在Node.js上是什么；&/li&&li&如何做路由同构，浏览器无刷新切换页面，新路由在服务端可用；&/li&&li&大量DOM渲染如何避免阻塞Node.js的执行进程&/li&&/ol&&p&目前GitHub上star较多的同构框架包括Vue.js的&a href=&https://link.zhihu.com/?target=https%3A//github.com/nuxt/nuxt.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&nuxt&/a&和React的&a href=&https://link.zhihu.com/?target=https%3A//github.com/zeit/next.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&next.js&/a&，以及数据存储全包的&a href=&https://link.zhihu.com/?target=https%3A//www.meteor.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&meteor&/a&。可以肯定的是，不论它们是否能部署在生产环境中，都不可能满足你的所有需求，适当的重新架构是必要的，在这个新的领域，没有太多的经验可以借鉴。&/p&&h2&六、未来技术与职业培养&/h2&&h3&6.1 大数据方向&/h3&&p&越来越多做&em&toB&/em&业务的公司对前端的需求都是在数据可视化上，或者更通俗一些——报表。这个部分在从前通常都是前端工程师嗤之以鼻的方向，认为无聊、没技术。不过在移动端时代，特别是大数据时代，对此类技能的需求增多，技术的含金量也持续提升。根据“面向工资编程”的原则，一定会有大量工程师加入进来。&/p&&p&对这个方向的技术技能要求是Canvas、WebGL，但其实绝大多数需求都不需要你直接与底层API打交道，已经有大量第三方工具帮你做到了，不乏非常优秀的框架。如百度的&a href=&https://link.zhihu.com/?target=http%3A//echarts.baidu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ECharts&/a&，国外的&a href=&https://link.zhihu.com/?target=http%3A//www.chartjs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chart.js&/a&、&a href=&https://link.zhihu.com/?target=http%3A//www.highcharts.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Highcharts&/a&、&a href=&https://link.zhihu.com/?target=http%3A//d3js.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&D3.js&/a&等等，特别是D3.js，几乎是大数据前端方向的神器，非常值得学习。&/p&&p&话说回来，作为工程师，心存忧患意识，一定不能以学会这几款工具就满足，在实际的业务场景中，更多的需要你扩展框架，生产自己的组件，这需要你具备一定的数学、图形和OpenGL底层知识，可以说是非常大的技术壁垒和入门门槛。&/p&&h3&6.2 WebVR&/h3&&p&今年可以说是VR技术爆发式的一年，市场上推出了多款VR游戏设备，而淘宝更是开发出了平民的&em&buy+&/em&购物体验，等普及开来，几乎可以颠覆传统的网上购物方式。&/p&&p&VR的开发离不开对3D环境的构建，WebVR标准还在草案阶段，&a href=&https://link.zhihu.com/?target=https%3A//aframe.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&A-Frame&/a&可以用来体验，另一个&a href=&https://link.zhihu.com/?target=https%3A//threejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&three.js&/a&框架是一个比较成熟的构建3D场景的工具，除了能在未来的VR应用中大显身手，同样也在构建极大丰富的3D交互移动端页面中显得必不可少，淘宝就是国内这方面的先驱。&/p&&h3&6.3 WebAssembly&/h3&&p&asm.js已发展成&a href=&https://link.zhihu.com/?target=http%3A//webassembly.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebAssembly&/a&，由谷歌、微软、苹果和Mozilla四家共同推动，似乎是非常喜人乐见的事情，毕竟主要浏览器内核厂商都在这里了。不过合作的一大问题就是低效，今年终于有了可以演示的demo，允许编写C++代码来运行在浏览器上了，你需要下载一大堆依赖库，以及一次非常耗时的编译，不过好歹是个进步。&/p&&p&短时间内，我们都不太可能改变使用JavaScript编写前端代码的现状，Dart失败了，只能期望于未来的WebAssembly。有了它，前端在运行时效率、安全性都会上一个台阶，其他随之而来的问题，就只能等到那一天再说了。&/p&&h3&6.4 WebComponents&/h3&&p&WebComponents能带给我们什么呢？HTML Template、Shadow DOM、Custom Element和HTML Import？是的，非常完美的组件化系统。Angular、React的组件化系统中，都是以Custom Element的方式组合HTML，但这都是假象，它们最终都会被编译成JavaScript才会执行。但WebComponents不一样，Custom Element原生就可以被浏览器解析，DOM元素本身的方法都可以自定义，而且元素内部的子元素、样式，由于Shadow DOM的存在，不会污染全局空间，真正成为了一个沙箱，组件化就应该是这个样子，外部只关心接口，不关心也不能操纵内部的实现。&/p&&p&当前的组件化，无不依赖于某一特定的框架环境，或者是Angular，或者是React，想移植就需要翻盘推倒重来，也就是说他们是不兼容的。有了WebComponents，作为浏览器厂商共同遵循和支持的标准，这一现状将极有可能被改写。&/p&&p&未来的前端组件化分发将不会是npm那么简单，可能只是引用一个HTML文件，更有可能的是包含CSS、HTML、JavaScript和其他二进制资源的一个目录。&/p&&p&目前只有最新的Chrome完全支持WebComponents的所有特性，所以距离真正应用它还尚需时日。由于技术上的限制，WebComponents polyfill的能力都非常受限，Shadow DOM不可能实现，而其他三者则更多需要离线编译实现，可以参考Vue.js 2的实现，非常类似于WebComponents。&/p&&h3&6.5 关于微信小程序&/h3&&p&微信小程序对于今年不得不说，却也无话可说。依托于庞大的用户量，微信官方出品了自有的一套开发技术栈，只能说给繁杂的前端开发又填了一个角色——微信前端工程师。&/p&&h2&七、总结&/h2&&p&最后还有几点需要说明。&/p&&h3&7.1 工程化&/h3&&p&首先，现在业界都在大谈前端工程化，人人学构建，个个会打包。鄙人认为，工程化的要点在于“平衡诸方案利弊，取各指标的加权收益最大化”。仅仅加入了项目构建是远远不够的，在实践中，我们经常需要考虑的方向大可以分为两种：一是研发效率，这直接应该响应业务需求的能力；二是运行时性能，这直接影响用户的使用体验，同时也是产品经理所关心的。这两点都直接影响了公司的收入和业绩。&/p&&p&具体到细节的问题上来，比如说：&/p&&ol&&li&静态资源如果组织和打包，对于具备众多页面的产品，考虑到不断的迭代更新，如何打包能让用户的代码下载量最少（性能）？不要说使用Webpack打成一个包，也不要说编译common chunk就万事大吉了，难道还需要不断地调整编译脚本（效率）？改错了怎么办？有测试方案么？&/li&&li&利用Angular特别是React构建纯前端渲染页面，首屏性能如何保证（性能）？引入服务端同构渲染，好的，那么服务端由谁来编写？想来必是由前端工程师来编写，那么服务端的数据层架构是怎么样的？运维角度看，前端如何保证服务的稳定（效率）？&/li&&li&组件化方案如何制定（效率）？如果保证组件的分发和引用的便捷性？如何保证组件在用户端的即插即用（性能）？&/li&&/ol&&p&对于工程师来说，首先需要量化每个指标的权重，然后对于备选方案，逐个计算加权值，取最大值者，这才是科学的技术选型方法论。&/p&&p&然而在业界，很少能看到针对工程化的更深入分享和讨论，大多停留在“哪个框架好”，“使用XXX实现XXX”的阶段，往往是某一特定方向的优与劣，很少有科学的全局观。甚至只看到了某一方案的优势，对其弊端和可持续性避而不谈。造成这种现状的原因是多方面的，一是技术上，工程师能力的原因并没有考虑得到，二是政治上，工程师需要快速实现某一目标，以取得可见的KPI收益，完成团队的绩效目标，但更多的可能是，国内绝大多数产品的复杂性都还不够高，根本无需考虑长久的可持续发展和大规模的团队合作对于技术方案的影响。&/p&&p&因此，你必须接受的现状是，无论你是否使用CSS预处理器、使用Webpack还是grunt、使用React还是Angular，使用RN还是Hybrid，对于产品极有可能都不是那么地敏感和重要，往往更取决于决策者的个人喜好。&/p&&h3&7.2 角色定位&/h3&&p&确实，近两年，Web前端工程师开始不够老实，要么用Node.js插手服务端开发，要么用RN插手客户端开发。如何看待这些行为呢？&/p&&p&鄙人以为，涉足服务端开发是没问题的，因为只涉及到渲染层面，还是属于“前端”的范畴的。况且，在实际的工程实践中，已经可以证明，优秀的前端研发体系确实离不开服务端的参与，想想Facebook的BigPipe。不过，这需要服务端良好的分层架构，数据与渲染完全解耦分离，后端工程师只负责业务数据的CRUD，并提供接口，前端工程师从接口中获取数据，并推送到浏览器上。数据解耦是比接口解耦更加优越的方案。因此现在只要你的服务端架构允许，Node.js作为Web服务已经比较成熟，前端负责服务端渲染是完全没有问题的。&/p&&p&前端涉足客户端开发也是合理的，毕竟都运行在用户端，也属于前端的范畴。抛开阿里系的Weex鄙人不甚了解，NativeScript、RN都还缺乏大规模持续使用的先例，这是与涉足服务端领域的不同，客户端上的方案都还不够成熟，工具的限制阻碍了前端向客户端的转型，仍然需要时间的考验。不过时间可能不会很多，未来的Web技术依托高性能硬件以及普及的WebGL、WebRTC、Payment API等能力，在性能和功能上都会挑战Native的地位。最差的情况，还可以基于Hybrid，利用Native适当扩展能力，这就是合作而非竞争关系了。&/p&&p&总之前端工程师的&strong&本&/strong&仍然在浏览器上，就这一点，范围就足够广使得没人有敢言自己真正“精通”前端。如果条件允许的话，特别是技术成熟之后，涉猎其他领域也是鼓励的。&/p&&h3&7.3 写在最后&/h3&&p&在各种研发角色中，前端注定是一个比较心累的一个。每一年的年末，我们都能看到几乎完全不一样的世界，这背后是无数前端人烧脑思考、激情迸发的结果。无论最终产品的流行与否，都推动着前端技术领域的高速更新换代。正是印证了那一句“唯有变化为不变”。作为业务线的研发工程师，我们的职责是甄选最佳组合方案，取得公司利益最大化。这个“最佳”的涉猎面非常广，取决于设计者的技术视野广度，也有关于决策者的管理经验，从来都不是一件简单的事。&/p&&p&未来的Web前端开发体验一定是更丰富的，依托WebComponents的标准化组件体系，基于WebAssembly的高性能运行时代码，以及背靠HTTP/2协议的高速资源加载，前端工程师不必在性能上、兼容性上分散太多精力，从而可以专注于开发具备丰富式交互体验的下一代Web APP，可能是VR，也可能是游戏。&/p&&p&在迎接2017的同时，我们仍然要做好心理准备，新的概念、新的框架和工具以及新的语法依旧会源源不断的生产出来，不完美的现状也依旧会持续。&/p&&p&由于水平有限，笔者在上述内容中难免有失偏颇，请多包涵。&/p&&p&本文首发于InfoQ微信前端垂直号&a href=&https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzIwNjQwMzUwMQ%3D%3D%26mid%3D%26idx%3D1%26sn%3Dbf300e9a647cb63fchksm%3D972367fda054eeebda9bac2259dcdb09ebb835b67261%23rd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端之巅&/a&，转载请在文首注明&a href=&https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzIwNjQwMzUwMQ%3D%3D%26mid%3D%26idx%3D1%26sn%3Dbf300e9a647cb63fchksm%3D972367fda054eeebda9bac2259dcdb09ebb835b67261%23rd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&来源&/a&，欢迎前端工程师关注前端之巅。&/p&
作者：殷勇 编辑：尾尾 2016年马上过去了，像过去六年中的每一年一样，Web前端领域又产生了“面目全非”而又“耳目一新”的变化，不但旧事物持续不断地被淘汰，新事物也难保坐久江山，大有岌岌可危之势。开源界如群雄逐鹿，不断生产新的概念、新的框架、新…
首先，现在越来越流行的模式是后端接口吐数据+前端渲染。既然不在服务端渲染html，那也就不存在题主的问题了。&br&&br&如果是传统的服务器渲染html，那么，&br&使用模板引擎：前后端人员都要学习该模板引擎的语法才能互相合作。&br&不使用模板引擎：在任何现代的MVC框架里，前端人员只需要学习一点PHP语法和视图语法（比如在一个视图中加载另一个视图，注册静态文件等），就能很好的与服务端完成合作。这个难度并不比掌握一门模板引擎的语法更困难——除了有些模板引擎完全使用标记语言语法（也就是&tag attr=&val&&这种），相对前端人员来说更亲切，但循环，条件判断，变量的访问，函数调用等，都是脱离于语法的逻辑，该学还是得学。至于那些前端用不到的php语法（比如给数组增加一个元素）和函数，本身也不用去学。&br&&br&&br&模板引擎要解决的核心问题，其实是在MVC框架还没有被广泛利用时一个比较普遍的问题：一个php文件负责处理一个业务逻辑并渲染html。业务逻辑代码和HTML代码往往交叉混杂在一起，维护困难，同时前端也难以介入。引入模板引擎后，就半强制性的促使了业务逻辑与渲染逻辑的分离（之所以说是半强制性，是因为有些模板引擎提供了宽松的支持，允许执行任意的php代码，因此理论上还是可以在模板中写业务逻辑）。可以说，模板引擎的出现，其实就是满足了早期随着php逻辑的加重自然而然产生的分离视图层的需求。&br&&br&后来业界开始大量使用MVC框架之后，业务逻辑代码就转移到M层和C层去了，视图层自然只存在简单的循环和条件判断输出，模板引擎存在的必要性也就没有了。现在php直接支持短标签输出，渲染所需要的php语法对前端人员已经足够友好——不过一些包含大量UI库的框架可能是个例外，比如yii，常用的HTML组件（表格，表单，按钮，下拉菜单，导航等）都倾向于用可高度定制的UI库来生成，所以视图文件中仍然是以php代码为主。（尽管如此，yii这个框架用起来其实非常不错，由于是基于组件的，在官方和社区的支持下，即使没有前端，仅仅一个php程序员就足够做出看起来很不错的网站。如果再加上一个美工，就可以满足绝大部分需求了。是创业公司的首选框架之一。当然，也可以通过安装一个组件来立即支持模板引擎。）&br&&br&&br&了解了模板引擎要解决的问题，题主的问题也就有答案了：如果公司不用任何现代的mvc框架，或者前端人员很强势，不想学一点点php语法，后端人员对前端又很不了解，满足不了公司需求，必须与前端合作，那么还是建议使用一个模板引擎。
首先，现在越来越流行的模式是后端接口吐数据+前端渲染。既然不在服务端渲染html，那也就不存在题主的问题了。 如果是传统的服务器渲染html，那么， 使用模板引擎：前后端人员都要学习该模板引擎的语法才能互相合作。 不使用模板引擎：在任何现代的MVC框架…
补充一下匿名同学的回答：&br&&blockquote&我是这么做的：&br&把数据请求和数据操作放在model中&br&对视图的操作和改变放在view中&br&事件绑定放controller中&/blockquote&&br&这是灵活度比较高的一种模式，可以实现model和view比较好的分离。&br&&br&好处和具体操作如下：&br&&ol&&li&&b&可以由不同的人并行推进对model和view的内部实现&/b&，而不关心对方怎么实现，只管负责自己内部的实现并抛出事件，并约定好通过事件所传递的数据的格式即可，就像前端和后端的分离那样。&/li&&li&&b&从容应对灵活多变的&/b&&b&业务需求&/b&，只要在controler中修改所绑定的事件名和实现相应操作的回调函数即可。&b&controler要做的就是做决定&/b&：决定在哪个事件被抛出时，调用实现哪个操作的方法。这就是它为什么叫做controler的原因。而它只做决定，不做实现，体现了 “We need thin controler&（&a href=&//link.zhihu.com/?target=http%3A//c2.com/cgi/wiki%3FModelViewController& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&c2.com/cgi/wiki?&/span&&span class=&invisible&&ModelViewController&/span&&span class=&ellipsis&&&/span&&/a&） 的原则。&/li&&li&可以&b&很方便的卸载、装载以及修改各个特性&/b&。装载：在model/view中提供实现该特性的方法，在controler中把该方法的调用和调用时机（即事件）绑定起来即可。卸载：解除事件绑定即可。修改：参考好处2。&/li&&/ol&&br&坏处就是有点麻烦，需要controler这一层绑定事件。&br&&br&&b&分离总是会导致引入一种中间层的&/b&，就像以前把DOM事件回调直接写在html元素的onclick事件当中，后来为了结构和行为分离，需要在js中获取该html元素，然后再addEventListener，才能把事件和事件回调函数关联起来。&br&&br&至于需不需要这个灵活度，看具体的场景而定了。需要这种灵活度的场景还是存在的，而且不少。毕竟，计算机领域的大部分问题都可以通过加入某种中间层来解决。
补充一下匿名同学的回答： 我是这么做的： 把数据请求和数据操作放在model中 对视图的操作和改变放在view中 事件绑定放controller中 这是灵活度比较高的一种模式，可以实现model和view比较好的分离。 好处和具体操作如下： 可以由不同的人并行推进对model和…
&figure&&img src=&https://pic3.zhimg.com/v2-ec917dc2c8ae_b.jpg& data-rawwidth=&694& data-rawheight=&356& class=&origin_image zh-lightbox-thumb& width=&694& data-original=&https://pic3.zhimg.com/v2-ec917dc2c8ae_r.jpg&&&/figure&&blockquote&作者：滴滴公共前端——王宏宇&/blockquote&&h3&前言&/h3&&p&如果你已经开发过 JavaScript 应用程序，你可能会遇到或者至少听说过像 React、Vue、Angular 这样的框架。这些工具都有一个共同的目标，让开发者可以轻松地建立流畅的&strong&交互式&/strong&应用。&/p&&p&如果你看过 Vue 的源码打包，你会认识 &strong&rollup&/strong&~ 对，下面我们要介绍的就是这个前端轮子哥的又一个作品：&/p&&p&Svelte (发音: svelt)&/p&&blockquote&&p&The magical disappearing UI framework&/p&&p&目前的 star 数目相比前面提到的几个框架基本可以忽略，不过论作者的代码能力，不容忽视&/p&&/blockquote&&p&和上面的框架有一个&strong&关键&/strong&的区别：&/p&&blockquote&&p&Svelte 不是在&strong&运行时&/strong&解析你的 JavaScript 代码，在构建时你的代码被编译为可直接运行的 JavaScript 代码。&/p&&p&这意味着首屏加载的时候无需浪费时间在加载框架上，也为你节省了运行框架本身的时间。&/p&&/blockquote&&p&之前尤大也在知乎上评价过：&/p&&blockquote&&p&从 Ractive 传承过来的 API 设计框架核心思想：&/p&&p&通过静态编译减少框架运行时的代码量&/p&&/blockquote&&p&正因为&strong&无需依赖框架&/strong&本身，你可以轻松地在现有应用程序中渐进式的采用 Svelte ，或将某个组件作为独立包运行在任何地方。&/p&&p&svelte 的内容覆盖比较多，我们会以多篇文章系列的形势呈现给大家，当然也祝福大家新年快乐~&/p&&h3&快速开始&/h3&&p&在这里我为大家提供了一个 Example ，可以直接访问地址
&a href=&https://link.zhihu.com/?target=https%3A//github.com/neurotoxinvx/svelte-example& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Svelte-Example&/a& 查看。&/p&&p&安装 && 启动&/p&&div class=&highlight&&&pre&&code class=&language-shell&&&span&&/span& git clone https://github.com/neurotoxinvx/svelte-example.git
&span class=&nb&&cd&/span& svelte-examplenpm installcd svelte-examplenpm run dev
&/code&&/pre&&/div&&h3&常用 API&/h3&注：下方的展示部分为图片演示，实际操作体验请启动后体验。&br&&p&1、&strong&模板渲染&/strong&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-b8de03aacec0_b.jpg& data-rawwidth=&1604& data-rawheight=&248& class=&origin_image zh-lightbox-thumb& width=&1604& data-original=&https://pic4.zhimg.com/v2-b8de03aacec0_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&nx&&欢迎使用&/span& &span class=&p&&{{&/span& &span class=&nx&&title&/span& &span class=&p&&}}&/span& &span class=&err&&，&/span& &span class=&p&&{{&/span& &span class=&nx&&title&/span& &span class=&p&&}}&/span& &span class=&nx&&是一个&/span& &span class=&p&&{{&/span& &span class=&nx&&type&/span& &span class=&p&&}}&/span& &span class=&err&&，&/span&&span class=&nx&&推崇组件&/span& &span class=&p&&{{&/span& &span class=&nx&&describe&/span& &span class=&p&&}}&/span& &span class=&nx&&的方式&/span&&span class=&err&&。&/span&&span class=&o&&&&/span&&span class=&err&&/p&&style&&/style&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&title&/span&&span class=&o&&:&/span& &span class=&s1&&'Sevlte'&/span&&span class=&p&&,&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&s1&&'编译型框架'&/span&&span class=&p&&,&/span&
&span class=&nx&&describe&/span&&span class=&o&&:&/span& &span class=&s1&&'开箱即用'&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&2、IF…ELSE&/p&&figure&&img src=&https://pic1.zhimg.com/v2-812a2d731c93dda2021f4_b.jpg& data-rawwidth=&1604& data-rawheight=&404& class=&origin_image zh-lightbox-thumb& width=&1604& data-original=&https://pic1.zhimg.com/v2-812a2d731c93dda2021f4_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&p&&{{&/span&&span class=&err&&#&/span&&span class=&k&&if&/span& &span class=&nx&&type&/span&&span class=&p&&}}&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span&&span class=&o&&&&/span&&span class=&nx&&BLOCK&/span& &span class=&nx&&TRUE&/span&&span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&p&&{{&/span&&span class=&k&&else&/span&&span class=&p&&}}&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span&&span class=&o&&&&/span&&span class=&nx&&BLOCK&/span& &span class=&nx&&FALSE&/span&&span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&p&&{{&/span&&span class=&err&&/if}}&/span&
&span class=&o&&&&/span&&span class=&nx&&button&/span& &span class=&nx&&on&/span&&span class=&o&&:&/span&&span class=&nx&&click&/span&&span class=&o&&=&/span&&span class=&s2&&&switchFirst(type)&&/span&&span class=&o&&&&/span&&span class=&k&&switch&/span&&span class=&o&&&&/span&&span class=&err&&/button&&/span&
&span class=&o&&&&/span&&span class=&nx&&style&/span&&span class=&o&&&&/span&
&span class=&nx&&div&/span& &span class=&p&&{&/span&
&span class=&nx&&font&/span&&span class=&o&&-&/span&&span class=&nx&&size&/span&&span class=&o&&:&/span& &span class=&mi&&14&/span&&span class=&nx&&px&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nx&&button&/span& &span class=&p&&{&/span&
&span class=&nx&&margin&/span&&span class=&o&&-&/span&&span class=&nx&&top&/span&&span class=&o&&:&/span& &span class=&mi&&10&/span&&span class=&nx&&px&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/style&&/span&
&span class=&err&&&/span&&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&switchFirst&/span&&span class=&p&&(&/span&&span class=&nx&&type&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&type&/span& &span class=&o&&=&/span& &span class=&o&&!&/span&&span class=&nx&&type&/span&&span class=&p&&;&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&({&/span&
&span class=&nx&&type&/span&&span class=&o&&:&/span& &span class=&nx&&type&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&3、双向绑定&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f11fe009eecc_b.jpg& data-rawwidth=&1602& data-rawheight=&318& class=&origin_image zh-lightbox-thumb& width=&1602& data-original=&https://pic4.zhimg.com/v2-f11fe009eecc_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&input&/span& &span class=&nx&&type&/span&&span class=&o&&=&/span&&span class=&s2&&&text&&/span& &span class=&nx&&bind&/span&&span class=&o&&:&/span&&span class=&nx&&value&/span&&span class=&o&&=&/span&&span class=&s2&&&name&&/span& &span class=&nx&&placeholder&/span&&span class=&o&&=&/span&&span class=&s2&&&ente your name&&/span&&span class=&o&&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&nx&&Hello&/span& &span class=&p&&{{&/span&&span class=&nx&&name&/span& &span class=&o&&||&/span& &span class=&s1&&'stranger'&/span&&span class=&p&&}}&/span&&span class=&o&&!&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span& &span class=&s1&&''&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&4、事件绑定&/p&&figure&&img src=&https://pic3.zhimg.com/v2-978e523df_b.jpg& data-rawwidth=&1608& data-rawheight=&292& class=&origin_image zh-lightbox-thumb& width=&1608& data-original=&https://pic3.zhimg.com/v2-978e523df_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&p&&{{&/span&&span class=&nx&&data&/span&&span class=&p&&}}&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&button&/span& &span class=&nx&&on&/span&&span class=&o&&:&/span&&span class=&nx&&click&/span&&span class=&o&&=&/span&&span class=&s2&&&add()&&/span&&span class=&o&&&&/span&&span class=&nx&&click&/span& &span class=&nx&&me&/span&&span class=&o&&&&/span&&span class=&err&&/button&&/span&
&span class=&o&&&&/span&&span class=&nx&&style&/span&&span class=&o&&&&/span&&span class=&err&&&/span&&span class=&o&&&&/span&&span class=&err&&/style&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&s1&&'DiDi'&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&add&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kd&&let&/span& &span class=&nx&&_data&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&get&/span&&span class=&p&&(&/span&&span class=&s1&&'data'&/span&&span class=&p&&);&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&({&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&nx&&_data&/span& &span class=&o&&+&/span& &span class=&s1&&'Di'&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&5、监听数据变化&/p&&figure&&img src=&https://pic4.zhimg.com/v2-c36ab4a51feec23c76c20d_b.jpg& data-rawwidth=&1600& data-rawheight=&368& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic4.zhimg.com/v2-c36ab4a51feec23c76c20d_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&nx&&打开控制台查看&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&p&&{{&/span&&span class=&nx&&data&/span&&span class=&p&&}}&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&button&/span& &span class=&nx&&on&/span&&span class=&o&&:&/span&&span class=&nx&&click&/span&&span class=&o&&=&/span&&span class=&s2&&&add()&&/span&&span class=&o&&&&/span&&span class=&nx&&click&/span& &span class=&nx&&me&/span&&span class=&o&&&&/span&&span class=&err&&/button&&/span&
&span class=&o&&&&/span&&span class=&nx&&style&/span&&span class=&o&&&&/span&&span class=&err&&&/span&&span class=&o&&&&/span&&span class=&err&&/style&&/span&
&span class=&err&&&/span&&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&s1&&'DiDi'&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&add&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kd&&let&/span& &span class=&nx&&_data&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&get&/span&&span class=&p&&(&/span&&span class=&s1&&'data'&/span&&span class=&p&&);&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&({&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&nx&&_data&/span& &span class=&o&&+&/span& &span class=&s1&&'Di'&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&onrender&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&c1&&// 此处注意，监听时会触发一次回调函数，使用时请进行第一次判断
&span class=&kr&&const&/span& &span class=&nx&&observer&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&observe&/span&&span class=&p&&(&/span&&span class=&s1&&'data'&/span&&span class=&p&&,&/span& &span class=&nx&&data&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&s1&&'新的数据是'&/span& &span class=&o&&+&/span& &span class=&nx&&data&/span&&span class=&p&&);&/span&
&span class=&p&&});&/span&&span class=&err&&&/span&
&span class=&c1&&// observer.cancel();
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&6、计算属性&/p&&figure&&img src=&https://pic3.zhimg.com/v2-fea465eabe0c52_b.jpg& data-rawwidth=&1602& data-rawheight=&252& class=&origin_image zh-lightbox-thumb& width=&1602& data-original=&https://pic3.zhimg.com/v2-fea465eabe0c52_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&
&span class=&nx&&现在时分&/span&&span class=&p&&,&/span& &span class=&nx&&北京时间&/span& &span class=&p&&{{&/span& &span class=&nx&&hour&/span& &span class=&p&&}}&/span& &span class=&nx&&点&/span&
&span class=&p&&{{&/span& &span class=&nx&&minutes&/span& &span class=&p&&}}&/span& &span class=&nx&&分&/span& &span class=&p&&{{&/span& &span class=&nx&&seconds&/span& &span class=&p&&}}&/span& &span class=&nx&&秒&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&date&/span&&span class=&o&&:&/span& &span class=&k&&new&/span& &span class=&nb&&Date&/span&&span class=&p&&()&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&computed&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&hour&/span&&span class=&o&&:&/span& &span class=&nx&&date&/span& &span class=&o&&=&&/span& &span class=&nx&&date&/span&&span class=&p&&.&/span&&span class=&nx&&getHours&/span&&span class=&p&&(),&/span&
&span class=&nx&&minutes&/span&&span class=&o&&:&/span& &span class=&nx&&date&/span& &span class=&o&&=&&/span& &span class=&nx&&date&/span&&span class=&p&&.&/span&&span class=&nx&&getMinutes&/span&&span class=&p&&(),&/span&
&span class=&nx&&seconds&/span&&span class=&o&&:&/span& &span class=&nx&&date&/span& &span class=&o&&=&&/span& &span class=&nx&&date&/span&&span class=&p&&.&/span&&span class=&nx&&getSeconds&/span&&span class=&p&&()&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&7、Props 传值到子组件&/p&&figure&&img src=&https://pic3.zhimg.com/v2-49e2b2ce864d49f6e1a2c_b.jpg& data-rawwidth=&1604& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&1604& data-original=&https://pic3.zhimg.com/v2-49e2b2ce864d49f6e1a2c_r.jpg&&&/figure&&p&Wrap&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&Inner&/span& &span class=&nx&&name&/span&&span class=&o&&=&/span&&span class=&s2&&&Neurotoxin&&/span& &span class=&nx&&bind&/span&&span class=&o&&:&/span&&span class=&nx&&count&/span&&span class=&o&&&&&/span&&span class=&err&&/Inner&&/span&
&span class=&o&&&&/span&&span class=&nx&&button&/span& &span class=&nx&&on&/span&&span class=&o&&:&/span&&span class=&nx&&click&/span&&span class=&o&&=&/span&&span class=&s2&&&plus(count)&&/span&&span class=&o&&&&/span&&span class=&nx&&click&/span& &span class=&nx&&me&/span&&span class=&o&&&&/span&&span class=&err&&/button&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&import&/span& &span class=&nx&&Inner&/span& &span class=&nx&&from&/span& &span class=&s1&&'./Inner'&/span&&span class=&p&&;&/span&&span class=&err&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&count&/span&&span class=&o&&:&/span& &span class=&mi&&0&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&plus&/span&&span class=&p&&(&/span&&span class=&nx&&count&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&({&/span&
&span class=&nx&&count&/span&&span class=&o&&:&/span& &span class=&nx&&count&/span& &span class=&o&&+&/span& &span class=&mi&&1&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&components&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&Inner&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&Inner&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&nx&&Hello&/span& &span class=&p&&{{&/span& &span class=&nx&&name&/span& &span class=&p&&}},&/span& &span class=&k&&this&/span& &span class=&nx&&is&/span& &span class=&nx&&inner&/span& &span class=&nx&&component&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&nx&&The&/span& &span class=&nb&&Number&/span& &span class=&nx&&is&/span& &span class=&p&&{{&/span& &span class=&nx&&count&/span& &span class=&p&&}}&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span& &span class=&s1&&'unKnown'&/span&&span class=&p&&,&/span&
&span class=&nx&&count&/span&&span class=&o&&:&/span& &span class=&mi&&0&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&8、REFs&/p&&figure&&img src=&https://pic4.zhimg.com/v2-ecb93acb3bf9c41eb2e9_b.jpg& data-rawwidth=&1612& data-rawheight=&294& class=&origin_image zh-lightbox-thumb& width=&1612& data-original=&https://pic4.zhimg.com/v2-ecb93acb3bf9c41eb2e9_r.jpg&&&/figure&&p&Wrap&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&div&/span& &span class=&nx&&id&/span&&span class=&o&&=&/span&&span class=&s2&&&refs&&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&Inner&/span& &span class=&nx&&ref&/span&&span class=&o&&:&/span&&span class=&nx&&inner&/span&&span class=&o&&&&&/span&&span class=&err&&/Inner&
&span class=&o&&&&/span&&span class=&nx&&button&/span& &span class=&nx&&on&/span&&span class=&o&&:&/span&&span class=&nx&&click&/span&&span class=&o&&=&/span&&span class=&s2&&&triggerInner()&&/span&&span class=&o&&&&/span&&span class=&nx&&click&/span& &span class=&nx&&me&/span&&span class=&o&&&&/span&&span class=&err&&/button&&/span&
&span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&import&/span& &span class=&nx&&Inner&/span& &span class=&nx&&from&/span& &span class=&s1&&'./Inner'&/span&&span class=&p&&;&/span&&span class=&err&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&s1&&'REFs Inner'&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&triggerInner&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&inner&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&refs&/span&&span class=&p&&.&/span&&span class=&nx&&inner&/span&&span class=&p&&;&/span&
&span class=&nx&&inner&/span&&span class=&p&&.&/span&&span class=&nx&&change&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&components&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&Inner&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&Inner&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&p&/span&&span class=&o&&&&/span&&span class=&p&&{{&/span& &span class=&nx&&data&/span& &span class=&p&&}}&/span&&span class=&o&&&&/span&&span class=&err&&/p&&/span&
&span class=&err&&&/span&&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&s1&&'REFs Inner'&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&change&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&({&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&nb&&Math&/span&&span class=&p&&.&/span&&span class=&nx&&random&/span&&span class=&p&&()&/span&
&span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/script&&/span&
&/code&&/pre&&/div&&p&9、Emit&/p&&figure&&img src=&https://pic3.zhimg.com/v2-0d35fa9d0ebe2dcc0bfdda_b.jpg& data-rawwidth=&1608& data-rawheight=&190& class=&origin_image zh-lightbox-thumb& width=&1608& data-original=&https://pic3.zhimg.com/v2-0d35fa9d0ebe2dcc0bfdda_r.jpg&&&/figure&&p&Wrap&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&{{ thing }}&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&Inner&/span& &span class=&na&&on:Bomb&/span&&span class=&o&&=&/span&&span class=&s&&&action(event.thing)&&/span&&span class=&p&&&&/&/span&&span class=&nt&&Inner&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&import&/span& &span class=&nx&&Inner&/span& &span class=&nx&&from&/span& &span class=&s1&&'./Inner'&/span&&span class=&p&&;&/span&&span class=&err&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&thing&/span&&span class=&o&&:&/span& &span class=&s1&&'Nothing'&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&action&/span&&span class=&p&&(&/span&&span class=&nx&&thing&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&({&/span&
&span class=&nx&&thing&/span&&span class=&o&&:&/span& &span class=&nx&&thing&/span&
&span class=&p&&});&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&components&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&Inner&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&Inner&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&script&/span&&span class=&o&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&onrender&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kd&&let&/span& &span class=&nx&&num&/span& &span class=&o&&=&/span& &span class=&mi&&0&/span&&span class=&p&&;&/span&&span class=&err&&&/span&
&span class=&nx&&setInterval&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/spa}