美文网首页
模块化总结

模块化总结

作者: HIKALU | 来源:发表于2018-11-25 23:17 被阅读0次

前言

在写js的时候经常遇到各种关于模块的问题,尤其在引用导出这里比较模糊。
现在整理一下
先复习一下都有哪些导入导出模式

require: node 和 es6 都支持的引入
export / import : 只有es6 支持的导出引入
module.exports / exports: 只有 node 支持的导出

Node

Node里面的模块系统遵循的是CommonJS规范。
那问题又来了,什么是CommonJS规范呢?
由于js以前比较混乱,各写各的代码,没有一个模块的概念,而这个规范出来其实就是对模块的一个定义。

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

先解释 exportsmodule.exports
在一个node执行一个文件时,会给这个文件内生成一个 exportsmodule对象,
module又有一个exports属性。他们之间的关系都指向一块{}内存区域

exports = module.exports = {};
// utils.js
let a = 100;

console.log(module.exports); //能打印出结果为:{}
console.log(exports); //能打印出结果为:{}

exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200}

exports = '指向其他内存区'; //这里把exports的指向指走

// test.js

var a = require('/utils');
console.log(a) // 打印为 {a : 200} 
从上面可以看出,其实require导出的内容是module.exports的指向的内存块内容,并不是exports的。
简而言之,区分他们之间的区别就是 exports 只是 module.exports的引用,辅助后者添加内容用的。

所以,为了避免糊涂,尽量都用 module.exports 导出,然后用require导入

ES中的模块导出导入

说实话,在ES中的模块,就非常清晰了。不过也有一些细节的东西需要搞清楚。
比如 exportexport default,还有 导入的时候,import a from ..,import {a} from ..,总之也有点乱,那么下面我们就开始把它们捋清楚吧。

export 和 export default

首先我们讲这两个导出,讲讲它们的区别

1.exportexport default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中,exportimport可以有多个,export default仅有一个
3.通过export方式导出,在导入时要加{ }export default则不需要
4.export能直接导出变量表达式,export default不行。

// testEs6Export.js
'use strict'
//导出变量
export const a = '100';  

 //导出方法
export const dogSay = function(){ 
    console.log('wang wang');
}

 //导出方法第二种
function catSay(){
   console.log('miao miao'); 
}
export { catSay };

//export default导出
const m = 100;
export default m; 
//export defult const m = 100;// 这里不能写这种格式。
//index.js
'use strict'
var express = require('express');
var router = express.Router();

import { dogSay, catSay } from './testEs6Export'; //导出了 export 方法 
import m from './testEs6Export';  //导出了 export default 

import * as testModule from './testEs6Export'; //as 集合成对象导出



/* GET home page. */
router.get('/', function(req, res, next) {
  dogSay();
  catSay();
  console.log(m);
  testModule.dogSay();
  console.log(testModule.m); // undefined , 因为  as 导出是 把 零散的 export 聚集在一起作为一个对象,而export default 是导出为 default属性。
  console.log(testModule.default); // 100
  res.send('恭喜你,成功验证');
});

module.exports = router;

相关文章

  • 蜂鸟商家版 iOS 组件化 / 模块化实践总结

    蜂鸟商家版 iOS 组件化 / 模块化实践总结 蜂鸟商家版 iOS 组件化 / 模块化实践总结

  • iOS组件化储备

    资料 组件化/模块化 蜂鸟商家版 iOS 组件化 / 模块化实践总结 模块化与解耦 浅析 iOS 应用组件化设计 ...

  • Android项目模块化/组件化开发(非原创)

    文章大纲 一、项目模块化初步介绍二、项目模块化的两种模式与比较三、大型项目模块化的演进四、项目模块化总结五、参考文...

  • 使用ARouter进行Android模块化开发

    Android模块化 关于为什么要进行Android模块化开发,网上也已经讲烂了,不过归结起来,大体是可以总结为:...

  • 2021-07-19

    前言: 效果预览: 普通实现: 新增模块: 模块化实现: 新增模块: 方案对比: 总结:

  • 模块化总结

    Node CommonJS 1.CommonJS是 “运行时加载”2.require() 是加载整个 “对象”3....

  • 模块化总结

    前言 在写js的时候经常遇到各种关于模块的问题,尤其在引用导出这里比较模糊。现在整理一下先复习一下都有哪些导入导出...

  • android插件化

    Android插件化技术 去年年终总结的时候,主管说你们的代码重构过没有,模块化实现没有,我是说代码重构了,模块化...

  • 2018-01-26

    转自 蜂鸟商家版 iOS 组件化 / 模块化实践总结 蜂鸟商家版团队在组件化 / 模块化工作期间,产出的一些库和工...

  • 模块化开发

    前端JS模块化开发有两大规范AMD合CMD,下面以我的理解来简单总结一下模块化开发的思想 ,以及js前端常用的AM...

网友评论

      本文标题:模块化总结

      本文链接:https://www.haomeiwen.com/subject/dpomqqtx.html