请使用firefox,chrome等最新浏览器浏览本站。

requirejs常用配置项

js+jquery 阿豹 507次浏览 0个评论 扫描二维码

页面加载js的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
require.js的诞生,就是为了解决这两个问题:

1.实现js文件的异步加载,避免网页失去响应;
2.管理模块之间的依赖性,便于代码的编写和维护。

require.js的加载:

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

为了避免网页加载require.js造成网页失去响应。解决办法有两个:
1.把requirejs放在网页底部加载
2.另一个是写成下面这样:

<script src="js/require.js"  defer async="true"></script>

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
加载require.js以后,下一步就要加载我们自己的代码了。

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

data-main属性的作用是,指定网页程序的主模块,也就是第一个被requirejs加载的模块。

模块的定义

require(['moduleA', 'moduleB'], function (moduleA, moduleB){
    //my code
});

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

AMD与CMD的区别

1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
2. AMD 推崇依赖前置, CMD 推崇依赖就近。

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
}) 

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})

3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。

加载非AMD规范的模块

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js如何加载非规范的模块呢?
requirejs 的config配置中有个shim属性,专门用来配置不兼容的模块。

 shim: {
        "placeholder": {
            deps: ["eventUtil"],//定义依赖模块
            exports: "PlaceHolder" //定义该模块输出的变量名,只能有一个
        },
    }

require.config()

require.config({
    //模块目录
    baseUrl: "../../assets/js",

   //指定各个模块的加载路径
    paths: {
        jquery: "jquery.1.11.min",
        select: "../plug/select/jquery.customSelect",
        swiper: "../plug/swiper/idangerous.swiper.min",
        date: "../plug/My97DatePicker/WdatePicker",
        jcrop: "../plug/Jcrop-0.9.12/js/jquery.Jcrop.min",
        area: "../plug/area/area",
        placeholder: "../plug/placeholder/placeholder",
        validation: "../plug/verify/jquery.validate.min",
        chart: "../plug/chart/Chart.min",
        modernizr: "../plug/modernizr/modernizr",
        progress: "../plug/progressBar/radialIndicator.min",
        excanvas: "../plug/html5/excanvas",
        angular: "../bower_components/angular/angular.min",
        contrBillboard: "angular/contr-billboard",
        eventUtil: "util",
        qqface: "../plug/qqface/js/jquery.qqFace",
        scroller: "../plug/scroller/scroller.min",
        mobiscroll: "../plug/mobiscroll/js/mobiscroll.custom-2.17.0.min",
        mofangC: "mofangC",
        kindeditor: "../plug/kindeditor/kindeditor-min",
        kindeditorLan: "../plug/kindeditor/lang/zh_CN"
    },

   //配置不兼容的模块
    shim: {
        "mobiscroll": {
            deps: ["jquery"]
        },
        "progress": {
            deps: ["jquery"],
            exports: ""
        },
        "select": {
            deps: ["jquery"],
            exports: ""
        },
        "eventUtil": {
            exports: "eventUtil"
        },
        "scroller": {
            exports: "ScrollPanel"
        },
        "placeholder": {
            deps: ["eventUtil"],
            exports: "PlaceHolder"
        },
        "modernizr": {
            exports: "Modernizr"
        },
        "jcrop": {
            deps: ["jquery"],
            exports: ""
        },
        "qqface": {
            deps: ["jquery"],
            exports: ""
        },
        "angular": {
            exports: "angular"
        },
        "angular-route": {
            exports: "angular-route"
        },
        "kindeditor": {
            //exports: "kindeditor"
        },
        "kindeditorLan": {
            deps: ["kindeditor"],
        }
    },
    //默认加载js等待7s,设置为0,取消限制
    waitSeconds: 0
});


转载请注明requirejs常用配置项
喜欢 (9)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到