摘要：背景因为JS没有提供“字符串插入”和“多行字符串”特性，传统的拼凑字符串容易出错、性能不高和不容易理解代码，为了应对这些问题，很多个人和团队开发了模板引擎，现在主流的JS框架几乎都提供此类功能了。模板引擎的实现方式有很多种，此处介绍一种简单、灵活和强大的思路，该方式借鉴了 JSP（web 服务器最终... 阅读全文

摘要：背景自从NodeJs出来以后，异步编程便更加系统化和框架话了，为了应对异步编程框架带来的深层嵌套问题，社区也出现了异步流程编程框架，本文主要对异步流程框架做一个简单的解析。现配代码了 1 var Asy = function () { 2 }; 3 4 Asy.start = function (... 阅读全文

摘要：背景2008 第一次使用 AJAX 的时候好像使用的是 AJAX.NET，该组件支持为服务器 C# 类型提供 JS 代理，当时不是十分的明白。设计模式中有代理模式，不过真正需要我们手工写代理的次数却不多，多数的代理都是动态是生成的，即：动态代理，动态代理的一种应用场景就是：远程代理，本文演示一下 JS 如何实现远程代理的。远程代理远程代理的本质是根据元数据自动生成代理类型，就 JS 来说，我们有两种思路生成远程代理：服务器根据元数据生成代理。服务器提供元数据，JS 根据元数据生成代理。这里给出第一种方案的简单实现：代理生成器 1 using System; 2 using System.Col 阅读全文

摘要：背景Javascript 的 this 是我的心病，多数情况下知道其运行结果，个别变态的场景下，就给不出解释了，昨天一次偶然的机遇让我有兴趣尝试看一看 Javascript 语言规范，一看就悟了。偶然的机遇就是一篇文章：http://www.cnblogs.com/aaronjs/p/3339107.html，这篇文章中关于 this 的部分我错了1/4。this待分析程序 1 var x = 10; 2 var foo = { 3 x: 20, 4 bar: function () { 5 var x = 30; 6 return this.x... 阅读全文

摘要：背景Javascript是单线程事件驱动的，所有能看到的Javascript代码都是在一个线程执行，定时器回调和AJAX回调会在适当的时刻插入队列等待Javascript线程调度执行，今天想测试一下DOM渲染的线程与时机，具体的问题是：修改DOM会立即显示在UI中吗？一个小测试测试代码 1 2 3 4 5 6 7 8 9 DOM的修改不会立马导致渲染，而是会内部触发一个事件（可能叫paint），这个事件的处理程序会被插入到Javascript的调度队列中等待调度执行。10 11 12 13 输出结果start...//两秒中CPU空转。e... 阅读全文

摘要：背景上篇文章http://www.cnblogs.com/happyframework/p/3241063.html介绍了如何以AOP的形式处理服务器异常，这让服务器端的编程逻辑变的非常整洁，本文介绍如何在客户端统一处理服务器返回的异常信息。一点考虑上篇隐藏了一些概念，即：开发或架构之处，就应当确定哪些异常要返回给UI、哪些异常要写入日志、哪些异常要包装以后返回给UI等等。AJAX拦截如何拦截AJAX，不外乎这三种方式：注册全局监听函数。封装一个全局入口。重写或覆盖客户端库的AJAX功能（Javascript是动态语言，可以运行时替换任何东西）。最简单的莫过于第一种方式，让我们看一下代码：拦截 阅读全文

摘要：背景学动态语言的都知道一句话：“如果它走起来像鸭子，而且叫起来像鸭子，那么它就是鸭子”，Javascript也支持鸭子类型，下文就说说鸭子类型在Javascript中的两个应用场景。两个推论凡是这样签名的方法：object.method(arg1, arg2, ...)的方法，都可以采用method.apply(object, [arg1, arg2, ...])进行调研。array的某些方法（不会修改array状态）可以使用arguments以Array.prototype.method.apply(arguments,[arg1, arg2, ...])的方式调用。前者：把array当成a 阅读全文

摘要：背景文档的重要性不言而喻，对于像Javascript这种的动态语言来说就更重要了，目前流行的JDoc工具挺多的，最好的当属JSDuck，可是JSDuck在Windows下的安装非常麻烦，这里就写下来做个备忘。JSDuck生成的文档效果JSDuck安装步骤第一步：安装RubyRuby下载地址：http://rubyinstaller.org/downloads/。我是64位操作系统，下载的文件如下：第二步：安装Development Kit1、将DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe解压到指定目录，下图是我解压后的位置：2、使用批处理程序生成c 阅读全文

摘要：问：父类可以调用子类吗？答：可以，经典的模板方法模式就是用的这个特性。 阅读全文

摘要：背景经常需要向新入职的年轻同学解释Javascript的两个概念：单线程和作用域链，今天就再写篇博客说明一下。单线程队列：只有一个用来存储回调方法的队列。消费线程：只有一个消费线程，不停的从队列中取方法，然后进行调用。这也是为什么Javascript称作为单线程的原因。生产线程：有多个生产线程，不同的向队列中插入方法，常见的生成线程有：定时器、Ajax和浏览器事件。这也是为什么Javascript称作为事件驱动的原因。参考文章：http://www.cnblogs.com/happyframework/archive/2013/04/23/3035596.html。作用域链条局部变量不是存储在 阅读全文

摘要：背景在上篇文章中，我简单的介绍了如何实现单继承。只是在子类中调用父类方法的方式让人感觉不是很爽：1 var Animal = function () {2 Animal.super().constructor.apply(this, arguments);3 };今天这篇文章的目的就是简化这种调用方式，期望的调用方式如下：1 var Animal = function () {2 this.callParent(arguments);3 };如何实现callParent呢？只要做到如下几点，实现callParent就不是问题了，要求如下：callParent必须知道哪个方法调用... 阅读全文

摘要：前提知识Javascript：必须知道的Javascript知识点之“原型链”Javascript：必须知道的Javascript知识点之“this指针”Javascript：用 "脑图软件" 学习 “面向对象”几个内置核心方法学习代码示例 1 var Base = function (name) { 2 this.name = name; 3 }; 4 5 var base = new Base(); 6 7 console.log((base instanceof Object));//true 8 console.log((base instanceof Base)) 阅读全文

摘要：面向对象面向对象思维导图默认情况下，Javascript支持如下特性（红色代表默认支持）：通过框架层面的支持，Javascript可以支持所有这些特性。重点概念介绍鸭子类型如果一个东西（对象）看起来像鸭子（符合接口定义），走起路来也像鸭子（行为也符合期望），那么这个东西就是鸭子。如所有动态语言一样，Javascript天生就支持“鸭子类型”。从“多态”的维度考虑，Javascript是通过“鸭子类型”支持的“多态”。代码示例 1 var Rectangle = function (name) { 2 this.name = name; 3 }; 4 5 Rectangle.proto... 阅读全文

摘要：很多人都知道this指针，这篇文章的主要目的是为了培训我们公司的新人。默认的this指针指向规则1this指针默认指向方法调用时为其指定的对象，如：obj.fun()，fun方法体中的this指针指向obj。1 var user = { name: '段光伟' };2 user.getName = function(){ return this.name; };3 user.getName(); //返回‘段光伟’1 var user = { name: '段光伟' };2 user.getName = function(){ return this.name; 阅读全文

摘要：代码示例 1 var intervalBody = function(){ 2 console.log('interval'); 3 } 4 5 var startInterval = function(){ 6 setInterval(intervalBody,1000); 7 } 8 9 var timeoutBody = function(){10 console.log('timeout');11 }12 13 var startTimeout = function(){14 setTimeout(timeoutBody,1000);15 }16 1.. 阅读全文

摘要：代码示例 1 var date1 = new Date(2013,1,1); 2 var date2 = new Date(2013,1,1); 3 date1 == date2; //执行结果为false 4 date1 === date2; //执行结果为false 5 6 var num1 = new Number(10); 7 var num2 = new Number(10); 8 num1 == num2; //执行结果为false 9 num1 === num2; //执行结果为false10 num1 == 10; //执行结果为true11 10 == num2;... 阅读全文

摘要：代码示例 1 var xxxVar1 = 1; 2 var outer = function(){ 3 var xxxVar2 = 2; 4 5 var results = []; 6 7 for(var i = 0; i< 3; i++) 8 { 9 var inner = function(){10 var xxxVar3 = 3;11 return xxxVar3 + xxxVar2 +xxxVar1 + i;12 }13 results .push(inner);14 }1... 阅读全文

摘要：代码示例1 var CustomClass = function() { };2 var CustomObject = new CustomClass();发生了什么事情原型链规则规则1每个对象都有一个“__proto__”属性，这个属性对外不可见，只有javascript解释器知道，在google浏览器中可以看到这个属性。规则2“取值操作”CustomObject.XXXProperty的规则是，先查找CustomObject对象本身有没有XXXProperty，没有的话就去CustomObject.__proto__中找，还没找到就去CustomObject.__proto__.__pro 阅读全文

摘要：原型链作用域链this指针字面量和对应类型的关系类型转换执行模型 阅读全文