最全的前端模块化方案

栏目: 编程语言 · 发布时间: 5年前

内容简介:模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容同步加载

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。

会讲述以下内容

  1. CommonJS
  2. AMD 及 核心原理实现
  3. CMD 及 核心原理实现
  4. UMD 及 源码解析
  5. ES6 Module
  6. webpack打包策略

CommonJS

同步加载

CommonJS API是以在浏览器环境之外构建 JS 生态系统为目标而产生的项目

如果没有写后缀名Node会尝试为文件名添加.js、.json、.node后再搜索。

.js件会以文本格式的JavaScript脚本文件解析,.json文件会以JSON格式的文本文件解析,.node文件会以编译后的二进制文件解析。

AMD

异步加载(对象)

"Asynchronous Module Definition"(异步模块定义),是由RequireJS提出的

AMD核心实现

function require (url, callback) {
    // url可以换成List,然后遍历;
    var $script = document.createElement('script');
    $script.src = url;

    // 利用onload回调,实现依赖加载
    $script.onload = function (e) {
      // 省略callback 检测
      callback();
    }
    document.body.appendChild($script);
  }

CMD

按需加载

由玉伯提出的(seajs),按需解析加载模块(代价挺大的),需要使用把模块变为字符串解析一遍才知道依赖了那些模块

CMD核心实现

// ajax,怕忘了原生ajax怎么写。顺手写一个

  function myAjax (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.send();

    xhr.onreadystatechange = function () {
      if (request.readyState === 4) {
          if (request.status === 200) {
              return callback(request.responseText);
          } else {
              // 省略...
          }
      } else {
        // 省略...
      }
    }
  }

  // 实现
  function require(url) {
    myAjax(url, function(res) {
      // 此时 res 的对应JS的 String形式
      // 解析 省略
      // 执行
      eval(res);
    });
  }

UMD

兼容AMD,CommonJS 模块化语法。

UMD源码解析

(function (root, factory) {

    // 判断是否支持AMD(define是否存在)
    if (typeof define === 'function' && define.amd) {
        define(['b'], factory);

    // 判断是否支持NodeJS模块格式(exports是否存在)
    } else if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('b'));

    // 前两个都不存在,则将模块公开到全局(window或global)
    } else {
        root.returnExports = factory(root.b);
    }
  } (this, function (b) {
      // ...
  }));

import

加载引用

  • 编译时加载(静态执行)。
  • 加载的是引用
  • 不能处于代码块中

    • 为了实现编译时加载

      • 提案表示可以用 import() 使用时加载
  • 不能使用表达式和变量 等运行时加载的语法

    • 同上

webpack打包策略

import会被编译成 require/exports (CommonJS规范)

1. 直接引入

import xxx.js 或者 import xxx.css 会像添加 <script><link> 标签一样注入到全局中去

2. commonjs同步语法

webpack会将 require('abc.js') 打包进引用它的文件中。以对象的形式获取。

3. commonjs异步加载

webpack(require.ensure):webpack 2.x 版本中的代码分割。

在commonjs中有一个Modules/Async/A规范,里面定义了 require.ensure 语法。webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码。

此时list.js会被打包成一个单独的chunk文件。像这样:1.d6f343b727f5923508bf.js

例如:vue路由懒加载 const Foo = () => import('./Foo.vue')

manifest

manifest文件是最先加载的,manifest是在vendor的基础上,再抽取出要经常变动的部分,通过manifest.js文件来管理bundle文件的运行和加载。(比如关于异步加载js模块部分的内容)

webpack v4.6.0+ 添加了预取和预加载的支持

import(/* webpackPrefetch: true */ 'LoginModal');
  
  会生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部

整理不易,喜欢请 star, https://github.com/zhongmeizhi


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Fluent Python

Fluent Python

Luciano Ramalho / O'Reilly Media / 2015-8-20 / USD 39.99

Learn how to write idiomatic, effective Python code by leveraging its best features. Python's simplicity quickly lets you become productive with it, but this often means you aren’t using everything th......一起来看看 《Fluent Python》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

MD5 加密
MD5 加密

MD5 加密工具