模块化的进化过程_前端培训

模块化的进化过程

1 全局function模式

编码: 将不同的功能封装成不同的全局函数

问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

function m1(){
//…
}
function m2(){
//…
}

2 命名空间模式：简单对象封装

作用: 减少了全局变量，解决命名冲突

问题: 数据不安全(外部可以直接修改模块内部的数据)

let myModule = {
  data: ‘www.baidu.com’,
  foo() {
   console.log(`foo() ${this.data}`)
},
  bar() {
   console.log(`bar() ${this.data}`)
}
}
myModule.data = ‘other data’ // 能直接修改模块内部的数据
myModule.foo() // foo() other data

这样的写法会暴露所有模块成员，内部状态可以被外部改写。

3 IIFE模式：匿名函数自调用

作用: 数据是私有的, 外部只能通过暴露的方法操作

编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口

问题: 如果当前这个模块依赖另一个模块怎么办?

<!– index.html文件 –>
<script type=”text/javascript” src=”module.js”></script>
<script type=”text/javascript”>
   myModule.foo()
   myModule.bar()
   console.log(myModule.data) //undefined 不能访问模块内部数据
   myModule.data = ‘xxxx’ //不是修改的模块内部的data
   myModule.foo() //没有改变
</script>// module.js文件
(function(window) {
  let data = ‘www.baidu.com’
  //操作数据的函数
  function foo() {
   //用于暴露有函数
   console.log(`foo() ${data}`)
}
  function bar() {
   //用于暴露有函数
   console.log(`bar() ${data}`)
   otherFun() //内部调用
}
  function otherFun() {
   //内部私有的函数
   console.log(‘otherFun()’)
}
  //暴露行为
  //为了在模块内部调用全局变量，必须显式地将其他变量输入模块，让依赖关系更明显。
  window.myModule = { foo, bar }
})(window, jQuery)

最后得到的结果：

4 IIFE模式增强：引入依赖

// module.js文件
(function(window, $) {
  let data = ‘www.baidu.com’
  //操作数据的函数
  function foo() {
   //用于暴露有函数
   console.log(`foo() ${data}`)
   $(‘body’).css(‘background’, ‘red’)
}
  function bar() {
   //用于暴露有函数
   console.log(`bar() ${data}`)
   otherFun() //内部调用
}
  function otherFun() {
   //内部私有的函数
   console.log(‘otherFun()’)
}
  //暴露行为
  //为了在模块内部调用全局变量，必须显式地将其他变量输入模块,让依赖关系更明显。
  window.myModule = { foo, bar }
})(window, jQuery) // index.html文件
  <!– 引入的js必须有一定顺序 –>
  <script type=”text/javascript” src=”jquery-1.10.1.js”></script>
  <script type=”text/javascript” src=”module.js”></script>
  <script type=”text/javascript”>
   myModule.foo()
  </script>

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。

上一篇: 模块化的理解_前端培训
下一篇: 任务划分（面试重点）_大数据培训

热门视频