modulejs 模块化JavaScript框架【国产】

 

 

 

modulejs是极致模块化的且面向对象的javascript框架，modulejs能让你在简单易用的前提下写出更佳维护性和可重用性的javascript代码。

Features

 

• HTML document query/traversing/manipulation
• Lightweight selector engine
• Event handling
• Animation
• Cookie/localStorage storage
• Language extensions
• Ajax/JSONP request
• Template engine
• Rich utility class

 

modulejs 兼容全部主流浏览器 Internet Explorer 6+, Firefox 2+ (and browsers based on gecko) Chrome 4+, Safari 3+ and Opera9+.

modulejs quick example:

var ajax = module("net.Ajax").ajax;
ajax({
	url:"localhost/ajaxdemo.php",      //提交地址
	form:"formName",                   //表单名称
	timeout: 200,                      //过期时间
	success: function(response){       //成功后回调函数
		console.log(response);
	}
});

 

Download

You can also clone the project with Git by running:

$ git clone git://github.com/yuanyan/modulejs

Open Source License

modulejs是免费并且开源的，基于目前最宽泛的MIT协议 ，你可以在项目中使用并修改modulejs的所有代码。

Guide

Note: 当前文档只适用于 modulejs 0.1.0

getting started

在使用modulejs之前我们须加载global.js，global.js是整个modulejs的核心与基础。

 <script src="./global.js"> </script> 

modulejs中一个很重要的概念就是按需加载， modulej不是像jQuery一样在使用前加载整个已经打包的一个js文件，而是加载模块的最小集合。关于为什么需要按需加载，modulejs认为这不仅可以减少服务器的流量，更重要的是因为按需加载页面的加载时间也会大幅缩短，最终对用户更友好。

modulejs通过下面方式加载模块：

module.load("lang.Base");

module.load("util.Uri");

module.load("net.Request");

module.load("net.Ajax");

 or 

module.load(["lang.Base","util.Uri","net.Request","net.Ajax"]);

模块加载是有依赖顺序的，而modulejs的极致模块化设计可以让我们很方便的管理各模块间的依赖关系，对于简单的依赖关系你可以选择手动维护模块间依赖关系，当然我们推荐你使用modulejs提供的工具来自动生成以免出错。

在moudlejs中module.load是异步加载module的，所以当需要调用一个module时，必须是在module加载完成之后。modulejs提供了onReady事件，只需注册onReady事件，需要执行的代码就会在module加载完成（ModuleReady）并且同时在整个页面文档加载完成（DOMReady）之后执行。

注册onReady事件：

module.onReady(function(){

var ajax = module("net.Ajax").ajax;

ajax({

url:"localhost/ajaxdemo.php",      //提交地址

form:"formName",                   //表单名称

timeout: 200,                      //过期时间

success: function(response){       //成功后回调函数

console.log(response);

}

});

});

about module

 

在modulejs中"everything is module"，一个实例对象可以是一个module,一个类可以是一个module，甚至一个函数也可以是一个module，在modulejs中所有代码都是通过module方式来组织的，这让我们非常方便的扩展modulejs，并且可以自由控制module的粒度。

下面例子是注册一个命名空间为"lang.String"的module :

module("lang.String",function(){

var LEFT = /^\s+/, RIGHT = /\s+$/;

var trim = function(str){

return str.replace(LEFT, "").replace(RIGHT, "");

};

...

//EXPOSE

return {

"trim":trim

};

});

当module注册后module会自动存储在模块仓库中进行管理。然后你通过moduel("namespace")来导入moduel。

如导入并使用已注册的命名空间为"lang.String"的module :

var trim = moduel("lang.String").trim;

var r = trim("   betrimed  ");  //r === "betrimed"

 

===============================================================

 

From http://madscript.com/modulejs/

 

呵呵，互相借鉴：

https://github.com/yuanyan/modulejs/blob/43d164e6ab0ff85b2e1a70c0b2ce79bbee7fcf75/src/dom/Node.js#L846

https://github.com/kissyteam/kissy/blob/d6c6fcbbbddf3a4269acdc5b444a1f2e0b63d554/build/dom.js#L1970

https://github.com/jquery/jquery/blob/f1d75edec70783d67f0e11459f0a2187d98cc553/src/offset.js#L174

https://github.com/yui/yui3/blob/e9f63353a12e306c6af7f46413f742d9c15b93f2/src/dom/js/dom-screen.js#L300