jjzjj

JS 模块化- 04 CMD 规范与 Sea JS

程序员优雅哥 (youyacoder) 2023-03-28 原文

1 CMD 规范介绍

CMDCommon Module Definition, 通用模块定义。与 AMD 规范类似,也是用于浏览器端,异步加载模块,一个文件就是一个模块,当模块使用时才会加载执行。其语法与 AMD 规范很类似。

1.1 定义模块

定义模块使用 define 函数:

define(factory)

define 函数接收的参数 factory 可以是一个对象、字符串或函数。如:

define({ 'str': 'Hello World' })

define('Hello world')

factory 为函数时,这个函数就是当前这个模块的构造函数,该函数接收三个参数:

define(function(require, exports, module) {

})

这三个参数的意义如下:

- require:函数,可以通过该函数加载其他模块
- exports:对象,用于向外部提供接口,即可以通过该对象导出对象、属性或函数,将本模块内部的变量、函数等暴露给其他模块使用
- module:对象,存储当前模块相关的属性和函数

1.2 加载模块

CMD 规范中,所有的 JS 都是在模块中,入口模块 —— 主模块也是一个模块,使用模块工厂函数的 require 函数加载其他模块。

define(function(require, exports, module) {
	const m = require('./m1')
  console.log(m1)
})

异步加载模块:

define(function(require, exports, module) {
	require.async('./m1', function (m3) {
    console.log(m1)
  })
})

2 Sea.js

Sea.jsCMD 规范的浏览器端实现。

2.1 使用准备

从 github 上下载 sea.js,创建如下目录文件结构:

04_CMD/
|- lib/
	|- sea.js
|- modules/
	|- module1.js
	|- module2.js
	|- module3.js
|- index.js
|- index.html

modules 目录存放三个模块,index.js 为入口(主模块)。

2.2 实现三个模块

module1.js 导出 sum 函数:

define(function (require, exports, module) {

  console.log('in module1.')

  function sum(num1, num2) {
    console.log('module1 sum function.', num1, num2)
    return num1 + num2
  }

  exports.sum = sum
})

module2.js 定义并导出一个内部变量 str 和函数 calculate ,calculate 函数调用 module1sum 函数。

define(function (require, exports, module) {

  console.log('in module2')

  const str = '优雅哥测试'

  function calculate (n1, n2) {
    const m1 = require('./module1')
    return m1.sum(n1, n2)
  }

  exports.obj = {
    str,
    calculate
  }
})

在 module2.js 的 calculate 函数中加载 module1,咱在后面会多次调用 calculate 函数,测试模块是否会重复加载。

module3.js 用于测试异步加载,只定义并通过 return 导出一个 demo 函数:

define(function (require, exports, module) {

  console.log('in module3')

  function demo() {
    console.log('demo function')
  }

  return {
    demo
  }
})

2.3 实现主模块

index.js 中,异步加载 module3,同步加载 module2,并多次调用 module2 中导出的 calculate 函数:

define(function (require) {

  console.log('in index')

  require.async('./modules/module3', function (m3) {
    console.log('异步加载 module3')
    m3.demo()
  })

  const m2 = require('./modules/module2')
  console.log(m2.obj.str)

  console.log(m2.obj.calculate(10, 20))
  console.log(m2.obj.calculate(100, 200))
  console.log(m2.obj.calculate(1000, 3000))
})

2.4 实现入口页面

index.html 中首先通过 script 标签引入 sea.js,然后加载主模块:

<script src="./lib/sea.js"></script>
<script>
  seajs.use('./index.js')
</script>

2.5 测试运行

在浏览器中运行 index.html,在浏览器控制台中输出如下:

从控制台输出可以看出:

  1. module3 由于是异步加载,所以输出位置与代码位置不同;
  2. 导出模块处理使用 exports.xxx,也可以使用 return
  3. 虽然多次调用了 calculate 函数,calculate 函数中加载 module1,但 module1 不会被加载多次,加载后会被缓存起来。

3 总结

CMD 规范的语法:

// 定义模块
define(function(require, exports, module) {
	// 同步加载模块
	const m1 = require('../xxx')
	
	// 异步加载模块
	require.async('../xxx', function (m2) {
	})
	
	// 使用 exports 导出模块
	exports.xxx = xxx
	
	//也可以使用 return 导出模块
	// return xxx
})

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货

有关JS 模块化- 04 CMD 规范与 Sea JS的更多相关文章

  1. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  2. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分,我编写了一个小导入程序,它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是,与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存,我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关,因为当我删除对LDAP内容的调用时,内存使用情况会很好地稳定下来。此外,不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray,它们都是LDAP库的一部分。当我运行导入时,内存使用量最终达到超过1GB的峰值。如果问题存在,我需要找到一些方法来更正我的代

  3. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  4. ruby - 当使用::指定模块时,为什么 Ruby 不在更高范围内查找类? - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后,我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是,如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误,还是仅仅是Ruby解析变量名的方式的逻辑结果? 最佳答案 Isthisabug,or

  5. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组,即["apple","boy"]? 最佳答案 为了做到这一点,请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

  6. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的

  7. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  8. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求:要创建虚拟机,就需要给他提供一个虚拟的磁盘,我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式:qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令,基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机,另外在创建虚拟机之前,提前打开vnc客户端,在创建虚拟机的时候,通过vnc

  9. ruby-on-rails - Controller 中的 Rails 辅助模块 - 2

    我有一个Controller,我想为这个Controller创建一个助手,我可以在不包含它的情况下使用它。我尝试像这样创建一个与Controller同名的助手classCars::EnginesController我创建的助手是moduleCars::EnginesHelperdefcheck_fuellogger.debug("chekingfuel")endend我得到的错误是undefinedlocalvariableormethod`check_fuel'for#有没有我遗漏的约定? 最佳答案 如果你真的想在Controll

  10. ruby-on-rails - 具有同名的模块和类 - 2

    我有一个模块stat存在于目录结构中:lib/stat_creator/stat/在lib/stat_creator/stat.rb中,我在lib/stat_creator/stat/目录中有我需要的文件,以及:moduleStatCreatormoduleStatendend当我使用该模块时,我将这些类称为StatCreator::Stat::Foo.new现在我想要一个存在于应用程序中的根Stat类。我在app/models中制作了我的Stat类,并在routes.rb中进行了设置。但是,如果我转到Rails控制台并尝试在应用程序/模型中使用Stat类,例如:Stat.by_use

随机推荐