提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

js模块化[1]

JS 模块
2023-02-25 18:16:38 时间

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

理解

什么是模块/模块化

将一个复杂的程序按照一定的规范，封装成几个块(文件)，并进行组合在一起。 这些模块，最好都做到可复用性，比如可以在多个文件中使用处理时间的模块。

还有，块的内部数据/实现是私有的，只向外部暴露一些接口(方法)与外部其它模块进行通信。

模块化的进化史

最早

最早，我们的js是写到一个文件中，想怎么写怎么写。

var gl = 'gl'
function a(){
    gl = 'glb'
}
console.log(gl)  // 'glb'
function b(){

}

Namespace模式

简单的封装，把一部分属性放到对象中。通过对象.属性调用。 减少Global全局上的变量数目，但本质是对象，完全可以被改掉，不安全。

var wrap = {
    foo:function(){console.log(1)},
    sec:function(){}
}
wrap.foo = function(){alert(11)}
wrap.foo() // 就会弹出11

IIFE模式

立即执行函数。进来就执行，全局是看不到这个函数里面的数据。因此也操作不了它。

var Moudle = (fucntion(){
    var _private = 'safe';
    var foo = function(){
        console.log(_private)
    }
    return {
        foo:foo
    }
})()
Module.foo()
Module._private;   // undefined

引入依赖

JQuery的最外层，其实就是一个立即执行函数。这就是模块模式，也是现代模块实现的基石。

var Moudle = (function(){
    var _$body = $('body');
    var foo = function(){
        console.log(_$body)
    }
    return {
        foo:foo
    }
})(jQuery)
Moudle.foo()

为什么要模块化

  • 降低复杂度
  • 提高解耦性
  • 方便部署。比如不需要轮播图的模块，我们不需要引入 模块化的好处
  • 避免命名冲突(减少命名空间污染)
  • 更好的分离，按需加载
  • 更高复用性
  • 高可维护性

页面引入script

当我们需要引入多个js文件。需要写多个标签。如下，如果1.js中用到jquery.js中的内容，这个加载顺序是不可以换的。并且，引入多少个<script>标签，我们就需要发送多少次请求 

<script src='jquery.js'></script>
<script src='1.js'></script>
<script src='2.js'></script>
<script src='3.js'></script>
<script src='4.js'></script>

所以就带来了如下的问题

  • 请求过多
  • 依赖模糊
  • 难以维护

因此也就需要模块化规范

相关文章