我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript 模块化如何理解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript 模块化如何理解

这期内容当中小编将会给大家带来有关JavaScript 模块化如何理解,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

    前言:

    1.概念

    • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起;

    • 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

    2.模块化的好处

    • 避免命名冲突(减少命名空间污染);

    • 更好的分离, 按需加载;

    • 更高复用性;

    • 更高可维护性。

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

    • 请求过多(依赖的模块过多,请求就会过多);

    • 依赖模糊(不知道模块的具体依赖关系,导致加载顺序出错);

    • 难以维护(以上两个原因就会造成这个结果)。

    //index.html<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script class="lazy" data-src="jQuery.js"></script>  <script class="lazy" data-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允许指定回调函数

    • 目录结构

    JavaScript 模块化如何理解

    使用require.js

    <!-- index.html --><script class="lazy" data-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模块,依赖module1define('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是不支持按需加载的)

    • 目录结构

    JavaScript 模块化如何理解

    使用sea.js

    <script class="lazy" data-src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>
    //定义模块module1define((require, exports, module) => {  let string = 'I am a string';  const readString = () => 'module1 show() ' + string;  //向外暴露  exports.readString = readString;})
    //定义模块module2define((require, exports, module) => {  exports.msg = "正是在下啊"})
    //定义模块moduledefine((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.jsexport default {  showMsg() {    console.log('hahahahahah')  }}export const msg = "正是花好月圆时!"//index.jsimport module1 from "./module1"; //对应export defaultmodule1.showMsg()import { msg } from './module1'; //对应exportconsole.log(msg)

    上述就是小编为大家分享的JavaScript 模块化如何理解了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    JavaScript 模块化如何理解

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    猜你喜欢

    JavaScript 模块化如何理解

    这期内容当中小编将会给大家带来有关JavaScript 模块化如何理解,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前言:1.概念将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在
    2023-06-22

    如何理解Go语言的模块化

    本篇内容介绍了“如何理解Go语言的模块化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!环境变量学习 go 语言的第一步,当然是安装以及环境变
    2023-06-15

    JavaScript模块化揭秘:深入探究模块化背后原理

    JavaScript模块化是一门复杂的技术,但理解其背后的原理可以帮助你成为一名更好的开发者。本文将深入探讨模块化背后的原理,并提供一些有用的提示,帮助你更好地使用模块化。
    JavaScript模块化揭秘:深入探究模块化背后原理
    2024-02-26

    JavaScript 模块化解密:从零开始构建模块化代码

    JavaScript 模块化是组织和管理代码的强大技术。通过将代码分解成较小的、可重用的模块,可以增强代码的可读性、可维护性,并且在团队协作时避免冲突。
    JavaScript 模块化解密:从零开始构建模块化代码
    2024-02-18

    python的二进制转化模块如何理解

    这篇文章将为大家详细讲解有关python的二进制转化模块如何理解,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在pyton中,通过struct模块来对二进制进行转换,主要包括两大类函数,即用
    2023-06-22

    如何通过JavaScript实现组件化和模块化

    今天小编给大家分享的是如何通过JavaScript实现组件化和模块化,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。组件化和模块化为什么会有组件化和模块化?当我们的项目复杂度不断上升,
    2023-07-06

    彻底理解JavaScript模块化:从入门到精通

    JavaScript模块化是一个复杂的概念,但也是一个非常重要的概念。通过使用模块,我们可以将代码组织成更小的、更易于管理的单元,从而使代码更加易读、易维护。
    彻底理解JavaScript模块化:从入门到精通
    2024-02-26

    JavaScript 模块化极客指南:解读模块化开发的奥秘

    JavaScript 模块化:揭开模块化开发的神秘面纱
    JavaScript 模块化极客指南:解读模块化开发的奥秘
    2024-02-18

    JavaScript 模块化密码学家:破解模块化编程的代码

    JavaScript 模块化编程极大地增强了代码的可维护性和可重用性。本文深入探讨模块化编程的技术和最佳实践,提供实用示例,帮助您破解模块化编程代码的复杂性。
    JavaScript 模块化密码学家:破解模块化编程的代码
    2024-02-18

    编程热搜

    • Python 学习之路 - Python
      一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
      Python 学习之路 - Python
    • chatgpt的中文全称是什么
      chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
      chatgpt的中文全称是什么
    • C/C++中extern函数使用详解
    • C/C++可变参数的使用
      可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
      C/C++可变参数的使用
    • css样式文件该放在哪里
    • php中数组下标必须是连续的吗
    • Python 3 教程
      Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
      Python 3 教程
    • Python pip包管理
      一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
      Python pip包管理
    • ubuntu如何重新编译内核
    • 改善Java代码之慎用java动态编译

    目录