模块化

简介: 模块化

1.模块引用


• 在规范中,定义了require()方法,这个方法接手模块标识,以此将一个模块引入到当前运行环境中。

• 模块引用的示例代码:
– var math = require(‘math’);


2.模块定义


• 在运行环境中,提供了exports对象用于导出当前模块的方法或者变量,并且它是唯一的导出的出口。

• 在模块中还存在一个module对象,它代表模块自身,而exports是module的属性。

• 在Node中一个文件就是一个模块。

exports.x = 10;
exports.y = 11;
exports.fn = function() {
}

3.模块标识


• 模块标识其实就是模块的名字,也就是传递给require()方法的参数,它必须是符合驼峰命名法的字符串,或者是以.、…开头的相对路径、或者绝对路径。

• 模块的定义十分简单,接口也十分简洁。每个模块具有独立的空间,它们互不干扰,在引用时也显得干净利落。

module.exports = {}


4.模块化总结


模块化
  - 在Node中,一个js文件就是一个模块
  - 在Node中,每一个js文件中的js代码都是独立运行在一个函数中
    而不是全局作用域,所以一个模块的中的变量和函数在其他模块中无法访问
03module.js
//引入其他的模块
/*
在node中,通过require()函数来引入外部的模块
  require()可以传递一个文件的路径作为参数,node将会自动根据该路径来引入外部模块
  这里路径,如果使用相对路径,必须以.或..开头
使用require()引入模块以后,该函数会返回一个对象,这个对象代表的是引入的模块
我们使用require()引入外部模块时,使用的就是模块标识,我们可以通过模块标识来找到指定的模块
- 模块分成两大类
  核心模块
    - 由node引擎提供的模块
    - 核心模块的标识就是,模块的名字
    - 示例:var fs = require("fs");
  文件模块
    - 由用户自己创建的模块
    - 文件模块的标识就是文件的路径(绝对路径,相对路径)
      相对路径使用.或..开头
 */
//var md = require("./02.module");
var math = require("./math");
var fs = require("fs");
//console.log(md);
console.log(math.add(123,456));
//console.log(fs);
02module.js
/*
我们可以通过 exports 来向外部暴露变量和方法
只需要将需要暴露给外部的变量或方法设置为exports的属性即可
*/
//向外部暴露属性或方法
exports.x = "我是02.module.js中的x";
exports.y = "我是y";
exports.fn = function () {
};
04module.js
/*
在node中有一个全局对象 global,它的作用和网页中window类似
  在全局中创建的变量都会作为global的属性保存
  在全局中创建的函数都会作为global的方法保存
当node在执行模块中的代码时,它会首先在代码的最顶部,添加如下代码
    function (exports, require, module, __filename, __dirname) {
在代码的最底部,添加如下代码
    }
实际上模块中的代码都是包装在一个函数中执行的,并且在函数执行时,同时传递进了5个实参
   exports
    - 该对象用来将变量或函数暴露到外部
   require
    - 函数,用来引入外部的模块
   module
    - module代表的是当前模块本身
    - exports就是module的属性
    - 既可以使用 exports 导出,也可以使用module.exports导出
   __filename
    C:\Users\lilichao\WebstormProjects\class0705\01.node\04.module.js
    - 当前模块的完整路径
     __dirname
    C:\Users\lilichao\WebstormProjects\class0705\01.node
    - 当前模块所在文件夹的完整路径
*/
//console.log(global.a);
/*
  arguments.callee
    - 这个属性保存的是当前执行的函数对象
*/
//console.log(arguments.callee + "");
//console.log(arguments.length);
//console.log(exports);
//console.log(module.exports == exports);
console.log(__dirname);
05module.js
/*
exports 和 module.exports
  - 通过exports只能使用.的方式来向外暴露内部变量
    exports.xxx = xxx
  - 而module.exports既可以通过.的形式,也可以直接赋值
    module.exports.xxx = xxxx
    module.exports = {}
 */

5.包结构


• 包实际上就是一个压缩文件,解压以后还原为目录。符合规范的目录,应该包含如下文件:

– package.json 描述文件
– bin 可执行二进制文件
– lib js代码
– doc 文档
– test 单元测试



6.在JSON文件不能写注释

相关文章
|
28天前
|
前端开发 JavaScript
为什么要前端模块化?带你了解前端模块化
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。自学前端2年半,现正向全栈发展。如果你觉得我的文章有帮助,欢迎关注我,将持续更新更多优质内容!🎉🎉🎉
27 1
为什么要前端模块化?带你了解前端模块化
|
7月前
|
自然语言处理 JavaScript 前端开发
前端模块化的前世今生(下)
前端模块化的前世今生(下)
|
7月前
|
缓存 JSON 前端开发
前端模块化的前世今生(上)
前端模块化的前世今生(上)
116 0
|
7月前
|
存储 JavaScript 前端开发
第四章 模块和组件、模块化和组件化的理解
第四章 模块和组件、模块化和组件化的理解
|
缓存 JavaScript 前端开发
模块化
模块化
50 0
|
缓存 开发工具 Android开发
其实,模块化并没有你想的那么难
其实,模块化并没有你想的那么难
|
缓存 JavaScript 前端开发
前端模块化 #116
前端模块化 #116
106 0
|
设计模式 缓存 前端开发
骚年,你对前端模块化了解多少
不管是前端老司机还是刚接触前端的"菜鸟"。模块化想必在每天工作中,或多或少都会接触到。尤其针对一些针对React、Vue开发的同学来说,那就是每天都会脱口而出的一个必备术语。并且在很多技术文档中,都常常看到AMD、UMD、COMMONJS还有ES6中的module。 但是,模块化的本质是什么!前端是如何从"茹毛饮血"的<script>到现在es6的module的呢。 今天我们就来唠唠这段鲜为人知的故事。
114 0
|
编解码 JavaScript 前端开发
前端模块化!
模块化 1、 简介 模块化产生的背景 随着网站逐渐变成”互联网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。 Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持”类”(class),包(package)等概念,也不支持”模块”(module)。
|
JavaScript 前端开发 开发者
组件化和模块化的区别|学习笔记
快速学习组件化和模块化的区别
904 0

热门文章

最新文章