• require.js


    概念:
    代码的模块化
    主要是按需加载,只有当你用到那个模块时,才会去加载相应的代码,没有用到有功能模块代码就不会去加载


    主要解决:
    A js加载阻塞页面渲染(例如:传统引用a.js,若a.js文件里有alert函数,会出现点击‘确认’后,html才会加载)加载文件越多,网页失去响应的时间就会越长;
    B 由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

    引入方法:
    <script data-main="scripts/main.js" src="scripts/require.js"></script>

    1 属性的作用:


    data-main: 指定网页程序的主模块。这个文件(main.js)会第一个被require.js加载。
    由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
    main.js作用:整个网页的入口代码。代码都从这儿开始运行。

    2 加载这个文件,也可能造成网页失去响应。解决办法有两个:

    A 把它放在网页底部加载
    B <script src="js/require.js" defer async="true" ></script>
    // async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

    使用方法:

    equire会定义2个变量:define,require
    define 定义一个模块
    require 加载依赖模块,并执行加载完后的回调函数 。形式如:require([依赖模块数组形式],fn)
    两者的区别是:define是定义自己的模块有返回值 require是先加载依赖,加载后执行回调函数

    define 的使用:
    //a 模块没有依赖时,定义
    define(function(){
    function fun1(){
    alert("it works");//调用a里面的方法
    }

    fun1();
    })

    //b 模块存在依赖时,第一个参数是依赖的名称数组;第二个参数是函数,


    在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object。(任何函数的返回值都是允许的)
    依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应。

    //定义
    define(["./cart", "./inventory"], function(cart, inventory) {
    return {
         color: "blue",
         size: "large",
          addToCart: function() {
                  inventory.decrement(this);
                   cart.add(this);
        }
    }
    });

    require使用:

    1 引入js模块
    require.config({

    baseUrl:‘’,// 根路径设置,paths下面全部都是根据baseUrl的路径去设置

    baseUrl :所有模块的查找根路径。如果baseUrl定义过了,则以baseUrl为准,如未显式设置baseUrl,则默认值是加载require.js的HTML所处的位置。
    paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],//远程不成功的话,就加载本地的库
    "underscore" : "js/underscore"
    }
    })

    //$是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用
    // 用require引入要引入的模块,[]:里面为引入的名称,已经在main.js里面的Paths设置好了
    // function(),小括号里面对应[]里面值,按顺序在()给变量名,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
    // jquery一般用 $, bootstrap模块没有输出,函数里面可以不用变量

    2 给模块起名字===》先加载依赖,加载后执行回调函数

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

    alert("load finished");//如果某个模块不输出变量值,则没有,所以尽量将输出的模块写在前面,防止位置错乱引发误解
    _.each([1,2,3],alert); //模块是指各个js文件,可以嵌套使用
    })


    全局配置

    第三方模块:通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js(nuderscore.js/低版本的jq.js),这时候就需要用到另一个功能:shim(垫成符合AMD规范的模块)


    1)使用方法:

    1加载非AMD规范的js库文件
    require.config({
    shim: {
    "underscore" : {
    exports : "_";// 如果该模块加载进来,需要输出一个值,那就用exports来设置,
    }
    }
    })
    2插件形式的非AMD模块,我们经常会用到jquery的插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件"垫"到jquery中:
    require.config({
    shim: {
    "jquery.form" : {
    deps : ["jquery"],//jquery.form依赖jq,依赖文件
    exports : "form",
    }
    }
    })


    注意问题
    1 一个文件一个模块: 每个Javascript文件应该只定义一个模块,这是模块名-至-文件名查找机制的自然要求。
    2 define()中的相对模块名: 为了可以在define()内部使用诸如require("./relative/name")的调用以正确解析相对名称,
    记得将"require"本身作为一个依赖注入到模块中:

    define(["require", "./relative/name"], function(require) {
    var mod = require("./relative/name");
    });

    3 define()中的相对模块名:
    为了可以在define()内部使用诸如require("./relative/name")的调用以正确解析相对名称,
    记得将"require"本身作为一个依赖注入到模块中:

    define(["require", "./relative/name"], function(require) {
    var mod = require("./relative/name");
    });

    4 require.js要求,每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。
    插件:

    require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。
    domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
    text和image插件,则是允许require.js加载文本和图片文件。

    // ES5严格模式
    'use strict';

  • 相关阅读:
    session_id 生成原理
    压缩后的数据 要经过 base64_encode 后才能在网络上传送
    MySQL ANALYZE TABLE
    mysql 优化2
    mysql 查询优化
    第归调用
    『GoLang』函数
    『GoLang』控制结构
    『GoLang』语法基础
    『Python』装饰器
  • 原文地址:https://www.cnblogs.com/fanjiawen/p/9341858.html
Copyright © 2020-2023  润新知