zoukankan      html  css  js  c++  java
  • JS模块化工具requirejs教程(二):基本知识

    基本API

    require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

    • define 从名字就可以看出这个api是用来定义一个模块
    • require 加载依赖模块,并执行加载完后的回调函数

    前一篇中的a.js:

    define(function(){
        function fun1(){
          alert("it works");
        }
    
        fun1();
    })

    通过define函数定义了一个模块,然后再页面中使用:

    require(["js/a"]);

    来加载该模块(注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),requir API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑,如:

    require(["js/a"],function(){
        alert("load finished");
    })

    加载文件

    之前的例子中加载模块都是本地js,但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例:

    require.config({
        paths : {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
        }
    })
    require(["jquery","js/a"],function($){
        $(function(){
            alert("load finished");  
        })
    })

    这边涉及了require.configrequire.config是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,比如将百度的jquery库地址标记为jquery,这样在require时只需要写["jquery"]就可以加载该js,本地的js我们也可以这样配置:

    require.config({
        paths : {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
            "a" : "js/a"   
        }
    })
    require(["jquery","a"],function($){
        $(function(){
            alert("load finished");  
        })
    })

    通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:

    require.config({
        paths : {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
            "a" : "js/a"   
        }
    })
    require(["jquery","a"],function($){
        $(function(){
            alert("load finished");  
        })
    })

    这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery

    1. 在使用requirejs时,加载模块时不用写.js后缀的,当然也是不能写后缀
    2. 上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:
    require(["jquery","underscore"],function($, _){
        $(function(){
            _.each([1,2,3],alert);
        })
    })

    如果某个模块不输出变量值,则没有,所以尽量将输出的模块写在前面,防止位置错乱引发误解

    全局配置

    上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:

    require.config({
        paths : {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
            "a" : "js/a"   
        }
    })

    然后再页面中使用下面的方式来使用requirejs:

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

    解释一下,加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名

    data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

    require.config({
        baseUrl : "js"
    })

    解释一下,加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名

    data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

    第三方模块

    通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,shim解释起来也比较难理解,shim直接翻译为"垫",其实也是有这层意思的,目前我主要用在两个地方
    1. 非AMD模块输出,将非标准的AMD模块"垫"成可用的模块,例如:在老版本的jquery中,是没有继承AMD规范的,所以不能直接require["jquery"],这时候就需要shim,比如我要是用underscore类库,但是他并没有实现AMD规范,那我们可以这样配置

    require.config({
        shim: {
            "underscore" : {
                exports : "_";
            }
        }
    })

    这样配置后,我们就可以在其他模块中引用underscore模块:

    require(["underscore"], function(_){
        _.each([1,2,3], alert);
    })
    1. 插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件"垫"到jquery中:
    require.config({
        shim: {
            "underscore" : {
                exports : "_";
            },
            "jquery.form" : {
                deps : ["jquery"]
            }
        }
    })

    也可以简写为:

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

    这样配置之后我们就可以使用加载插件后的jquery了

    require.config(["jquery", "jquery.form"], function($){
        $(function(){
            $("#form").ajaxSubmit({...});
        })
    })

    好了,requirejs的基本配置大致就是这么多,还有一些扩展的功能会在之后的篇幅中提到

    文章来源:https://github.com/liuxey/blog/issues/2

  • 相关阅读:
    Java实现 LeetCode 343 整数拆分(动态规划入门经典)
    Java实现 LeetCode 342 4的幂
    Java实现 LeetCode 342 4的幂
    Java实现 LeetCode 342 4的幂
    Java实现 LeetCode 341 扁平化嵌套列表迭代器
    Java实现 LeetCode 341 扁平化嵌套列表迭代器
    Java实现 LeetCode 341 扁平化嵌套列表迭代器
    Java实现 LeetCode 338 比特位计数
    H264(NAL简介与I帧判断)
    分享一段H264视频和AAC音频的RTP封包代码
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/4727828.html
Copyright © 2011-2022 走看看