`
harry
  • 浏览: 184173 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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可能组合,
再搞一个大的,加载到所有页面。
投良好。

相关推荐

    1号店完整代码_js代码_一号店代码_京东1号店_

    - **js**:JavaScript代码库,包含实现上述功能的具体代码。 - **.idea**:这是IDE(如IntelliJ IDEA)的工作目录,包含了项目配置信息,对开发者来说很有用,但对最终用户来说是不可见的。 综上所述,这个项目是一...

    JavaScript大全 常用JS效果代码

    这个压缩包文件“JavaScript大全 常用JS效果代码”显然包含了一系列实用的JavaScript代码片段,旨在帮助开发者快速实现常见的网页特效和功能。 1. **JS特效**:JavaScript能够创造出丰富的用户体验,如滑动门、轮播...

    vs2012实现js代码折叠

    在本例中,我们关注的是如何在Visual Studio 2012(简称VS2012)中实现JavaScript(JS)代码的折叠功能。VS2012是一款强大的开发工具,支持多种编程语言,包括JavaScript,提供了丰富的代码编辑器特性,如代码折叠。...

    js推箱子网页小游戏源代码.zip

    而“js推箱子网页小游戏源代码”文件则包含了实现这个游戏的全部JavaScript代码,可能还包含了HTML和CSS文件。 分析和学习这个源代码,不仅可以帮助我们理解推箱子游戏的逻辑,还可以深入学习JavaScript编程技巧,...

    ASP.NET中不同部分的js代码的执行顺序

    本文将详细介绍ASP.NET环境中不同位置JavaScript代码的执行顺序,帮助开发者更好地理解和掌握这一机制。 #### 1. `&lt;head&gt;`标签中的JS代码 根据描述中的示例代码,在`&lt;head&gt;`标签内嵌入的JavaScript代码会按照它们...

    Effective JavaScript 编写高质量JavaScript代码的68个有效方法1

    《Effective JavaScript:编写高质量JavaScript代码的68个有效方法》是David Herman撰写的一本JavaScript编程指南,该书基于作者在Ecma的JavaScript标准化委员会的工作经验,深入探讨了JavaScript的内部工作机制、...

    javascript源代码下载

    1. **从主函数开始**:大多数JavaScript项目都有一个入口文件(如index.js),从这里开始阅读有助于快速理解项目的整体架构。 2. **利用注释**:高质量的源代码通常会有详细的注释说明,这些注释对理解代码逻辑非常...

    用JavaScript开发购物车(含源代码)

    7. **前端框架和库**:现代开发中,经常使用React、Vue或Angular等前端框架,它们提供了更高级的组件化和状态管理机制,使得购物车功能的实现更加模块化和可维护。在这个项目中,即使没有明确提及,也可以考虑使用...

    javascript 经典代码

    7. 数据绑定和状态管理:了解Ext JS的数据模型和数据绑定机制。 8. AJAX和API调用:使用XMLHttpRequest或fetch API与服务器进行数据交换。 9. 异步编程在Ext JS中的应用:理解Store、Proxy等概念,进行数据加载和...

    JavaScript值班表代码

    1. **外部脚本引入**:`&lt;script language="JavaScript" type="text/JavaScript" src="../zb/date.js"&gt;&lt;/script&gt;` 这一行代码表明了从外部引入了一个名为`date.js`的JavaScript文件,该文件可能包含了与日期处理相关...

    Xilium.Cefglue,c#与JS代码互调

    此外,对于复杂的交互逻辑,可能需要设计合理的事件模型和状态管理机制。 `TestJsCall`这个文件可能是用于测试C#与JavaScript互调的示例代码,可能包含了创建`CefSharp.BrowserHost`,设置邦定对象,以及进行互调...

    google首页js代码

    `sem_9d2b852f41bb993a.js` 这个文件名中的"sem"可能代表搜索引擎营销(Search Engine Marketing),暗示这可能是与广告或营销相关的JavaScript代码。在实际应用中,这样的文件可能包含谷歌如何展示广告、跟踪用户...

    Node.js-Node.js的源代码和解析缓存

    在 Node.js 中,解析缓存是提高性能的关键机制之一,尤其对于频繁重复的代码执行,解析缓存能够显著减少不必要的工作。 **1. Node.js 源代码结构** Node.js 的源代码主要分为几个核心部分: - **lib**: 包含 Node...

    很实用的js代码整理工具

    "很实用的js代码整理工具" 提供了一种有效管理JS代码的方法,帮助开发者将零散、混乱的代码片段进行有序化整理,提升工作效率。 1. **代码模块化**:JS代码整理的一个关键方面是模块化。通过使用模块,可以将大项目...

    JavaScript 内存机制分析

    然而,深入理解JavaScript的内存管理机制对于提高代码质量和避免潜在错误至关重要。 #### JavaScript内存管理概述 JavaScript的内存管理主要包括两个关键部分:内存分配和垃圾回收。 - **内存分配**:在变量或...

    相册的纵向选择效果 JS代码 JS纵向相册效果 非常方便有用的JS代码.zip

    "相册的纵向选择效果 JS代码 JS纵向相册效果 非常方便有用的JS代码.zip" 是一个专为提高用户体验而设计的JavaScript代码库,旨在实现一种独特的、易于使用的纵向相册浏览效果。这种效果使得用户在浏览图片时可以像...

    js俄罗斯方块网页游戏代码

    【标题】"js俄罗斯方块网页游戏代码"所涉及的知识点主要集中在JavaScript编程语言和网页游戏开发上。JavaScript,简称JS,是一种轻量级的解释型编程语言,主要用于客户端的网页脚本,使得用户与网页交互更加动态和...

    JS运行机制.xmind.zip

    它主要负责解析和执行JavaScript代码。现代JS引擎如V8采用了即时编译(JIT)技术,将源代码转化为机器码,提高执行效率。引擎内还分有垃圾回收线程,负责自动管理内存,回收不再使用的对象,防止内存泄漏。 事件...

    WebBrowser中JS和C++代码互相调用

    1. IHTMLDocument2接口:WebBrowser控件暴露了IHTMLDocument2接口,你可以通过这个接口访问当前页面的DOM元素,包括执行JavaScript代码。调用`IHTMLDocument2::execScript`方法,传入JS代码字符串,即可执行。 2. ...

    页面的后台管理系统代码.zip

    【标题】"页面的后台管理系统代码.zip"是一个包含前端页面和可能部分Java前端代码的压缩文件,用于构建一个全面的后台管理系统。这类系统通常用于企业管理、数据监控、用户权限控制等内部业务操作。 【前端页面代码...

Global site tag (gtag.js) - Google Analytics