日期:2014-05-16  浏览次数:20350 次

requirejs 让js复用更方便

工作快6年了,算是个老程序猿了。但感觉会的东西真的很少。这么些年也写了不少代码,但复用的地方真的很少,现在感觉这样可真不行。于是强烈关心起复用技术来,现在不比20岁小伙,任何时候都可以从0写起。

这些年,web程序做的最多,基本都是,而且前后都沾边,js的东西可真写了不少,貌似三分之一的时间都在写js。为啥,因为不会复用。。。,以前也很少用框架,比如easyui 什么的。

现在我记录一下 requireJS 来辅助js控件复用。

现在出了 2.x 版本,去官网下载:http://www.requirejs.org/

使用其实很简单,先看目录:

webcontent/

?????? js/

???????????? require2.js

???????????? my/

??????????????????? a.js

??????????????????? b.js

???????????? 3td/

???????????????????? easyui/

???????????????????????????? .......

在页面上先引入requirejs文件,然后配置,即可使用:

?

?

<script src="js/require2.js"></script>
<script>
require.config({
     baseUrl:"js"
});
require(['my/a','my/b']);
//下面就可以使用了
a.Fun();
b.Fun();
</script>

?注意在引入文件时,可不加".js" ,则会根据baseUrl为相对路径去搜索。如已js结尾,或者/ 开头,如: ['my/a.js','/my/b'] 那么找的是 ./my/a.js 和 /my/b.js

有时候必须等有些文件加载完成后方可加载其他js,那么在配置时加上如下代码即可:

require.config({
     shim:{'jquery':['3td/jquery.min']}
});

//如下方式使用
require(['jquery','my/a']);

?其实requirejs最推荐这样些:

requrie(['my/a','my/b'],function(m,n){
      m.Fun();
      n.Fun();
});

?m对应? my/a? ,n 对应? my/b

这里涉及到一个 叫? AMD 的规范,即你的 my/a.js 应该这样:

define(function(){
      return {
             Fun:function(x,y){}
       }
});

?即返回一个对象,对象包含了需要对外提供的方法。

其中 的 define 是 requireJS 的函数。

?