Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践
Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践
1. 框架 angular 跟Knockout 1
2. 2. 简单的列表绑定：Knockout 1
3. foreach绑定 3
4. Sumup:hesh angular simply 3
1. Mvc优点 angular 功能包括 3
2. 2.1 数据绑定 就是MVVM 结构, 3
3. 2.10 动画效果, ng-animate 4
5. 参考 5
1. 框架 angular 跟Knockout
。有了Knockout，在写JavaScript时，就不需要在页面中引用UI元素或DOM。
Knockout设计目标是把任何JavaScript对象当成View Model来使用。只要View Model的属性具有可监听性，就可以使用Knockout将其与UI绑定。一旦属性值发生变化时，UI会被自动刷新
作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.csdn.net/attilax
2. 2. 简单的列表绑定：Knockout
对于列表的绑定，基本上是使用table。这里我们看如何使用ko把一个Array绑定到一个table中。因为多条数据就最好是使用模板了，所以我们结合jquery的模板插件来使用ko。
首先我们需要定义一个数组，然后定义一个ko的数组。
Ko有自己的数据定义，是availableArray;所以我们需要使用它的函数把我们定义好的数组给传进去，生成availableArray。
第二步是去定义一个jquery的模板，定义一个table,并把viewModel的数据绑定到模板中。
这里tbody的data-bind就是直接绑定template啦，对应的需要给出绑定的模板Id，以及需要传入到模板的数据源。
3. foreach绑定
<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: product.name"></td>
<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
<td data-bind="text: subTotal"></td>
</tr>
</tbody>
</table>
4. Sumup:hesh angular simply
不过foreach bind tsabdd...
文档雅十angular的多
1. Mvc优点 angular 功能包括
2. 2.1 数据绑定 就是MVVM 结构,
目的就是让开发者完全忘记操作DOM, 只需要操作数据,html页面就会自动更新
例如 var shownumber = 1, 那么你把shownumber = 2 时, 界面就自动更新了, 完全不需要用jQuery用.html()或.text()更新数据. 就这个绑定功能,目前大部分网站的js代码都能删掉 三分之二.
同时提供大量内置的ng- 开头的指令系统通过在html模板中 声明式绑定 解决操作DOM问题. (声明式指令简直就是对不懂js的前端开发的福音,再也不用js的.show(),.hide()了, 直接写到html标签上)
3. 2.10 动画效果, ng-animate
angular1.2版本后分为独立的模块 ng-animate 非常方法,只要在html写上样式名字动画自动就出来了,完全不用操心js代码
•MVVM救 星：Model将和ViewModel互动（通过$scope对象），将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的 代码。View可以通过$routeProvider对象来支配，所以你可以深度的链接和组织你的View和Controller，将他们变成导航 URL。AngualrJS同时提供了无状态的Controller，可以用来初始化和控制$scope对象。
要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的，比如，Cappucino 还有 Knockout。而angularJS是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架，第 二天发现这个框架已经被遗弃了吧！
一年前左右，接触到knockout和AngularJS，感受到数据和视图自动绑定的美妙开发体验后，立即抛弃Backbone。此时的开发已经彻底前后分离、前端业务数据层和视图层分离
你需要关心的只是数据模型的改变和真正的逻辑部分，双绑机制可以帮你完成视图层的自动更新。这也是为什么17000的代码可以变成5000的原因之一。
于AngularJS能让整个代码变得更为精简的第二原因，应该是所谓的组件化吧。这个功能是我一直不敢用也没认真去学的，因为这个功能过于强大，可以自定义HTML标签，将诸如多TAB切换这种视图层和模型层都涉及的东西，最终封装成一个新的HTML标签、非常强大，但陷阱也颇多，用起来比较吓人。...相比于AngularJS的组件，polymer的组件构造方式，较容易为初中级开发人员理解。
在一般情况下，Angular.js依靠一种叫做“ 脏检查（dirty checking）”的机制来确定对象是否已进行更改。“脏检查”的方式是，在你扫描每个对象和其所有绑定属性时，比较当前值和之前已知的值。如果它发生了变化，你就需要去更新其绑定。正如你能想到的那样，代码中对象越多，成本将越昂贵。
· 使用“脏检查”，你不需要使用accessors。你可以用person.name = "Bill"来代替person.set('name', "Bill")，就像在Ember.js 或 Backbone.js中的一样。
· 为什么在DOM中你会有这么多的对象？这最终将会成为一个瓶颈的。
Miško Hevery在StackOverflow上介绍了 这种折中方式。他指出，使用“脏检查”，你无法一次有超过2000个绑定对象。
Tom Dale（Ember.js开发者之一）所说，Ember.js受Cocoa 和Rails启发。但问题是，通过Ember.js，我并没有真正感觉到像在写一个Web应用程序，它就像一堆抛出的概念。而在Angular.js中， 我感觉像在写一个Web应用程序，它真正支持所有的Web概念，并以一种非常自然的方式来扩展HTML。
。HTML是伟大的，因为它是声明式的
· <ul>
· <li ng-repeat="element in array">element</li>
· </ul>
这个语法看起来像新的 MDV标准。这看起来比Ember.js更加简洁。另外，Angular.js被优化得非常快，开发团队通过如下措施来实现：
· 脏检查
· 只检查当前视图
· 只在变化发生时检查
· 通过和Chrome团队协作来利用JIT
5. 参考
(foreach绑定 )(Knockoutjs快速入门(经典)_Javascript教程_Java学院_希赛网.htm
KnockOutJS学习系列----(一) - Nic Pei - 博客园.htm
paip.提升效率--数据绑定到table原理和流程Angular js jquery实现 - attilax的专栏 - 博客频道 - CSDN.NET.htm
Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践相关推荐
- angular 最佳实践_干净高效的Angular应用程序的最佳实践
angular 最佳实践 by Vamsi Vempati 由Vamsi Vempati 干净高效的Angular应用程序的最佳实践 (Best practices for a clean and p ...
- Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1.设置 document.domain为一致 推荐1 2.Apache 反向代理 推荐1 3. ...
- Atitit.js模块化 atiImport 的新特性javascript import
Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参 ...
- atitit.js浏览器环境下的全局异常捕获
atitit.js浏览器环境下的全局异常捕获 window.onerror = function(errorMessage, scriptURI, lineNumber) { var s= JSON. ...
- Ext Js MVC系列二 利用Application和Viewport进行应用程序初始化和页面布局
通过上一篇我们已经对Ext js MVC框架开发有了一个大概的了解,这一篇将利用Application和Viewport进行应用程序的初始化和页面布局.我想从以下几方面来进行总结. 1,通过Ext.L ...
- Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...
- Atitit.js this错误指向window的解决方案
Atitit.js this错误指向window的解决方案 1.1. 出现地点and解决之道1 1.2. call,apply和bind这三个方法2 1.2.1. Function.prototype ...
- atitit.js的 字符串内容 转义 js处理html
atitit.js的 字符串内容 转义 js处理html 1. js处理html的问题1 2. js的 字符串内容 转义1 3. 下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到 ...
- 10个最好的 Node.js MVC 框架
Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API 以及大量的服务器 ...
最新文章
- Linux命令（基础）
- Android TextView中图文混排设置行间距导致高度不一致问题解决
- Ado.net类与对象
- 计算机教授丁三石,一次难忘的计算机课！！
- 当下的互联网时代，“急功近利”不是坏事
- 全球通用头像gravatar介绍
- 这种情况，支付宝转账可撤回了！一定要会
- 2个YUV视频 拼接技术
- t470键盘拆解_ThinkPad T470拆机图赏：堪称商务本的业界标杆
- python深度学习pdf_Python深度学习
- 计算机用三角函数时如何用弧度制,弧度制 三角函数的简单应用
- 你身边长期不上班的人，靠什么活着？
- 常见荧光染料修饰多种基团及其激发和 发射波长数据一览数据
- 使用Vivado软件进行硬件调试
- ios本地化_本地化101 iOS与Android
- 面向对象程序设计（Java）实验
- Android之手机电池电量应用
- Mac开发-公证流程记录Notarization-附带脚本
- html显示已知范围标量,【单选题】下列哪个HTML5元素用于显示已知范围内的标量测量...
- 四六级考试报名系统c语言,四六级考试系统课程设计报告.doc