张子阳的博客

首页 读书 技术 店铺 关于
张子阳的博客 首页 读书 技术 关于

悟透JavaScript

2015-04-22 张子阳 推荐:


这本书分为了三个部分,第一部分“JavaScript真经”主要讲解JavaScript的一些核心概念,主要是数据类型、函数、原型、对象。并通过在JavaScript模拟类和继承的概念,讲解了这些概念;第二部分“手谈JavaScript”主要讲解了DOM,并实现了一个围棋的范例;第三部分“点化AJax” 主要讲述了Ajax的实现,以及跨域进行Ajax调用,并结合Asp.Net实现了单点登录。

整体来看,书的第一部分价值最高,理清了很多概念,作者也是因为将第一部分发表博客后获得广泛好评才写了全书。书中反复用佛祖、菩提、真经之类来对写程序和代码进行类比,推测作者可能平时会关注这方面的内容,但作为读者来说,则感觉有些拖沓,不够清爽明快。

下面摘录了书中的一些要点。

JavaScript真经

甘露模型:这个模型主要是将JavaScript的类定义、继承,模拟成C#的语言的形势,看上去显得更加优雅一些。

// 根类object定义 function object() { } // 判断对象是否属于某类型 object.prototype.isA = function (aType) { var self = this.Type; while (self) { if (self == aType) return true; self = self.Base; } return false; } object.prototype.base = function () { var Base = this.Type.Base; if (!Base.Base) { //已经是顶级了 Base.apply(this, arguments); // 直接调用基类构造函数 } else { this.base = MakeBase(Base); // 覆写this.base Base.apply(this, arguments); // 调用基类构造函数 delete this.base; // 删除覆写的base属性 } function MakeBase(Type) { var Base = Type.Base; if (!Base.Base) return Base; return function () { this.base = MakeBase(Base); Base.apply(this, arguments); } } } // 定义类 function Class(){ var aDefine = arguments[arguments.length - 1]; if(!aDefine) return; var aBase = arguments.length > 1?arguments[0]:object; // 解析基类 function prototype_(){} // 构造prototype的临时函数,用于挂接原型链 prototype_.prototype = aBase.prototype; var aPrototype = new prototype_(); // 复制类定义到当前类的prototype for(var member in aDefine){ if(member != "Create"){ // 构造函数不用复制 aPrototype[member] = aDefine[member]; } } if (aDefine.toString != Object.prototype.toString) aPrototype.toString = aDefine.toString; if (aDefine.toLocaleString != Object.prototype.toLocaleString) aPrototype.toLocaleString = aDefine.toLocaleString; if (aDefine.valueOf != Object.prototype.valueOf) aPrototype.valueOf = aDefine.valueOf; // 如果有构造函数 var aType; if (aDefine.Create) { aType = aDefine.Create; } else { aType = function () { this.base.apply(this, arguments); // 调用基类构造函数 }; } aType.prototype = aPrototype; aType.Base = aBase; // 设置类型关系,便于追溯 aType.prototype.Type = aType; // 为此类对象扩展一个Type属性 return aType; } // 使用示例 var Person = Class({ Create: function (name, age) { this.base(); // 调用上层构造函数 this.name = name; this.age = age; }, SayHello: function () { alert("Hello, I'm " + this.name + ", age " + this.age +"."); }, toString: function () { return this.name; } }); var Employee = Class(Person, { Create: function (name, age, salary) { this.base(name, age); this.salary = salary; }, ShowMeTheMoney: function () { alert(this + ", $" + this.salary); } }); var BillGates = new Person("Bill Gates", 53); var SteveJobs = new Employee("Steve Jobs", 59, 123); alert(BillGates); BillGates.SayHello(); SteveJobs.SayHello(); SteveJobs.ShowMeTheMoney(); // 用BillGate的类型建littleBill var littleBill = new BillGates.Type("Little Bill", 6); littleBill.SayHello(); alert(BillGates.isA(Person)); // true alert(BillGates.isA(Employee)); // false alert(SteveJobs.isA(Person)); // true

手谈JavaScript

这部分通过一个围棋的范例讲述了DOM、播放音乐、事件等内容,有点儿偏讲代码,个人觉得意义不大,有一些经验的开发人员都能够实现。

感谢阅读,希望这篇文章能给你带来帮助!