关灯
开启左侧

模块化的理解

[复制链接]
老蚊子 发表于 2019-1-11 08:14:51 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
1.什么是模块?
  • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
  • 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

2.模块化的进化过程
  • 全局function模式 : 将不同的功能封装成不同的全局函数
    • 编码: 将不同的功能封装成不同的全局函数
    • 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系

  1. function m1(){
  2.   //...
  3. }
  4. function m2(){
  5.   //...
  6. }
复制代码
namespace模式 : 简单对象封装
  • 作用: 减少了全局变量,解决命名冲突
  • 问题: 数据不安全(外部可以直接修改模块内部的数据)
  1. let myModule = {
  2.   data: 'www.baidu.com',
  3.   foo() {
  4.     console.log(`foo() ${this.data}`)
  5.   },
  6.   bar() {
  7.     console.log(`bar() ${this.data}`)
  8.   }
  9. }
  10. myModule.data = 'other data' //能直接修改模块内部的数据
  11. myModule.foo() // foo() other data
复制代码
这样的写法会暴露所有模块成员,内部状态可以被外部改写。



IIFE模式:匿名函数自调用(闭包)
  • 作用: 数据是私有的, 外部只能通过暴露的方法操作
  • 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
  • 问题: 如果当前这个模块依赖另一个模块怎么办?
  1. // index.html文件
  2. <script type="text/javascript" src="module.js"></script>
  3. <script type="text/javascript">
  4.     myModule.foo()
  5.     myModule.bar()
  6.     console.log(myModule.data) //undefined 不能访问模块内部数据
  7.     myModule.data = 'xxxx' //不是修改的模块内部的data
  8.     myModule.foo() //没有改变
  9. </script>
复制代码
  1. // module.js文件
  2. (function(window) {
  3.   let data = 'www.baidu.com'
  4.   //操作数据的函数
  5.   function foo() {
  6.     //用于暴露有函数
  7.     console.log(`foo() ${data}`)
  8.   }
  9.   function bar() {
  10.     //用于暴露有函数
  11.     console.log(`bar() ${data}`)
  12.     otherFun() //内部调用
  13.   }
  14.   function otherFun() {
  15.     //内部私有的函数
  16.     console.log('otherFun()')
  17.   }
  18.   //暴露行为
  19.   window.myModule = { foo, bar } //ES6写法
  20. })(window)
复制代码
最后得到的结果:


  • IIFE模式增强 : 引入依赖
这就是现代模块实现的基石
  1. // module.js文件
  2. (function(window, $) {
  3.   let data = 'www.baidu.com'
  4.   //操作数据的函数
  5.   function foo() {
  6.     //用于暴露有函数
  7.     console.log(`foo() ${data}`)
  8.     $('body').css('background', 'red')
  9.   }
  10.   function bar() {
  11.     //用于暴露有函数
  12.     console.log(`bar() ${data}`)
  13.     otherFun() //内部调用
  14.   }
  15.   function otherFun() {
  16.     //内部私有的函数
  17.     console.log('otherFun()')
  18.   }
  19.   //暴露行为
  20.   window.myModule = { foo, bar }
  21. })(window, jQuery)
复制代码
  1. // index.html文件
  2.   <!-- 引入的js必须有一定顺序 -->
  3.   <script type="text/javascript" src="jquery-1.10.1.js"></script>
  4.   <script type="text/javascript" src="module.js"></script>
  5.   <script type="text/javascript">
  6.     myModule.foo()
  7.   </script>
复制代码
上例子通过jquery方法将页面的背景颜色改成红色,所以必须先引入jQuery库,就把这个库当作参数传入。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显
3. 模块化的好处
  • 避免命名冲突(减少命名空间污染)
  • 更好的分离, 按需加载
  • 更高复用性
  • 高可维护性
4. 引入多个<script>后出现出现问题
  • 请求过多
首先我们要依赖多个模块,那样就会发送多个请求,导致请求过多
  • 依赖模糊
我们不知道他们的具体依赖关系是什么,也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
  • 难以维护
以上两种原因就导致了很难维护,很可能出现牵一发而动全身的情况导致项目出现严重的问题。模块化固然有多个好处,然而一个页面需要引入多个js文件,就会出现以上这些问题。而这些问题可以通过模块化规范来解决,下周将介绍开发中最流行的commonjs, AMD, ES6, CMD规范。






 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

11粉丝

60帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )