课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
模块化编程开发模式相信大家在学习前端编程开发技术的时候应该有接触和了解过。今天我们就一起来分析一下,web前端模块化编程的好处都有哪些。
一、模块化的理解
1. 什么是模块?
将一个复杂的程序依据一定的规则 (规范) 封装成几个块 (文件),并进行组合在一起;
块的内部数据与实现是私有的, 只是向外部暴露一些接口 (方法) 与外部其它模块通信。
2. 模块化的进化过程
全局 function 模式:将不同的功能封装成不同的全局函数;
编码: 将不同的功能封装成不同的全局函数;
问题: 污染全局命名空间,容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系。
3. 模块化的好处
避免命名冲突 (减少命名空间污染)
更好的分离, 按需加载
更高复用性
高可维护性
4. 引入多个script后出现出现问题
请求过多
先我们要依赖多个模块,那样就会发送多个请求,导致请求过多。
依赖模糊
我们不知道他们的具体依赖关系是什么,也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
难以维护
以上两种原因就导致了很难维护,很可能出现牵一发而动全身的情况导致项目出现严重的问题。
二、模块化规范
1.CommonJS
(1) 概述
Node 应用由模块组成,采用 CommonJS 模块规范。每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。在服务器端,模块的加载是运行时同步加载的;在浏览器端,模块需要提前编译打包处理。
(2) 特点
所有代码都运行在模块作用域,不会污染全局作用域。
模块可以多次加载,但是只会在一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
模块加载的顺序,按照其在代码中出现的顺序。
(3) 基本语法
暴露模块:module.exports = value或exports.xxx = value;
引入模块:require(xxx), 如果是三方模块,xxx 为模块名;如果是自定义模块,xxx 为模块文件路径。
此处我们有个疑问:CommonJS 暴露的模块到底是什么? CommonJS 规范规定,每个模块内部,module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。
(4) 模块的加载机制
CommonJS 模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!