yiwei项目中Javascript的管理与维护

于 2009-02-27 13:50:53 发布 · 164 阅读

文章标签：

本文探讨了JavaScript中命名空间的实现方式及其重要性，通过一个具体的代码示例展示了如何避免变量名冲突。同时介绍了yiwei项目的JS文件组织方式及命名规则。

命名空间(namespace):

一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突，在一个公司内部项目组之间可以通过命名预定（比如加前缀等）解决这个问题。这问题在javascript开发中导致的后果会是很严重的，因为JS是解释执行的，如果后面定义了同名变量就会覆盖前面变量，并用应用新定义变量的语义，这在Js中合法，没有错误提示，因此bug很难找。
目前，最新版本的JavaScript还是不支持命名空间，于是需要一套机制来模仿出命名空间的效果：

if($package)
{
    try {
        throw new Error("$package命名冲突!");
    } catch (e) {
        alert(e.name + ": " + e.message);
    }

}
var $package =function() {
    var a = arguments,
    o = null,
    i, j, d,rt;
    for(i=0; i<a.length; ++i) {
        d = a[i].split(".");
        rt = d[0];
        eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
        for(j=1; j<d.length; ++j) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }
    return o;
};


$package("Yiwei.widget");

// Creating a class
Yiwei.widget.widgetName = new Class({
        options: {
                // options goes here
        },

        initialize: function(options) {
                this.setOptions(options);
                // initialize commands goes here
        }
});
Yiwei.widget.widgetName.implement(new Events); // Implements addEvent(type, fn), fireEvent(type, [args], delay) and removeEvent(type, fn)

Yiwei.widget.widgetName.implement(new Options);// Implements setOptions(defaults, options);

JS文件管理

yiwei项目中将使用mootools这个第三方js库，所以需要有mootools.js和mootools-more.js这两个js文件，再加个base.js，用来存放一些公共js代码，然后每个功能模块分配一个JS文件，且以功能模块名为JS名。

命名规则

在base.js中定义类时，以yiwei.base.xxx形式，其中xxx表示你要定义的类名。
在各个功能模块的js文件中定义类，则以yiwei.功能模块名.xxx的形式来命名。

Js代码压缩

压缩工具选用yuicompressor-2.4.2。