最近从angular的QQ群与新浪微博拉了许多人来用我的avalon,成为第一批登上方舟,脱离DOM苦海的人。短短三个月内,5群的朋友也搞出几个切实实行的案例了。为应对粉丝们高益高涨的热情,遂放出此文章。

avalon的数据绑定需要经过扫描才能起作用,框架自身会在domReady时进行一次扫描,通过ms-include加载子模板时,也会对当前模板进行一次扫描。
如果用户的页面是自己AJAX加载回来,或自己对元素设置了ms-*绑定属性,或是自己用require等动态加载库,在它的回调里定义VM,请不要忘了执行avalon.scan()
如果能确定扫描的区域,那么最好也请传入一个元素节点,让其更快地执行.

请保持数据的扁平化,不要设计包含多级子对象的大对象,如{a:{b:{g:7}},d:{e:{f:3}}}。因此将这个对象转换为VM后,它的内部结构将更加庞大,每一级都添加大量辅助函数与同名的访问器属性,特别吃内存;另,avalon对多级对象的深层监控还不完善,第四层就力不从心了。

将一次性使用的属性转换不可监控的,具体做法是名字前面加$,或把名字放在同级的$skipArray数组中。

请保存数据的完整性与一致性,比[{v:1},{v:2},{v:3},{}]就不是一个好的数据源,因为第四个与前三个明显不同。[1,null,2,3,4]也是如此。请从JAVA数组的角度来后,每个元素的类型与结构必须保持一致,这才保证页面循环渲染或更新时不会出问题。

请确保VM只包含数据与事件回调。数据是指字符串,数字,布尔,简单结构的纯对象(如{},{a:1}),日期对象(new Date())。像正则,空值(null, undefined)就不要放进去。函数要作为事件回调才放进去,因此框架内部会对ms-on-*, ms-click, ms-mouseout等绑定进行处理,确保不会执行两次(parseExpr里面预先检测动态生成的求值问题是否有错)
,什么AJAX请求也请放在事件回调中。不相关的函数请定义在define方法外,然后在事件回调里面调用。定义时,数据聚集在VM的上方,事件回调放在VM的下方

请严格区分定义用的vm与define方法的返回值VM。define方法的参数是一个回调函数,这个函数也有一个参数,我在众多示例中,都命名为vm(就像angular的CTRL工厂方法,里面那个对象永远命名为$scope,
不同的是 我的不是强制性的),它是用于定义数据源应该包含什么数据与回调函数。
那只是一个普通的对象。而作为返回值的VM是一个成品,
已经添加大量辅助方法与覆盖上同名的访问器属性。在回调函数里,我们想引用外面的属性,
请vm将改成VM(这个也不是强制性的)。总而言之,记住vm只是用于定义,VM用于调用就行了。

一个ms-controller只能应用于一个元素上。

尽量使用ms-repeat而不是ms-repeat-xxx。

关于网速慢,{{}}插值表达式暴露出来的问题,
我们可以定义这样一个样式规则进行处理[ms-controller],[ms-important]{display:none} 为有点类于angularjs的ng-cloak指令,在扫描之前起着羞丑布的作用。对于IE6不支持属性选择器的问题,请添加ms-controller, ms-important类名。

.ms-controller, .ms-important{visibility:hidden}

框架对应的实现如下:

    function scanTag(elem, vmodels, node) {
//扫描顺序 ms-skip(0) --> ms-important(1) --> ms-controller(2) --> ms-if(10) --> ms-repeat(100)
//--> ms-if-loop(110) --> ms-attr(970) ...--> ms-each(1400)-->ms-with(1500)--〉ms-duplex(2000)垫后
var a = elem.getAttribute(prefix + "skip")
var b = elem.getAttributeNode(prefix + "important")
var c = elem.getAttributeNode(prefix + "controller")
if (typeof a === "string") {
return
} else if (node = b || c) {
var newVmodel = VMODELS[node.value]
if (!newVmodel) {
return
}
if (elem.msLoopData) {
delete VMODELS[node.value]
}
//ms-important不包含父VM,ms-controller相反
vmodels = node === b ? [newVmodel] : [newVmodel].concat(vmodels)
elem.removeAttribute(node.name) //removeAttributeNode不会刷新[ms-controller]样式规则
avalon(elem).removeClass(node.name)//处理IE6
}
scanAttr(elem, vmodels) //扫描特性节点
}

清楚各种绑定在同一个元素的被扫描顺序,详见上面源码。

使用ms-attr-prop=value代替ms-disabled, ms-enabled, ms-readonly, ms-checked, ms-checked。

利用好各种回调,如data-duplex-changed, data-with-sorted, data-include-loaded, data-include-rendered, data-each-rendered, data-repeat-rendered,
data-with-rendered, data-widget-defined。

朝圣之旅:入门教程--〉 官网教程 --〉GITHUB的示例--〉 组件编写指南

最后的最后,最重要的最佳实践是请围绕VM编程而不是围绕DOM,
avalon严格践行操作数据即操作DOM的理念,能让开发人员离开DOM都能轻松进行前端开发。JS中的VM处理业务逻辑与提供数据源,HTML中的绑定负责渲染与响应用户点击拖拽等行为,这样就最大保证了视图逻辑相分离。

avalon最佳实践的更多相关文章

  1. 快速web开发中的前后端框架选型最佳实践

    这个最佳实践是我目前人在做的一个站点,主要功能: oauth登录 发布文章(我称为"片段"),片段可以自定义一些和内容有关的指标,如“文中人物:12”.支持自定义排版.插图.建立相 ...

  2. ASP.NET跨平台最佳实践

    前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语言本身来看,C#确实比Java ...

  3. 《AngularJS深度剖析与最佳实践》简介

    由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持sh ...

  4. ASP.NET MVC防范CSRF最佳实践

    XSS与CSRF 哈哈,有点标题党,但我保证这篇文章跟别的不太一样. 我认为,网站安全的基础有三块: 防范中间人攻击 防范XSS 防范CSRF 注意,我讲的是基础,如果更高级点的话可以考虑防范机器人刷 ...

  5. Spring Batch在大型企业中的最佳实践

    在大型企业中,由于业务复杂.数据量大.数据格式不同.数据交互格式繁杂,并非所有的操作都能通过交互界面进行处理.而有一些操作需要定期读取大批量的数据,然后进行一系列的后续处理.这样的过程就是" ...

  6. Atitit.log日志技术的最佳实践attilax总结

    Atitit.log日志技术的最佳实践attilax总结 1. 日志的意义与作用1 1.1. 日志系统是一种不可或缺的单元测试,跟踪调试工具1 2. 俩种实现[1]日志系统作为一种服务进程存在 [2] ...

  7. PHP核心技术与最佳实践——全局浏览

    难得买到并喜欢一本好书,‘PHP核心技术与最佳实践’. 几天时间,先看了个大概,总结一下整体是什么样子的,怎么看怎么学. 1.总共14章: 2.第1.2章讲PHP的OOP: 其中第一章侧重于PHP的O ...

  8. Abp集成Swagger的最佳实践

    1.在项目中添加nuget包 Abp.Web.Api.SwaggerTool 2.在项目Abp模块的DependsOn添加AbpWebApiSwaggerToolModule Run It,启动项目, ...

  9. MySQL · 答疑解惑 · MySQL 锁问题最佳实践

    http://mysql.taobao.org/monthly/2016/03/10/ 前言 最近一段时间处理了较多锁的问题,包括锁等待导致业务连接堆积或超时,死锁导致业务失败等,这类问题对业务可能会 ...

随机推荐

  1. Codeforces 1030F 【线段树】【好题】

    LINK 题目大意: 给你n个物品,每一个物品有一个位置p和一个权值w,移动一个物品的代价是移动距离*物品权值 有q个询问: 把第i个物品的权值变成j 问把第l到第r个物品移动到一个相邻的区间中\([ ...

  2. Machine Schedule(二分图匹配之最小覆盖点,匈牙利算法)

    个人心得:二分图啥的一点都不知道,上网借鉴了下,请参考http://blog.csdn.net/thundermrbird/article/details/52231639 加上自己的了解,二分图就是 ...

  3. 《DSP using MATLAB》示例Example 6.20

  4. JS实现动态提示框

    引言 什么项目都有个需求,应开发需求,需要写一个公式编辑器选择公式的插件,下面给大家讲一下实现过程.(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): ...

  5. cacti监控linux主机时iptables阻碍了udp161端口造成无法监控解

    由于在添加linux主机时,有防火墙启用,造成无法监控linux主机,现有两种方法解决无法监控linux主机问题:可以通过在监控主机执行该命令: snmpwalk -c public -v 2c 19 ...

  6. Docker阿里云镜像加速器 for CentOS 7

    CentOS 7 CentOS使用配置方式略微复杂,需要先将默认的配置文件复制出来 /lib/systemd/system/docker.service -> /etc/systemd/syst ...

  7. 洛谷3354(IOI2005)河流——“承诺”

    题目:https://www.luogu.org/problemnew/show/P3354 虽说是几个月前曾经讲过的题,但没有题解而自己(花了两个多小时)A了好高兴!!! 这是一个很好的套路:“承诺 ...

  8. Zend Studio 下载

    http://www.52pojie.cn/thread-507229-1-1.html THINKPHP :  http://www.cnblogs.com/TigerYangWTH/p/57250 ...

  9. PAT1055___排序神题

    题目意思比较简单,按财富,年龄,姓名来排序 看似挺普通的,但被坑了20多次TLE 首先排序只要一次,就是按题目规定的进行排序 然后在查询的时候,不是从头扫到尾看是否符合年龄的限制,而是记录这个年龄组在 ...

  10. 微信卡券领取页面提示签名错误,微信卡券JSAPI签名校验工具对比签名一模一样,cardExt扩展字段有问题

    一.领券页面错误 二.给到前端的数据 三.根据给前端的额数据做签名校验 四.给前端的签名和校验的签名一致(这一步能判断签名没有问题,基本可以判断是前端调用微信接口时拼接的数据有问题) 五.以下是微信的 ...