JS - JS模块化

已于 2023-08-30 15:05:23 修改
阅读量127 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-03-29 09:32:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39158686/article/details/129830222
版权

模块化

  • 什么是模块化？

    • 将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起
    • 块的内部数据/实现是私有的，只是向外暴露一些接口（方法）与外部其它模块通信
    • 编码时是按照模块一个一个编码的，整个项目就是一个模块化的项目

  • 一个模块的组成

    • 数据——>内部的属性
    • 操作数据的行为——>内部的函数

  • 模块化的发展

    • 全局function模式

      • 编码：全局变量/函数
      • 问题：污染全局命名空间，容易引起命名冲突/数据不安全

    • namespace模式

      • 编码：将数据/行为封装在对象中
      • 解决：命名冲突（减少了全局变量）
      • 问题：数据不安全（外部可以直接修改模块内部的数据）

    • IIFE模式/增强

      • IIFE：立即调用函数——>匿名函数自调用

      • 编码：将数据和行为封装在一个函数内部，通过window添加属性来向外暴露接口

      • 引入依赖：通过函数形参来引入依赖模块

        (function(window, module1){
    var data = '123'
    function foo() {
        module1.xxx()
        console.log('foo()'+data)
    }
    function bar() {
        console.log('bar()'+data)
    }
    window.module = {foo}
})(window, module1)

  • 模块化规范

    • CommonJS

      • Node.js：服务器端

      • Browserify：浏览器端，也称为js的打包工具

      • 基本语法：

        • 定义暴露模块：exports

          exports.xxx = value
module.exports = value

          引入模块：require

          var module = require('模块名/模块相对路径')

        • 引入模块发生在什么时候？

          • Node：运行时，动态同步引入
          • Browserify：在运行前对模块进行编译/转义/打包的处理（已经将依赖的模块包含进来了），运行的是打包生成的js，运行时不存在需要再从远程引入依赖模块

    • AMD：浏览器端

      • require.js

      • 基本语法

        • 定义暴露模块: define([依赖模块名], function(){return 模块对象})

        • 引入模块: require(['模块1', '模块2', '模块3'], function(m1, m2){//使用模块对象})

        • 配置:

          require.config({
  //基本路径
  baseUrl : 'js/',
  //标识名称与路径的映射
  paths : {
    '模块1' : 'modules/模块1',
    '模块2' : 'modules/模块2',
    'angular' : 'libs/angular',
    'angular-messages' : 'libs/angular-messages'
  },
  //非AMD的模块
  shim : {
    'angular' : {
        exports : 'angular'
    },
    'angular-messages' : {
        exports : 'angular-messages',
        deps : ['angular']
    }
  }
})

    • CMD : 浏览器端

      • sea.js

      • 基本语法

        • 定义暴露模块:

          define(function(require, module, exports){
  通过require引入依赖模块
  通过module/exports来暴露模块
  exports.xxx = value
})

        • 使用模块seajs.use([‘模块1’, ‘模块2’])

    • ES6

      • ES6内置了模块化的实现

      • 基本语法

        • 定义暴露模块：export

          • 暴露一个对象：

            export default 对象

          • 暴露多个：

            // 方法一：
export var xxx = value1
export let yyy = value2

// 方法二：
var xxx = value1
let yyy = value2
export {xxx, yyy}

        • 引入使用模块：import

          • default模块：

            import xxx from '模块路径/模块名'

          • 其它模块

            import {xxx, yyy} from '模块路径/模块名'
import * as module1 from '模块路径/模块名'

      • 问题：所有浏览器还不能直接识别ES6模块化的语法

      • 解决：

        • 使用Babel将ES6转成ES5（使用了CommonJS）——此时浏览器还是不能直接执行
        • 使用Browserify进行打包处理——此时浏览器可以运行

Node.js模块化教程

  1. 下载安装node.js

  2. 创建项目结构

    |-modules
  |-module1.js
  |-module2.js
  |-module3.js
|-app.js
|-package.json
  {
    "name": "commonJS-node",
    "version": "1.0.0"
  }

  3. 下载第三方模块

    如果用到第三方模块，用npm下载

    npm i uniq --save

  4. 模块化编码

    • module1.js

      module.exports = {
  foo() {
    console.log('moudle1 foo()')
  }
}

    • module2.js

      module.exports = function () {
  console.log('module2()')
}

    • module3.js

      exports.foo = function () {
  console.log('module3 foo()')
}

exports.bar = function () {
  console.log('module3 bar()')
}

    • app.js

      /**
  1. 定义暴露模块:
    module.exports = value;
    exports.xxx = value;
  2. 引入模块:
    var module = require(模块名或模块路径);
 */
"use strict";
//引用模块
let module1 = require('./modules/module1')
let module2 = require('./modules/module2')
let module3 = require('./modules/module3')

let uniq = require('uniq')
let fs = require('fs')

//使用模块
module1.foo()
module2()
module3.foo()
module3.bar()

console.log(uniq([1, 3, 1, 4, 3]))

  5. 通过node运行app.js

    node app.js

Browserify模块化教程

  1. 创建目录结构

    |-js
  |-dist //打包生成文件的目录
  |-src //源码所在的目录
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js //应用主源文件
|-index.html
|-package.json
  {
    "name": "browserify-test",
    "version": "1.0.0"
  }

  2. 下载browserify

    • 全局：npm i browserify -g
    • 局部：npm i browserify --save-dev

  3. 定义模块代码

    同Node.js模块化编码

  4. 打包处理js

    browserify js/src/app.js -o js/dist/bundle.js

  5. 页面使用引入

    <script type="text/javascript" src="js/dist/bundle.js"></script>

AMD-RequireJS模块化教程

  1. 下载require.js，并引入

    • 官网: http://www.requirejs.cn/
    • github : https://github.com/requirejs/requirejs
    • 将require.js导入项目: js/libs/require.js

  2. 创建目录结构

    |-js
  |-libs
    |-require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html

  3. 定义require.js的模块化代码

    • module1.js

      define({
    msg : "这个模块他没有依赖其他模块",
    getMsg() {
        console.log(`module1 ${this.msg}`)
    }
})

    • module2.js

      define(function () {
    let msg = "这个模块他没有依赖其他模块"
    function getMsg() {
        console.log(`module2 ${msg}且使用了一个函数做一些工作`)
    }
    return { getMsg }
})

    • module3.js

      define(["module1", "module2", "jquery"], function (m1, m2, $) {
    let msg = '这个模块依赖了其他模块'

    function showMsg() {
        $('body').css('background', 'red')
        m1.getMsg()
        m2.getMsg()
    }
    return { showMsg }
})

  4. 应用入口js：main.js

    (function () {
    // 配置
    requirejs.config({
        // 基本路径
        baseUrl: 'js/',
        // 模块标识名和模块路径映射
        paths: {
            // 自定义模块
            module1: 'modules/module1',
            module2: 'modules/module2',
            module3: 'modules/module3',

            // 第三方库模块
            jquery: 'libs/jquery'
        }
    })

    // 引入使用模块
    requirejs(['module3'], function (m3) {
        m3.showMsg()
    })
})()

  5. 在页面使用模块

    <script data-main="js/main" src="js/libs/require.js"></script>

  6. 使用第三方基于require.js的框架（jquery）

    • 将jquery的库文件导入到项目: js/libs/jquery-1.10.1.js

    • 在main.js中配置jquery路径

      paths: {
    'jquery': 'libs/jquery-1.10.1'
}

    • 在module3.js中使用jquery

      define(['dataService', 'jquery'], function (dataService, $) {
    var name = 'xfzhang'
    function showMsg() {
        $('body').css({background : 'red'})
        alert(name + ' '+dataService.getMsg())
    }
    return {showMsg}
})

  7. 使用第三方不基于require.js的框架（angular）

    • 将angular.js导入项目

    • js/libs/angular.js

    • 在main.js中配置

      (function () {
  require.config({
    //基本路径
    baseUrl: "js/",
    //模块标识名与模块路径映射
    paths: {
      //第三方库
      'jquery' : './libs/jquery-1.10.1',
      'angular' : './libs/angular',
      //自定义模块
      "alerter": "./modules/alerter",
      "dataService": "./modules/dataService"
    },
    /*
     配置不兼容AMD的模块
     exports : 指定与相对应的模块名对应的模块对象
     */
    shim: {
      'angular' : {
        exports : 'angular'
      }
    }
  })
  //引入使用模块
  require( ['alerter', 'angular'], function(alerter, angular) {
    alerter.showMsg()
    console.log(angular);
  })
})()

CMD-SeaJS模块化教程

  1. 下载sea.js，并引入

    • 官网: http://seajs.org/
    • github : https://github.com/seajs/seajs
    • 将sea.js导入项目: js/libs/sea.js

  2. 创建项目结构

    |-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html

  3. 定义sea.js的模块代码

    • module1.js

      define(function (require, exports, module) {
  //内部变量数据
  var data = 'atguigu.com'
  //内部函数
  function show() {
    console.log('module1 show() ' + data)
  }

  //向外暴露
  exports.show = show
})

    • module2.js

      define(function (require, exports, module) {
  module.exports = {
    msg: 'I Will Back'
  }
})

    • module3.js

      define(function (require, exports, module) {
  const API_KEY = 'abc123'
  exports.API_KEY = API_KEY
})

    • module4.js

      define(function (require, exports, module) {
  //引入依赖模块(同步)
  var module2 = require('./module2')

  function show() {
    console.log('module4 show() ' + module2.msg)
  }

  exports.show = show
  //引入依赖模块(异步)
  require.async('./module3', function (m3) {
    console.log('异步引入依赖模块3  ' + m3.API_KEY)
  })
})

  4. 入口模块：main.js

    define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})

  5. index.html

    <!--
使用seajs:
  1. 引入sea.js库
  2. 如何定义导出模块 :
    define()
    exports
    module.exports
  3. 如何依赖模块:
    require()
  4. 如何使用模块:
    seajs.use()
-->
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
  seajs.use('./js/modules/main')
</script>

ES6模块化教程

ES6-Babel-Browserify

  1. 创建项目结构

    |-js
  |-src
    |-app.js
    |-module1.js
    |-module2.js
    |-module3.js
|-index.html
|-babel.config.json
|-package.json

  2. 安装babel相关包和browserify

    babel官网：https://www.babeljs.cn/docs/usage

    • npm i --save-dev @babel/core @babel/cli @babel/preset-env
    • npm i browserify -g + npm i browserify --save-dev

  3. 在根目录下定义babel.config.json文件

    {
    "presets": ["@babel/preset-env"] 
}

  4. 编码

    • module1.js分别暴露

      export function foo() {
    console.log(`module1 foo()`)
}
export function bar() {
    console.log(`module1 bar()`)
}
export const DATA_ARR = [1, 2, 3, 4, 5]

    • module2.js统一暴露

      let data = "module2 data"
function fun1() {
    console.log(`module2 fun1 ${data}`)
}
function fun2() {
    console.log(`module2 fun2 ${data}`)
}
export { fun1, fun2 }

    • module3.js默认暴露

      export default {
    name: 'default',
    setName(name) {
        this.name = name
    }
}

    • app.js

      import { foo, bar, DATA_ARR } from './module1'
import { fun1, fun2 } from './module2'
import person from './module3'

import $ from 'jquery'

$('body').css('background', 'pink')

foo()
bar()
console.log(DATA_ARR)
fun1()
fun2()

person.setName('默认')
console.log(person.name)

  5. 编译

    • 使用Babel将ES6编译为ES5代码（但包含CommonJS语法）：
      • 方法一：./node_modules/.bin/babel js/src --out-dir js/lib
      • 方法二：npx babel js/src --out-dir js/lib
    • 使用Browserify编译js：
      • browserify js/lib/app.js -o js/lib/bundle.js

  6. 页面中引入测试

    <script type="text/javascript" src="js/lib/bundle.js"></script>

  7. 引入第三方模块（jQuery）

    • 下载jQuery模块：npm i jquery@1 --save

    • 在app.js中引入并使用

      import $ from 'jquery'
$('body').css('background', orange)
青柠t
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 中的模块
我的博客，不一样的自我表达
06-18 205
在浏览器中，模块是异步获取的，而在 Node.js 中，模块是同步加载的。模块允许您定义私有和公共成员，从其他模块导入功能，以及导出功能以在其他模块中使用。此外，JavaScript 中的模块还有其他高级功能，例如模块命名空间、重新导出和动态导入，这些功能在使用模块时提供了更大的灵活性。它可以是变量、函数、类或对象。导入模块：要使用其他模块的功能，可以使用关键字，import后跟模块名称和要导入的元素。使用导入的功能：导入后，您可以使用导入的元素，就好像它们是在当前模块中定义的一样。
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
10-22
下面小编就为大家分享一篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结。小编觉得写的非常不错，需要的朋友可以过来参考一下
JS模块化
Dani05的博客
10-04 1102
模块化是指将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。最早我们开发将所有的代码写在一个js文件中，随着需求越来越复杂，代码量越来越大，如果仍然把所有代码写在一个js文件中，那么代码耦合度过高不方便后期维护，也不方便程序员找到某一个功能点的代码，所有东西写在一个文件也容易污染全局环境。
了解 JavaScript 模块系统基础知识，搭建自己的库
最新发布
04-07 407
由RequireJs实现当你在客户端（浏览器）环境中，异步加载模块时使用通过require实现导入语法复杂的组合（即 CommonJs 的语法 + AMD 的异步加载）可以用于环境。UMD 还支持全局变量定义，因此，UMD 模块能够在客户端和服务器上工作。
js模块化（CommonJS、ES6模块化规范）
qq_48617322的博客
09-15 731
js模块化（CommonJS、ES6模块化规范）
js模块化
开发要有产品的思维
06-25 1679
js模块化 一、背景 二、模块化的发展 1.幼年期： 无模块化 2.成长期： IIFE(语法侧的优化) 3.成熟期 CJS-Commonjs AMD规范 CMD规范 ES6模块化 ：走向新时代 解决模块化的新思路：前端工程化
javascript模块 (Module) 简介
影子
08-19 8719
随着ES6的出现，js模块已经成为正式的标准了。曾经为了解决js模块问题而发展起来的民间秘籍，requireJs(AMD)、SeaJs(CMD)、Node(CommonJs)，已经或者不久的将来会成为历史。了解历史也是很重要的，因为正式标准就是以民间秘籍为基础而发展起来的，有些规范仍然被广泛应用于开发中（CommonJS）。 ES6的class是面向对象的语法糖，升级了ES5的构造函数的原型链继承的写法，并没有解决模块化问题。Module功能则是为了解决这一问题而提出的。 在ES6之前，...
Javascript模块化编程
03-02
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块...
Node.js-模块化
04-02
Node.js-模块化
CringyBotSelf-Modular:模块化Discord.JS selfbot
05-16
CringyBotSelf 用<3和Discord.JS制作的不和谐自我机器人贡献给几个命令！ 执行npm install来安装依赖项，使用您的凭据填写config.json，然后运行node app.js来运行该机器人。
JavaScript模块化编程
12-13
介绍js编程中使用模块化方式进行代码编写，模块化一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性
JavaScript新特性： 模块 （module）
u011863822的博客
05-26 3938
对于模块进行了简单讲解，毕竟模块侧重于使用，然后再通过export和import中的一些注意事项。其它还有模块的动态加载，import可以当作方法一样，然后返回一个promise。下面都通过实例演示，方便理解。
JavaScript 模块化介绍
weixin_43790019的博客
10-09 434
模块通常指的是一个独立的可重用软件组件，它包含了一组相关的函数、方法、类、变量等，能够实现特定的功能或提供特定的服务。在编程中，可以将程序的功能划分成不同的模块，每个模块负责不同的任务JavaScript的模块化是一种将代码组织到独立的、可重用的、可维护的单元中的方式，使代码更易于管理和复用。模块化可以帮助开发者将代码分解成更小的部分，这样更容易理解和维护，同时也可以防止命名冲突和全局污染。在JavaScript中，有多种模块化的标准和实现，如CommonJS、AMD、ES6等。
Javascript中的模块化详解
ICanWin_lll的博客
10-08 605
事实上模块化开发最终的目的是将程序划分成一个个小的结构；这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；也可以通过某种方式，导入另外结构中的变量、函数、对象等；
Windows的MODULE, INSTANCE, IMAGE的区分
weixin_30341735的博客
04-10 199
在看windows via C/C++的时候，经常看到module, instance, image这样的字眼。其实这是windows中的一些术语，module就相当于exe, dll文件。在进程的地址空间中，exe, dll都当作module被load。所 以windows中的数据结构HMODULE和HINSTANCE是一样一样的，他们的值都是一个地址，就是该module的base addre...
【记录】前端工程化 - 模块化规范
Youkirrr_的博客
03-02 382
模块化 将一个复杂的程序根据一定的规则封装成几个块，并组合在一起。块的内部数据/实现是私有的，只是向外部暴露一些借口与外部其他模块进行通信。 模块化的进化史 //全局函数模式：将不同的功能封装成不同的全局函数。 //Global被污染，容易命名冲突。 function foo(){ ... } function bar(){ ... } //Namespace模式：简单对象封装。 //减少Global上的变量数目；本质是对象，仍可以操作修改它，不安全。 let MYAPP = { .
JS模块详解
起风了
01-04 1220
模块是什么？ 模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。 模块的优点？ 1.可维护性。因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。 2.命名空间。在js里面，如果一个变量在最顶级的函数...
JS模块化教程
悦分享
05-03 528
尚硅谷JS模块化教程 当项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理。 本视频内容涵盖：理解模块化，为什么要模块化，模块化的优缺点以及模块化规范。并且将带领大家学习开发中最流行的commonjs, AMD, ES6、CMD规范。 建议同学们学习完模块化规范以后再学习项目构建，以更好的武装自己的技能。 (01. 尚硅谷_JS模块化_入门...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值