模块化开发

mobile

1，模块===包

　　　 * 传统开发，整个网页我们写了一个js文件，所有的特效都写在里面了

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

　　　　　　　　缺点：变量容易全局环境

　　　　　　　　　　　　耦合度太高，代码之间的关联性太强，不便于后期的维护

　　　　* 将一个复杂的js文件

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

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

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

　　　　　　缺点：发生的请求次数过多，依赖模糊，难以维护

　　　　*使用模块化开发

　　　　　　优点：减少代码之间的关联，

　　　　　　　　　部署方便，

　　　　　　    　　更好的分离，

　　　　　　    　　按需加载，

　　　　　　   　　 避免命名冲突，

　　　　　　    　　容易维护

模块化和传统开发的区别 

1，依赖加载。

　　　　这种方式是最广泛的，像requirejs，sea.js等，除了 编写规范 不一样，实际都是通过相关require api把模块chunk文件拿回来，当加载完成之后再运行逻辑代码。

2，依赖打包。

　　　　经典代表就是webpack，其实就是写代码的时候分开模块，但打包的时候按依赖关系找到各个模块，最后打包到同一个文件上，并给每个chunk标识id，运行逻辑代码时将模块引用指向该id，从而实现模块化。

什么是模块化？

• 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。
• 让开发者便于维护,同时也让逻辑相同的部分可复用
• 模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

　　

• 　node自带的规范· commonjs规范
•     commonjs是node的规范，运行在服务端，不是浏览器端，

　　　　如果使用在浏览器端，需要使用对该文件进行打包编译（借鉴工具-browserify，webpack，gulp等）

• 　书写模块的时候，对外暴露接口

　　　　module.exports={}  export.xxx=

　　　　引入模块require(路径)

• 　commonjs暴露的本质是一个叫exports的对象
•     module.exports={}  export.xxx= 区别：　　

　　　　二者暴露的本质是一样的，都是暴露一个exports对象

　　　　module.exports={} 会覆盖，重新一个新地址
　　　　export.xxx= 是添加属性，

•   commonjs是node的规范，但他是同步加载的

　　　　同步加载在浏览器端是一个坑，只要一个环节卡主了，后面的就没发执行了，所以不建议使用

　　　　如果非要使用，就需要编辑打包

　　

• web端

　　　　每个js都是一个模块，每个模块都必须有一个暴露接口，每个js文件有一个全局的方法require(路径)用于引入模块
　　　　模块---
　　　　1，node自带的模块(包)···path url fs
　　　　2，第三方模块···weui jquery axios zepto npm

　　　　3，自定义模块···我们写的
　　　　　　* 配置模块说明文件· npm init·就会生成一个package.json的文件
　　　　　　1，main:index.js ;我们的主文件是index.js
　　　　　　　　index.js是这个包的输出文件，即便删除了package.json只要不改变index.js的文件名就没事，一旦改了就报错
　　　　　　2，var obj=require('cui')
　　　　　　　　默认在node_modules文件夹下找这个包
　　　　　　　　* 在浏览器端，说require is not defined 说明浏览器不支持commonjs，需要借鉴打包工具
　　　　　　　　browserify