Require JS——用法

最新推荐文章于 2024-05-20 20:27:18 发布

追上明天的脚步

最新推荐文章于 2024-05-20 20:27:18 发布

阅读量345

点赞数

文章标签： requireJS JS

本文链接：https://blog.youkuaiyun.com/wyb15594982127/article/details/84628922

版权

Why use？

当一个页面依次加载多个Js文件时，网页就可能会失去响应，而且每个Js文件之间可能存在依赖关系，所以代码编写起来会很困难，维护起来也不方便。

So，Require Js来啦

主要解决了以下两个问题：

（1）实现Js文件异步加载，避免网页失去响应；

（2）管理模块之间的依赖关系，便于代码的编写与维护。

HTML嵌入部分

<script src="js/Require.js" defer async="true" data-main="js/main"></script>

src：不用多说，Require资源位置，CDN引入更好

defer async：保证异步加载，兼容写法，IE只认defer

data-main：指定程序的主模块，后缀默认.js，可省

How write？主模块

//main.js
require(['jquery','knockout'],function($,ko){
   
    //some code here
    //此处略去一万句代码

});

require()函数接收两个参数：

（1）数组，表示所依赖的模块，如 jquery ， knockout 等，也可以是你自己写的 js 模块

（2）回调函数，当前面的模块加载完成之后，该回调被调用

加载的模块会以参数的形式传入该函数，从而在回调函数内部就可以使用该模块，代码就写在回掉当中

What？非规范模块

我们先用require.config()做以配置：

require.config({
//baseUrl
   baseUrl:"js/lib",
//paths
   paths{
     "jquery.scroll","jquery.scroll"
   }
//shim
   shim{
      "jquery.scroll":{
         deps:['jquery'],
         exports:'jquery.fn.scroll'
      }
   }
});

baseUrl：基础路径

paths：具体加载路径

shim：配置不兼容模块区域

（1）deps：数组，表示该模块的依赖性

（2）exports：表示这个模块外部调用时的名称

配置完成后再使用require()函数进入正题

End，Bye