js模块化之require.js

简单理解模块化

大多数前端开发者都用过jquery,那么用jquery之前我们首先要把jquery加载进页面,然后在之后的js之中才可以使用$,这里面我们知道了两个道理,一个是我们不能把所有js代码都放到一个文件里,有些东西可以单独提出来成为一个模块,比如jquery。另外一个道理,一部分js是依赖另一部分js的,比如$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。

当你的js项目足够大,足够复杂,依赖的库足够多,你完全需要这样一种工具去做这些js的管理,否则你的项目扩展性很差,结构很糟糕,要找到想修改的地方会很困难。

模块化诞生-require.js

它就是这样带着使命诞生了。可以帮我们解决这些问题:

1、require.js是属于异步加载,A、B、C的js文件加载的时候谁也不影响谁,也不会影响网页其他文件,只要A、B、C文件都加载好了,才会回调function

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
});

2、看上面结构便知道了,模块对A、B、C三个文件有依赖关系,就调用这三个文件即可,如果这个模块依赖10份js文件,就调用10个js即可,这样就很好的管理了每个模块的依赖,就不会很混乱了。

如何使用require.js

1) 加载模块化。在html中导入require.js,data-main属性的作用是,指定网页程序的主模块main.js。

<script src="js/require.js" data-main="js/main"></script>

2) data-main和baseUrl的关系:
data-main没有指定baseUrl也没有写,那么baseUrl默认是页面所在目录。
data-main指定了而baseUrl没有指定,那么baseUrl默认是data-main所指定的模块所在目录。
data-main指定了baseUrl也指定了,那么baseUrl必须从页面所在目录开始写起。

3) 手动定义require.config,一般在main的最顶上定义。

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        jquery:'jquery-2.2.3.min',
        backbone:'backbone',
        underscore:'underscore'
    },
    shim:{
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
    }
});

通过如上定义,就可以在require模块中使用jq和backbone了。paths相对于baseUrl指定的路径的js文件。shim是加载一些没按照require.js要求来的常用js类库,放到shim中指定一下,就可以使用了。shim下的exports是指调用该类库,所指定的变量名。deps是指它所需要的依赖。

上面这种是关于可以返回变量名,带exports的shim指定,还有一些插件库是不需要返回变量名的,可以这么写:

requirejs.config({
  shim: {
  'jquery.ui.core': ['jquery'],
  'jquery.ui.widget': ['jquery'],
  'jquery.ui.mouse': ['jquery'],
  'jquery.ui.slider':['jquery']
    },
  paths : {
    jquery : 'jquery-2.1.1/jquery',
    domReady : 'require-2.1.11/domReady',
    'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',
    'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',
    'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',
    'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider'
  }
});


require([ 'jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],
    function($) {
      $("#slider" ).slider({
           value:0,
           min: 0,
           max: 4,
           step: 1,
           slide: function( event, ui ) {}     
      });       

    });

3) 模块定义。 config配置好了以后,就要开始在main中写标准的模块定义了。require标准模块定义用define。

main.js
define(["./b"], function(b) {
       //主程序中调用b模块
       console.log(b.good)
    }
);

//a.js  a中没有依赖
define(function() {
       var obj = {
           ok : function(){
               return 111;
           }
        };
        return obj;
    }
);

//b.js  b中依赖a
define(["./a"], function(a) {
        var bb = {
            good : a.ok;
        }
        return bb;
    }
);

总结一下:
1) 导入require.js
2) 配置config
3) 给各个需要加载的模块定义define
4) 那么,就可以实现各个模块互相调用,也可以实现加载一些常用类库了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值