文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Javarscript中模块、加载与捆绑的示例分析

2024-04-02 19:55

关注

这篇文章给大家分享的是有关Javarscript中模块、加载与捆绑的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

JS模块简介

js模块化,简单说就是将系统或者功能分隔成单独的、互不影响的代码片段,经过严格定义接口,使各模块间互不影响,且可以为其他所用。

常见的模块化有,C中的include (.h)文件、java中的import等。

为什么JS需要模块

很显然,没有模块我们也可以实现同样的功能,为什么我们还要使用模块来写js代码呢?下面几点是模块化给我们带来的一些变化:

ES5及之前的模块系统

在ES5及之前版本,还没有原生的模块语法。不过这并不代表ES5之前,前端没有使用模块。简单介绍两种:IIFE、Revealing Module.

IIFE

Immediately Invoked Function Expression,立即执行函数表达式。

(function(){
  // ...
 })()

看上面的代码,IIFE可以说成是一个在定义的时候就执行的匿名函数。注意函数是先被”()”包起来了,然后后面紧跟”()”表示执行函数。如果是以下代码,将会报错:

function(){
  console.log('test');
 }()
 // => Uncaught SyntaxError: Unexpected token )

这种写法表示,先定义一个匿名函数,然后再去解析”()”。由于在第一行”function”出现在首位,这表明此处定义一个函数,函数后紧跟”()”,此时表示单独解析”()”,就会报出上面的错误信息,因此需要先将函数定义包裹起来。
“(function…)”这种写法表示执行”()”内部代码,并返回该语句执行结果,此处返回结果为该函数,后面紧跟”()”即表示执行该函数。IIFE可以帮助我们做到:

显而易见,这种编码方式并没有提供良好的机制来解决依赖管理问题。

Revealing Module

根据字面暂解释为揭示模式,与IIFE形式类似,但是提供了一个返回值。方便集中管理公有的api,使模块、公用api更加简洁清晰。

// Expose module as global variable
 var singleton = function(){
  // Inner logic
  function sayHello(){
  console.log('Hello');
  }
  // Expose API
  return {
  sayHello: sayHello
  }
 }()

稍微注意下,上面的代码,我们并没有用”()”去包裹,因为关键字”function”并不在该行的开头。

我们可以像下面这样使用模块api:

// Access module functionality
 singleton.sayHello();
 // => Hello

当然,我们也可以以构造函数形式导出:

// Expose module as global variable
 var Module = function(){
  // Inner logic
  function sayHello(){
  console.log('Hello');
  }
  // Expose API
  return {
  sayHello: sayHello
  }
 }

请注意,上面函数在定义的时候并没有执行。

我们可以这么使用它:

var module = new Module();
module.sayHello(); // => Hello

与IIFE一样,揭示模式并没有提供良好的解决依赖管理的方案。

更多模块化解决方案

ES6或者ES2015,自带原生的模块语法。

在这之前,有以下几种常见的用于模块化的解决方案:

AMD

AMD,Asynchronous Module Definition,异步模块定义。AMD形式被用于浏览器端,使用”define”来定义模块依赖:

//Calling define with a dependency array and a factory function
 define(['dep1', 'dep2'], function (dep1, dep2) {
  //Define the module value by returning a value.
  return function () {};
 });

CMD

CMD,Common Module Definition,通用模块定义。该规范由国内大神玉伯提出,与AMD区别在与AMD是依赖关系前置,有该依赖就必须先加载依赖,CMD是按需加载。

// CMD
 define(function(require, exports, module) {
 var a = require('./a')
 a.doSomething()
 // 此处略去 100 行
 var b = require('./b') // 依赖可以就近书写
 b.doSomething()
 // ...
 })
 // AMD 默认推荐的是
 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
 a.doSomething()
 // 此处略去 100 行
 b.doSomething()
 ...
 })

CommonJs

CommonJs在Node.js中用的较多,使用”require”来定义依赖,使用”module.exports”来定义模块:

var dep1 = require('./dep1');
 var dep2 = require('./dep2');
 module.exports = function(){
  // ...
 }

UMD

UMD,Universal Module Definition,通用模块定义。可以用于浏览器端与Node.js端:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
  // AMD. Register as an anonymous module.
   define(['b'], factory);
  } else if (typeof module === 'object' && module.exports) {
  // Node. Does not work with strict CommonJS, but
  // only CommonJS-like environments that support module.exports,
  // like Node.
  module.exports = factory(require('b'));
  } else {
  // Browser globals (root is window)
  root.returnExports = factory(root.b);
  }
 }(this, function (b) {
  //use b in some fashion.
  // Just return a value to define the module export.
  // This example returns an object, but the module
  // can return a function as the exported value.
  return {};
 }));

System.register

System.register方式设计初衷主要是为了在ES5中能够支持ES6模块语法:

import { p as q } from './dep';
 var s = 'local';
 export function func() {
  return q;
 }
 export class C {
 }

ES6 module

ES6中自带原生的模块语法,使用关键字”export”来导出模块的公用api:

// lib.js
 // Export the function
 export function sayHello(){
  console.log('Hello');
 }
 // Do not export the function
 function somePrivateFunction(){
  // ...
 }

以关键字”import”来导入模块:

import { sayHello } from './lib';
 sayHello();
 // => Hello

目前各浏览器对ES6的支持度不一,因此我们现在需要使用编译器,像Babel,来将ES6的代码编译成ES5的形式。

模块加载器

一个模块加载器可以理解模块,并以固定的形式来加载模块。

模块加载器工作在运行时,流程大致如下:

一些比较常见的模块加载器有:

模块打包

模块打包可以替换模块加载器。

然而,相比模块加载器,模块打包动作是在编译时运行的:

截止目前,比较常用的模块打包方案有以下两种:

感谢各位的阅读!关于“Javarscript中模块、加载与捆绑的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯