JS 模块化管理工具:Orderjs

jopen 6年前

rderjs 是一个开源的 JS 按需、异步加载工具,同时也是 JS 模块化管理工具。

采用 MIT 协议,您可以免费使用,不限个人或商业用途。支持 IE6+,Firefox,Chrome 等主流浏览器。

按需、异步加载

按需加载,再也不必动则 xxx-all.js,更节省带宽。异步无阻塞,不会阻止浏览器加载其它元素,充分利用浏览器特性提高网页加载速度,提升用户体验。
</div>

模块化管理

随着 web 应用、网站的 JS 日益增多,模块化管理 JS 是大势所趋,也是最好的实践。Orderjs 采用类 AMD 规范来管理模块,让 JS“定义严谨化,引用自由化”。
</div>

统一管理 JS 和 CSS

让 Css 成为 JS 模块可依赖的资源。在 Css 未加载完成之前,模块不会执行。从此, Css 不再游离在 JS 模块之外,在应用上达到完美统一。
假定我们有项目,目录如下:
orderjs-site-struct.jpg
首先,在页面上引入 order.js: </div>
<script type="text/javascript" src="resource/js/order.js"></script> 

用 orderjs 加载 JS

加载 order.js 同目录下相同位置的 JS;调用 orderjs(name) 函数,name 参数为模块文件名(不包括扩展名):
<script type="text/javascript">  //加载所需模块:  orderjs("jquery", "rainbow");    //OK, 引用模块所定义的对象。  //但注意,因为 orderjs 是异步加载以上模块的,所以不能直接引用:  jQuery("#xxx");    //而需要将以上语句打包,放到 js 执行队列中,等待 jquery 等模块加载完之后再执行,  //orderjs(fn) 函数即实现此功能:  orderjs(function(){      jQuery("#xxx")  });  </script>
加载 order.js 同目录下不同位置的 JS;调用 orderjs(name) 函数,name 参数为模块相对(order.js)的路径 + 文件名,路径分隔符“/”需替换为模块分隔符“.”:
<script type="text/javascript">  //加载所需模块:  orderjs("form.SearchBox", "form.validation");    //引用模块所定义的对象:  orderjs(function(){      new SearchBox();  });  </script>
</div>

用 orderjs 加载 Css

由于 Orderjs 模块(包括 js 和 css)的根目录默认为 order.js 所在目录,这里需调用 orderjs.config(name, value) 函数修改 css 模块默认根目录,然后调用 orderjs(name) 函数,name 参数为前缀 "css>" + 模块文件名(不包括扩展名):
<script type="text/javascript">  //修改 css 模块默认根目录:  orderjs.config("root", {   //路径相对于 order.js 目录,   //注意:这里是路径分隔符用“/”,不是模块分隔符“.”,且最后一个 “/” 不能省略。   css : "../css/"  });    //加载所需模块:  orderjs("css>common", "css>rainbow-theme-dw");  </script>
</div>

一个真实的案子

本页面模块的加载即是利用 order.js 实现,您可以按右键 > 查看源代码,或者直接点击此处下载页面源码
</div> </div>

模块化管理

用 orderjs.define 定义模块

文档完善中...
</div> </div>

模块名转换规则

文档完善中...
</div> </div> </div>

进阶应用

用短名称自定义模块根目录(rootNS)

文档完善中...
</div> </div>

自动加载页面通用模块(data-main)

文档完善中...
</div> </div>

定义非 LAMD 模块的依赖(shim)

文档完善中...
</div> </div>

跨域利用 CDN 资源(paths)

文档完善中...
</div> </div> </div>

注意问题

这里将列出一些开始使用 orderjs 应注意的问题:

JS 习惯的转换

同步到异步的切换:
全局变量到局部变量的切换:
文件命名的习惯:
</div>

应当了解的事项

orderjs 加载多个模块时的执行顺序。用 orderjs() 函数加载模块,由于其下载时间是不定的,因此其被浏览器加载执行顺序也是不定的。但可以通过 orderjs.define 来定义模块,使其有序执行。
orderjs(fn) 的 fn 的执行时间与 domReady 无关。
</div> </div> </div>

为什么会有 Orderjs?

类似开源工具已有不少,Orderjs 的出现,多少或是习惯问题:
  • 模块路径分隔符不喜欢用"/":jQuery/ui/menu,喜欢用".": jQuery.ui.menu;
  • 不习惯 callback 风格: load("jquery", callback) ,而喜欢类 <script> 标签的风格: orderjs("jquery"); orderjs(fn);
  • 某些框架不支持 css 加载;
当然,Orderjs 借了许多流行的框架的特性,如 shim, paths 等皆参考了 requireJs 等。

项目主页:http://www.open-open.com/lib/view/home/1387154035437

</div> </div> </div> </div>