Require 模块化

require 模块化的使用

1.引入require的javascript代码，<script data-main="js/main.js" src="js/libs/require.js"></script>

src="js/libs/require.js" 是require的路径，

data-main="js/main.js" 自定义属性，是指require的配置路径

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>

    <div id="app">
    </div>

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

2.js/main.js 的内容如下

requirejs.config({}); 来配置requejs的定义。

baseUrl父路径

paths需要定义的js文件别名

requirejs(["注入的模块别名"], function (注入模块的变量名) {}）；

requirejs.config({
    baseUrl: "js/",
    paths : {
        "jquery": "libs/jquery-3.2.1",
        "index" : "apps/index"
    }
});

requirejs(["jquery", "index"], function ($, index) {

});

此时已经完成模块初始化，js文件都被游览器加载了

但是值得注意的一点是，'paths' 的路径不能带js 可以省略，但是带了js后缀后反而会报错。

---

apps/index.js 的代码如下

define(["jquery"], function ($) {
    $("#app").html("Hello World!");
});

我们把 "jquery" （别名），注入到了方法的变量 "$" 中，我们就可以自由的使用 "jquery" 提供的方法了。

运行效果如下

---

必须注意的一个特性是，require的模块化的js，必须以 "define" 来定义，就像上面的 apps/index.js 一样。但是我们使用第三方所编写的库，如 "jQuery" 、"swiper" ，在较旧的版本中可能并不符合 "define" 定义规范，可能在引入 require 的时候无法使用，此时我们可以使用 "shim" 来导入导出，具体在 "main.js" 中的 require.Config() 来添加，例如：

requirejs.config({
  baseUrl:"js/",
  paths:{
    "jquery":"lib/jquery-3.2.1",
    "swiper":"lib/swiper.min",
    "index":"app/index"
  },
  // 为那些没有使用define()来声明依赖关系、设置
  // 模块的"浏览器全局变量注入"型脚本做依赖和导出配置
  shim:{
    "swiper":{
	//导入的别名
      deps:["jquery"],
	 //导出之后的别名
      exports:"swiper"
    }
  }
})

requirejs(["jquery","swiper","index"],function($,swiper,index){

})

The end.