JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript 模块化详解

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript 模块化详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言：

1.概念

  • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；
  • 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

2.模块化的好处

  • 避免命名冲突(减少命名空间污染)；
  • 更好的分离, 按需加载；
  • 更高复用性；
  • 更高可维护性。

3.引入多个script标签后出现的问题

  • 请求过多（依赖的模块过多，请求就会过多）；
  • 依赖模糊（不知道模块的具体依赖关系，导致加载顺序出错）；
  • 难以维护（以上两个原因就会造成这个结果）。
//index.htML
<!DOCTYPE html>
<html lang="en">
<head>
  <;meta charset="UTF-8">
  <tITle>Title</title>
  <script src="jquery.js"></script>
  <script src="module.js"></script>
</head>
<body>
  <div>123</div>
</body>
<script>
  myModule.foo();
  myModule.bar();
  console.LOG(myModule.data) ;
  myModule.data = 'xxxx';
  myModule.foo();
</script>
</html>



//module.js IIFE（匿名函数自调用）
;(function(window,$){
  let data = "www.baidu.COM";
  function foo() {
    console.log(`foo() ${data}`);
    //这里需要使用jQuery库
    $('body').css('background', 'red')
  }
  function bar() {
    console.log(`bar() ${data}`);
    otherFun();
  }
  function otherFun() {
    console.log(`otherFun()`);
  }
  window.myModule = { foo, bar };
})(window, jQuery)

一、CommonJS

  • NODE 就是基于commonJS模块规范，每一个文件就是一个模块；有自己的作用域；在服务器端，模块的加载是同步的；在浏览器端，模块需提前编译打包处理

特点：

  • 所有代码都运行在模块作用域，不会污染全局作用域；
  • 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
  • 模块加载的顺序，按照其在代码中出现的顺序。

语法：

  • 暴露模块：js module.exports = value 或者 js exports.xxx = value
  • 引入模块：js require('xxx') 如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

require命令用于加载模块文件。require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。

CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值

二、amD

  • 相比于CommonJS的同步加载模块，AMD更适合于浏览器端的非同步模块加载，因为AMD允许指定回调函数
  • 目录结构

使用require.js

<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>



//定义一个没有依赖的module1模块
define('module1', () => {
  let count = 0;
  const add = () => ++ count;
  const reset = () => count = 0;
  const upperCase = string => string.toUpperCase()

  return {
    add,
    reset,
    upperCase
  }
})



//定义一个有依赖的module2模块，依赖module1
define('module2',['module1'], (module1) => {
  const showMsg = () => module1.upperCase('hello-amd');

  return {
    showMsg
  }
})



<!-- 在html文件中使用模块 -->
<body>

<script>
  require.config({
    paths: {
      module1: './modules/module1',
      module2: './modules/module2'
    }
  })
  require(['module1', 'module2'], (module1, module2) => {
    console.log(module1.add()) // 1
    console.log(module1.reset()) //0
    console.log(module2.showMsg()) //HELLO-AMD
  })
</script>
</body>

三、CMD

  • CMD集CommonJS与AMD的优点于一身，cmd 规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行（实现了按需加载，而AMD是不支持按需加载的）
  • 目录结构

使用sea.js

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>



//定义模块module1
define((require, exports, module) => {

  let string = 'I am a string';
  const readString = () => 'module1 show() ' + string;

  //向外暴露
  exports.readString = readString;
})



//定义模块module2
define((require, exports, module) => {
  exports.msg = "正是在下啊"
})



//定义模块module
define((require, exports, module) => {
  //引入依赖模块（同步）
  VAR module1 = require('./module1');
  console.log(module1.readString()) // module1 show() I am a string

  //引入依赖模块（异步）
  require.async('./module2', md2 => {
    console.log(`这是异步引入的:${md2.msg}`) //这是异步引入的:正是在下啊
  })
})



<!-- html文件使用Module -->
<body>
<script>
  seajs.use('./modules/module')
</script>

四、ES6模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
两个关键字 import和export

  • import 导入
  • export 导出
//mian.js
export default {
  showMsg() {
    console.log('hahahahahah')
  }
}
export const msg = "正是花好月圆时！"

//index.js
import module1 From "./module1"; //对应export default
module1.showMsg()
import { msg } from './module1'; //对应export
console.log(msg)

/*tips: 不要在html里使用<script type="module">
import ....., 有跨域问题，可以在vscode里下载一个插件，或者本地起服务都可以解决，就不赘述了。
</script>*/

到此这篇关于JavaScript 模块化详解的文章就介绍到这了,更多相关JavaScript 模块化内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript 模块化详解全部内容，希望文章能够帮你解决JavaScript 模块化详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程