浏览 2424 次
锁定老帖子 主题:JS代码的管理机制
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-03-01
最后修改:2009-03-03
问题随着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代码的,可以共同探讨一下。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-03-02
这段代码很有价值,可用。
不过对我来说,还是先分析所有页面的js可能组合, 再搞一个大的,加载到所有页面。 投良好。 |
|
返回顶楼 | |