requirejs测试

参考资料：http://www.ruanyifeng.com/blog/2012/11/require_js.html

一、文件目录

二、html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>require-js-test</title>

    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>

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

</head>

<body>

</body>

</html>

三、mainjs

require.config({

　paths: {

　　"jquery": "helper/jquery",

　}

});

require(["jquery"],function ($) {

    alert("jquery已经加载完毕");

})

或者另外一种写法

require.config({

    baseUrl:"js/helper",

    paths: {

        "jquery": "jquery",

    }

});

require(["jquery"],function ($) {

    alert("jquery已经加载完毕");

})

四、在main中调用jquery，必须让jquery中先定义再返回，经过查找源码知：

define( "jquery", [], function() {

        return jQuery;

    } );

五、扩展，假设我在helper增加一个自己写的加法math.js，

我想在main中调用，下面来看mathjs中代码，必须用return返回一个json，这样main.js才可以调用

define(function(){

    function sum(a,b) {

        return a+b;

    };

    return{

        add:sum,

    };

})

下面来看main.js

require.config({

    paths: {

        "jquery": "helper/jquery",

        "math":"helper/math"

    }

});

require(["jquery","math"],function ($,math) {

    $(".box").css("color","red");

    alert(math.add(1,2));

})

六、加载非规范的模块（针对没有用AMD规范写的js，想要在main.js中引用）

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

　　require.config({

　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},

　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}

　　　　}

　　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义：

　　shim: {

　　　　'jquery.scroll': {

　　　　　　deps: ['jquery'],

　　　　　　exports: 'jQuery.fn.scroll'

　　　　}

　　}

巴特西

requirejs测试

最新文章

热门文章