Javascript知识汇总------Require学习笔记

.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script data-main="main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script><!-- 同步加载,会导致页面失去响应一段时间 -->
    <script data-main="main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" defer async="true"></script><!-- 异步加载,defer兼容IE -->
</head>
<body>
    <div></div>
    <script>
        /**
         * requireJs主要解决两个问题
         *  1. 实现js文件的异步加载,避免网页失去响应
         *  2. 管理模块之间的依赖性,便于代码的编写维护
         * 
         * requireJs加载分3部分
         *      1. 引入:<script data-main="libs/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js">
         *      2. 模块配置: 
         *          baseUrl->基础路径     paths->路径
         *          require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min" } });
         *      3. 主模块写法:
         *          main.js,我把它称为”主模块”,意思是整个⽹网⻚页的⼊入⼝口代码
         *          require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here });
         *          
        */
    </script>
</body>
</html>

main.js

 

/*
            根目录
                |
    -------------------------------
    |              |              |
indx.html       main.js         libs
                                    |
                            ----------------------------
                            |             |            |
                            jquery       showDate   testShim
*/
require.config({
    baseUrl:'libs', //表示基础路径paths中都是相对于baseUrl展开的
    paths: {  //对于标准模块定义方法通过paths属性来定义
        "jquery" : "jquery",
        "showDate" : "showDate"
    },
    shim : { //非标准模块化定义
        testShim : {
            deps : [],
            exports : 'Obj2' //与非标准中暴露出来的变量名一致(testShim.js中的Obj2 || Obj1),若此处为Obj1->下面fn1的值就为1,若为Obj2->下面fn1的值为2
        }
    }
});
require(["jquery","showDate"],function ($,showDate){
    console.log($); //Jquery对象
    showDate.show(); //1
});
require(["testShim"],function (testShim){
    testShim.fn1(); //shim中exports定义的值与js模块中暴露的值一职才能正常运行
});

 .showDate.js

define(function (){
    var num = 10;
    function showDate(){
        $('div')[0].innerHTML = '哈哈哈';
    }
    return {
        show:showDate
    }
});
/*
define(['jquery'],function ($){  //在此处定义其依赖项
    var num = 10;
    function showDate(){
        $('div')[0].innerHTML = '哈哈哈1';
    }
    return {
        show:showDate
    }
})
*/

 

.testShim.js

/**
 * 非标准第一种写法
 * 
 */
window.Obj1 = {  //输出全局变量Obj1
    fn1 : function(){
        console.log(1)
    }
};
/**
 * 非标准第二种写法
 * 
 */
(function (window){  //输出全局变量Obj2
    var Obj2 = {};
    Obj2.fn1 = function (){
        console.log(2)
    }
    window.Obj2 = Obj2;
})(window);

 

posted @ 2018-04-13 15:45  吴小碎同学  阅读(158)  评论(0编辑  收藏  举报