js 模块化

当项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理

 

模块化进化历史

1、全局函数模式

一堆function ......

2、使用对象的模块化

将同一功能的函数放在对象里，分工明确，不污染全局变量

 

 

调用方法 对象.方法名

结果

 

  这种方法不安全，只要 对象.方法名就可以调用了，本质还是对象

 

3、IIFE模式：匿名函数自调用（闭包）

//IIFE模式
(function(b){
    let msg = 'hong'
    function debug(){
        console.log(msg)
    }    
    // 暴露接口
    b.module = {msg,debug}
})(window)

立即执行函数，块作用域来申明function防止污染全局变量

module相当于 window.module

依赖jquery

 

 

//IIFE模式
(function(b,$){
    let msg = 'hong'
    function debug(){
        console.log(msg)
    }    
    // 暴露接口
    b.module = {msg,debug}
    $('body').css({'color':'#333','background-color':'#efefef'})
})(window,jQuery)

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------

script 引入多了， 要发起多次请求

如果相互有依赖的还不能中断

 

 

请求过多，依赖模糊，难以维护---------------------因此需要模块化规范化 

 

为什么要模块化？

降级复杂度，降级耦合度，方便后期优化，减少维护成本，避免全局污染，按需加载

 

当模块多起来，页面加载script情况

 

script 引入多了， 要发起多次请求

如果相互有依赖的还不能中断

 

模块化规范

1、CommonJS

每个js文件都可以当作一个模块

在服务器端，模块的加载运行时时同步加载的 （排队等待加载，服务端无法立即返回给浏览器，用户体验差）

在浏览器端，模块不能直接导入，模块需要体现编译打包处理，否则解析不了

 

基本语法

暴露模块 ：

刚开始 module.exports 为 空对象 { }

module.exports = value

export.xxx =value

 

引入模块:

require(xxx)

第三方模块：xxx为模块名

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

 

 

• node-服务端

 

模块一二三文件

module.exprots 相当于一个空对象

module.exports = {
    msg:'module1',
    foo(){
        console.log(this.msg)
    }
}

module.exports = function () {
    console.log('module2')
}

exports.foo = ()=>{
    console.log('foo() modules3')
}

exports.bar = ()=>{
    console.log('bar() modules3')
}

exports.arr = [1,3,3,4,2,5]

　　

package.json文件 相当于说明书 ----- name和version是必要的

创建除了手动创建

还可以通过 npm init 创建

  

 

 

 

  

app.js

node 文件项目目录中

app.js：项目入口及程序启动文件。

package.json：包描述文件及开发者信息。

导入依赖

 

 

 

 

 

 

•  Browserify模块化使用教程-----基于浏览器

1. 项目结构

　　/-js

　　/-dist //打包生成文件的目录

　　/-src //源码所在的目录

　　　　/-modules1.js
　　　　/-modules2.js
　　　　/-modules3.js
　　　　/-app.js //应用主源文件
　　/-index.html

　　/-package.json

　　 {

　　　　"name":"broserfiy-test"
　　}

 

cnpm install browserify -g

 --save 局部  -dev 开发环境 

 

broserfiy可以用来打包编译，node中支持require,浏览器中不支持，所以需要打包编译成能识别的内容 

index.html

<script src="./js/src/app.js"></script>

运行时报错

  

 在浏览器端，模块不能直接导入，模块需要体现编译打包处理，否则解析不了

三、打包处理

 

browserify js/src/app.js -o js/dist/bundle.js

-o output 输出 为 js/dist/bundle.js

index.html引入

<script src="./js/dist/bundle.js"></script>