您的位置:68399皇家赌场 > 企业邮局 > Intel及requireJS

Intel及requireJS

发布时间:2019-12-12 05:09编辑:企业邮局浏览(105)

    require(卡塔尔国中的信任是叁个数组,就算唯有二个重视,你也必得使用数组来定义

     define([ 'text!review.txt', 'image!cat.jpg' ], function  { console.log; document.body.appendChild;
    

    输入文件

      require.js在加载的时候会检讨data-main属性,当requireJS自己加载施行后,就能另行异步加载data-main属性指向的main.js。那个main.js是这段日子网页全数逻辑的进口,理想图景下,整个网页只要求那三个script标识,利用requireJS加载信赖的别样文件

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

      [注意]在main.js中所设置的脚本是异步加载的。所以只要在页面中配备了其余JS加载,则无法承保它们所正视的JS已经加载成功

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

    【内部机制】

      在RequireJS内部,会利用head.appendChild(卡塔尔(英语:State of Qatar)将每一个模块信任加载为二个script标签。RequireJS等待全数的信任性加载实现,计算出模块定义函数准确调用顺序,然后挨门逐户调用它们

     

        require.config({ paths : { "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"], "a" : "js/a" } }); require(["jquery", "a"], function(){ alert;    body 
    

    各种模块是叁个单独的js文件。那样的话,如果加载四个模块,就能够生出多次HTTP央求,会影响网页的加载速度。因而,require.js提供了三个优化学工业具,当模块布署达成之后,能够用这几个工具将三个模块归总在三个文书中,缩小HTTP乞求数。

    AMD规范

      英特尔(Asynchronous Module Definition卡塔尔翻译为异步模块定义。异步强调的是,在加载模块以致模块所信任的任何模块时,都采纳异步加载的法子,幸免模块加载拥塞了网页的渲染进程

      AMD作为二个职业,只需定义其语法API,而不爱戴其达成。AMD标准简单到唯有叁个API,即define函数

    define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
    

      module-name: 模块标志,能够轻巧

      array-of-dependencies: 所正视的模块,能够回顾

      module-factory-or-object: 模块的落到实处,可能七个JavaScript对象

      define函数具备异步性。当define函数施行时,首先会异步的去调用第3个参数中列出的信赖模块,当全部的模块被载入达成之后,若是第七个参数是叁个回调函数则进行;然后告诉系统模块可用,也就通报了信任于本身的模块自个儿曾经可用

     

    管制模块之间的依靠,便于代码的编辑和掩护

    二、require.js的加载

    模块

      模块区别于守旧的剧本文件,它优越地定义了一个效率域来制止全局名称空间污染。它能够显式地列出其依据关系,并以函数(定义此模块的可怜函数卡塔尔(قطر‎参数的样式将那个信任进行注入,而无需引用全局变量。RequireJS的模块是模块情势的三个扩大,其好处是无需全局部援用其余模块

      RequireJS的模块语法允许它赶紧地加载四个模块,即使加载的顺序不定,但依靠的相继最后是不利的。同期因为没有要求创设全局变量,以至能够完毕在同叁个页面上还要加载同一模块的例外版本

      二个文件应该只定义1个模块。多少个模块可以采纳内置优化学工业具将其团伙打包

      假诺大家的代码不依据于任何此外模块,那么能够直接写入javascript代码

    //main.js
    console.log(1);
    

    图片 1

      但那样的话,就没供给运用require.js了。真正不足为怪的景观是,主模块注重于别的模块,那时就要动用Intel典型定义的的require(卡塔尔国函数

    // main.js
    require(['moduleA'], function(a){
      console.log(a);
    });
    //moduleA.js
    define(function(){
        return 1;
    })
    

    图片 2

      这里抛出二个标题,为啥主模块使用的是require(卡塔尔(英语:State of Qatar)函数,而模块moduleA使用define(卡塔尔函数呢?因为define(卡塔尔国定义的模块能够被调用,而require(卡塔尔(قطر‎无法。主模块main.js是进口文件,须求调用别的模块,而没有必要被别的模块调用,所以接收require(卡塔尔(英语:State of Qatar)或define(卡塔尔(英语:State of Qatar)都足以。而moduleA须求被调用,所以只可以选择define(卡塔尔国

      如果把moduleA.js中的define(卡塔尔国方法改为require(卡塔尔方法,则重回undefined

    // main.js
    require(['moduleA'], function(a){
      console.log(a);
    });
    //moduleA.js
    require(function(){
        return 1;
    })
    

    图片 3

    【轻巧的值对】

      上边的模块moduleA中,回调函数重返了三个数字。而其实,模块能够有八种方式,比如一个回顾的值对

    define({
        color: "black",
        size: "unisize"
    });
    

      重临的结果如下:

    图片 4

    【函数式定义】

      如若叁个模块未有别的依靠,但要求叁个做setup专业的函数,则在define(卡塔尔中定义该函数,并将其传给define(卡塔尔(قطر‎

    define(function () {
        //Do setup work here
        return {
            color: "black",
            size: "unisize"
        }
    });
    

      重临的结果如下:

    图片 5

    【存在借助的函数式定义】

      若是模块存在依靠:则率先个参数是依附的称呼数组;第二个参数是函数,在模块的兼具正视加载完成后,该函数会被调用来定义该模块,由此该模块应该回到三个定义了本模块的object。依赖关系会以参数的款式注入到该函数上,参数列表与依附名称列表风姿洒脱风姿罗曼蒂克对应

    //moduleA.js
    define(['moduleB'], function(b) {
        var num = 10;
        return b.add(num);
        }
    );
    ////moduleB.js
    define({
        add: function(n){
            return n 1;
        }
    });
    

    图片 6

    【命超级模特块】

      define(卡塔尔国中能够分包一个模块名称作为第4个参数

    //moduleA.js
    define("moduleA",['moduleB'], function(b) {
        var num = 10;
        return b.add(num);
        }
    );
    

      那么些常由优化工具生成。也得以温和显式钦定模块名称,但那使模块更不享有移植性——正是说若将文件移动到任何目录下,就得重命名。平常最佳防止对模块硬编码,而是交由优化学工业具去变通。优化学工业具要求更动模块名以将八个模块打成贰个包,加速到浏览器的载入速度

     

    兑现js文件的异步加载,幸免网页失去响应

    有意思味的相爱的人可以看下://www.jb51.net/article/33346.htm

    加载

      使用require.js的首先步,是先去官网下载最新版本。下载后,假定把它献身js子目录上面,就足以加载了

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

      HTML中的script标签在加载和试行进度中会窒碍网页的渲染,所以平日须要尽量将script标签放置在body成分的底层,以便加快页面展现的快慢,还应该有风华正茂种艺术就是由此异步加载的点子来加载js文件,这样能够制止js文件对html渲染的鸿沟

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

     

        require{ alert;    body 
    

    async属性表明这一个文件需求异步加载,防止网页失去响应。IE不帮忙这一个天性,只帮衬defer,所以把defer也写上。

    路子配置

      html中的base元素用以钦命文书档案里装有相对ULANDL地址的幼功U奔驰M级L,requireJS的baseUrl跟这些base成分起的功效是近乎的,由于requireJS总是动态地乞求依赖的JS文件,所以自然涉及到多个JS文件的门径解析难点,requireJS暗中同意接纳风度翩翩种baseUrl

    • moduleID的深入分析方法,requireJS对它的拍卖信守如下准绳:

      1、在未有选取data-main和config的景况下,baseUrl暗中同意为近来页面包车型地铁目录

      2、在有data-main的事态下,main.js前边的有个别正是baseUrl,比方上边的js/

      3、在有config的情景下,baseUrl以config配置的为准

      上述三种格局,优先级由低到高排列

      RequireJS以叁个针锋相投于baseUrl的地方来加载全数的代码。页面顶层script标签富含三个新鲜的品质data-main,require.js使用它来运行脚本加载进度,而baseUrl日常设置到与该属性相生机勃勃致的目录

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

      在模块章节的演示中,代码如下所示

    // main.js
    require(['moduleA'], function(a){
      console.log(a);
    });
    //moduleA.js
    define(function(){
        return 1;
    })
    

      入口文件main.js注重于moduleA,直接写成['moduleA'],暗中认可意况下,require.js假定moduleA与main.js在同二个目录,即'js/moduleA.js',文件名叫moduleA.js,然后自行加载

    图片 7

      使用require.config(卡塔尔(英语:State of Qatar)方法,大家能够对模块的加载行为开展自定义。require.config(卡塔尔(قطر‎就写在主模块(main.js)的头顶。参数便是贰个对象,那个目的的paths属性钦点各样模块的加载路线

      上边在demo文件夹下新建四个test文件夹,并在test文件夹下新建贰个moduleA.js文件,内容如下

    //moduleA.js
    define(function(){
        return 2;
    })
    

      而在原先的js文件夹下,依旧存在壹个moduleA.js文件,内容如下

    //moduleA.js
    define(function() {
        return 1;
    });
    

      当js文件夹下的main.js进行config配置时

    // main.js
    require.config({
        baseUrl: 'test'
    })
    require(['moduleA'], function(a){
        console.log(a);
    });
    

       结果为2,表明识别的是'test/moduleA.js'文件

    图片 8

      当js文件夹下的main.js不开展config配置时

    // main.js
    require(['moduleA'], function(a){
        console.log(a);
    });
    

      结果为1,表明识别的是'js/moduleA.js'文件

    图片 9

      RequireJS暗许假定全体的依附财富都是js脚本,因而没有必要在module ID上再加".js"后缀,RequireJS在进展module ID到path的分析时会自动补上后缀 

      假如二个模块的门径比较深,恐怕文件名极度长,举个例子'js/lib/moduleA.min.js',则足以运用config配置对象中的paths属性

    // main.js
    require.config({
        paths:{
            'moduleA':'lib/moduleA.min'
        }
    })
    require(['moduleA'], function(a){
        console.log(a);
    });
    
    //moduleA-min.js
    define(function(){
        return 3;
    })
    

      结果为3

    图片 10

      要小心的是,这里的paths的'moduleA'设置的是'lib/moduleA.min',并非'js/lib/moduleA.min',是因为requireJS中的文件深入分析是五个"baseUrl

    • paths"的分析进度

      在index.html的输入文件设置的是'js/main',所以baseUMuranoL是'js'。因而'baseUrl

    • paths' = 'js/lib/moduleA.min'

      如若在config配置对象中装置了baseUrl,则以此为准

    // main.js
    require.config({
        baseUrl: 'js/lib',
        paths:{
            'moduleA':'moduleA.min'
        }
    })
    require(['moduleA'], function(a){
        console.log(a);
    });
    

      结果风华正茂律为3,baseUGL450L是'js/lib',paths是'moduleA.min'。因而'baseUrl paths' = 'js/lib/moduleA.min'

    图片 11

      假诺三个module ID相符下述准绳之大器晚成,其ID拆解解析会避开常规的"baseUrl paths"配置,而是直接将其加载为叁个相持于当下HTML文书档案的本子:1、以 ".js" 甘休;2、包罗 UEscortL 协议,如 "http:" or "https:"

      如下所示,require(卡塔尔国函数所正视的模块路线为'js/moduleA.js'

    // main.js
    require.config({
        baseUrl: 'js/lib',
        paths:{
            'moduleA':'moduleA.min'
        }
    })
    require(['js/moduleA.js'], function(a){
        console.log(a);
    });
    

      而该公文的代码如下,路径为'js/moduleA.js',并不是'js/lib/moduleA.min',所以,最后结果为1

    //moduleA.js
    define(function() {
        return 1;
    });
    

      平常的话,最佳依旧使用baseUrl及"paths" config去设置module ID。它会带给额外的灵活性,如便于脚本的重命名、重一向等。 同偶然间,为了幸免混乱的配备,最佳不用选取多级嵌套的目录档次来公司代码,而是要么将具备的脚本都停放到baseUrl中,要么分置为项目库/第三方库的一个扁平布局,如下

    www/
        index.html
        js/
            app/
                sub.js
            lib/
                jquery.js
                canvas.js
            main.js
    

     

    浏览器

    最初的时候,全部Javascript代码都写在三个文本之中,只要加载那三个文件就够了。后来,代码更加多,一个文书非常不足了,必得分成四个公文,依次加载。上面包车型大巴网页代码,相信广大人都见过:

    CommonJS

      后面提到过,commonJS首要使用于劳动器端编制程序,如nodejs。使用打包工具Browserify能够对CommonJS进行格式转变,使其能够在浏览器端进行

      而requireJS扶助生机勃勃种轻松包装CommonJS的主意,只要在commonJS代码的外层简单包装大器晚成层函数,就可以在浏览器端间接运转

    define(function(require, exports, module) {
    
    });
    

      假如该模块还依据其余模块,如依据模块moduleA,则代码如下

    define(['moduleA'],function(require, exports, module) {
    
    });
    

      a.js和b.js的commonJS方式的代码如下

    // a.js
    var a = 100;
    module.exports.a = a;
    
    // b.js
    var result = require('./a');
    console.log(result.a);
    

      index.html直接引用b.js会报错,提醒require未有被定义

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

      将a.js和b.js举行改建之后,代码如下

    // a.js
    define(function(require, exports, module) {
        var a = 100;
        module.exports.a = a;
    });
    
    // b.js
    define(function(require, exports, module) {
        var result = require('./a');
        console.log(result.a);
    });
    

      index.html将进口文件设置为'js/b',则结果为100

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

     

    step 1

    反对上,require.js加载的模块,必得是比照英特尔标准、用define(卡塔尔函数定义的模块。不过实际,固然曾经有部分盛行的函数库相符Intel规范,越来越多的库并不相符。那么,require.js是或不是能够加载非标准的模块呢?

    别的布置

      在requireJS中,除了路线配置之外,还会有风度翩翩对别样安插

    【配置安装】

      在前边的事例中,大家布置requireJS中的路线是经过入口文件main.js中的config对象来配置的。实际上,不经过入口文件,也能够拓展requireJS的配备

      1、在index.html文件嵌入javascript代码

      在HTML文件中,加载requireJS文件之后,马上对requireJS举行布置,相当于将main.js文件变为内嵌的javascript文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <script src="require.js"></script>
    <script>
    require.config({
        baseUrl: 'js/lib',
        paths:{
            'moduleA':'moduleA.min'
        }
    })    
    require(['moduleA'], function(a){
        console.log(a);
    });
    </script>
    </body>
    </html>
    

      2、将安插作为全局变量"require"在require.js加载早前行行定义,它会被自动应用

      这里有多少个难题是,如若require作为全局变量被提前定义,则data-main入口文件,是以baseUrl为幼功实行安装的

      [注意]应用 var require = {} 的样式并非 window.require = {}的样式。后面一个在IE中运作不日常

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <script>
    var require = {
        baseUrl: 'js/lib',
        paths:{
            'moduleA':'moduleA.min'
        }    
    }    
    </script>
    <script src="require.js" data-main="../main"></script>
    </body>
    </html>
    

    【shim】

      shim属性为那四个从没选拔define(卡塔尔(قطر‎来声称重视关系、设置模块的"浏览器全局变量注入"型脚本做正视和导出配置,即加载非标准的模块

      比方来讲,underscore和backbone那七个库,都还没使用英特尔标准编写。若是要加载它们来讲,必需先定义它们的表征。具体来讲,各类模块要定义(1)exports值(输出的变量名),声明那个模块外界调用时的名号;(2)deps数组,申明该模块的依赖性

      通过如下配置后,将来能够经过_调用underscore的api,使用Backbone来调用backbone的api

      require.config({
        shim: {
    
          'underscore':{
            exports: '_'
          },
          'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
          }
        }
      });
    

      jQuery的插件能够如下那样定义,以往能够通过jQuery.fn.scroll来调用该插件的api

      shim: {
        'jquery.scroll': {
          deps: ['jquery'],
          exports: 'jQuery.fn.scroll'
        }
      }
    

     

    创设叁个main.js把step 第22中学require.config放到main.js中

    落到实处js文件的异步加载,防止网页失去响应; 管理模块之间的信任性,便于代码的编纂和掩护。

    懒加载

      犹如下例子,入口文件main.js代码如下

    // main.js
    require(['a'], function(a){
        console.log('main');
        document.onclick = function(){
            a.test();
        }
    });
    

      所信任的模块a.js的代码如下

    define(function(){
        console.log('a');
        return {
            test : function(){
                console.log('a.test');
            }
        }
    })
    

      在浏览器端实行时,纵然不点击页面,浏览器也会下载a.js文件。那几个性子消耗是小心的

    图片 12

      Intel保留了commonjs中的require、exprots、module那四个功效。能够不把信任罗列在dependencies数组中。而是在代码中用require来引进

      重写后的代码如下

    // main.js
    define(function(){
        console.log('main');
        document.onclick = function(){
            require(['a'],function(a){
                a.test();
            });
        }
    });
    //a.js
    define(function(){
      console.log('a');
        return {
            test : function(){
                console.log('a.test');
            }
        }
    })
    

      在浏览器端实施时,如若不点击页面,浏览器就不会下载a.js文件,那样就兑现懒加载

    图片 13

     

    step 3

    六、加载非规范的模块

    前方的话

      由CommonJS集体提议了不菲新的JavaScript构造方案和行业内部,希望能为前端开拓提供统风度翩翩的教导。英特尔标准便是中间比较知名叁个,全称是Asynchronous Module Definition,即异步模块加运载飞机制,完整描述了模块的概念,信任关系,援引关系甚至加运载飞机制。而AMD标准的作者亲身得以实现了切合AMD标准的requireJS。本文将详细介绍Intel及requireJS

     

    require.config是用来配置模块加载地点

    require.config(卡塔尔国选取三个配置对象,那个指标除了有前方说过的paths属性之外,还应该有三个shim属性,特意用来构造不相配的模块。具体来讲,种种模块要定义,注明这一个模块外界调用时的名目;deps数组,证明该模块的依附。

    插件

      require.js还提供一文山会海插件,实现部分一定的功能

    【dom ready】 

      RequireJS加载模块速度火速,很有望在页面DOM Ready在此以前脚本早就加载完成。须要与DOM人机联作的行事应等待DOM Ready。今世的浏览器通过DOMContentLoaded事件来布告

      然而,不是装有的浏览器都支持DOMContentLoaded。domReady模块完成了一个跨浏览器的秘籍来推断曾几何时DOM已经ready

    // main.js
    require(['domready!'], function(){
        console.log('ready');
    });
    

    【text】

      text插件能够用来加载如.html、.css等公事文件,可以经过该插件来兑现全体组件(构造 逻辑 样式卡塔尔国的组件化开垦

    require(["some/module", "text!some/module.html", "text!some/module.css"],
        function(module, html, css) {
        }
    );
    

     

    其次个参数是回调函数,可以用来减轻模块之间的依赖

    下边就来看,怎么写main.js。

    require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] }});require(["jquery", "jquery.form"], function{ $.ajaxSubmit;
    

    RequireJS的对象是激励代码的模块化,它采纳了不一致于古板"script"标签的本子加载步骤。使用RequireJS加载模块化脚本将巩固代码的加载速度和品质。

    step 4

    具体来讲,就是模块必需利用一定的define(卡塔尔(英语:State of Qatar)函数来定义。假若一个模块不凭仗别的模块,那么能够平素定义在define(卡塔尔函数之中。

    赶快上手

    require.js加载的模块,采纳AMD标准。也便是说,模块必得服从Intel的规定来写。

    引入require.js

    require.config({ baseUrl: "js/lib", paths: {"jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min"}});
    

    RequireJS 是多个JavaScript模块加载器。它极度符合在浏览器中使用。使用RequireJS加载模块化脚本将抓好代码的加载速度和品质。

    当require(卡塔尔(英语:State of Qatar)函数加载下边这一个模块的时候,就能够先加载myLib.js文件。

    是否相称

    首先,加载的时候,浏览器会截至网页渲染,加载文件越来越多,网页失去响应的日子就能够越长 由于js文件之间存在依附关系,由此必得严刻管教加载顺序,重视性最大的模块必定要放到最终加载,当信赖关系很复杂的时候,代码的编写和保卫安全都会变得艰苦。

    step 2

     require(['jquery', 'underscore', 'backbone'], function { // some code here});
    

    IE 6 兼容 ✔ Firefox 2 兼容 ✔ Safari 3.2 兼容 ✔ Chrome 3 兼容 ✔ Opera 10 兼容 ✔

    七、require.js插件

    step 第22中学另行现身了require.config配置,假如每一个页面中都加入配置,就显得相当的小好了,requirejs提供了后生可畏种叫"主数据"的成效

    生机勃勃旦这一个模块还依据别的模块,那么define(卡塔尔函数的第贰个参数,必得是贰个数组,指明该模块的重视性。

    兼容性

    行使require.js的首先步,是先去官方网站下载最新版本。

    假定一定的地点比较长,能够利用 baseUrl : "js",则paths中就绝不写js了

    require.js的出生,正是为着解决那多少个难点:

    优点

    加载require.js以后,下一步将在加载大家和好的代码了。假定大家团结的代码文件是main.js,也位于js目录上边。那么,只要求写成下边那样就能够了:

    经过require加载的模块日常都急需切合AMD标准即选取define来评释模块,不过一些时候要求加载非英特尔规范的js,那时就需求用到另三个效果:shim

     shim: { 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' } }
    

    本文由68399皇家赌场发布于企业邮局,转载请注明出处:Intel及requireJS

    关键词: 68399皇家赌场 脚本 简单 之家 使用方法