1.不要设计，也不要通过DOM操作去改变你的页面

你用jQuery去设计一个页面，并让它动起来。这是因为jQuery就是让一切简单的事情变复杂的罪魁祸首。

但是用avalon，你必须从零开始去构思你的架构。"我有这么一些DOM，我想要它去做XXX"，不，你不该这么想，你首先应该想到你要完成的是什么，
然后去设计你的整个应用，最后去设计你的view。

2.不要在avalon的代码里混杂着jQuery代码

不要首先想到用jQuery去解决问题。首先想到的应当是avalon的VM与$watch。
你刚开始学avalon的时候jQuery特别诱人，所以我才建议新的avalon开发者坚决不用jQuery，
至少等到你能够按MVVM的方式去处理问题时再说吧。

3.要一直想着架构

首先你要明白，SPA(single-page applications)也是applications。不是零散的网页。
因此我们不能仅仅从客户端开发者的角度去考虑，还需要把自己当成服务器端工程师。
我们要想这把我们的application分离成独立的，可扩展的，可供测试的组件。

为了达到这一点，你要把你重复利用的视图独立成一个模板，通过ms-include引入。
你要把你经常用到的方法，封装成VM的一个个方法或过滤器。
你要学会切割页面
，让它交由不同的ms-controller来处理。
你要学会使用mmRouter，路由器是你掌握SPA的证明。
你要学会用ms-widget封装UI组件，这是对你未来的投资！

think in avalon的更多相关文章

  1. MVVM大比拼之avalon.js源码精析

    简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. 迷你MVVM框架avalon在兼容旧式IE做的努力

    很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...

  4. 前端展望：取avalon，弃angular

    打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧:   目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...

  5. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  6. 轻量级前端MVVM框架avalon - 执行流程1

    基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...

  7. 轻量级前端MVVM框架avalon - 执行流程2

    接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...

  8. 轻量级前端MVVM框架avalon - 整体架构

    官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...

  9. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  10. 轻量级前端MVVM框架avalon - 模型转换

    接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...

随机推荐

  1. Quartz 2D编程指南(2) － 图形上下文

    一个Graphics Context表示一个绘制目标.它包含绘制系统用于完成绘制指令的绘制参数和设备相关信息.Graphics Context定义了基本的绘制属性,如颜色.裁减区域.线条宽度和样式信息 ...

  2. 关于fpga优化的set input delay 和 set output delay

    set input delay 和set output delay 首先必须明确的是指的外部delay,而非input或output的内部delay,那么这外部delay包含什么呢?包含1,外部路径延 ...

  3. hessian+spring集成应用

    注意事项 ▲JAVA服务器端必须具备以下几点:---->包含Hessian的jar包---->设计一个接口,用来给客户端调用---->实现该接口的功能---->配置web.xm ...

  4. k8s helm 私服chartmuseum minio s3 存储配置

    1. 安装minio 使用docker 安装 参考项目 https://github.com/rongfengliang/mino-thumbor-openresty 备注: 因为是一个集成项目可能会 ...

  5. docker swarm mode routing mesh 使用

    Docker Engine swarm mode makes it easy to publish ports for services to make them available to resou ...

  6. Clair：CoreOS发布的开源容器漏洞分析工具

    Clair为何而生:提升安全 软件世界里,安全漏洞会一直存在.好的安全实践意味着要对可能出现的事故未雨绸缪 - 即尽早发现不安全的软件包,并准备好快速进行升级.而Clair就是设计来帮助你找出容器中可 ...

  7. [深度学习]Wake-Sleep算法

    本文翻译自2007-To recognize shapes, first learn to generate images, Geoffrey Hinton. 第五种策略的设计思想是使得高层的特征提取 ...

  8. 3.JMeter添加集合点

    1.JMeter的集合点是通过添加定时器来完成的,在做性能测试时,真正的并发是不可能的,为了更真实的模拟并发场景,因此在需要压测的地方设置集合点,即可一起操作发送请求. 2.JMeter添加定时器,右 ...

  9. 谈谈JS中的高级函数

    博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...

  10. 引用 LPSTR、LPCSTR、LPTSTR、LPCTSTR、LPWSTR及LPCWSTR的意义及区别

    1.ANSI(即MBCS):为多字节字符集,它是不定长表示世界文字的编码方式.ANSI表示英文字母时就和ASCII一样,但表示其他文字时就需要用多字节.   2.Unicode:用两个字节表示一个字符 ...