javascript思维导图-JavaScript 的 BOM 和 DOM 思维导图

JavaScript 思维导图是一种可视化工具,用于呈现和组织 JavaScript 编程语言的不同概念、特性和功能。 它将这些信息以节点和连接的形式有机地连接起来,让开发者更容易理解和记忆。 在 JavaScript 思维导图中,一般会包含一些核心概念,比如变量、函数、条件句、循环、对象等,将这个核心概念作为主节点javascript思维导图javascript思维导图,用连接的形式来表示它们之间的关系。 思维导图不仅可以包含核心概念,还可以包含其他相关概念和主题。 例如,它可以显示 JavaScript 中的各种数据类型,如字符串、数字、数组、对象等。它还可以演示 JavaScript 中的常见技巧和 API,如字符串操作数组操作、DOM 操作等。 思维导图还可以通过不同的颜色、图标和字体来表示特定的概念或标记重要内容。 这有助于提醒开发人员注意各个关键点或了解各个特殊情况。 与传统的纸质笔记相比,JavaScript 思维导图具有更好的视觉效果和交互性。 开发人员可以通过展开和折叠节点来调整地图层次结构,以更好地组织和管理不同的概念。 他们还可以轻松导入或共享地图,以便与他人协作或准备考试。 事实上,JavaScript思维导图是一个强大的工具,可以帮助开发人员更好地理解和掌握JavaScript编程语言。 它提供了一种清晰直观的方式来呈现和组织复杂的信息,使学习和开发过程高效且愉快。

javascript思维导图-JavaScript 的 BOM 和 DOM 思维导图

模块化是一种语言扩展的必由之路,同时也可以帮助开发者拆分和组织代码。

模块模式

在模块化规范产生之前,JS开发者使用Module设计模式来解决JS全局作用域的污染问题。 模块模式最初被定义为传统软件工程中为类提供私有和公共封装的一种方式。 在 JavaScript 中,Module 模式使用匿名函数自调用(闭包)进行封装,通过自定义暴露行为来区分私有成员和公共成员。

let myModule = (function (window) {
    let moduleName = 'module'  // private
    // public
    function setModuleName(name) {
      moduleName = name
    }
    // public
    function getModuleName() {
      return moduleName
    }
    return { setModuleName, getModuleName }  // 暴露行为
  })(window)

javascript思维导图-JavaScript 的 BOM 和 DOM 思维导图

上面的例子是Module模式的一种写法,通过闭包的特性开辟了一个新的作用域,缓解了全局作用域的命名冲突和安全问题。 然而,开发人员无法使用它来组织和拆分代码javascript模块化,因此基于此出现了模块化规范。

模块化 1.CommonJS

CommonJS主要用于Node开发。 每个文件都是一个模块,每个文件都有自己的作用域。 通过 module.exports 公开公共成员。 例如:

// 文件名:x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

另外,CommonJS通过require()引入模块依赖,require函数可以引入Node的外部模块、自定义模块以及npm等第三方模块。

// 文件名:main.js
let xm = require('./x.js');
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

从里面的代码我们可以看到,require函数同步加载了x.js,并返回了module.exports的输出文字的副本值。 有些人可能会问 module.exports.x = x; 不是形参吗,怎么回事? 我们说Module模式是模块化规范的基石,CommonJS也是对Module模式的封装。 我们可以使用Module模式来实现里面代码的功效:

let xModule = (function (){
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { x, add };
})();
let xm = xModule;
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

javascript思维导图-JavaScript 的 BOM 和 DOM 思维导图

通过Module模式模拟的CommonJS原理,我们可以很好的解释CommonJS的特点。 由于CommonJS需要通过形参方法获取匿名函数自调用的返回值,因此在加载模块时需要同步require函数。 然而CommonJS模块的加载机制限制了CommonJS在客户端的使用,因为通过HTTP同步加载CommonJS模块需要很长时间。

2. AMD 和 CMD2.1 AMD

// 定义AMD规范的模块
define([function() {
  return 模块
})

与CommonJS不同的是,AMD规范的依赖模块是异步加载的javascript模块化,而定义的模块则作为回调函数执行,依赖于require.js模块管理工具库。 当然,AMD规范并没有采用匿名函数自调用的方法来封装,我们仍然可以利用闭包的原理来实现模块的私有和公有成员:

define(['module1', 'module2'], function(m1, m2) {
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { add };
})

2.2 命令

CMD是SeaJS模块定义在推广过程中的标准化输出。 AMD主张靠后方,CMD主张靠最近。

define(function(require, exports, module) {
  //  同步加载模块
  var a = require('./a');
  a.doSomething();
  // 异步加载一个模块,在加载完成时,执行回调
  require.async(['./b'], function(b) {
    b.doSomething();
  });
  // 对外暴露成员
  exports.doSomething = function() {};
});
// 使用模块
seajs.use('path');

javascript思维导图-JavaScript 的 BOM 和 DOM 思维导图

CMD集成了CommonJS和AMD的特性,支持模块的同步和异步加载。 CMD加载依赖模块后,并不执行它。 它只是下载它。 所有依赖模块加载完毕后,就进入主逻辑了。 当遇到require语句时,就执行相应的模块。 这样,模块的执行顺序和写入顺序是完全一致的。 因此,在CMD中require函数同步加载模块时,没有HTTP请求过程。

ES6模块

ES6的模块化不再是一种规范,而是JS语言的一个特性。 随着ES6的推出,AMD和CMD也迅速成为历史。 与模块化规范相比,ES6模块有两大特点:

模块化规范的输出是一个对象,直到脚本运行完成才生成。 而ES6模块并不是一个对象,ES6模块是一个多对象输出、多对象加载模型。 原则上,模块化规范是对匿名函数自调用的封装,而ES6模块使用匿名函数自调用来调用输出成员。 两者的区别可以参考 Babel 和 CommonJS 模块。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript javascript思维导图-JavaScript 的 BOM 和 DOM 思维导图 https://www.wkzy.net/game/128487.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务