javascript是个入门门槛很低的语言，甚至一个从来没有接触过javascript的技术人员，几小时内就可以写出一个简单有用的程序代码。
但是如果因此你就下结论：javascript是门简单的语言。那你就大错特错了。想写出高性能的代码，同样需要具备一个高级程序员的基本素养。
一个java或者c++程序员，不一定能写出高性能的javascript代码，但更容易写出高性能的javascript代码。
javascript的简单是基于它“胸襟广阔”的包容性。它声明时，不需要指定类型，甚至可以任意的转换类型。它面向对象，却没有类（Class）的限制。它是一门崇尚自由又非常严谨的语言，如果你是一个自由主义者，那么，拥抱javascript吧！
面向对象编程 (OOP) 是一种流行的编程方法。但javascript的OOP，较之JAVA、c++有很大的同，主要体现它的继承方式不同。javascript是基于原型PROTOTYPE继承的。所有对象都是基于原型链，最终追述到Object对象。
这里不想讨论过多的关于javascript的继承方式和其它语言的继承方式的不同之处。主要讨论如何封装javascript的Class，以便更好的管理和维护基础代码，减少重复代码，以及更好的模块化编程。
下面是几个github上找到的比较好的Class封装类库：
一、MY-CLASS
项目地址：https://github.com/jiem/my-class
先看基本用法：
a、新建一个类
// 新建类
var Person = my.Class({
// 添加静态方法
STATIC: {
AGE_OF_MAJORITY: 18
},
// 构造函数
constructor: function(name, age) {
this.name = name;
this.age = age;
},
// 实例方法
sayHello: function() {
console.log('Hello from ' + this.name + '!');
},
// 实例方法
drinkAlcohol: function() {
this.age < Person.AGE_OF_MAJORITY ?
console.log('Too young! Drink milk instead!') :
console.log('Whiskey or beer?');
}
});
// 暴露给命名空间
myLib.Person = Person;
})();
var john = new myLib.Person('John', 16);
john.sayHello(); //log "Hello from John!"
john.drinkAlcohol(); //log "Too young! Drink milk instead!"
b、继承一个类
//Dreamer 继承 Person
var Dreamer = my.Class(Person, {
// 构造方法
constructor: function(name, age, dream) {
Dreamer.Super.call(this, name, age);
this.dream = dream;
},
// 实例方法
sayHello: function() {
superSayHello.call(this);
console.log('I dream of ' + this.dream + '!');
},
// 实例方法
wakeUp: function() {
console.log('Wake up!');
}
});
// Super访问父类
var superSayHello = Dreamer.Super.prototype.sayHello;
// 暴露给全局命名空间
myLib.Dreamer = Dreamer;
})();
var sylvester = new myLib.Dreamer('Sylvester', 30, 'eating Tweety');
sylvester.sayHello(); //log "Hello from Sylvester! I dream of eating Tweety!"
sylvester.wakeUp(); //log "Wake up!"
c、给类添加新方法
my.extendClass(myLib.Dreamer, {
// 添加静态方法
STATIC : {
s_dongSomeThing : function(){
console.log("do some thing!");
}
},
// 添加实例方法
touchTheSky: function() {
console.log('Touching the sky');
},
// 添加实例方法
reachTheStars: function() {
console.log('She is so pretty!');
}
});
d、实现一个类的方法
myLib.ImaginaryTraveler = my.Class({
travel: function() { console.log('Traveling on a carpet!'); },
crossOceans: function() { console.log('Saying hi to Moby Dick!'); }
});
(function() {
//Dreamer 继承 Person 实现 ImaginaryTraveler的方法
var Dreamer = my.Class(Person, ImaginaryTraveler, {
// 构造方法
constructor: function(name, age, dream) {
Dreamer.Super.call(this, name, age);
this.dream = dream;
}
// ...
});
// 暴露给全局命名空间
myLib.Dreamer = Dreamer;
})();
var aladdin = new Dreamer('Aladdin');
aladdin instanceof Person;
本篇主要介绍 MPVC 中的关键组件:
Pagelet
页面消息的包装类，里面包含更新视图的所需要的信息：Html 代码，插入位置，额外的 Json 数据参考等信息。
一个 Pagelet 对应一个前端的构建块，Pagelet 的作用包括：
- 添加、修改构建块
- 删除构建块
- 向构建块发送 Json 消息
PageletProcessor
解析 Pagelet 里面的信息，并进行处理，完成视图更新。
NavigationManager
处理虚拟页面切换，并管理 Url 历史。
加载一个新页面，可以理解为在一个特定区域内加载一个页面级的 Pagelet，并将原来的页面实例 Dispose 掉。
在查看列表类页面时，列表页面不会因为详细页的对象加载而消息失，而是仅仅隐藏起来并且可以由特别的条件激活，比如 Backspace 或者某个特别的元素点击事件。
NavigationManager 理论上将所有的页面跳转换为 Pagelet 消息加载和处理，达到无刷新的效果。
ClassRegister
为了根据构建块的类型创建它的实例，需要一种类似于 "反射" 的机制来取得目标类型的构造函数或工厂方法，ClassRegister 提供类型字符串到构造函数的映射关系。
页面在构建时的流程
后台在生成页面时，同时生成一个有层次关系的 Map，里面包含了各构建块的父子关系。页面到达客户端之后，从根节点开始，根据此 Map 递归初始化所有的嵌套组件实例，完成页面初始化。
MVPC 的优点
MVPC 的缺点：
本文链接
现在设计一个系统，目标为达到以下要求：
主要面临的挑战为：
模块的级联更新问题
在用户操作时将引发一系列的模块更新，它们如何同用户操作建立联系，即这种事件订阅关系如何生成？
解决方案：
- 对于父子关系的组件，由于构建块之间是层层嵌套的关系，底层的事件可以自然地冒泡到上层组件，但是这种事件传播又不同于 Dom 层面的事件冒泡。
- 对于处于不同子树上的组件，则使用全局事件进行广播（好在这样的情况并不多）。
- 兄弟节点之间的节点或有公共父节点的组件，则在公共父节点上处理订阅逻辑
模块的刷新如何实现无手动代码参与
将更新抽象为更新消息，消息传到客户端即可使用消息处理器自动处理，即完成视图的自动刷新，对于不能刷新的组件，提供手动更新的可选方式以获取更高的录活性。
构建模块如何进行初始化
每个构建块其实有两部分构成，Dom 树的根节点，Javascript 的一个模块实例，在后台生成页面时已经为每个构建块生成了唯一的 ID，并将此模块的类型通过 Attribute 形式传到页面端，页面端根据此类型创建一个对应类型的实例，并按唯一 ID 为 Key 查找到对应的 Dom 元素，将 Dom 元素绑定给模块实例，接下来模块实例调用初始化函数。
本文链接