JS代码的管理机制

问题

随着AJAX的流行，JS在web应用中的比重越来越大。随之而来，对JS代码的维护和重用就需要有一套机制来管理。

Java中除了对象、类这些概念外，还有一个灵活的包机制。众所周知，JS本身并没有内建这样的机制，所以像一些JS框架，如DOJO，就自己实现了一套。

在我们当前的项目里，评估了几个JS框架，然后决定了采用Mootools，主要是因为它更加OO，更有利于重用。遗憾的是Mootools并有包机制这些概念。那我们可否自己实现一套简单的包机制呢？

分析

Java的包机制需要JVM的一些支持，而JS的情况更加接近于cpp。cpp中是使用include不同的头文件来使用不同的模块，使用namespace来避免模块命名上的冲突。也就是说我们要在js上实现namespace和include的机制。

实现

声明名字空间 

$ns(namespace);

namespace 命名空间名称，例如："owl.ui"

var $ns= function(namespace) {   
        var namePiece = namespace.split(".");   
        var curName = namePiece[0];   
		eval('if (typeof ' + curName + ' == "undefined"){' + curName + ' = {};} var curSpace = ' + curName + ';');
        for(var nameIdx = 1; nameIdx < namePiece.length; ++nameIdx) {   
            curSpace[namePiece[nameIdx]] = curSpace[namePiece[nameIdx]] || {};   
            curSpace = curSpace[namePiece[nameIdx]];
        }   

        return curSpace;
};   

$ns('owl.ui');
owl.ui.CheckBox = function() {
       alert("Called checkbox!");
}

owl.ui.CheckBox();

 

 

导入JS文件

$inc(path, version);

path js文件的路径及名称，如: owl/Test

version js文件的版本，如：1.0

 

var $inc = function(path, version) {
		if (typeof JS_ROOT == 'undefined') {
				JS_ROOT = '/js/'
		}
		var jsFile = JS_ROOT + path + '-' + version + '.js';
		document.writeln("<scri"+"pt src='" + jsFile + "' type='text/javascript'></sc"+"ript>");
}
$inc('test', '1.0');

更加完善的$inc

var JSLoader = new Class({
	Implements: [Options],
	options: {
		loadedJS : {},
		jsRoot : "js/"
	},
	initialize: function(options){
		this.setOptions(options);

		$(document).getElements('script[src]').each(function(script) {
			var jsFile = $(script).get('src');
			var jsPath = jsFile.substring(0, jsFile.lastIndexOf('-'));
			if (!$chk(this.options.loadedJS[jsPath])) {
				this.options.loadedJS[jsPath] = true;
			}
		}, this);
	},
	load: function(path, version) {
		if ($chk(this.options.loadedJS[path])) {
			return;
		}

		var jsFile = this._make_js_file_name(path, version);

		document.writeln("<scri"+"pt src='" + jsFile + "' type='text/javascript'></sc"+"ript>");
	},
	_make_js_file_name: function(path, version) {
		var fileName = this.options.jsRoot + path;
		if ($chk(version)) {
			fileName += '-' + version;
		}
		fileName += '.js';

		return fileName;
	}
});

var $inc = function() {
	var jsLoader = new JSLoader();

	return function(path, version) {
		jsLoader.load(path, version);
	};
}();

 

其实Mootools的Assert插件可以载入JS，CSS，Image这些资源文件。

总结

任何项目的代码都是累积起来的，都是要维护的，其实管理JS代码的意识才是关键。这里简单实现的$ns, $inc原语只是为大家提供了一种方式。不知道大家是怎么管理js代码的，可以共同探讨一下。

评论

1 楼 xieye 2009-03-02  

这段代码很有价值，可用。
不过对我来说，还是先分析所有页面的js可能组合，
再搞一个大的，加载到所有页面。
投良好。