码迷,mamicode.com
首页 > Web开发 > 详细

JS模块化

时间:2018-07-10 12:59:01      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:引入   save   sync   def   amd   cmd   在服务器   text   提高   

一、理解

1、什么是模块、模块化?

将一个复杂的程序依据一定的规范封装成几个文件,并进行组合在一起

2、为什么要模块化?

降低复杂度,提高解耦性,部署方便

3、模块化的好处

  • 避免命名冲突(减少命名空间污染)
  • 更好的分离,按需加载
  • 更高复用性
  • 高可维护性

4、页面引入加载script

 

二、模块化规范

1、CommonJS(node根据该规范编写)

说明:

每一个文件都可以当做一个模块

在服务器端:模块的加载 是运行时同步加载的

在浏览器端:模块需要提前编译打包处理

基本语法:

模块引入:require(xxx)

  第三方模块:xxx为模块名

  自定义模块:xxx为模块文件路径

暴露模块:exports.xxx = value 和 module.exports = value

  暴露的模块 本质是 exports 对象  

  exports本身是一个空对象 exports.xxx = value是给exports对象添加属性或方法

  module.exports = value 是直接用value新对象来覆盖原来的空对象

实现:

服务器端实现:Node.js

浏览器端实现:Browserify (CommonJS的浏览器端的打包工具)

下载安装browserify

  全局:npm install browserify -g

  局部:npm install browserify --save-dev

定义模块代码(js文件代码 并暴露相应内容)

引入模块  在app.js 中用require引入模块 但是浏览器不认识require方法,需要打包处理js

  在根目录下 终端输入 browserify js/src/app.js -o js/dist/bundle.js  (js/src/app.js源文件 js/dist/bundle.js 是打包输出的文件)

页面使用引入:

<script type="text/javascript" src="js/dist/bundle.js"></script> (浏览器真正跑的是打包生成的文件)

 

 

2、AMD

说明:

专门用于浏览器端的模块化规范,模块的加载是异步的

基本语法:

定义暴露模块:

  //定义没有依赖的模块:

  define(function(){

    return 模块

  })

  //定义有依赖的模块:

  define([‘module1‘,‘module2‘],function(m1,m2){

    return 模块

  })

引入使用模块:

   require([‘module1‘,‘module2‘],function(m1,m2){

    使用m1/m2

  })

实现(浏览器端):

Require.js

3、CMD(了解)

说明:专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行

基本语法:

定义暴露模块:

  //定义没有依赖的模块:

  define(function(require,exports,module){

    exports.xxx = value

    module.exports = value

  })

  //定义有依赖的模块:

  define(function(require,exports,module){

    //引入依赖模块(同步)

    var module2 = require("./module2")

    //引入依赖模块(异步)

    require.async("./module3",function(m3){

    })

    //暴露模块

    exports.xxx = value

  })

引入使用模块:

   require(function(require){

    var m1 = require(‘./module1‘)

    var m4 = require(‘./module4‘)

    m1.show()

    m4.show()

  })

实现(浏览器端):Sea.js

4、ES6

说明:依赖模块需要编译打包处理

语法:

  导出模块:export xxx

  引入模块:import  xxx from "url"

页面引入

实现(浏览器端):

  使用Babel将ES6编译为ES5代码

  使用Browserify编译打包js

 

JS模块化

标签:引入   save   sync   def   amd   cmd   在服务器   text   提高   

原文地址:https://www.cnblogs.com/lihuijuan/p/9284100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!