前端工程化之模块化

这篇具有很好参考价值的文章主要介绍了前端工程化之模块化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

模块化的背景

  • 前端模块化是一种标准,不是实现
  • 理解模块化是理解前端工程化的前提
  • 前端模块化是前端项目规模化的必然结果

什么是前端模块化?

前端模块化就是将复杂程序根据规范拆分成若干模块,一个模块包括输入和输出。而且模块的内部实现是私有的,它通过对外暴露接口与其他模块通信,而不是直接调用。现在在HTML文件中可以引用的script包括脚本和模块,其中模块具有更高的开发效率(可读性强、复用性高),而脚本具有更高的页面性能,因为模块相对文件多,加载速度慢。需要注意的是模块在浏览器中运行会存在兼容性的问题,在script声明type="module"即可使用ES Module模块化规范。

模块化的进化过程

  1. 全局function模式,将不同的功能封装成不同的函数,缺陷是容易引发全局命名冲突。比如刚开始在一个js文件中中定义一个一个的函数作为模块,但是这些函数挂载windows上的,污染全局作用域,我在另一个js文件中定义同名的函数就会导致命名冲突,而且无法管理模块依赖关系,进而早起模块化完全依靠约定。
    function api(){
        return {
            data:{
                a:1,
                b:2
            }
        }
    }
  1. 全局namespace模式,约定每个模块暴露一个全局对象,所有的模块成员暴露在对象下,缺点是外部能够修改模块内部数据。将函数放在对象模块中挂载到window上,但是这样外部也能修改对象内部的属性。
var __Module={
    api(){
        return {
            data:{
                a:1,
                b:2
            }
        }
    }
}

那么我们可以通过函数作用域加闭包的特性来解决。

  1. IIFE模式,将模块成员放在函数私有作用域中,通过自执行函数创建闭包,对于暴露给外部的成员通过挂载到全局对象这种方式实现。这种方式实现了私有成员的概念,缺陷是无法解决模块间相互依赖问题。
(function(){
    var a =1;
    function getA(){
        return a;
    }
    function setA(a){
        window.__module.a = a;
    }
    window.__module = {
        a,
        getA,
        setA
    }
})();
  1. IIFE模式增强,支持传入自定义依赖,缺陷是多依赖传入时,代码阅读困难,无法支持大规模的模块化开发,无特定语法支持,代码简陋。
(function(global){
    var a =1;
    function getA(){
        return a;
    }
    function setA(a){
        window.__module.a = a;
    }
    global.__Module_API = {
        a,
        getA,
        setA
    }
})(window)

(function(global,moduleAPI){
    global.__Module = {
        setA:moduleApi.setA
    }
})(window,window.__Module_API)

以上就是早期没有工具和规范的情况下对模块化的落地方式。

通过约定的方式去做模块化,不同的开发者和项目会有不同的差异,我们就需要一个标准去规范模块化的实现方式。针对与模块加载的方式,以上方法都是通过script标签手动引入的方式,模块加载不受代码的控制,时间久了维护会非常麻烦。那么就需要一个模块化的标准和自动加载模块的基础库。

CommonJS规范

介绍

CommonJS规范是Node.js默认模块规范,他规定了每个文件就是一个模块,每个模块有自己的作用域,它的模块加载采用同步加载方式,加载模块的时候必须模块加载完成后再执行后续的代码。它通过require来加载模块,通过exports或module.exports输出模块。

特点

  • 所有代码都运行在模块作用域,不会污染全局作用域
  • 模块可以多次加载,第一次加载时会运行模块,模块输出结果会被缓存,再次加载时,会从缓存结果中直接读取模块输出结果
  • 模块加载的顺序是按照其在代码中出现的顺序
  • 模块输出的值是值得拷贝,类似IIFE方案中的内部变量

1.png

打包

CommonJS要想在浏览器中使用的话需要使用browserify来打包。

browserify打包原理主要是:通过自执行函数实现模块化,将每个模块编号,存入一个对象,每个模块标记依赖模块。它内部实现了require方法,核心是通过call方法调用模块,并传入require、module、exports方法,通过module存储模块信息,通过exports存储模块输出信息。

AMD规范

AMD(Asynchronous Module Definition)规范采用异步加载模块,允许指定回调函数。Node模块通常都位于本地,加载速度快,所以适用于同步加载,但是在浏览器运行环境中,用同步加载会阻塞浏览器渲染,所以在浏览器环境中,模块需要请求获取,适用于异步加载。因此就诞生了AMD规范,用于异步加载,其中require.js就是AMD的一个具体实现库。目前不管是CMD或是AMD用的都很少,在Node开发中通常用CommonJS规范,在浏览器中用ES Module规范。

引用了require.js之后,它会全局定义一个define函数和require函数,所有的模块要用define去定义。define有三个参数:第一个模块名,第二个是数组用于声明模块依赖项,第三个是一个函数,函数参数与第二个参数依赖项一一对应,每一个参数为依赖项导出的成员。函数的作用可以理解为当前模块提供私有的空间,如果要向外导出成员可以通过return来实现。

define('module1',['jquery','./module2'],function($,module2){
    return {

    }
});

而require函数则用来加载模块,当调用require函数的时候,其内部会自动创建script标签来发送脚本文件的请求,并执行相对应的模块代码。

require(['./module1'],function (module1){
    module1.start();
})

目前绝大部分第三方库都支持AMD规范,但是因为要使用频繁使用require、define导致AMD使用起来相对复杂。另外如果模块代码划分的很细致,那么在同一个页面中,JS文件的请求次数相对多,导致页面效率低下。

CMD规范

CMD规范整合了CommonJS和AMD的优点,通过异步加载模块。CMD专门用于浏览器端,其中淘宝的sea.js就是CMD规范的一个具体实现库。

//CMD规范,类似CommonJS规范
define(function(require,exports,module){
    //通过require引入依赖
    var $ = require('jquery')
    //通过exports 或者module.exports对外暴露成员
    module.exports = function(){

    }
})

ESModule规范

目前模块化标准规范已经非常成熟统一了,在Node.js中遵循CommonJS组织模块,在浏览器端使用ESModule规范。目前前端模块化基本统一为CommonJS + ESModule规范。

ESModule规范是目前应用最为广泛的模块化规范,它的设计理念是在编译时就确定模块依赖关系及输入输出。而CommonJS和AMD由于采用闭包的形式必须在运行时才能确定依赖和输入、输出。ESM通过import加载模块,通过export输出模块。

使用ESModule,通过给script标签添加type=module属性,就可以以ESModule的标准执行JS代码。

<script type="module"></script>

ESModule有如下几个特性:

  • ESM自动采用严格模式,忽略’use strict’
  • 每个ESM都是运行在单独的私有作用域中
  • 在ESM中外部的JS模块是通过CORS的方式请求的
  • ESM的script标签会延迟执行脚本,等同于defer属性

注意

在ESM中 export {}它只是导出成员的语法,不是导出字面量对象,import {} from 'xxx',也是语法,不是解构对象,如果想导出对象可以使用export default {},使用import xxx from 'xxx'获取对象。其次通过export {name}导出的name值是引用的不是拷贝,它的值会受到导出模块内部修改的影响,而且name只是可读不能修改。

导入模块的用法

  1. 引用路径必须是完整的文件名称不能省略.js扩展名,相对路径要是用./,可以使用绝对路径和url的方式。
import {name} from './module.js';
import {name} from '/xxx/module.js';
import {name} from 'http://localhost:3000/module.js';
  1. 加载模块,并不导出成员
import './xxx.js';
  1. 使用 * 的方式提取所有的模块,使用as存放在对象中
import * as mod from './xxx.js';
  1. 使用import函数,在运行阶段动态导入模块
import('./xxx.js').then((module)=>{
    console.log(module);
});
  1. 同时导出命名成员和默认成员
//a.js
...
export {name,age}
export default 'title'

//b.js
import {name,age,default as title} from './a.js';
//或者
import title,{name,age} from './a.js';

导出模块的用法

通过export将目录下散落的模块在index文件中导出,方便外部使用

export {name,age} from './module.js';

如果要使用commonjs规范的话就要将对应的js文件改为.cjs后缀名。

Node.js新版本支持

在Node.js新版本中,在package.json中添加type="module"字段就可以使用ESModule规范了。

CommonJS和ESModule规范对比

  • CommonJS模块输出的是值得拷贝,ES6模块输出的是值得引用
  • CommonJS模块是运行时加载,ES6模块是编译时输出接口
  • CommonJS是单个值导出,ES6 Module可以导出多个
  • CommonJS是同步加载,ES6 Module是支持异步加载,通过import()来实现
  • CommonJS的this是当前模块,ES6 Module的this是undefined
  • CommonJS和ES6 Module的语法不同
  • CommonJS是Node.js默认采用的模块化规范,Node14后默认支持ESM。ESM是浏览器默认采用的模块化规范。

模块打包工具

模块化解决了我们在复杂应用当中的代码组织问题,但是随着引入模块化,又产生了新的问题。例如以下问题:

  • ES Modules存在环境兼容问题
  • 通过模块化的方式划分的模块文件比较多,且网络请求频繁
  • 所有的前端资源都需要模块化,不仅仅是JS需要模块化,像html和css都需要模块化

针对第一个问题,我们需要一个工具将代码进行编译,在开发阶段将新特性的代码转换为兼容绝大多数环境的代码。

32.png

针对第二个问题,将模块化的文件打包到一块。

33.png

针对第三个问题,将其他资源通过代码的方式进行控制,统一去维护。

34.png

针对以上问题就需要模块打包工具来解决,例如webpack、parcel和rollup。

通过使用webpack就可以将零散的代码打包到js文件中,对于那些有环境兼容问题的代码就可以通过模块加载器loader去做兼容转换,他还具有代码拆分的能力,可以按我们的需要去打包,不用担心将所有的代码打包到一块,导致文件比较大的问题。我们可以将应用加载过程中初次运行所必须的模块打包到一起,其他的模块单独存放,等到应用运行过程中需要某个模块,再异步加载这个模块,从而实现增量加载或者渐进式加载。

对于资源文件webpack支持在JS中以模块化的方式去载入任意类型的资源文件。打包工具解决的是前端整体的模块化,并不单指JavaScript模块化。

看完觉得对您有所帮助别忘记关注呦

weixin.jpeg文章来源地址https://www.toymoban.com/news/detail-674523.html

到了这里,关于前端工程化之模块化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化相关

    知道软件包名,拿到源码或者路径的方法 在浏览器输入以下内容,就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单: 自动采取严格模式,忽略“use strict” 每个ESM模块都是单独的私有作用域; ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本,就要有

    2024年01月17日
    浏览(61)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(57)
  • 前端工程化-NPM

    NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代

    2024年02月09日
    浏览(52)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(49)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(54)
  • 前端工程化与webpack

    能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

    2024年02月13日
    浏览(57)
  • 前端工程化知识系列(9)

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 持续性能监控和自动化性能优化在前端开发中非常重要。以下是一些相关工具和实践: 性能监控工具 :工具如Google Lighthouse、WebPageTest、PageSpeed Insights等可以

    2024年02月07日
    浏览(46)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(48)
  • 前端工程化之 webpack <一>

    编写的代码 ==》经过打包工具(glup、rollup、webpack、vite)本身也是js代码,读取文件操作的, 依赖于 node 环境 = = 》 普通的html 、css 、javascript = = 》 打包到静态服务器 = = 》 跑在用户的浏览器 用于对路径和文件进行处理 在 Mac OS、Linux 和 window 上的路径上是不一样的,部署的

    2024年01月24日
    浏览(54)
  • 前端需要理解的工程化知识

    1.1 Git 常见工作流程  Git 有4个区域:工作区(workspace)、index(暂存区)、repository(本地仓库)和remote(远程仓库),而工作区就是指对文件发生更改的地方,更改通过git add 存入暂存区,然后由git commit 提交至本地仓库,最后push推送到远程仓库。 工作目录 包括.git 子目录(

    2024年02月10日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包