问题
随着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代码的,可以共同探讨一下。
分享到:
- 2009-03-01 21:55
- 浏览 1229
- 评论(1)
- 论坛回复 / 浏览 (1 / 2422)
- 查看更多
相关推荐
- **js**:JavaScript代码库,包含实现上述功能的具体代码。 - **.idea**:这是IDE(如IntelliJ IDEA)的工作目录,包含了项目配置信息,对开发者来说很有用,但对最终用户来说是不可见的。 综上所述,这个项目是一...
这个压缩包文件“JavaScript大全 常用JS效果代码”显然包含了一系列实用的JavaScript代码片段,旨在帮助开发者快速实现常见的网页特效和功能。 1. **JS特效**:JavaScript能够创造出丰富的用户体验,如滑动门、轮播...
在本例中,我们关注的是如何在Visual Studio 2012(简称VS2012)中实现JavaScript(JS)代码的折叠功能。VS2012是一款强大的开发工具,支持多种编程语言,包括JavaScript,提供了丰富的代码编辑器特性,如代码折叠。...
而“js推箱子网页小游戏源代码”文件则包含了实现这个游戏的全部JavaScript代码,可能还包含了HTML和CSS文件。 分析和学习这个源代码,不仅可以帮助我们理解推箱子游戏的逻辑,还可以深入学习JavaScript编程技巧,...
本文将详细介绍ASP.NET环境中不同位置JavaScript代码的执行顺序,帮助开发者更好地理解和掌握这一机制。 #### 1. `<head>`标签中的JS代码 根据描述中的示例代码,在`<head>`标签内嵌入的JavaScript代码会按照它们...
《Effective JavaScript:编写高质量JavaScript代码的68个有效方法》是David Herman撰写的一本JavaScript编程指南,该书基于作者在Ecma的JavaScript标准化委员会的工作经验,深入探讨了JavaScript的内部工作机制、...
1. **从主函数开始**:大多数JavaScript项目都有一个入口文件(如index.js),从这里开始阅读有助于快速理解项目的整体架构。 2. **利用注释**:高质量的源代码通常会有详细的注释说明,这些注释对理解代码逻辑非常...
7. **前端框架和库**:现代开发中,经常使用React、Vue或Angular等前端框架,它们提供了更高级的组件化和状态管理机制,使得购物车功能的实现更加模块化和可维护。在这个项目中,即使没有明确提及,也可以考虑使用...
7. 数据绑定和状态管理:了解Ext JS的数据模型和数据绑定机制。 8. AJAX和API调用:使用XMLHttpRequest或fetch API与服务器进行数据交换。 9. 异步编程在Ext JS中的应用:理解Store、Proxy等概念,进行数据加载和...
1. **外部脚本引入**:`<script language="JavaScript" type="text/JavaScript" src="../zb/date.js"></script>` 这一行代码表明了从外部引入了一个名为`date.js`的JavaScript文件,该文件可能包含了与日期处理相关...
此外,对于复杂的交互逻辑,可能需要设计合理的事件模型和状态管理机制。 `TestJsCall`这个文件可能是用于测试C#与JavaScript互调的示例代码,可能包含了创建`CefSharp.BrowserHost`,设置邦定对象,以及进行互调...
`sem_9d2b852f41bb993a.js` 这个文件名中的"sem"可能代表搜索引擎营销(Search Engine Marketing),暗示这可能是与广告或营销相关的JavaScript代码。在实际应用中,这样的文件可能包含谷歌如何展示广告、跟踪用户...
在 Node.js 中,解析缓存是提高性能的关键机制之一,尤其对于频繁重复的代码执行,解析缓存能够显著减少不必要的工作。 **1. Node.js 源代码结构** Node.js 的源代码主要分为几个核心部分: - **lib**: 包含 Node...
"很实用的js代码整理工具" 提供了一种有效管理JS代码的方法,帮助开发者将零散、混乱的代码片段进行有序化整理,提升工作效率。 1. **代码模块化**:JS代码整理的一个关键方面是模块化。通过使用模块,可以将大项目...
然而,深入理解JavaScript的内存管理机制对于提高代码质量和避免潜在错误至关重要。 #### JavaScript内存管理概述 JavaScript的内存管理主要包括两个关键部分:内存分配和垃圾回收。 - **内存分配**:在变量或...
"相册的纵向选择效果 JS代码 JS纵向相册效果 非常方便有用的JS代码.zip" 是一个专为提高用户体验而设计的JavaScript代码库,旨在实现一种独特的、易于使用的纵向相册浏览效果。这种效果使得用户在浏览图片时可以像...
【标题】"js俄罗斯方块网页游戏代码"所涉及的知识点主要集中在JavaScript编程语言和网页游戏开发上。JavaScript,简称JS,是一种轻量级的解释型编程语言,主要用于客户端的网页脚本,使得用户与网页交互更加动态和...
它主要负责解析和执行JavaScript代码。现代JS引擎如V8采用了即时编译(JIT)技术,将源代码转化为机器码,提高执行效率。引擎内还分有垃圾回收线程,负责自动管理内存,回收不再使用的对象,防止内存泄漏。 事件...
1. IHTMLDocument2接口:WebBrowser控件暴露了IHTMLDocument2接口,你可以通过这个接口访问当前页面的DOM元素,包括执行JavaScript代码。调用`IHTMLDocument2::execScript`方法,传入JS代码字符串,即可执行。 2. ...
【标题】"页面的后台管理系统代码.zip"是一个包含前端页面和可能部分Java前端代码的压缩文件,用于构建一个全面的后台管理系统。这类系统通常用于企业管理、数据监控、用户权限控制等内部业务操作。 【前端页面代码...