代码改变世界

随笔分类 -[06]JS/jQuery

新书《编写可测试的JavaScript代码 》出版,感谢支持

2015-02-02 09:00 by 汤姆大叔, 7425 阅读, 收藏, 编辑
本书介绍JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码。不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代码。从减少代码复杂性的方法,到单元测试、代码覆盖率、调试、以及自动化,您将全面学到如何编写让你和你同事...

《深入理解Bootstrap》勘误

2014-05-25 09:34 by 汤姆大叔, 9228 阅读, 收藏, 编辑
感谢大家感谢大家仔细阅读本书,并给本书指出了那么多的错误,下次重印时,一定会修正。勘误列表ID发行人章节原文更新文备注1剑衣清风(微博)1.5选择器(p7)[att$=value] 该属性的值必须包含特定值(而无论其位置怎么样)。[att*=value] 该属性的值必须以特定值结束 。[att$=v...

全球第一本基于Bootstrap V3.x的图书《深入理解Bootstrap》终于上市了,再次免费送书15本【活动结束】

2014-05-23 08:58 by 汤姆大叔, 33993 阅读, 收藏, 编辑
先说活动规则,再说书的事经过将近1年的努力,终于有了第一本自己独立编写的书:《深入理解Bootstrap》,基于最新版V 3.1 ,侧重于源码详解、架构分析、插件扩展(全新开发)实战。为了感谢大家以往依赖的支持,所以再次来个大放送,15个名额,具体活动内容和规则如下:活动1:博客园回帖送书规则:5月...

初中级Web开发人员的福音:《JavaScript启示录》上市了

2014-03-07 09:00 by 汤姆大叔, 16095 阅读, 收藏, 编辑
经历过14个月的等待,本书终于上市了,完全口语化叙述,请参考右边的链接。本书介绍本书无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。本书的写作目的也不是鉴别JavaScript语言特点的好坏。本书并不是一本完整的参考指南。它面向的读者人群并不是编程新手或对JavaS...

新书《JavaScript设计模式 》出版,感谢支持

2013-06-14 09:58 by 汤姆大叔, 13554 阅读, 收藏, 编辑
小记这本书的出版得益于人民邮电出版社陈冀康编辑的推荐,加上之前博客又翻译了一些原作者的文字,所以就承担了该书的翻译工作,不同于博客的是,由于设计模式本身就难以表达,加上英文版有很多错误(评价不佳),原本年初就可以出版的书,一直等到5月份原作者更新最完善版本以后,前后进行了5次译稿校对,才得以出版,再次感谢作为专业翻译媳妇的帮忙和编辑的耐心。本书介绍设计模式是解决软件设计中常见问题的可复用方案。学习任何编程语言,设计模式都是一个令人兴奋和极具吸引力的话题。本书是JavaScript编程设计模式的学习指南。全书分为14章。首先介绍了什么是模式、模式的结构、类别、模式的分类、如何编写模式等等;然后,

《JavaScript编程精解》回馈网友,汤姆大叔送书30本

2012-10-22 09:37 by 汤姆大叔, 33964 阅读, 收藏, 编辑
前言在博客园网友的大力支持下,大叔第一本翻译的书《JavaScript编程精解》终于出版了。第一次阅读这本书的时候,就深深地喜欢上了本书的写作风格。游戏式的章节,完整且连贯的故事,使我在阅读过程中真正有了读书的快感。不同于其他的JavaScript书籍,本书没有列表式的数据类型讲解,也没有枯燥的概念和老掉牙的例子,更没有流行的Ajax专题;本书通过设计一个个由浅入深的小游戏,让读者更加深入而轻松地学习如何应用JavaScript编程技术。因此,建议读者在阅读过程中,每次都进行一个完整章节的阅读,以便更好地理解编程故事的情节。翻译过程中,除了对JavaScript语言本身有了深刻理解之外,从这本

《JavaScript编程精解》勘误

2012-10-21 21:21 by 汤姆大叔, 8408 阅读, 收藏, 编辑
感谢所有提供本书错误的网友。ID页码勘误内容致谢网友169replacce应为replacemyunlessor287var pushX = bind(testArray.push, testArray); 修改为var pushX = bind(x.push, x);myunlessor395代码中else if 缩进格式有误 myunlessor4162第一段后半句:如果传入了第三个参数(回调函数)可以在其中处理非200状态码的错误状况 myunlessor56789

深入理解JavaScript系列(结局篇)

2012-07-26 08:54 by 汤姆大叔, 35952 阅读, 收藏, 编辑
介绍最近几个月忙得实在是不可开交,终于把《深入理解JavaScript系列》的最后两篇“补全”了,所谓的全是不准确的,因为很多内容都没有写呢,比如高性能、Ajax安全、DOM详解、JavaScript架构等等。但因为经历所限,加上大叔希望接下来写点其它东西,所以此篇文字就暂且当前完结篇的总结吧,以后有时间的话,可以继续加上一些未涉及的专题内容。网络文章来源本系列文章参考了大量的互联网网站,在此向各位网站拥有者、博主、提到的以及未提到的作者们说一声:多谢感谢了。本系列文章主要参考了如下站点:五大原则:http://freshbrewedcode.com/derekgreerECMAScript2

深入理解JavaScript系列(50):Function模式(下篇)

2012-07-24 09:07 by 汤姆大叔, 21149 阅读, 收藏, 编辑
介绍本篇我们介绍的一些模式称为初始化模式和性能模式,主要是用在初始化以及提高性能方面,一些模式之前已经提到过,这里只是做一下总结。立即执行的函数在本系列第4篇的《立即调用的函数表达式》中,我们已经对类似的函数进行过详细的描述,这里我们只是再举两个简单的例子做一下总结。// 声明完函数以后,立即执行该函数(function () { console.log('watch out!');} ());//这种方式声明的函数,也可以立即执行!function () { console.log('watch out!');} ();// 如下方式也都可以哦~functio

深入理解JavaScript系列(49):Function模式(上篇)

2012-07-23 11:43 by 汤姆大叔, 21372 阅读, 收藏, 编辑
介绍本篇主要是介绍Function方面使用的一些技巧(上篇),利用Function特性可以编写出很多非常有意思的代码,本篇主要包括:回调模式、配置对象、返回函数、分布程序、柯里化(Currying)。回调函数在JavaScript中,当一个函数A作为另外一个函数B的其中一个参数时,则函数A称为回调函数,即A可以在函数B的周期内执行(开始、中间、结束时均可)。举例来说,有一个函数用于生成nodevar complexComputation = function () { /* 内部处理,并返回一个node*/};有一个findNodes函数声明用于查找所有的节点,然后通过callback回调进行

深入理解JavaScript系列(48):对象创建模式(下篇)

2012-04-26 08:46 by 汤姆大叔, 12779 阅读, 收藏, 编辑
介绍本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。模式6:函数语法糖函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性,代码比较简单,我们先来看一下实现代码:if (typeof Function.prototype.method !== "function") { Function.prototype.method = function (name, implementation) { this.prototype[name] = implementation; r...

深入理解JavaScript系列(47):对象创建模式(上篇)

2012-04-25 08:49 by 汤姆大叔, 14494 阅读, 收藏, 编辑
介绍本篇主要是介绍创建对象方面的模式,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。模式1:命名空间(namespace)命名空间可以减少全局命名所需的数量,避免命名冲突或过度。一般我们在进行对象层级定义的时候,经常是这样的:var app = app || {};app.moduleA = app.moduleA || {};app.moduleA.subModule = app.moduleA.subModule || {};app.moduleA.subModule.MethodA = function () { console.log("print A&quo

深入理解JavaScript系列(46):代码复用模式(推荐篇)

2012-04-24 08:38 by 汤姆大叔, 18017 阅读, 收藏, 编辑
介绍本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用。模式1:原型继承原型继承是让父对象作为子对象的原型,从而达到继承的目的:function object(o) { function F() { } F.prototype = o; return new F();}// 要继承的父对象var parent = { name: "Papa"};// 新对象var child = object(parent);// 测试console.log(child.name); // "Papa"// 父构造函数function Person()

深入理解JavaScript系列(45):代码复用模式(避免篇)

2012-04-23 08:02 by 汤姆大叔, 14060 阅读, 收藏, 编辑
介绍任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量避免使用这些模式,因为或多或少有带来一些问题;第二排是推荐篇,指的是推荐大家使用的模式,一般不会有什么问题。模式1:默认模式代码复用大家常用的默认模式,往往是有问题的,该模式使用Parent()的构造函数创建一个对象,并且将该对象赋值给Child()的原型。我们看一下代码:function inherit(C, P) { C.prototype = new P();}// 父构造函数funct...

深入理解JavaScript系列(44):设计模式之桥接模式

2012-04-19 07:08 by 汤姆大叔, 12176 阅读, 收藏, 编辑
介绍桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化。正文桥接模式最常用在事件监控上,先看一段代码:addEvent(element, 'click', getBeerById);function getBeerById(e) {var id = this.id;asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {// Callback response.console.log('Requested Beer: ' + resp.respon

深入理解JavaScript系列(43):设计模式之状态模式

2012-04-18 06:56 by 汤姆大叔, 11871 阅读, 收藏, 编辑
介绍状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。正文举个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadyState)、下载状态(DownloadingState)、暂停状态(DownloadPausedState)、下载完毕状态(DownloadedState)、失败状态(DownloadFailedState),也就是说在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿。由于State模式描述了下载(Download)如何在每一种状态下表现出不同的行为。这一模式的关键思想就是引入了一个叫做

深入理解JavaScript系列(42):设计模式之原型模式

2012-04-16 09:11 by 汤姆大叔, 11582 阅读, 收藏, 编辑
介绍原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象。正文对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是创建的一个对象作为另外一个对象的prototype属性值。原型对象本身就是有效地利用了每个构造器创建的对象,例如,如果一个构造函数的原型包含了一个name属性(见后面的例子),那通过这个构造函数创建的对象都会有这个属性。在现有的文献里查看原型模式的定义,没有针对JavaScript的,你可能发现很多讲解的都是关于类的,但是现实情况是基于原型继承的JavaScript完全避免了类(class)的概念。我们

深入理解JavaScript系列(41):设计模式之模板方法

2012-04-13 09:04 by 汤姆大叔, 8796 阅读, 收藏, 编辑
介绍模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。模板方法是一种代码复用的基本技术,在类库中尤为重要,因为他们提取了类库中的公共行为。模板方法导致一种反向的控制结构,这种结构就是传说中的“好莱坞法则”,即“别找找我们,我们找你”,这指的是父类调用一个类的操作,而不是相反。具体体现是面向对象编程编程语言里的抽象类(以及其中的抽象方法),以及继承该抽象类(和抽象方法)的子类。正文举个例子,泡茶和泡咖啡有同样的步骤,比如烧开水(boilWater)、冲泡(brew)、倒在杯子里(

深入理解JavaScript系列(40):设计模式之组合模式

2012-04-12 08:35 by 汤姆大叔, 10789 阅读, 收藏, 编辑
介绍组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。常见的场景有asp.net里的控件机制(即control里可以包含子control,可以递归操作、添加、删除子control),类似的还有DOM的机制,一个DOM节点可以包含子节点,不管是父节点还是子节点都有添加、删除、遍历子节点的通用功能。所以说组合模式的关键是要有一个抽象类,它既可以表示子元素,又可以表示父元素。正文举个例子,有家餐厅提供了各种各样的菜品,每个餐桌都有一本菜单,菜单上列出了该餐厅所偶的菜品,有早餐糕点、午餐、晚餐等等,每个餐都有各种各样

深入理解JavaScript系列(39):设计模式之适配器模式

2012-04-11 09:16 by 汤姆大叔, 11369 阅读, 收藏, 编辑
介绍适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。速成包装器(wrapper)。正文我们来举一个例子,鸭子(Dock)有飞(fly)和嘎嘎叫(quack)的行为,而火鸡虽然也有飞(fly)的行为,但是其叫声是咯咯的(gobble)。如果你非要火鸡也要实现嘎嘎叫(quack)这个动作,那我们可以复用鸭子的quack方法,但是具体的叫还应该是咯咯的,此时,我们就可以创建一个火鸡的适配器,以便让火鸡也支持quack方法,其内部还是要调用gobble。OK,我们开

深入理解JavaScript系列(38):设计模式之职责链模式

2012-04-10 08:55 by 汤姆大叔, 9992 阅读, 收藏, 编辑
介绍职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止。也就是说,请求以后,从第一个对象开始,链中收到请求的对象要么亲自处理它,要么转发给链中的下一个候选者。提交请求的对象并不明确知道哪一个对象将会处理它——也就是该请求有一个隐式的接受者(implicit receiver)。根据运行时刻,任一候选者都可以响应相应的请求,候选者的数目是任意的,你可以在运行时刻决定哪些候选者参与到链中。正文对于JavaScript实现,我们可以利用其原型特性来

深入理解JavaScript系列(37):设计模式之享元模式

2012-04-09 08:46 by 汤姆大叔, 12636 阅读, 收藏, 编辑
介绍享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类)。享元模式可以避免大量非常相似类的开销,在程序设计中,有时需要生产大量细粒度的类实例来表示数据,如果能发现这些实例除了几个参数以外,开销基本相同的 话,就可以大幅度较少需要实例化的类的数量。如果能把那些参数移动到类实例的外面,在方法调用的时候将他们传递进来,就可以通过共享大幅度第减少单个实例 的数目。那么如果在JavaScript中应用享元模式呢?有两种方式,第一种是应用在数据层上,主要是应用在内存里大量相似的对象上;第二种是应用在DOM层上,享元

深入理解JavaScript系列(36):设计模式之中介者模式

2012-03-13 09:08 by 汤姆大叔, 11872 阅读, 收藏, 编辑
介绍中介者模式(Mediator),用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。主要内容来自:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript正文软件开发中,中介者是一个行为设计模式,通过提供一个统一的接口让系统的不同部分进行通信。一般,如果系统有很多子模块需要直接沟通,都要创建一个中央控制点让其各模块通过该中央控制点进行交互。中介者模式可以让这些子模块不需要直接沟通,而达到进

深入理解JavaScript系列(35):设计模式之迭代器模式

2012-03-09 08:46 by 汤姆大叔, 10252 阅读, 收藏, 编辑
介绍迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。迭代器的几个特点是:访问一个聚合对象的内容而无需暴露它的内部表示。为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。遍历的同时更改迭代器所在的集合结构可能会导致问题(比如C#的foreach里不允许修改item)。正文一般的迭代,我们至少要有2个方法,hasNext()和Next(),这样才做做到遍历所有对象,我们先给出一个例子:var agg = (function () { var index = 0, data = [1, 2, 3, 4,...

深入理解JavaScript系列(34):设计模式之命令模式

2012-03-08 09:13 by 汤姆大叔, 11079 阅读, 收藏, 编辑
介绍命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或者记录请求日志,以及执行可撤销的操作。也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理。此外,可以通过调用实现具体函数的对象来解耦命令对象与接收对象。正文我们来通过车辆购买程序来展示这个模式,首先定义车辆购买的具体操作类:$(function () { var CarManager = { // 请求信息 requestInfo: function (model, id) { ...

深入理解JavaScript系列(33):设计模式之策略模式

2012-03-05 09:22 by 汤姆大叔, 15521 阅读, 收藏, 编辑
介绍策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户。正文在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都是按照swith语句来判断,但是这就带来几个问题,首先如果增加需求的话,我们还要再次修改这段代码以增加逻辑,而且在进行单元测试的时候也会越来越复杂,代码如下: validator = { validate: function (value, type) { switch (type) { ca...

深入理解JavaScript系列(32):设计模式之观察者模式

2012-03-02 08:43 by 汤姆大叔, 53877 阅读, 收藏, 编辑
介绍观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。使用观察者模式的好处:支持简单的广播通信,自动通知所有已经订阅过的对象。页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。正文(版本一)JS里对观察者模式的实现是通过回调来实现的,我们来先定义一个pubsub对象,其内部包含了3个方法:订阅、退订、发布。var pubsub = {};(function (q)

深入理解JavaScript系列(31):设计模式之代理模式

2012-02-29 09:03 by 汤姆大叔, 17687 阅读, 收藏, 编辑
介绍代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下:代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。正文我们来举一个简单的例子,假如dudu要送酸奶小妹玫瑰花,却不知道她的联系方式或者不好意思,想委托大叔去送这些玫瑰,那大叔就是个代理(其实挺好的,可以扣几朵给媳妇),那我们如何来做呢?// 先声明美女对象var girl = function (name) { this.name = name;};// 这是duduvar dudu = f...

深入理解JavaScript系列(30):设计模式之外观模式

2012-02-28 08:55 by 汤姆大叔, 11180 阅读, 收藏, 编辑
介绍外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用。正文外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备,它可以将一些复杂操作封装起来,并创建一个简单的接口用于调用。外观模式经常被用于JavaScript类库里,通过它封装一些接口用于兼容多浏览器,外观模式可以让我们间接调用子系统,从而避免因直接访问子系统而产生不必要的错误。外观模式的优势是易于使用,而且本身也比较轻量级。但也有缺点 外观模式被开发者连续使用时会产生一定的性能问题,因为在每次调用时都要检测功能的可用性。下面是一

深入理解JavaScript系列(29):设计模式之装饰者模式

2012-02-24 08:59 by 汤姆大叔, 16570 阅读, 收藏, 编辑
介绍装饰者提供比继承更有弹性的替代方案。 装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数)。装饰者用于通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。正文那么装饰者模式有什么好处呢?前面说了,装饰者是一种实现继承的替代方案。当脚本运行时,在子类中增加行为会影响原有类所有的实例,而装饰者却不然。取而代之的是它能给不同对象各自添加新行为。如下代码所示://需要装饰的类(函数)function Macbook() { this.cost = function () { ...

深入理解JavaScript系列(28):设计模式之工厂模式

2012-02-23 08:31 by 汤姆大叔, 30282 阅读, 收藏, 编辑
介绍与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。正文下面这个例子中,是应用了工厂方法对第26章构造函数模式代码的改进版本:var Car = (function () { var Car = function (model, year, mile...

深入理解JavaScript系列(27):设计模式之建造者模式

2012-02-22 10:01 by 汤姆大叔, 14411 阅读, 收藏, 编辑
介绍在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成;由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定。如何应对这种变化?如何提供一种“封装机制”来隔离出“复杂对象的各个部分”的变化,从而保持系统中的“稳定构建算法”不随着需求改变而改变?这就是要说的建造者模式。建造者模式可以将一个复杂对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了。正文这个模式相对来说比较简单,先上代码

深入理解JavaScript系列(26):设计模式之构造函数模式

2012-02-21 08:59 by 汤姆大叔, 24331 阅读, 收藏, 编辑
介绍构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的。构造函数用于创建特定类型的对象——不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。基本用法在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。通过new关键字来调用定义的否早函数,你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部,this关键字引用的是新创建的对象。基本用法如下:func

深入理解JavaScript系列(25):设计模式之单例模式

2012-02-20 08:39 by 汤姆大叔, 67728 阅读, 收藏, 编辑
介绍从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现。OK,正式开始。在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。正文在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法:var mySingleton = { ...

深入理解JavaScript系列(24):JavaScript与DOM(下)

2012-02-17 09:58 by 汤姆大叔, 16916 阅读, 收藏, 编辑
介绍上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点。本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型。本文参考:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/操作元素上一章节我们提到了DOM节点集合或单个节点的访问步骤,每个DOM节点都包括一个属性集合,大多数的属性都提供为相应的功能提供了抽象。例如,如果有一个带有ID属性intro的文本元素,你可以很容易地通过DOM API来改变该元素的颜色:document.getE

大叔手记(20):ASP.NET MVC中使用jQuery时的浏览器缓存问题

2012-02-16 14:49 by 汤姆大叔, 8713 阅读, 收藏, 编辑
介绍尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议。首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action)。如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存。许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵)。缓存解释jQuery全局对象里的ajax方法提供了一些options来支持缓存和Conditional GETs功能。$.ajax({ ifM...

深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手

2012-02-16 08:56 by 汤姆大叔, 32193 阅读, 收藏, 编辑
文档对象模型Document Object ModelDOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体,因为Javascript通常都是用来进行DOM操作和交互的。主要内容来自:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/关于DOM,有些知识需要注意:1. window对象作为全局对象,也就是说你可以通过window来访问全局对象。属性在对象下

深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP

2012-02-15 09:12 by 汤姆大叔, 9641 阅读, 收藏, 编辑
前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第5篇,依赖倒置原则LSP(TheDependency Inversion Principle )。英文原文:http://freshbrewedcode.com/derekgreer/2012/01/22/solid-javascript-the-dependency-inversion-principle/依赖倒置原则依赖倒置原则的描述是:A. High-level modules should not depend on low-level modules. Both should depend on abs.

深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP

2012-02-14 10:49 by 汤姆大叔, 10960 阅读, 收藏, 编辑
前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第4篇,接口隔离原则ISP(The Interface Segregation Principle)。英文原文:http://freshbrewedcode.com/derekgreer/2012/01/08/solid-javascript-the-interface-segregation-principle/注:这篇文章作者写得比较绕口,所以大叔理解得也比较郁闷,凑合着看吧,别深陷进去了接口隔离原则的描述是:Clients should not be forced to depend on methods th

深入理解JavaScript系列(20):《你真懂JavaScript吗?》答案详解

2012-02-10 08:54 by 汤姆大叔, 41373 阅读, 收藏, 编辑
介绍昨天发的《大叔手记(19):你真懂JavaScript吗?》里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了。今天我们来对这5个题目详细分析一下,希望对大家有所帮助。注:问题来自大名鼎鼎的前端架构师Baranovskiy的帖子《So, you think you know JavaScript?》。答案也是来自大名鼎鼎的JS牛人Nicholas C. Zakas的帖子《Answering Baranovskiy’s JavaScript quiz》——《JavaScript高级程序设计》一书的原作者(但题目2的解释貌似有点问题)OK,我们先看第一题题目1if (!(&qu

大叔手记(19):你真懂JavaScript吗?

2012-02-09 09:45 by 汤姆大叔, 18638 阅读, 收藏, 编辑
介绍大叔整理的《深入理解JavaScript系列》已经快20篇了,不知道大家看的如何了? 除了大家熟知的闭包、原型、作用域以外,不知道大家是否真正理解了JavaScript的核心特性,在网上发现几个小题目非常有意思,正好适合考察大家对JavaScript的理解。如果大家有兴趣(或者自认为对JavaScript了解还不错的人),可以尝试着回答一下下面5个题目的输出结果(不要google或baidu哦)。至于正确结果嘛,自己可以将代码复制到浏览器里就可以看到了(稍后这两天,我会将详细的解释单独发帖整理出来)。PS:大胆点,不管结果对不对,都把你的答案贴出来(最好带有自己的想法,后面我们和准确解释做

深入理解JavaScript系列(19):求值策略(Evaluation strategy)

2012-02-08 09:50 by 汤姆大叔, 16011 阅读, 收藏, 编辑
介绍本章,我们将讲解在ECMAScript向函数function传递参数的策略。计算机科学里对这种策略一般称为“evaluation strategy”(大叔注:有的人说翻译成求值策略,有的人翻译成赋值策略,通看下面的内容,我觉得称为赋值策略更为恰当,anyway,标题还是写成大家容易理解的求值策略吧),例如在编程语言为求值或者计算表达式设置规则。向函数传递参数的策略是一个特殊的case。http://dmitrysoshnikov.com/ecmascript/chapter-8-evaluation-strategy/写这篇文章的原因是因为论坛上有人要求准确解释一些传参的策略,我们这里给出

深入理解JavaScript系列(18):面向对象编程之ECMAScript实现(推荐)

2012-02-06 09:27 by 汤姆大叔, 19303 阅读, 收藏, 编辑
介绍本章是关于ECMAScript面向对象实现的第2篇,第1篇我们讨论的是概论和CEMAScript的比较,如果你还没有读第1篇,在进行本章之前,我强烈建议你先读一下第1篇,因为本篇实在太长了(35页)。英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/注:由于篇幅太长了,难免出现错误,时刻保持修正中。在概论里,我们延伸到了ECMAScript,现在,当我们知道它OOP实现时,我们再来准确定义一下:ECMAScript is an object-oriented progra

深入理解JavaScript系列(17):面向对象编程之概论

2012-02-03 09:05 by 汤姆大叔, 24841 阅读, 收藏, 编辑
介绍在本篇文章,我们考虑在ECMAScript中的面向对象编程的各个方面(虽然以前在许多文章中已经讨论过这个话题)。我们将更多地从理论方面看这些问题。 特别是,我们会考虑对象的创建算法,对象(包括基本关系 - 继承)之间的关系是如何,也可以在讨论中使用(我希望将消除之前对于JavaScript中OOP的一些概念歧义)。英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/概论、范式与思想在进行ECMAScript中的OOP技术分析之前,我们有必要掌握一些OOP基本的特征,并澄清概论中的主要概念。ECM

深入理解JavaScript系列(16):闭包(Closures)

2012-01-31 08:44 by 汤姆大叔, 43919 阅读, 收藏, 编辑
介绍本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包(closure)。闭包其实大家都已经谈烂了。尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭包内部究竟是如何工作的。正如在前面的文章中提到的,这些文章都是系列文章,相互之间都是有关联的。因此,为了更好的理解本文要介绍的内容,建议先去阅读第14章作用域链和第12章变量对象。英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/概论在直接讨论ECMAScript闭包之前,还是有必要来看一下函数式编程中一些基本定义。众所周知,

深入理解JavaScript系列(15):函数(Functions)

2012-01-30 08:37 by 汤姆大叔, 29931 阅读, 收藏, 编辑
介绍本章节我们要着重介绍的是一个非常常见的ECMAScript对象——函数(function),我们将详细讲解一下各种类型的函数是如何影响上下文的变量对象以及每个函数的作用域链都包含什么,以及回答诸如像下面这样的问题:下面声明的函数有什么区别么?(如果有,区别是什么)。原文:http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/var foo = function () { ...};平时的惯用方式:function foo() { ...}或者,下面的函数为什么要用括号括住?(function () { ...})();关于...

深入理解JavaScript系列(13):This? Yes,this!

2012-01-17 08:50 by 汤姆大叔, 37385 阅读, 收藏, 编辑
介绍在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题。许多程序员习惯的认为,在程序语言中,this关键字与面向对象程序开发紧密相关,其完全指向由构造器新创建的对象。在ECMAScript规范中也是这样实现的,但正如我们将看到那样,在ECMAScript中,this并不限于只用来指向新创建的对象。英文翻译: Dmitry A. Soshnikov在Stoyan Stefanov的帮助下发布: 2010-03-07http://dmitrysoshnikov.com/ecmascript/c

深入理解JavaScript系列(12):变量对象(Variable Object)

2012-01-16 09:03 by 汤姆大叔, 44144 阅读, 收藏, 编辑
介绍JavaScript编程的时候总避免不了声明函数和变量,以成功构建我们的系统,但是解释器是如何并且在什么地方去查找这些函数和变量呢?我们引用这些对象的时候究竟发生了什么?原始发布:Dmitry A. Soshnikov发布时间:2009-06-27俄文地址:http://dmitrysoshnikov.com/ecmascript/ru-chapter-2-variable-object/英文翻译:Dmitry A. Soshnikov发布时间:2010-03-15英文地址:http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-o

深入理解JavaScript系列(11):执行上下文(Execution Contexts)

2012-01-13 09:00 by 汤姆大叔, 34160 阅读, 收藏, 编辑
简介从本章开始,我将陆续(翻译、转载、整理)http://dmitrysoshnikov.com/网站关于ECMAScript标标准理解的好文。本章我们要讲解的是ECMAScript标准里的执行上下文和相关可执行代码的各种类型。原始作者:Dmitry A. Soshnikov原始发布: 2009-06-26俄文原文:http://dmitrysoshnikov.com/ecmascript/ru-chapter-1-execution-contexts/英文翻译:Dmitry A. Soshnikov.发布时间:2010-03-11英文翻译:http://dmitrysoshnikov.com

深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇)

2012-01-12 09:01 by 汤姆大叔, 74145 阅读, 收藏, 编辑
本篇是ECMA-262-3 in detail系列的一个概述(本人后续会翻译整理这些文章到本系列(第11-19章)。每个章节都有一个更详细的内容链接,你可以继续读一下每个章节对应的详细内容链接进行更深入的了解。适合的读者:有经验的开发员,专业前端人员。原作者: Dmitry A. Soshnikov发布时间: 2010-09-02原文:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/参考1:http://ued.ctrip.com/blog/?p=2795参考2:http://www.cnblogs.com/ifishing/

深入理解JavaScript系列(9):根本没有“JSON对象”这回事!

2012-01-11 09:08 by 汤姆大叔, 39341 阅读, 收藏, 编辑
前言写这篇文章的目的是经常看到开发人员说:把字符串转化为JSON对象,把JSON对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢。正文本文的主题是基于ECMAScript262-3来写的,2011年的262-5新规范增加了JSON对象,和我们平时所说的JSON有关系,但是不是同一个东西,文章最后一节会讲到新增加的JSON对象。英文原文:http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/我想给大家澄清一下一个非常普遍的误解,我认为很多JavaScript

深入理解JavaScript系列(8):S.O.L.I.D五大原则之里氏替换原则LSP

2012-01-10 08:56 by 汤姆大叔, 16671 阅读, 收藏, 编辑
前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第3篇,里氏替换原则LSP(TheLiskov Substitution Principle )。英文原文:http://freshbrewedcode.com/derekgreer/2011/12/31/solid-javascript-the-liskov-substitution-principle/开闭原则的描述是:Subtypes must be substitutable for their base types.派生类型必须可以替换它的基类型。 在面向对象编程里,继承提供了一个机制让子类和共享基类的代码

深入理解JavaScript系列(7):S.O.L.I.D五大原则之开闭原则OCP

2012-01-09 09:08 by 汤姆大叔, 20924 阅读, 收藏, 编辑
前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第2篇,开闭原则OCP(The Open/Closed Principle )。开闭原则的描述是:Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.软件实体(类,模块,方法等等)应当对扩展开放,对修改关闭,即软件实体应当在不修改的前提下扩展。open for extension(对扩展开放)的意思是说当新需求出现的时候,可以通过扩展现有模型达到目的

深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP

2012-01-06 09:13 by 汤姆大叔, 35653 阅读, 收藏, 编辑
前言Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是:The Single Responsibility Principle(单一职责SRP)The Open/Closed Principle(开闭原则OCP)The Liskov Substitution Principle(里氏替换原则LSP)The Interface Segregation Principle(接口分离原则ISP)The Dependency Inversion Principle(依赖反转原则DIP)五大原则,我相信在博客园已经被讨论烂了,尤其是C#的实现,但是相对于Java

深入理解JavaScript系列(5):强大的原型和原型链

2012-01-05 09:12 by 汤姆大叔, 107311 阅读, 收藏, 编辑
前言JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多。由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链。原型10年前,我刚学习JavaScript的时候,一般都是用如下方式来写代码: var decimalDigits = 2, tax ...

大叔手记(17):大叔2011年读过的书及2012年即将要读的书

2012-01-04 09:39 by 汤姆大叔, 25877 阅读, 收藏, 编辑
前言2011年是大叔最累的一年(基本上都是晚上12点以后睡觉,早上6点30分起),读得书也是异常的多,一方面要保持自己的技术在最前列,另外方面技术管理和项目管理方面的东西也要进一步进阶,2011年读过的书超过60本(也包括只收藏不读的书,还有一些非常小的英文电子书就不列了),除了一些大牛的书,其它的书基本上都是粗读的(一周一本),同时2012年的书也是按照这个计划来安排的,即:国际/国内大牛的书通读,一般的书粗读,以保证技术人员和管理人员的先进性:)。带 [荐]字的都是推荐大家读的。看了这篇帖子,大家千万别像我这么变态地读书,因为大叔已经不怎么亲自Coding了,所有以大量的时间读书。大叔在这

深入理解JavaScript系列(4):立即调用的函数表达式

2011-12-31 09:45 by 汤姆大叔, 101046 阅读, 收藏, 编辑
前言大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行。在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为“自执行”,但作者后面说了很多,来说服大家称呼为“立即调用的函数表达式”。本文英文原文地址:http://benalman.com/news/2010/11/immediately-invoked-function-expression/什么是自执行?在JavaScript里,

深入理解JavaScript系列(3):全面解析Module模式

2011-12-30 09:52 by 汤姆大叔, 88771 阅读, 收藏, 编辑
简介Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式。首先我们来看看Module模式的基本特征:模块化,可重用封装了变量和function,和全局的namaspace不接触,松耦合只暴露可用public的方法,其它私有方法全部隐藏关于Module模式,最早是由YUI的成员Eric Miraglia在4年前提出了这个概念,我们将从一个简单的例子来解释一下基本的用法(如果你已经非常熟悉了,请忽略这一节)。基本用法先看一下最简单的一个实现,代码如下:var Calculator = function (eq) {

深入理解JavaScript系列(2):揭秘命名函数表达式

2011-12-29 09:02 by 汤姆大叔, 99513 阅读, 收藏, 编辑
前言网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点。简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你就会发现其实是不切实际的。当然,如果你不关注调试,那就没什么可担心的了,否则,如果你想了解兼容性方面的东西的话,你还是应该继续往下看看。我们先开始看看,什么叫函数表达式,然后再说一下现代调试器如何处理这些表达式,如果你已经对这方面很熟悉的话,请直接跳过此小节。函数表达式和函数声明在EC

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

2011-12-28 23:00 by 汤姆大叔, 189022 阅读, 收藏, 编辑
才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情。具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多。此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档、执行同行评审以及运行JSLint。这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的。书

大叔手记(7):构建自己的JavaScript模板小引擎

2011-12-15 19:35 by 汤姆大叔, 9504 阅读, 收藏, 编辑
有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。首先我们先来定义我们需要的模板,在id为template的script块里:<!doctype html><html><head> <meta charset=utf-8> <title>Simple Templating</title></head><body> <div cla

深入理解JavaScript系列

2011-12-15 10:02 by 汤姆大叔, 487457 阅读, 收藏, 编辑
深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力。深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点深入理解JavaScript系列(2):揭秘命名函数表达式深入理解JavaScript系列(3):全面解析Module模式深入理解JavaScript系列(4):立即调用的函数表达式深入理解JavaScript系列(5):强大的原型和原型链深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP深入理解JavaScript系列(7):S.O.L.I.D五大原则

大叔手记(5):使用QUnit结合MVC3来做JavaScript单元测试

2011-12-14 19:35 by 汤姆大叔, 3740 阅读, 收藏, 编辑
关于QUnit几乎所有的网站都在使用JavaScript,而所有的Javascript开发人员也都想做单元测试,但是一直都为付诸行动,大叔告诫大家,该做了,不然要被别人鄙视了,因为现在是个上网的人都应该用到了JavaScript,而且HTML5来临以后,越来越多的JavaScript代码要去开发。本文所用到的QUnit是由jQuery team开发的,原本是用于jQuery框架的测试,后来独立发展出来,可以测试任意JavaScript代码,而且提供了非常简单的API让你非常简单的来创建你的Test Case。先上个简单的代码:// calculator.jsvar Calculator = f

大型JavaScript应用程序架构模式

2011-12-14 09:06 by 汤姆大叔, 36598 阅读, 收藏, 编辑
11月中旬在伦敦举行的jQuery Summit顶级大会上有个session讲的是大型JavaScript应用程序架构,看完PPT以后觉得甚是不错,于是整理一下发给大家共勉。PDF版的PPT下载地址:http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture注:在整理的过程中,发现作者有些思想是返来复去地说,所以删减了一部分,如果你的英文良好,请直接阅读英文的PPT。以下是本文的主要章节:1. 什么叫“JavaScript大型程序”?2. 顾当前的程序架构3.

大叔手记(4):jQuery自定义绑定的魔法升级版

2011-12-13 20:28 by 汤姆大叔, 6971 阅读, 收藏, 编辑
jQuery自定义绑定首先让我们来看看jQuery的自定义绑定的使用方法,你可以使用bind或者live来订阅一个事件(当然1.7以后也可以使用on了),代码如下:$("#myElement").bind('customEventName',function(e){ ... });$(".elementsClass").live('customEventName',function(e){ ... });然后通过如下方式来触发事件:$("#myelement").trigger('customE

用Javascript评估用户输入密码的强度(Knockout版)

2011-11-27 10:40 by 汤姆大叔, 13894 阅读, 收藏, 编辑
使用Knockout JavaScript类库实现密码强度的功能(非常简单)