RequireJS进修笔记

假如有迷惑的处所,迎接议论,我是初学,希望能探讨和取得指导;

js加载会壅塞页面加载:

    //requirejs默许异步加载js文件;
    要领一、
        把script放到页面底部加载;
    要领二、
        <script defer async='true' scr=''></script>
        //IE支撑defer
        

定义全局相对途径:

    要领一:
        <script data-main='scripts/main' src='scripts/require.js'></script>
        //自定义属性data-main指定网页顺序的主模块--main.js文件;
        //data-main定义全部网页代码的进口(js文件的相对位置),今后require()此文件下的文件能够直接写文件名;
        //require.js文件位置是恣意的;
        //定义了data-main的瑕玷:
        //    data-main只适用于页面只要一个剧本进口的状况;
        //    假如页面有多个剧本进口,而且与主模块加载的剧本之间有依靠关联,加载会随机报错;
        //    由于data-main定义的主模块内的require()模块是异步加载的,不壅塞页面加载,所以,随机涌现剧本查找不到的毛病--页面内与<script *data-main='' >同级的内联script剧本有能够优先于require(模块)加载终了;
        //
        
    要领二:
        require.config({
            baseUrl:"scripts/"    
            //转变基目次,目次url从能够用相对/相对位置;
        })
        //在主模块中运用require.config({})对模块的加载行动举行自定义;
        
    要领三:
        要领一、二都未设置时,默许以援用require.js的.html文件地点目次为相对根目次;

注重:用baseURL以相对位置修正,是相关于援用requirejs的html为基准定位的—–我是错了好屡次,老是以为是主模块main.js的相对位置

疏忽全局相对途径加载js

    //绕过baseUrl,以传统的体式格局查找剧本文件;
    
    要领一、
        require('*.js')    //加载途径以'.js'末端;
        
    要领二、
        require('/**')    //加载途径以'/'最先;
        
    要领三、
        require('{http:|https:}')    //加载途径包括URL协定;
        
        

依靠关联:

    主模块:data-main属性值的js文件,是全部网站代码的进口,一切代码都从这儿最先运转;
    
    实行模块:
        require([],function(args){
            //require()异步加载;
            //[]示意所依靠模块的数组列表;
            /*function(){}回调函数,当指定模块都加载胜利后被挪用;
            *加载的模块以参数情势传入该函数中,从而在回调函数内部就能够运用这么模块;
            *参数和模块的数目和序次要一一对应;
            *或许经由过程arguments[]来挪用依靠;
            */
        })
    
        
    在define()内部require()模块
        //假如须要在define()函数内部require()别的文件,须要将require.js作为依靠加载;
        

模块的定义(AMD范例):

    /*模块的长处:防止全局定名空间污染--依靠关联以函数参数的情势注入;
    *如jqurey:运用模块加载就无需忧郁援用别的js库引发$标记的归属争执;
    *由于依靠是以函数参数情势注入,使得每一个模块加载差别版本(如依靠差别版本的jquery)的剧本成为能够;
    */
    //引荐一个模块为一个零丁的js文件;
    无依靠关联的模块:
        模块只是名/值对的鸠合:
            define({
                name1:'value1',
                name2:'value2'
            })
        无依靠关联,但须要处置惩罚一些初始化使命:
            define(function(){
                
            })
        
    有依靠关联的模块:
        define('module name',[],function(){
            //第一个参数为模块称号,可选项--不发起定名;
            //[]示意依靠关联的数组列表;
            //function(){}回调函数,当指定模块都加载胜利后被挪用;
            //加载的模块以参数情势传入该函数中,从而在回调函数内部就能够运用这么模块;
            //参数和模块的数目和序次要一一对应;
            //或许经由过程arguments[]来挪用依靠;
            //
            //require()加载这个模块之前会先加载依靠关联;
            //模块应当返回一个本模块/函数 return {
            //    属性名:值,
            //    要领名:function(){}
            //模块名默许为剧本文件名;
            //}
            //
        })
        

模块定义的破例:

    关于传统的"browser globals"剧本,没法经由过程define()表达他们的依靠关联;
    为此,requirejs供应补充计划:
        运用shim config来定义依靠关联;
        

模块名的定义:

    要领一、
        //jQuery库就是经由过程这类要领定名的;
        在定义模块时经由过程给予第一个参数定名--------不引荐;
        
    要领二、
        在主模块中运用require.config
        require.config({
            baseUrl:'',
            paths:{
                'moduleName':'modulePaths'    //途径是以基途径查找;
            }
        })
        //注重:假如经由过程要领一(如:jQuery)定名了的话,要领二定名(如:myjquery)不会起作用;
        //经由过程myjquery援用文件\  
        //require(['myjquery'],function($){
        //$ is undefined-----由于myjquery的值是undefined-----jQuery自著名,没有放权赋给myjquery
        //})
        

天生相关于主模块的途径:

    define(['require'],function(require){
        var Url = require.toUrl('files_paths');    
        //files_paths文件范例恣意;
        //文件是不是存在都行;
        //仅仅是为了取得从该文件最先的相对途径;
    })
    

轮回依靠–重构代码从新设想的警示灯

    轮回依靠:a依靠b,b同时依靠a
    //不能用平常的要领,不然,b会猎取到a=undefined;
    define(["require", "a"],
        function(require, a) {
        
            return function(title) {
                return require("a").doSomething();
            }
        }
    );
    

指定JSONP效劳依靠

    //通报参数的值必需为'define'----将猎取的值算作一个模块定义(返回的值在底层用define()包裹);
    //瑕玷:一旦JSONP效劳超时,经由过程define()定义的别的模块能够不能被实行;
    //缺/长处:requirejs对统一URL地点只猎取一次数据,后继要求猎取的是缓存的值;
    //超时毛病信息:经由过程requirejs.onError()猎取
    require(['http://example.com/api/data.json?callback=define'],function(){
        function(data){
            
        }
    
    })        

挪用模块require():

require([],function(){

//[]示意依靠关联的数组列表;
//数组元素为须要挪用的模块的途径:相对途径(基于baseUrl/主HTML)、相对途径、经由过程paths衔接的途径;
//function(){}回调函数,当指定模块都加载胜利后被挪用;
//加载的模块以参数情势传入该函数中,从而在回调函数内部就能够运用这个模块的属性或要领;
//参数和模块的数目和序次要一一对应;
//或许经由过程arguments[]来挪用依靠;

})        
        

罕见毛病:

    控制台报错--查找不到剧本文件:
        缘由剖析:页面内有多个剧本进口,而且加载require.js的script标签设置了data-main属性;
        解决要领:去掉data-main属性,则requirejs根据此属性异步加载主模块中的剧本;
        
    控制台报错--参数undefined
        缘由剖析:将自著名的模块经由过程paths属性更名援用;
        解决要领:用自著名援用模块,而不自定义模块名;

关于设置题目:
RequireJS设置笔记

    原文作者:米花儿团儿
    原文地址: https://segmentfault.com/a/1190000004825021
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞