模块化开发 - 掘金

模块化优点

1、全局变量污染 2、私有化 3、高内聚，低耦合。

commonJS规范（同步引入模块的规范）
        对外暴露 module.exports;
        引入    require("模块路径");

      const gulp = require("gulp");
      gulp.task(); //同步执行，必须等数据下载完成以后，才能够执行。
      【注】只能用于服务端情况。


      ECMA6的规范（异步操作内部做好）
        对外暴露  export default
        引入     import

      AMD 规范 （异步引入模块的规范）
      require(["模块名字"], function(模块){
        模块.xxx();
      })

      对外暴露
      define();


      CMD规范  阿里的人写的，规范死掉了

模块化开发得格式

页面的js文件格式

define(["依赖的js"，"依赖的js"], function ($) {
  function 函数名() {
    $(function () {
    函数体
    });
  }
  return {
    函数名: 函数名,
  };
});

主入口得js文件格式

console.log("加载成功");
//引入所有的模块
//配置路径
require.config({
  paths: {
  	文件名: "文件路径"
    jquery: "jquery-1.11.3",
    "jquery-cookie": "jquery.cookie",
    parabola: "parabola", //抛物线方程不支持AMD规范
    data: "data",
    slide: "slide",
  },
  shim: {
    //设置依赖关系
    "jquery-cookie": ["jquery"],
    //某一个模块，不遵从AMD
    parabola: {
      exports: "_",
    },
  },
});

//调用模块
require(["调用的模块", "slide"], function (函数名, slide) {
  //data.download();
  //data.sc_btnHandleClick();
  //data.rightBtnRemoveClick();
  //data.rightCarHover();
  //data.clearBtnHandleClick();
  //data.rightGoodsAdd_subtract();
  模块.函数();
  slide.banner();
});

require.js的加载 使用require.js的第一步，是先去官方网站下载最新版本。下载后，假定把它放在js子目录下面，就可以加载了。在这里插入图片描述有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：在这里插入图片描述 data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。