模块化

Posted 2020-12-04 mapsxy

模块
*
* 区别：
* 1、模块一般说的是功能，一个功能就是一个模块。比如注册功能，整个这个流程是一个模块。
* 乐高玩具，一堆小零件，最后可以组装成各式各样的“飞机”、“坦克”、“轮船”。
*
* 2、组件则更接近编码，将页面拆分成几个多个可复用的组件。用几个小零件拼出一堆“翅膀”，
* 这样当小伙伴也想组装一个“飞机”的时候，关于“翅膀”，
* 他不需要自己从头拼起，直接把我拼好的“翅膀”拿去就好了。这里的“翅膀”，就是组件化。
* 没有统一的接口。
*
* 3、插件，近似组件，有统一的接口；
*
*
*模块儿化：
* 1、模块：具体实现某种特定功能的方法和代码；
* 一个模块就是具有某中特定功能的文件，这样就会特别方便，需要什么功能，就引入什么模块
*
* 2、为什么需要模块儿化
* 1. 全局变量污染
* 2. 文件互相依赖的问题
*
* 3、模块的发展
* 一、原始写法
* 二、对象写法
* 三、立即执行函数写法 重点
* 四、放大模式
* 五、宽放大模式（Loose augmentation）
* 六、输入全局变量
*
* 4、javascript模块儿化的规范：
* CommonJS（nodejs）、AMD（requireJS）、CMD（Seajs）、ES6
*
* 5、AMD：异步模块定义
* requirejs：
* 前端模块化管理的工具库，是AMD规范的具体实现；
* require是异步执行，不影响他后面代码的执行；
* require回调函数里的代码，需要依赖模块加载完成之后执行；
*
* 模块定义
* define([‘模块1‘,‘模块2‘], function(){
* //需要模块加载完成之后，才可以执行
* return {
* 函数1: function(){
* }
* }
* })
*
* 第一个参数：可省略，如果不需要依赖别的模块，就可以省略，格式：是数组
* 第二参数：必须的，他是引入的模块加载完成之后才可以使用
*
* 载入入口文件（当requirejs一执行完，就执行的函数，该函数叫做载入入口文件）
* data-main=‘js/mian‘
*
* 模块配置
* require.config({
* baseUrl: 地址,
* paths:{
* "别名":"原名"
* }
* })
*
* 自定义模块
* return {
* //需要给别人使用的功能
* }
*
* 模块：
* 原生：自执行函数
*
* <script src="js/require.js" defer async="true" >
* async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。