RequireJs的简述与使用

什么是RequireJs

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
在ES6出现之前，JS不像其他语言同样拥有“模块”这一概念，于是为了支持JS模块化，出现了各种各样的语言工具，如webpack，如ReuqireJS。

ReuqireJS特点：

模块化：模块化就是将不同功能的函数封装起来，并提供使用接口，他们彼此之间互不影响。
不会阻塞页面：RequireJS，会在相关的js加载后执行回调函数，这个过程是异步的，所以它不会阻塞页面。
按需加载：平时我们写html文件的时候，在底部可能会引用一堆js文件。在页面加载的时候，这些js也会全部加载。使用require.js就能避免此问题。举个例子，比如说我写了一个点击事件，放到了一个js文件里，并在html引用，在不使用require.js的情况下，页面加载它跟着加载，使用后则是什么时候触发点击事件，什么时候才会加载js。

RequireJS使用：

在requireJs 中，.js的后缀是可以省略不写的，在require.js 加载完之后，会查找页面上script标签的data-main属性的值，然后加载，data-main指定的js文件，引用：

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

在main.js主文件下通过requireJs同时加载了js1、js2、js3，也可以同时加载更多js文件，第2个回调函数在导入的js文件全部加载完之后才会执行,f1、f2、f3是主模块引用其他模块时在本模块内的使用名称，一般该值为对象。代码

require(['js1', 'js2', 'js3'], function(f1，f2,f3){
  
})

其他子模块只能用define声明，同样的子模块也存在它的下级子模块

define(["require", "exports", "module","js5"],function (require, exports, module,js5) {
})

当然在进行代码编写时会出现代码的混乱，所以我们将配置一个全局环境，如下

require.config({
    //  baseUrl:"libs/"  //相对默认位置
    baseUrl:"libs/",
    paths:{//相对位置
        "jquery":"libs/jquery"
    },
    shim:{//依赖关系
        "jquery.zyslide":["jquery"]//zyslide依赖jquery
    }//有依赖关系后可以省略导入jquery
urlArgs: "time=" +  new Date().getTime()
})

RequireJs的简述与使用

什么是RequireJs

猜你喜欢