js模块化开发

最新推荐文章于 2024-04-11 18:26:18 发布
最新推荐文章于 2024-04-11 18:26:18 发布
阅读量367 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38241002/article/details/113865781
版权

为什么要模块化开发

ie6之前没有js引擎，js引擎在渲染引擎中。
ie6之后有了js引擎，这时js脚本是与HTML页面写在一起的，随着页面交互等复杂度的增加，又以页面为标准分成不同的脚本块（index.html中引用index.js;index2.html中引用index2.js脚本块）这是模块化的初现
这时出现一个问题，多个js脚本中包含同样的程序块，这时可以把这些共同的程序块提取到一个js文件中管理。这时在HTML页面中需要引用共同js文件和页面特有的js文件。
这时又出现一个问题，在HTML页面引用共同js文件时，在js文件中包含很多不是本页面需要的程序块，这时就产生了资源的浪费，所以说以页面为基础划分js文件并不是那么完美，为了解决这个问题，开始以程序功能模块划分js文件。

modelA.js

var a =[1,2,3,4,5].reverse();

modelB.js

var b=a.concat([6,7,8,9])

modelC.js

var c = b.join('-');

index.js

console.log(a);
console.log(b);
console.log(c);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/modelA.js"></script>
    <script src="js/modelB.js"></script>
    <script src="js/modelC.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

问题：
js引擎加载阻塞，必须按照程序的逻辑顺序加载引用模块
在这里
引用在同一个页面的js文件共用一个全局作用域
模块化解决的问题
加载顺序
污染全局

es5

立即执行函数
函数声明不是表达式，不能使用执行符号，而表达式可以。可以把函数声明变成表达式，使用括号包裹，变成表达式，在使用执行符号
modelA.js

var moduleA= (function () {
var a =[1,2,3,4,5].reverse();
    return{
        a :a
    };
  })();

modelB.js

var moduleB=(function(moduleA){
    var b = moduleA.a.concat([6,7,8,9]);
    return {
        b: b
    }
})(moduleA);

modelC.js

var moduleC=(function(moduleB){
    var c =moduleB.b.join('-');
    return {
        c:c
    }
})(moduleB);

index.js

(function(moduleA,moduleB,moduleC){
    console.log(moduleA.a);
    console.log(moduleB.b);
    console.log(moduleC.c);
})(moduleA,moduleB,moduleC);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/modelA.js"></script>
    <script src="js/modelB.js"></script>
    <script src="js/modelC.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

每个模块是用了立即执行函数，借用函数的闭包，使每个模块有了独立的作用域，同时模块之间可以依赖了，但是依然没有解决模块加载顺序问题

CommonJs

所有代码都运行在模块作用域，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序

modelA.js

  var a=(function(){
    return [1,2,3,4,5].reverse();
})();
module.exports={
    a
}

modelB.js

var moduleA=require('./modelA')
var b=(function(){
    return moduleA.a.concat([6,7,8,9]);
})();
module.exports={
    b
}

modelC.js

var moduleB=require('./modelB')
var c=(function(){
    return moduleB.b.join('-'); 
})();
module.exports={
    c
}

index.js

var moduleA=require('./modelA')
    moduleB=require('./modelB')
    moduleC=require('./modelC')

    console.log(moduleA.a);
    console.log(moduleB.b);
    console.log(moduleC.c);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0123467809-=">
    <title>Document</title>
</head>
<body> 
    <script src="js/index.js"></script>
</body>
</html>

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

CMD 推崇依赖就近，AMD 推崇依赖前置。

AMD（异步模块定义）

requireJS
modelA.js

define('moduleA',function(){
  var a=[1,2,3,4,5];
  return {
    a:a.reverse()
  }
})

modelB.js


define('moduleB',['moduleA'],function(moduleA){
    var b=[6,7,8,9,10];
    return {
     b: moduleA.a.concat(b)
    }
  });

modelC.js

define('moduleC',['moduleB'],function(moduleB){
    return{
        c:moduleB.b.join('_')
    }
})

index.js

    require.config({
        paths:{
            moduleA:'js/modelA',
            moduleB:'js/modelB',
            moduleC:'js/modelC',
            
        }
    })
   require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
    console.log(moduleA.a);
    console.log(moduleB.b);
    console.log(moduleC.c);
   })
      //所有模块加载完毕后，才会执行回调函数，前置依赖

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0123467809-=">
    <title>Document</title>
</head>
<body> 
    <script src="./node_modules/requirejs/require.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

CMD（同步模块定义）

modelA.js

define(function(require,exports,module){
  var a=[1,2,3,4,5];
  return {
    a:a.reverse()
  }
})

modelB.js

define(function(require,exports,module){
    var moduleA=require('modelA')
    var b=[6,7,8,9,10];
    return {
        b: moduleA.a.concat(b)

    }
  })

modelC.js

define(function(require,exports,module){
    var moduleB=require('modelB')
    
    return {
        c:moduleB.b.join('_')

    }
  })

index.js

    require.config({
        paths:{
            moduleA:'js/modelA',
            moduleB:'js/modelB',
            moduleC:'js/modelC',
            
        }
    })
   seajs.use(['modelA.js','modelB.js','modelC.js'],function(moduleA,moduleB,moduleC){
    console.log(moduleA.a);
    console.log(moduleB.b);
    console.log(moduleC.c);
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/sea.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

ES6

modelA.js

export default{
  a:[1,2,3,4,5]
}

modelB.js

import moduleA from './modelA.js'

  export default{
      b:moduleA.a.concat([6,7,8,9,10])
  }

modelC.js

import moduleB from './modelB.js'
export default{
    c:moduleB.b.join('_')
}

index.js

import moduleA from './modelA.js';
import moduleB from './modelB.js';
import moduleC from './modelC.js';

console.log(moduleA.a);
console.log(moduleB.b);
console.log(moduleC.c);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="js/index.js"></script>
</body>
</html>
戈叁铭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解JavaScript模块化开发
10-20
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了
JavaScript模块化开发
JUSNYA的博客
09-05 661
将X当做一个文件在对应的目录下查找；有后缀名，按照后缀名的格式查找对应的文件，没有后缀名，会按照顺序：1、直接查找文件X 2、查找X.js文件 3、查找X.json文件 4、查找X.node文件 注：没有找到就会报错：not found。// JUSNYA.js文件本身是没有自己的作用域的 所有 JUSNYAx 文件中的name属于全变量。// mokuai.js文件本身是没有自己的作用域的 所有 模块化 文件中的name属于全局变量。
一文搞懂 JavaScript 模块化
最新发布
weixin_45727472的博客
04-11 927
本文介绍了 JavaScript 中主要模块方案和其背后的原因，希望对您有帮助，在日后的工作中看到任何模块，都不再困扰。
JS 模块化开发
weixin_46261261的博客
08-28 732
文章目录CommonJS规范ES Modules 的特性ESM 导入和导出ESM in Node.js CommonJS规范 一个文件就是一个模块 每个模块都有单独的作用域 通过 module.exports 导出成员 通过 require 函数载入模块 CommonJS 是以同步模式加载模块 node端： node的执行机制是在启动时加载模块。执行过程中不需要加载，只会使用到模块，因此node环境下使用commonjs没有问题 浏览器端： 必然导致效率低下，每次页面加载都会导致大量同步模式请求出现，
【前端模块化】JS模块化思想以及相关规范（CommonJS、ES module）
cannotbecounted的博客
06-29 912
对前端模块化中的JS模块化以及相关规范进行简要介绍。
JavaScript模块化开发之SeaJS
10-23
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS，需要的朋友参考下
了解Javascript的模块化开发
10-24
主要介绍了了解Javascript的模块化开发,本文讲解了为什么需要模块化开发,模块化开发的形成原因等内容,需要的朋友可以参考下
关于js的模块化开发的简介
weixin_63186501的博客
06-17 155
●ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。●ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。○VSCode的服务器插件：Live Server，安装（install），重启VSCode，在底部状态栏，点击go Live，启动服务器。○一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
【NodeJS】——模块化
LSH_的个人博客
06-30 564
Node.js采用了模块化的开发方式，使开发者能够将功能拆分为独立的模块，并通过模块间的导入和导出实现代码的复用和组织。在Node.js中，每个文件都被视为一个模块，模块可以是一个函数、对象或类等。要实现模块化开发，可以使用require函数来导入其他模块，并使用module.exports或exports来导出当前模块的内容。通过这种方式，可以将变量、函数、类等封装在模块中，并在需要的地方进行导入和使用编码时是按照模块一个一个编码的， 整个项目就是一个模块化的项目。
深入理解JavaScript模块化开发
牛牪犇
06-12 2814
随着JavaScript应用程序的复杂性不断增加，模块化开发成为了一种必备的技术。通过将代码划分为模块，我们可以提高代码的可维护性、可重用性和可扩展性。在本文中，我们将深入探讨JavaScript模块化开发的概念、优势和不同的模块化方案。
JavaScript 模块化开发入门
老T的专栏
09-18 392
JS 模块化是将一个大的 JS 文件根据功能或职责的需要，拆分成多个相互独立或依赖的小 JS 文件，再进行统一的拼装或加载。提高代码可复用性降低代码偶合度更有利于多人协作开发和维护…
JavaScript-模块化开发（一）基础知识
qq_40754757的博客
10-08 376
javascript开发模块化编程基础知识
JS模块化开发
Anoyn的博客
07-16 668
es6的模块化方案是未来的方向。包括浏览器环境和node化境。 nodejs环境，采用commonJS规范let a = require('moduleX'); es6环境，采用es6规范import a from 'moduleX' 浏览器环境// AMD规范的实现 requireJS define() require() // CMD规范的实现 seaJS AMD, CMD在现在的开发中逐渐减少使用了，目前主流框架RAV都可采用es6编写，然后编译成 ES5在浏览器中运行的方式 TODO:
web前端模块化开发教程pdf
05-16
web前端模块化开发教程pdf是一份非常有价值的学习资料，它主要介绍了web前端模块化开发的基本概念、原理、应用以及具体的实现方法等方面内容，适合广大前端工程师、学生等进行学习和参考。 首先，这份教程pdf详细...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值