摘要：实现MVC的目的就是为了让M和V相分离。前端的MVC无法做到View和Model的相分离，而MVVM可以。我们先来看一个用MVC模式开发的经典例子：（一定要深入了解这种开发的思想，而不是看懂代码）$(function(){ //基本的Todo模型， var Todo = Backbone.Mod... 阅读全文

摘要：前端架构从MVC到MVP，再到MVVM，它们都有不同的应用场景。但MVVM已经被证实为界面开发最好的方案了。MVP是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。作为一种新的模式，MVP与MVC... 阅读全文

摘要：jQuery UI是jQuery官方提供的功能效果和UI样式。作为官方出的东西，它一直没有被人们看重，一是它没有datagrid，tree等UI库必备的东西，二是它修改太过频繁，体积庞大。其实它所有以ui开头的插件都来自开源社区，为了统一它们的接口，jQuery花了很长的时间。在jQuery1.9中... 阅读全文

摘要：我们先来看一个最简单的例子：(function($){ $.fn.extend({ //把此插件添加到jQuery的原型上 pluginName:function(){ //插件的名字 return this.each(function(){ //遍历匹配元素的集合 ... 阅读全文

摘要：由于低版本浏览器不支持css3 animation，因此我们需要根据浏览器来选择不同的动画引擎。如果浏览器支持css3 animation，那么就使用此动画引擎，如果不支持，就使用javascript的动画引擎。首先，我们看一下判定条件，方便切换。前面说过，浏览器把所有事件类型的构造器放在windo... 阅读全文

摘要：animation是css3的另一个重要的模块，它成型比transition晚，吸取了Flash的关键帧的理念，实用性高。animation是一个复合样式，它可以细分为8个更细的样式。（1）animation-name为@keyframes动画（以@keyframes开头的样式规则，我们称为关键帧样... 阅读全文

摘要：W3C中对transition是这样描述的：允许css的属性值在一定的时间内平滑的过渡，也就是说，以动画的效果改变css的属性值。transition主要包含4个属性值：transition-property：样式名；transition-duration：持续时间；transition-timin... 阅读全文

摘要：大家应该都知道，如果一个页面运行的定时器很多，无论你怎么优化，最后肯定会超过指定时间才能完成动画。定时器越多，延时越严重。为此，YUI，kissy等采用中央队列的方式，将定时器减少至一个。浏览器厂商也因此原生支持了requestAnimationFrame方法，此方法基本上能保证每秒刷新60次。但是... 阅读全文

摘要：本课将通过源码分析的形式，来教大家如何实现一个动画引擎的模块。我们先来看一个使用CSS3实现动画倒带的例子：.animate { //这个animate类名加在上面的那个方块元素中，这个类名也可以是其他名字，比如:.move，只要设置的是那个方块元素就OK了。 animation-duration... 阅读全文

摘要：js里面最简单的动画原理：在setTimeout或setInterval定时器中，每隔20-30ms改变元素的样式，于是就有了动画。比如：改变宽高，就叫缩放；改变坐标，就叫做位移；改变坐标轴，就叫旋转；改变透明度，就叫做淡入淡出。css3中有一个transform样式，它的值可以是rotate()旋... 阅读全文

摘要：本课主要教大家如何书写一个完整的ajax模块，讲解的代码主要跟ajax有关，而jQuery的ajax模块添加了Deferred异步编程的机制，因此对ajax的理解难度增大，还是忽略掉。但是我要讲解的代码跟jQuery的ajax模块思路是一样的，只是没有加入Deferred异步编程的思想，这样更有利于... 阅读全文

摘要：一个完整的Ajax请求：var xhr = new (self.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP"); //new XMLHttpRequest()传入参数不影响。xhr.onreadystatechange = functio... 阅读全文

摘要：上一课主要分析了jQuery1.51版本的jQuery Deferred。在jQuery1.6中，jQuery Deferred添加了两个方法，always，pipe。always用来添加回调，无论成功还是失败，都会执行。pipe就是管道的意思，对回调使用瀑布模型，上一个回调的返回值供下一个会调使用... 阅读全文

摘要：之前我们讲了Mochikit Deferred，JSDeferred，现在讲jQuery Deferred。首先，我们先来讲下他们的区别：在保存回调函数时，Mochikit Deferred（dojo Deferred）是用一个2维数组保存的，里面的小数组只有两项，一个是成功回调的函数，一个是失败回... 阅读全文

摘要：大家如果看了前面两课，就知道Deferred的静态方法next(next_default)是用setTimeout实现的(有浏览器最小时钟间隔)。但是实现这种异步操作，可以有很多种方法。JSDeferred中，针对老版本IE，以及标准浏览器都专门使用了一些方法来实现异步操作，提高异步操作的性能提速。... 阅读全文

摘要：这一课，我们先接着上一课讲一下wait方法，以及wait方法是如何从静态方法变化实例方法的。首先我们先看wait方法为啥可以从静态方法变成实例方法，请看register源码：Deferred.register= function(name, fun){ //name="wait",fun=Defer... 阅读全文

摘要：本课难度非常大，看一遍，蛋会疼，第二遍蛋不舒服，第三遍应该貌似懂了。初学者莫来，没必要，这完全就是一个研究。JSDeferred是日本高手cho45搞出来的，其易用性远胜于Mochikit Deferred，它的实现形态基本上奠定了后来称为Promise/A的范式，是js在异步编程上的一个里程碑作品... 阅读全文

摘要：大家知道javascript中有多少方法能够实现异步处理吗？setTimeout(),setInterval()是最常用的两个。XMLHttpRequest对象，进行ajax请求时。postMessage()进行跨域操作时。WebWorker创建新的线程时。setImmediate方法（新的setT... 阅读全文

摘要：focusin与focusout这两个事件是IE的私有实现，能冒泡，它代表获得焦点或失去焦点的事件。现在只有Firefox不支持focusin，focusout事件。其实另外两个事件focus和blur是用来实现获取焦点和失去焦点的事件，但是由于这两个事件不能冒泡，所以很多浏览器就使用focusin... 阅读全文

摘要：滚轮事件jQuery核心库没有对mousewheel事件的差异性进行处理，但作为一个常用的事件，本文讲解一下。mousewheel事件只有火狐浏览器不支持。mousewheel用于取得滚动距离的属性名为event.wheelDelta，往上滚一圈是120，往下滚一圈是-120.在IE6-8下，win... 阅读全文