[聚合文章] 模块化开发之require.js

介绍

Requires强大灵活的运用是通过配置文件决定的。通过配置文件我们可以给模块取别名、给模块加上版本标识、设置模块依赖、包装非模块等强大功能。同时RequireJS的优化器也大量使用了配置选项，如果你使用grunt、gulp等构建工具的话，也有必要深入的学习配置文件的使用。

使用require.js的好处

1.异步加载文件
按需加载 减少script标签

2.模块化开发
多人开发 代码清晰 维护方便
减少全局变量

define 定义模块

//helper 是模块名，如果不写就默认路径名//jquery 是模块依赖 可以写多个//function 模块的实现的function 这里返回的是对象，参数要和模块依赖对应define('helper',['jquery'],function($) {     return {        trim:function(str){            return $.trim(str);        }     }             });

require 加载模块

//helper 是要加载的模块名require(['helper'],function(helper){    var str = helper.trim('  amd ');    console.log(str)})

baseurl 加载路径

require.js 是以baseurl的地址为基准加载所有代码

paths 定义文件路径 定义后可以直接使用前面的文件名

  'paths': {        'business' : 'js/app/business/',        'framework' : 'js/app/framework/',        'lib' : 'js/lib'    },

shim 如果加载非AMD规范的JS文件,或者配置不不支持amd的库和插件

  'shim' : {         //'modernizr' 不支持amd，加载非AMD规范的JS文件         'modernizr' : {  'exports' : ''modernizr' },        //有依赖关系，依赖jquery，配置不不支持amd的库和插件        'lib/jquery' : { 'deps' : [''], 'exports' : '$' },        'lib/jquery.blockui.min' : { 'deps' : ['lib/jquery'], 'exports' : '$' },        'lib/jquery.jsPlumb-1.4.1-all' : { 'deps' : ['lib/jquery'], 'exports' : '$' },        'app/ajaxProcess' : { 'deps' : ['lib/jquery'], 'exports' : '$' },        //有依赖关系，这些js没有用define来定义，所以可以用shim来设置依赖        'frame/alert' : { 'deps' : ['frame/utils'] },        'frame/pop' : { 'deps' : ['frame/utils'] },        'frame/httpService' : { 'deps' : ['lib/jquery','frame/alert','frame/pop'] },        'frame/framework' : { 'deps' : ['frame/XMap'] }           },

map对于给定的模块前缀，使用一个不同的模块ID来加载该模块。可以很好的控制版本

requirejs.config({    map: {        'some/newmodule': {            'foo': 'foo1.2'        },        'some/oldmodule': {            'foo': 'foo1.0'        }    }});如果各模块在磁盘上分布如下：•foo1.0.js•foo1.2.js•some/   ◦newmodule.js   ◦oldmodule.js当“some/newmodule”调用了“require('foo')”，它将获取到foo1.2.js文件；而当“some/oldmodule”调用“`require('foo')”时它将获取到foo1.0.js。

两个js之间相互依赖怎么写

//没有定义名称，所以默认用路径，依赖jq在shim里面写，也可以在这里面写//要被依赖就要return 返回出去，不然无法依赖　　define(function (){        var time = 4444444444444        function hehe(){            console.log("我爱szz")        }          function lala(){            console.log(time)        }                return {            hehe:hehe ,            lala:lala ,            time:time        }      　　});// business/wjj 是上面的路径，用wjj来接收，当然也可以写其他 　　define(["business/wjj"],function (wjj){           wjj.hehe()           wjj.lala()           console.log(wjj.time)      　　});结果：我爱szz44444444444444444444444444
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。