搭建自动化开发环境 - 模块化编程的理解说到模块化, 本文详细整理学习一下模块化具体概念及运作原理先上干货! 模块

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

更多文章前文更新推荐参考: 【Node.js 实战-搭建自动化开发环境】- 基本介绍、【工具准备】、【开工】、【详细步骤(四)】、【模块处理工具(五)】、

前文说到模块化, 本文详细整理学习一下 模块化 具体概念及运作原理

先上干货! 模块化理解运用

工作中日常开发中必用到的!!!

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

工作中的使用小栗子: 快速 get 到知识点, 融入到团队开发中!

// 定义并导出 模块
const app = {}
module.exports = app
// 引入使用模块:
const app = require('app 所在路径')

// ↓↓ 返回模块函数
exports.[functionName] = [functionName]
// exports.getTime = getTime

// ↓↓ 返回模块对象本身
module.exports = [functionName]
// module.exports = getTime

export 和 export default 区别:

均可导出常量/ 函数/ 文件/ 模块等
一个文件或模块中 export/ import 可导入多个; export default 只能导出一个
export 导出, 在导入时需加 {}, export default 导入时不需要加 {}
export 能直接导出变量表达式, export default 不行!

模块化 (js)

1. 模块化概念:

将系统功能分离成独立的功能部分的方法就是模块化

模块化是一种处理复杂系统, 分解成为更好的可管理模块的方式

可以将系统代码划分为一系列职责单一、高度解耦、且可替代的模块

系统中某一部分的变化将如何影响其他部分就会变得显而易见

系统的可维护性更加简单易得

2. 模块化编程: 模块加载的运作原理

将复杂的项目解耦

兼顾资源的管理和调度问题

AMD: 异步模块定义, 对于依赖的模块: 提前执行
CMD: 通用模块定义, (as lazy as possible): 延迟执行
CommonJS 定义的模块:
- 1. 模块标识: (module)
- 1. 模块定义: (exports)
- 1. 模块引用: (require)

分离出去的每一个部分，都可以看成一个模块，也就是说一个 js 文件里面有一定的功能，这个 js 文件就可以说是一个模块

3. 模块化的优点:

开发成本低/便于协调合作/开发效率高，便于复用和维护和测试，

（八字金言：代码复用，便于维护）

做模块化的时候，最终是需要将各个模块组合在一起，所以需要一个入口文件

模块在合并的时候其实有很多种方法和工具来帮助我们做到这一点，这些方法和工具都会提供出一种模块化规范来，我们需要按照统一的规范来进行模块组合

注意：模块中的变量/对象等等都是私有的，单纯的引入模块只能是让这个模块的代码在这里运行一下，但是不能使用模块中的私有的变量。。。如果需要使用模块中的一些东西的化，必须让模块将其暴露出来, 暴露的时候 module.exports 的值是什么，引入的时候 require 函数的返回值就是什么

4. 常用的 js 模块化规范有很多，例如：

模块化规范只说明两个问题，

如何导入模块

如何导出模块

Node.JS 中使用的是 CommonJS 规范，同步，运行在服务端，模块都在本地，模块的导入速度 = 硬盘的读取速度

利用 require 方法导入模块，利用 module.exports 导出模块中的内容
ES6 module 同步

利用 import from 导入模块; 利用 export 导出模块

SASS/LESS/styluss css 预处理语言

我们写 sass 然后再使用工具将其编译成 css， sass 比 css 多了很多功能，例如定义变量/循环/混入/嵌套。。。。

sass 的语言版本有两种，老的版本，后缀名是 .sass, 新版本的后缀名是 .scss

下文更新预告, 跟上节奏

接下来会继续学习 代码版本控制, 最常见的 git, 以及 svn

提高开发效率, 为我们的开发提效赋能!

跟上前进的步伐, 向前加油

加油!! go~

搭建自动化开发环境 - 模块化编程的理解

先上干货! 模块化理解 运用