模块化开发

·  阅读 27

模块化优点

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。

分类:
前端
分类:
前端