Jser 设计模式系列之面向对象 - 接口封装与继承
摘要:GOF在《设计模式》中说到:面向接口编程,而非面向实现编程鉴于此,这个概念可见一斑!JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性。所幸的是JS拥有强大的灵活性,这使得模仿接口特性又变得非常简单。那么到底是接口呢?接口概念:接口提供了一种用以说明一个对象应该具有那些方法的手段接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信使用接口的优点:自我描述性,促进代码的重用明确一个类实现的方法,帮助其使用这个类稳定不同类之间的通信一个需求,需要多个部门协调合
阅读全文
posted @
2013-10-27 15:57
【艾伦】
阅读(2795)
推荐(9) 编辑
前端MVVM框架设计及实现
摘要:最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了借鉴的自然还是从正美的Avalon开始了,我2013年写过一个关于MVCMVVM源码分析系列,其实MVVM并不难为了便于大家更深刻理解前二版会先简单的模仿avalon的实现最基本的...
阅读全文
posted @
2013-10-26 21:58
【艾伦】
阅读(7092)
推荐(14) 编辑
jQuery 2.0.3 源码分析 回溯魔法 end()和pushStack()
摘要:了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能从这章开始慢慢插入jQuery内部一系列工具方法的实现关于jQuery对象的包装var $aaron = $("aaron");通过对sizzle的分析呢,jQuery选择器,反正最终都是通过dom接口实现取值的, 但是通过jQuery处理后返回的不仅仅只有dom对象,而是一个包装容器返回的jQuery对象:$aaronjQuery对象,其中有个prevObject这个是干嘛用的呢?jQuery对象栈jQuery内部维护着一个jQuery对象栈。每个遍历方法
阅读全文
posted @
2013-10-25 11:59
【艾伦】
阅读(6388)
推荐(12) 编辑
jQuery 2.0.3 源码分析 数据缓存
摘要:历史背景:jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码带来的问题:没有一个系统的缓存机制,它把事件的回调都放到EventTarget之上,这会引发循环引用如果EventTarget是window对象,又会引发全局污染不同模块之间用不同缓存变量一般jQuery开发,我们都喜欢便捷式的把很多属性,比如状态标志都写到dom节点中,也就是HTMLElement好处:直观,便捷坏处:循环引用直接暴露数据,安全性?增加一堆的自定义属性标签,对浏览器来说是没意义的取数据的时候要对HTML节点做操作什么是内存泄露内存泄露是指
阅读全文
posted @
2013-10-22 08:42
【艾伦】
阅读(8874)
推荐(34) 编辑
jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)
摘要:Deferred的概念请看第一篇http://www.cnblogs.com/aaronjs/p/3348569.html******************构建Deferred对象时候的流程图************************************************源码解析**********************因为callback被剥离出去后,整个deferred就显得非常的精简jQuery.extend({ Deferred : function(){} when : function())}对于extend的继承这个东东,在之前就提及过j...
阅读全文
posted @
2013-10-09 08:20
【艾伦】
阅读(13265)
推荐(97) 编辑
jQuery 2.0.3 源码分析 Deferred概念
摘要:JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎。此时我们不能用if来实现逻辑分支,也不能用while/for/do来实现循环,更不用提异步操作之间的组合、错误处理以及取消操作了。因此也诞生了如jQuery Deferred这样的辅助类库举一个例子会有助于理解我做的是phonegap项目,所以涉及到的异步处理就别特多:1. 常见的setTimeout2. 与底层代码通信,调用.
阅读全文
posted @
2013-10-02 18:00
【艾伦】
阅读(11704)
推荐(23) 编辑
jQuery 2.0.3 源码分析 回调对象 - Callbacks
摘要:源码API:http://api.jquery.com/jQuery.Callbacks/jQuery.Callbacks()是在版本1.7中新加入的。它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列。那么jQuery.Callbacks使用场景在哪里?在很多时候需要控制一系列的函数顺序执行。那么一般就需要一个队列函数来处理这个问题我们看一段代码function Aaron(List, callback) { setTimeout(function() { var task = List.shift(); task(); //执行函数 ...
阅读全文
posted @
2013-09-27 15:29
【艾伦】
阅读(21099)
推荐(53) 编辑
试试看 ? 离奇古怪的javascript题目
摘要:来源地址:http://dmitrysoshnikov.com/ecmascript/the-quiz/#q1另一篇帖子 看看国外的javascript题目,你能全部做对吗?http://www.cnblogs.com/aaronjs/p/3172112.html答案都是自己总结的,毕竟是人肉解释器,解释不一定完全正确,如有不对欢迎大家指出!题目1. 结果是什么?typeof typeof(null)“undefined”SyntaxError“string”“object”TypeError答案"string"这个是10个中最简单的问题了typeof typeof 的结果
阅读全文
posted @
2013-09-26 10:17
【艾伦】
阅读(6046)
推荐(21) 编辑
jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询
摘要:为什么Sizzle很高效?首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理HTML文档一共有这么四个API:getElementById 上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+;getElementsByName,上下文只能是HTML文档浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+;getElementsByClassName浏览器支持情况:IE 9+, Firefox 3+, Safari4+
阅读全文
posted @
2013-09-24 21:41
【艾伦】
阅读(8258)
推荐(16) 编辑
jQuery 2.0.3 源码分析Sizzle引擎 - 超级匹配
摘要:声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!通过Expr.find[ type ]我们找出选择器最右边的最终seed种子合集通过Sizzle.compile函数编译器,我们把tokenize词法元素编译成闭包函数超级匹配superMatcher,用佳的方式从seed种子集合筛选出需要的数据也就是通过seed与compile的匹配,得出最终的结果了superMatcher 函数 这个方法并不是一个直接定义的方法,通过matcherFromGroupMatchers( elementMatchers, setMatchers )方法return出来的一个curry化的
阅读全文
posted @
2013-09-22 19:14
【艾伦】
阅读(6334)
推荐(37) 编辑
jQuery 2.0.3 源码分析Sizzle引擎 - 编译函数(大篇幅)
摘要:声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制网上基本没有资料细说这个东东的,sizzle引入这个实现主要的作用是分词的筛选,提高逐个匹配的效率我们不直接看代码的实现,通过简单的实现描述下原理:以下是个人的理解,如果有错误欢迎指出!Javascript有预编译与我们说的编译函数是不同的概念什么是JavaScript的“预编译”?function Aaron() { alert("hello");};Aaron(); //这里调用Aaron,输出world而不是hellofun
阅读全文
posted @
2013-09-15 16:08
【艾伦】
阅读(13146)
推荐(108) 编辑
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理
摘要:声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!先来回答博友的提问:如何解析div > p + div.aaron input[type="checkbox"]顺便在深入理解下解析的原理:HTML结构 Sizzle 选择器语句div > p + div.aaron input[type="checkbox"]组合后的意思大概就是:1. 选择父元素为 元素的所有子元素 元素2. 选择紧接在 元素之后的所有 并且class="aaron " 的所有元素3. 之后选择 div.aaron 元素内部的所有
阅读全文
posted @
2013-09-10 08:34
【艾伦】
阅读(12567)
推荐(35) 编辑
jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析
摘要:声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别,但也有一定规则。简单讲,通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建...
阅读全文
posted @
2013-09-05 11:58
【艾伦】
阅读(26717)
推荐(58) 编辑
jQuery 2.0.3 源码分析core - 选择器
摘要:声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手我们来分解一个表达式 // A simple way to check ...
阅读全文
posted @
2013-08-26 22:26
【艾伦】
阅读(43192)
推荐(81) 编辑
jQuery源码分析系列
摘要:声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://github.com/JsAaron/jQuery正在编写的书 -jQuery架构设计与实现本人在慕课网的教程...
阅读全文
posted @
2013-08-24 14:52
【艾伦】
阅读(197437)
推荐(254) 编辑
JSDeferred 源码分析
摘要:不经意看到了一个构思非常惊人的异步流程控制库,发出来分享下http://cho45.stfuawsc.com/jsdeferred/关于CommonJS Promises请看另一个异步库 http://www.cnblogs.com/aaronjs/p/3168588.html整个代码非常简洁,易用,不过呢是小日本写的东西…API手册:加载jsdeferred定义延迟对象。为方便起见,我们用Deferred.define()方法把接口导出到全局作用于中Deferred.define();通过这样做,你就能使用如 next(), loop(), call(), parallel() and wa
阅读全文
posted @
2013-08-09 09:13
【艾伦】
阅读(2576)
推荐(3) 编辑
前端MVVM框架avalon揭秘 - 双向绑定原理
摘要:avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念监控属性(Observables)和依赖跟踪(Dependency tracking)声明式绑定(Declarative bindings)模板(Templating)本章主要提到 监控属于 与 依赖跟踪(后改名叫计算属性)监控顾名思义,监听着你设定目标的变化,换句话说能够通知订阅者它的改变以及自动探测到相关的依赖。计算属性,就是依赖监控属性变化而自动调用处理更新KO的一个例子如果你已经有了监控属性firstName和lastName,你想显示全称怎么办? 这就需要用到依赖监控属性了 – 这些函数是一个
阅读全文
posted @
2013-08-02 08:18
【艾伦】
阅读(16687)
推荐(14) 编辑
前端MVVM框架avalon揭秘 - HTML编译器
摘要:MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离所以出现了一大堆自定义的声明式的语法:如:Avalon作用域绑定(ms-controller, ms-important)模板绑定(ms-include)数据填充(ms-text, ms-html)类名切换(ms-class, ms-hover, ms-active)事件绑定(ms-on,……)显示绑定(ms-visible)插入绑定(ms-if)双工绑定(ms-duplex,原来的ms-model)样式绑定(ms-css)数
阅读全文
posted @
2013-07-31 20:10
【艾伦】
阅读(10630)
推荐(9) 编辑
轻量级前端MVVM框架avalon源码分析-总结
摘要:距avalon0.7版本发布有一段时间,由于之前的稳定性,就停止一段时间更新,期间研究了下Knockout源码,也尝试写了一个小型的mvvm的实现模型,仅仅只是仿造ko的核心实现,把无关的东西给剥离掉了,有时间总结一下发布出来。ko算很早就出现的MVVM库了,实现是手段也是异常的巧妙,但是把监听的东西都转成函数表达,调用的时候也必须是函数形式,但使用习惯上,我就不太喜欢了Knockout监控属性通过observable内部转换成后,返回带有一个观察者模式的的函数(执行调用与赋值的时候都会有不同的处理),所以在使用的时候还要 this.firstName()执行才行,observable() 是
阅读全文
posted @
2013-07-27 11:05
【艾伦】
阅读(4139)
推荐(5) 编辑
JavaScript 中介者模式与观察者模式有何不同?
摘要:http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp感觉二者非常像,都是pub/sub机制,如何进行区分?分别在什么不同的场景中进行应用?在Obsever模式中, 不存在封装约束的单一对象。Observer 和 Subject 必须合作才能维持约束。Communication(通讯)模式由观察者和目标互联的方式决定:单一目标通常有很多观察者,有时一个目标的观察者是另一个观察者的目标Mediator 和 Observer 都能促进松耦合,然后Mediator 模式通过限制对象严格通过Mediator 进
阅读全文
posted @
2013-07-18 21:08
【艾伦】
阅读(5373)
推荐(2) 编辑