路由器网页模板(路由器网页设置教程)

　　原创专栏｜司徒正美

　　司徒正美，本名钟钦成，著名的Java专家，去哪儿网前端架构师，立志做考古学家的日语系工程师，穿梭于二次元与二进制间的"魔法师"，做过陶艺，写过小说，涉猎Java、Ruby、 Java。曾出版《Java框架设计》一书。

　　本文将蜻蜓点水的介绍一下avalon2，因为代码总是令人生厌，让人入睡。大家先了解一下avalon2能做什么，做得如何，再入坑吧。

　　1. avalon1的现状

　　说到avalon2，不能不提一下avalon1。avalon1在我没有加入去哪儿网前，已经被酒店事件部的同学引进来了。那时他们还开发一个叫onion adapter的库。因为在这之前还有一个叫onion的UI库，是基于jQuery的。后来的是一个适配库，基本上覆盖了原有的接口。我来去哪儿网后，就是继续升级avalon，创建一个全新的基于avalon的UI库，取onion的简写，叫oniui。当然还有其他工作。这个庞大的UI现在在公司30多条业务线在使用。

　　当然 avalon面世时，国内只有ko能支持IE6，但它的用法比较怪异，因此在当时赢取了不份市场，BAT都有业务线在用，类型包括内部OA系统， 游戏， 电商平台，政府网站，企业网站 ，手机，微信公众号。最大的两个客户是广东移动内部OA系统与银联钱包APP，都是上万台服务器。

　　得益一些人脉关系，avalon也带到国外，其主要组件mmRequest, mmRouter都实现了国际化。 当然avalon 成功的另一个原因是它的学习资源广泛分布离不开的。国内出名的前端论坛都有它的身影。

　　2. avalon2的优势

　　学如逆水行舟，不进则退。IT行业要求我们不断学习，因此每天都涌现新的技术。一个框架不可能吃一辈子。加之，avalon 是匆匆黄袍加身，成为去哪儿网后台的御用框架，它是没有准备好的，不完善的。这几年的缝缝补补，不能改变先天的缺憾。近几年react 带来了虚拟DOM这大杀器，大大改善UI库的性能问题。基于这些原因，avalon2起航了。

　　avalon2是基于上面4个目标进行大升级。

　　1

　　高性能

　　首先avalon2是使用虚拟DOM解决性能问题。虚拟DOM从结构上来看，只是一个树状结构的对象，但它是附加一套复杂的diff算法。即每次我们修改数据时，都会生成一份新的虚拟DOM，然后新旧虚拟DOM进行比较，算出最少的更新步骤。这样说大家没有什么具体的感觉。

　　DOM在我们的框架上通常是指文本节点与元素节点。一个普通的元素节点有7层原型链，这意味着，我们随便访问一个自定义属性，可能一层层往上的7层，每层都要经过几十至上百个属性。而用普通对象代替了DOM对象，我们就减少这些不必要的属性访问。按照avalon2文档上的术语，叫做以轻量对象代替重型对象做计算。

　　更多有关虚拟DOM为什么这么多的话题，可以见下面链接。这里就不展开了。大家知道这是一个很牛B的东西就行了。

　　https://www.zhihu.com/question/31809713

　　2

　　组件化

　　这次主要参考对象是WebComponent，chrome推出的东西，但在chrome54时就被废弃。但它有许多牛B的思想值得借鉴。比如标签化，生命周期，插槽……

　　https://sentsin.com/web/1089.html

　　为了兼容低版本浏览器，avalon2是选择使用JS实现了它们。

　　3

　　无入侵性

　　无排它性，是指能与jQuery, zepto等库友好混用。

　　为了达成这个目标，主要做了如下几个工作：

　　使用同步刷新降低使用难度。即上面是avalon代码，下面是jQuery代码，上面改了某个值，jQuery能立即拿到修改后的值。换是angular, react, vue等库，由于是异步刷新，从视图那边只能取得之前的值。没有异步，就不用掺和什么Promise, callback等东西。

　　不替换现有节点是非常重要的。比如说backbone，它每次刷新都是大片区域刷新，因此绑定事件时只能使用事件委托实现。一些jQuery组件需要重新挂载初始化。但总有一些东西你是不能还原现场的，如光标的位置，选区什么的。像react，它会将页面上所有空白都用span元素包起来，是严重破坏原来结构，导致许多 jQuery组件用不了。

　　value属性的劫持。当第三方组件（比如日历组件，富文本编辑器），这些组件也在修改value，当它们修改value时，通过value的劫持手段，能立即能知我们的vm发生变化,然后再同步其他用到这个属性的地方。

　　继承react的优点，为用户提供各种钩子。比如说整个视图渲染后的回调（如loading），循环区域渲染后的回调(列表的父容器重设高度)，值更新后的回调（可能我们要做格式化处理，只能输入中文或数字），组件的生命周期回调等等。有了这些钩子，用户就不用自己写一些奇怪的代码来做获取组件的当前状态。

　　4

　　兼容性

　　最后一点的兼容性，也是一直是avalon的优势。这是主要针对高级浏览器的优化。高级浏览器添加了一些更好用的API，它们以一敌十，可以大大减少avalon2框架的代码量。

　　下面来一个简单的例子：

　　点击按钮，那个格子的数值就会换成11,22,33,44……

　　5

　　后端渲染与arthur

　　除了以上四者，在升级过程中，avalon2实际上还达成更多目标： 后端渲染与arthur。

　　后端渲染是基于虚拟DOM上实现的。由于JS对象在前后端都可以运行，只要我们有效隔离框架中的DOM 代码，那么我们就让avalon直接运行于nodejs环境中。这样前后可以共用一份VM，一份模板，一套业务逻辑。

　　这里是avalon2 koa2的后端渲染例子：

　　https://github.com/RubyLouvre/avalon-server-render-example

　　arthur是一个超微型的avalon，支持浏览器为IE9＋，与vue, angular等运行环境相同。但相对于他们动辙上万的代码，arthur不到1500行。麻雀虽小，五脏俱全。arthur合适于一些对体积非常严苛的环境，如广告，性能监控等场合。

　　https://github.com/RubyLouvre/avalon/blob/v2.1.16ee/dist/arthur.js

　　3. avalon2的相关设施

　　此外，avalon2也不是单打独斗，它提供了一整合构建SPA的方案，包括数据请求(mmRequest),动画(mmAnimate),路由器(mmRouter)及事件总线(mmDux， 这只是redux的一个简单包装，方便实现时间旅行，可以任意跳到某一帧)。avalon2与这些组件都是基于webpack构建的，因此所有东西都可以直接用webpack打包。

　　目前， avalon2已经在社区中一点点铺开使用，有了这些先行者的努力，avalon2会变得更好。当然avalon2不满足于作为一个MVVM框架而存在。基于虚拟DOM，avalon2将构建多个渲染层，向数据可视化领域迈进！

　　如有疑问，欢迎留言，会在第一时间回复大家。

　　Qunar技术沙龙

　　欢迎关注我们