打造JavaScript框架库: 库的体系架构

写一个库之前首先要确定库的体系结构,这个结构决定库的发展方向.在要写代码之前,应该准备一些前续工作.

命名

我们要给库取一个名字,由于该库的出发点是为了学习为主,那么我将他命名为turing.js,寓意就是这个对计算机世界贡献巨大的阿兰.图灵.

 

借鉴

• jQuery
• Prototype
• Mootools
• BBC Glow

 

风格

参加过团队开发的人都会体会到,团队间一致的代码风格对项目很重要,所以项目开始前要确立好整体风格:

• 详细:变量名和方法名应该清晰,这样有助于记忆,查找和理解
• 清晰:要保证代码的可读性,可读性是第一位的
• 注释:注释要清晰,这样既可以帮助理顺思路,又方便别人查看
• 简单:保持代码清洁简单,因为目的是为了学习

 

高层次的框架结构

第一个问题要考虑的是:这个框架是否独立的,2005年的时候Ajax刚兴起,大家建立框架的目的是为了更简单的操作Ajax,现在2010年我们编写服务端JavaScript以及复杂的前端应用,所以不能再忽视命名空间这个问题.

 

再一个问题就是对于原生对象的扩展.这里大致有两个流派,一个是Prototype的单刀直入,直接对原生对象进行污染,另一派就是非污染的实现,然后实行命名空间.比如Glow库会使用glow.lang.toArray虽然写起来不如Prototype那么简洁.但避免了污染导致的后顾之忧.我们的turing.js将要走Glow的这种形式.

 

Helper Methods

MooTools, Prototype, jQuery都使用了Helper机制来方便公用方法的调用:

 

// Prototype
function $H(object) {
  return new Hash(object);
};

// MooTools
function $H(object){
  return new Hash(object);
};

 

 

初始化

大多数框架对库的初始化和元数据都进行过了包装,MooTools和Prototype用了相似的做法,jQuery和Glow用了另一种.

 

var MooTools = {
  'version': '1.2.5dev',
  'build': '%build%'
};

var Prototype = {
  Version: '<%= PROTOTYPE_VERSION %>',
  ...
}

(function( window, undefined ) {
  var jQuery = function( selector, context ) {
      // The jQuery object is actually just the init constructor 'enhanced'
      return new jQuery.fn.init( selector, context );
    },
    ...
    jquery: "@VERSION",
    ...
  }

  // Expose jQuery to the global object
  window.jQuery = window.$ = jQuery;
})(window);

Glow和jQuery都使用了匿名函数将数据闭包.然后再将属性暴露到window对象上.我们的turing.js也将使用这种方式.

 

 

模块化和插件

jQuery,MooTools,Glow都力图模块化.让我们使用类似的方式,这样分割文件:

• turing.core.js
• turing.functional.js

然后我们创建一个turing变量暴露到全局作为框架的根,以后的模块和函数将要挂到他的上面.

 

开始编码

 

(function(global) {
	var turing = {
		VERSION: '0.0.1',
		lesson: 'Part 1: Library Architecture'
	};

	if (global.turing) {
		throw new Error('turing has already been defined');
	} else {
		global.turing = turing;
	}
})(typeof window === 'undefined' ? this : window);

以上小试牛刀,搭建了一个最基础的库模型,下一章将要讨论OO机制.