JS模块化简述

110 阅读3分钟

一. 首先说下script标签上的的2个参数:async 、defer

   1. 默认是 当解析到script标签会立即阻塞渲染,并立刻执行当前script内容
   2. async是 解析到标签开始异步下载不会阻塞渲染,解析完之后开始执行script
   3. defer是 解析到标签开始异步下载下载完成之后开始执行,并且阻塞渲染
   **async defer 可以兼容到IE9 asyncIE9的某些浏览器可能会造成异步失效所以最好是兼容IE9以上**
   最早多个script标签引入的模块化开发,会造成全局污染的问题,不适合做一些大型项目

二.** 模块化的前夜 IIFE(语法侧的优化)**

尝试定义一个最简单的独立模块。
`  const iifeModule = (() => {
        let count = 0;
        const increase = () => ++count;
        const reset = () => {
            count = 0;
        }
        console.log(count);
        increse();
})() `
核心思想就是利用函数作用域的特性独立出来。
如果独立模块本身也有额外的依赖,该如何解决优化?
`  const iifeModule = ((module1,module2) => {
        let count = 0;
        const increase = () => ++count;
        const reset = () => {
            count = 0;
        }
        console.log(count);
        increse();
})(module1,module2) `// 可以利用传参的方式,把模块的依赖传进去。

三. 了解一下其他开源框架的模块化方案

`  const iifeModule = ((module1,module2) => {
            let count = 0;
            const increase = () => ++count;
            const reset = () => {
                count = 0;
            }
            console.log(count);
            increse();
            return {
                increase,
                reset
            }
    })(module1,module2)  `
    这里值得说的就是设计模式里的揭示模式,基本意思就是上层的应用不应该干涉底层的一个实现方式,
    底层应用内部做了哪些逻辑,上层应用是无感知的,上层应用只需要感知到底层应用暴露出来的接口就可以。
    一些开源项目为何要把全局、指针以及框架本身引用作为参数?
    (function(window, $, undefined) {
        const show = function() {
            $('#app').val('hello word')
        }
        window.webShow = show;
    })(window, jQuery)
    // 阻断思路(在写框架或者做架构有没有下面的这些考虑?)
        window: 1.这里是要把全局作用域转换为局部作用域,增加查找速度,提升执行效率。
                2.还有编译上的优化,当window当做参数传进来,他就是一个局部变量,他会
                随着函数执行完而被销毁,对于一个全局存储立即清除销毁更优雅。所以他会优
                化压缩成本和回收成本
        jQuery: 因为jQuery是可以挂载自定义实例的,当把他转换为局部的时就可以独立的定
                制的复写和挂载,这样就不会造成全局污染。
        dundefined: 防止外部对这个模块的改写。不管你传进来什么,他始终是一个
                    undefined。保证一个安全问题。

四. cjs - CommonJS 模块化; 为nodejs所指定

     特征:通过 module + exports 去对外暴露接口

          通过require 引入外部模块
          main.js 文件
           const module1 = require('./module1') 
           const module2 = require('./module2')
           let count = 0;
            const increase = () => ++count;
            const reset = () => {
                count = 0;
            }
            console.log(count);
            increse();
           module.exports = {
               increase,
               reset
            }

优点: 率先在服务端实现,从框架层解决了依赖、全局变量污染问题

缺点: 针对解决了服务端方案,对异步拉取依赖处理不是很完美。

那么何如解决异步拉取的问题呢?(那就是AMD规范)

五. AMD规范