RequireJS认识及使用

最新推荐文章于 2021-01-28 09:42:24 发布

iokay.cn

最新推荐文章于 2021-01-28 09:42:24 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： requirejs 自执行函数

本文链接：https://blog.csdn.net/Ryice/article/details/80378988

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在写前端这个坑，因为使用大量的框架并且自己的写的工具js也需要引入导致界面臃肿并且稍不注意就会出现冲突。所以使用requirejs来解决这个问题。

AMD规范：全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。requirejs就实现了这个规范。

下载地址：http://www.requirejs.cn/docs/download.html

一、AMD作为一个规范，只定义了API，二不管心其实现。define函数

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

module-name:模块标识，可以省略。

array-of-dependencies:所依赖的模块，是数组的，可以省略。

module-or-object:模块的实现，或者是JavaScript的一个对象。

define具有异步性。define函数执行时，首先回异步调用第二个参数的中罗列的依赖模块，当所有模块别载入完之后，如果第三个函数时回调函数则执行；然后告诉系统模块可用，也通知依赖自己的模块可用。

二、加载

使用requirejs的第一步，就是在界面中引入requirejs。

这种加载方式是阻塞式加载，加载当前js的时候会影响主界面的加载，所以script标签一般放在最后，或者定义为异步加载，defer asnyc。

当requirejs自身完成加载以后就会检查是否有data-main参数这个就是我们要引入的js的一个总和了。

【内部机制】

在RequireJS内部，会使用head.appendChild()将每一个模块依赖加载为一个script标签。RequireJS等待所有的依赖加载完毕，计算出模块定义函数正确调用顺序，然后依次调用它们。

一般使用了requirejs来管理js那么尽量都由他来管理，否者在界面中的js依赖就不能保证，因为requirejs使用异步加载。

三、模块

把js定义为一个模块，可以有效的避免全局名称污染和冲突。因为可以明确起依赖关系。require的define模块的定义

define('module1',["jquery"],function($){
   console.log(11);
});

模块定义好之后的使用

require(["module1"], function(){
   
});

就会打印出11。

四、路径的配置。

1.使用require.cinfig

require.config({
   baseUrl :"resource/external/plugin",
   paths : {
      "validateBox" : "ta-validate-all/validateBox",
   },
   shime :{
      "ztree.core.min" : ["jquery"]
   }
});

baseUrl:基础路径。

paths:定义模块的路径

shime:改造不支持amd的js，并且添加依赖

五、在项目中具体使用

1.引入requirejs,使用data-mian的话自己定义的baseUrl 就无效了。变为mian.js所在的目录

<script src="resources/plugin/require.js"></script>
<script src="resources/plugin/main.js"></script>

2.在main.js中定义模块路径具体如下

require.config({
    baseUrl:"resources/plugin",
    paths:{
        "jquery":"jquery/js/jquery-3.3.1",
        "jcookie":"jquery/js/jquery.cookie",
        "bootstrap":"bootstrap/js/bootstrap",
        "ztree":"zTree/js/jquery.ztree.all",
        "login":"login/js/login",
        "index":"index/js/index"
    },
    shim:{
        "ztree" : {
            deps: ["jquery"],/*依赖*/
            exports:"ztree"/*输出的对象名称*/
        }
    },
    waitSeconds : 0/*禁用等待超时*/
});

比如在界面中使用jquery

<script type="text/javascript">
    require(["jquery"],function($){});
</script>

定义模块

/*登录页的js*/
/*自执行函数*/
(function(factory){
    if(typeof define === "function" && define.amd){/*判断是否有require的环境*/
        define(["jquery"],factory);
    }else{
        factory(jQuery);
    }
})(function($){/*回调函数*/
    
});

使用自执行函数可以判断是否有requirejs环境，在没有requirejs环境下也可以使用。