草庐IT

JS 模块化 - 02 Common JS 模块化规范

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

1 Common JS 介绍

Common JS 是模块化规范之一。每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见。Common JS 规范在 Node 端和浏览器端有不同的实现。

1.1 暴露模块

暴露模块有两种方式:module.exportexports ,两种方式均可以暴露一个函数或对象。两种方式本质上是一样的,Common JS 在每个模块中隐式将 module.exports 指向(赋值)给 exports 语法格式如下:

// 暴露函数
module.exports = function () {}

// 暴露对象
module.exports = {
  xxx: () => {}
}

exports.xxx = {}

exports.xxx = function() {}

1.2 加载模块

加载模块使用 require() 函数。格式如下:

const xxx = require('xxxx')

加载模块是同步操作,按照在代码中出现的顺序进行加载。

可以在代码中多次使用 require 加载模块,但只会在首次加载时真正去加载,加载后就会将该模块缓存。

2 Common JS 规范的 Node 实现

Node.js 实现了 Common JS 规范,所以在 Node 环境下可以直接使用 Common JS 规范,无须引入其他包。

2.1 创建模块

创建 modules 目录,在该目录下创建四个文件:module1.jsmodule2.jsmodule3.jsmodule4.js 分别代表 4 个模块。

module1.js 使用 module.exports 暴露一个匿名对象:

const msg = 'this is module1'

console.log(msg)

module.exports = {
  testFun: () => {
    console.log('in module1 test function.')
  }
}

module2.js 使用 module.exports 暴露一个函数:

const msg = 'this is module2'

console.log(msg)

const testFun = () => {
  console.log('in module2 test function.')
}

module.exports = testFun

module3.js 使用 exports 暴露一个函数:

const msg = 'this is module3'

console.log(msg)

exports.testFun = () => {
  console.log('in module3 test function.')
}

module4.js 使用 exports 暴露对象:

const msg = 'this is module4'

console.log(msg)

exports.demo = {
  testFun: () => {
    console.log('in module4 test function.')
  }
}

2.2 使用模块

module 目录同级创建入口 JS 文件 index.js,在该文件中加载并使用上面 4 个模块:

console.log('---- 加载模块 ----')

const demo1 = require('./modules/module1')
const demo2 = require('./modules/module2')
const demo3 = require('./modules/module3')
const demo4 = require('./modules/module4')

console.log('---- 使用模块 ----')

demo1.testFun()
demo2()
demo3.testFun()
demo4.demo.testFun()

需要注意:使用模块时,要与暴露模块对应起来。

2.3 运行程序

在 Node 环境下运行 index.js

在控制台中输入如下命令:

node ./index.js

控制台输出:

3 Common JS 规范的浏览器实现

3.1 创建 HTML

module 目录同级创建入口 HTML 文件:index.html,在该文件中通过 script 标签引入上面编写的 index.js 文件:

<script src="./index.js"></script>

在浏览器中访问 index.html ,会发现浏览器的 console 中提示如下错误:

这是因为浏览器不认识 require ,所以需要使用工具将 Common JS 规范的代码编译为浏览器识别的 JS 语法。这里咱们使用 browserify

3.2 browserify

browserify 可以支持咱使用 Common JS 模块化规范来组织浏览器端的 Javascript 代码。

全局安装 browserify

npm install -g browserify

查看 browserify 版本号:

browserify --version

使用 browserify 编译 Common JS 规范的代码:

browserify ./index.js -o ./bundle.js

执行该命令后,会在当前目录下生成 bundle.js 文件。

index.html 文件中引入 bundle.js

<script src="./bundle.js"></script>

3.3 运行HTML

再次在浏览器中访问 index.html,此时在浏览器控制台中会输出正确的结果:

4 总结

Common JS 规范的语法:

  • 暴露模块:module.exportsexports
  • 加载模块: require()

Common JS 规范的使用:

  • Node:Node JS 支持 Common JS 规范;
  • 浏览器:需要使用 browserify 编译。

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

有关JS 模块化 - 02 Common 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. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  9. 牛客网专项练习30天Pytnon篇第02天 - 2

    1.在Python3中,下列关于数学运算结果正确的是:(B)a=10b=3print(a//b)print(a%b)print(a/b)A.3,3,3.3333...B.3,1,3.3333...C.3.3333...,3.3333...,3D.3.3333...,1,3.3333...解析:    在Python中,//表示地板除(向下取整),%表示取余,/表示除(Python2向下取整返回3)2.如下程序Python2会打印多少个数:(D)k=1000whilek>1:    print(k)k=k/2A.1000 B.10C.11D.9解析:    按照题意每次循环K/2,直到K值小于等

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

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

随机推荐