JavaScript模块化开发

于 2022-09-05 06:00:00 发布
阅读量770 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 模块化开发 Javascript 文章标签： 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JUSNYA/article/details/126673462
本文介绍了JavaScript模块化的概念，强调了模块化开发的目的——避免全局变量冲突和提高代码复用。通过实例展示了如何使用exports和module.exports进行导出，以及require函数的查找规则和模块的加载过程。模块在首次引入时运行一次，后续引入则从缓存中获取，确保只加载一次。

什么是模块化？

       上模块化开发最终的目的是将程序划分成一个个小的结构

       结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构

       这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用

       也可以通过某种方式，导入另外结构中的变量、函数、对象

       这些就是提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程

例

         // 假如项目中只有两个开发者  一个模块    一个JUSNYA

        //  模块 创建一个js文件  声明变量name赋值为 模块化

        //  JUSNYA 创建一个js文件   声明变量name赋值为JUSNYAx

        //  之后都在首页中引入

        //   mokuai.js文件本身是没有自己的作用域的    所有  模块化 文件中的name属于全局变量

        //  JUSNYA.js文件本身是没有自己的作用域的       所有  JUSNYAx 文件中的name属于全变量

        //  之后都在首页中引入

        //  为了避免全局变量命名冲突  所以我们可以借助立即函数

        //  将 模块化 文件中的代码用立即执行函数包裹起来    JUSNYA也是

        //  因为函数作用域   立即执行函数也是作用域的

        //  现在就是我们给  mokuai  文件中的变量加上一层作用域   给  JUSNYA文件中的变量加上一层作用域

        //  现在确实解决了全局变量命名的冲突问题

 举例

一、实例                

 

 

 

二、实例                

 

 

 

解构赋值

        

 

exports导出 

         注:exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出

        

         文件中可以导入

        

        完成也上操作!  理解这段话！ 

         意味着main中的bar变量等于exports对象；

         也就是require通过各种查找方式，最终找到了exports这个对象；

         并且将这个exports对象赋值给了bar变量；

         bar变量就是exports对象了

module.exports导出

        为什么exports也可以导出呢？

        因为module对象的exports属性是exports对象的一个引用；
        也就是说 module.exports = exports = main中的bar；

        

         

        第一种变量的导出

         

        第二种变量的导出

        

        第三种变量的导出

         

 

require细节

        require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象

  require的查找规则是

        导入格式如下：require(X)

第一种：X是一个Node核心模块，比如path、http  直接返回核心模块，并且停止查找

        

 第二种：X是以 ./ 或 ../ 或 /（根目录）开头的

            将X当做一个文件在对应的目录下查找；   有后缀名，按照后缀名的格式查找对应的文件，没有后缀名，会按照顺序：1、直接查找文件X  2、查找X.js文件  3、查找X.json文件    4、查找X.node文件           注：没有找到就会报错：not found

        

模块的加载过程   

一：模块在被第一次引入时，模块中的js代码会被运行一次

二：模块被多次引入时，会缓存，最终只加载（运行）一次

为什么只会加载运行一次呢？
 这是因为每个模块对象module都有一个属性：loaded。
 为false表示还没有加载，为true表示已经加载；

 

 

 

结论：模块在被第一次引入时。模块中的js代码会被运行一次

 

 

 结论二：模块被多次引入时，会缓存，最终只加载一次

这是因为每个模块对象module都有一个属性：loaded。

为false表示还没有加载，为true表示已经加载；

js模块化开发
我笔记
08-06 389
一、原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 　　 function m1(){ 　　　　//... 　　} 　　 function m2(){ 　　　　//... 　　} 上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。 这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。 二、对象写法 为了解决上面的缺点，可以把模块写成一个对象.
Javascript模块化编程：模块的写法
weixin_30411997的博客
11-28 177
声明：本文转载自：阮一峰的网络日志，原文地址http://www.ruanyifeng.com/blog/2012/10/javascript_module.html，http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html，http://www.ruanyifeng.com/blog/2012/11/re...
JavaScript模块化开发之SeaJS
11-23
  SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码...
JavaScript模块化开发.pdf
最新发布
08-21
JavaScript模块化开发.pdf
JS模块化开发
Anoyn的博客
07-16 749
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:
JavaScript之模块化编程
weixin_30343157的博客
10-31 200
前言 模块是任何大型应用程序架构中不可缺少的一部分，模块可以使我们清晰地分离和组织项目中的代码单元。在项目开发中，通过移除依赖，松耦合可以使应用程序的可维护性更强。与其他传统编程语言不同，在当前JavaScript里，并没有提供原生的、有组织性的引入模块方式。本文就来探讨一下目前的常见几种模块化解决方案。 1.对象字面量表示法 对象字面量可以认为是包含一组键值对的对象，每一对键和值...
浅谈JS的模块化开发
qq_44803977的博客
08-20 545
模块化开发 一、模块基础写法 a、普通方法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块 function a() { console.log("a"); } function b() { console.log("b"); } a(); b(); 上面的函数a()和b()，组成一个模块。使用的时候，直接调用就行了。 优点：直接调用 缺点：变量可能会出现重复造成的污染，并且无法进行结构性分类 b
js 模块化开发
赶路人儿
09-13 1446
一、Javascript 模块化编程： 1、记的刚开始用JS写代码的时候，都是一个方法一个方法的处理某个事情，比如 function check(){    dosomething..... } 这样写的好处就是方便，什么时候用，什么时候写，但是坏处就是污染了全局空间，很容易出现重复的名字，而且不容易维护。   2、后来想到了用命名空间来解决全局空间的问题，比如 var com={
JS 模块化开发
weixin_46261261的博客
08-28 961
文章目录CommonJS规范ES Modules 的特性ESM 导入和导出ESM in Node.js CommonJS规范 一个文件就是一个模块 每个模块都有单独的作用域 通过 module.exports 导出成员 通过 require 函数载入模块 CommonJS 是以同步模式加载模块 node端： node的执行机制是在启动时加载模块。执行过程中不需要加载，只会使用到模块，因此node环境下使用commonjs没有问题 浏览器端： 必然导致效率低下，每次页面加载都会导致大量同步模式请求出现，
JSVM2框架：JavaScript模块化开发与源码解读
JSVM的目的是作为一个基础框架，而不仅仅是JavaScript库，来实现JavaScript的模块化设计，提升代码重用性。该框架使用BSD License协议，这意味着它允许自由地使用和修改，只需保留原作者的版权声明。 ### 知识点二...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值