模块化笔记

模块化笔记

modular

全局function模式

1. 能将不同的功能封装成不同的全局函数
2. 但是容易污染

namespace模式

1. 简单的对象封装

2. let obj = {
   	message :'module2'
   	foo(){
   		console.log('foo()',this.message)
   	}
   }
   

3. 但是还是容易被修改

IIFE模式

1. 用闭包函数进行的包装，还有立即执行函数

2. (function(window){
   let message ='moudle'
   function foo(){
   	console.log('foo()',message)
   }
       window.moudle = {foo}
       //绑定在全局的一个对象上
   })(window)
   

3. 调用直接用moule.foo()采用即可

IIFE模式增强

如何增强：引入依赖

这就是现代模块化实现的基石

(function(window，$){
let message ='moudle'
function foo(){
	console.log('foo()',message)
}
    window.moudle = {foo}
    //绑定在全局的一个对象上
    $('body').css('background','red')
})(window，jquery)

load script

1. 一个页面需要引入多个js文件
2. 问题
   1. 请求过多
   2. 依赖模糊
   3. 难以维护
3. 这些问题可以通过现代化模块化编程和项目构建来解决
   1. commonjs

commonjs

1. 规范
   1. 说明
      1. 网址。。。。。
      2. 每个文件都可以当作一个模块
      3. 在服务器端：模块的加载时运行时同步加载的（会等待，相当于阻塞
      4. 在浏览器端：模块需要提前编译打包
   2. 基本语法
      1. 暴露模块
         1. exports.xxx = value(任意数据类型)
         2. moudle.exports = value
         3. 暴露的模块到底是什么？
         4. 都是exports对象
         5. 原本时{}空的对象
         6. 第一个时给exports加属性，第二个时给模块的exports对象赋值
      2. 引入模块
         1. require（xxx）
         2. 第三方模块：xxx为模块名（就是npm的包名）
         3. 自定义模块：xxx为模块文件路径名
2. 实现
   1. 服务器端的实现
      1. node.js
      2. http://nodejs.cn/
   2. 浏览器端的实现
      1. Browserify（魔法帽（很神奇
      2. http://browserify.org/
      3. 也称commonjs的浏览器端的打包工具
   3. 区别Node和Browserify

//package.json
{
	//必须有两个属性
	'name':'commonjs_node',
    //不能用中文，不能用大写
    'version':'1.0.0'
}
//用终端生成：npm init
//在后面可以自己写一个替代

commonjs-Node

在node环境下运行

1. 下载第三方模块 npm install uniq（–save为默认属性

2. moudle1.exports = {
   	msg:'moudle1'
   	foo(){
   		console.log(this.msg)
   	}
   }
   

3. moudle2.exports = function(){
   console.log(moudle)
   }
   

4. exports.foo = function(){
   	consloe.log('foo() moudles3')
   }
   
   exports.bar = function(){
   	consloe.log('bar() moudles3')
   }
   
   //继续暴露
   exports.arr=[1,2,2,3,3]
   

5. //引入第三方模块,放在自定义库的上面(默认)
   let uniq = require('uniq')
   
   //将其他的模块引入
   let moudle1 = require('./moudle1')
   let moudle2 = require('./moudle2')
   let moudle3 = require('./moudle3')
   
   moudle1.foo();
   moudle2()//moudle2相当于函数
   moudle3.foo()
   moudle3.bar()
   
   let result = uniq(moudle3.arr)
   console.log(result)
   //uniq根据数组的第一位的数字惊醒的编码
   

commonjs-Browserify

在index.html环境下运行

dist/build(构建的意思) 打包生成文件的目录

1. 下载browserify

   全局npm install browserify -g
   局部npm install browserify --save -dev
   //运行依赖和开发依赖
   

   开发依赖 -dev (devdependencies)

   运行依赖 --save(生产环境)(dependencies)

2. moudle1.exports = {
   	msg:'moudle1'
   	foo(){
   	console.log(this.msg)
   	}
   }
   

3. moudle2.exports = function(){
   console.log(moudle)
   }
   

4. exports.foo = function(){
   	consloe.log('foo() moudles3')
   }
   
   exports.bar = function(){
   	consloe.log('bar() moudles3')
   }
   

5. let moudle1 = require('./moudle1')
   let moudle2 = require('./moudle2')
   let moudle3 = require('./moudle3')
   
   moudle1.foo();
   moudle2()//moudle2相当于函数
   moudle3.foo()
   moudle3.bar()
   

6. //在index.html下引入,但要对源文件进行打包处理(用browserify
   

7. 

   -o的意思为输出的意思

   左侧是源文件

   右侧是输出的文件处,bundle意思是打包,其实怎么处理文件名都无所谓,但最好这样

AMD

即requirejs的基本使用方法

模块包的引入(文件创建太多,没法写了)

(显示声明依赖注入

CMD

省略

ES6

最火,所以重点