Modularity（模块化-无模块化）
2024-04-06 05:18:45
|
第一阶段：无模块化
|
|
|
简单的将所有的js文件统统放在一起。但是这些文件的顺序还不能出错，比如jquery需要先引入，才能引入jquery插件，才能在其他的文件中使用jquery。
|
|
|
优点：
|
|
|
缺点：
|
|
|
函数封装
|
|
|
优点
|
|
|
缺点
|
|
|
命名空间方式（对象封装）
|
|
|
每个模块只暴露一个全局对象
命名空间的方式只是解决了命名冲突的问题
|
|
|
优点
|
|
|
缺点
|
|
|
IIFE(立即执行函数)
|
|
|
使用立即执行函数表达式（IIFE，Immediately-Invoked Function Expression）为模块提供私有空间
|
|
|
|
|
优点：
|
|
|
缺点：
|
|
// 函数封装└─ stage-1├── module-a.js├── module-b.js└── index.html// module-a.js
function foo () {console.log('moduleA#foo')
}// module-b.js
var data = ‘something'<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Stage 1</title>
</head>
<body><script src="module-a.js"></script><script src="module-b.js"></script><script>// 直接使用全局成员foo() // 可能存在命名冲突console.log(data)data = 'other' // 数据可能会被修改</script>
</body>
</html>// 命名空间方式（对象封装）// module-a.jswindow.moduleA = {method1: function () {console.log('moduleA#method1')}}// module-b.jswindow.moduleB = {data: 'something',method1: function () {console.log('moduleB#method1')}}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Stage 2</title></head><body> <script src="module-a.js"></script> <script src="module-b.js"></script> <script>moduleA.method1();moduleB.method1(); // 模块成员依然可以被修改moduleA.data = 'foo'</script></body></html>// IIFE// module-a.js;(function () {var name = 'module-a'function method1() {console.log(name + '#method1')}window.moduleA = {method1: method1}})()// IIFE 引入依赖// module.js文件(function (window, $) {let data = 'www.baidu.com';//操作数据的函数function foo() {//用于暴露有函数console.log(`foo() ${data}`);$('body').css('background', 'red');}function bar() {//用于暴露有函数console.log(`bar() ${data}`);otherFun(); //内部调用}function otherFun() {//内部私有的函数console.log('otherFun()');}//暴露行为window.myModule = { foo, bar };})(window, jQuery);// index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">myModule.foo();
</script>// 揭示模块模式 Revealing module patternvar myGradesCalculate = (function () {// 在函数的作用域中下面的变量是私有的var myGrades = [93, 95, 88, 0, 55, 91];var average = function () {var total = myGrades.reduce(function (accumulator, item) {return accumulator + item;}, 0);return 'Your average grade is ' + total / myGrades.length + '.';};var failing = function () {var failingGrades = myGrades.filter(function (item) {return item < 70;});return 'You failed ' + failingGrades.length + ' times.';};// 将公有指针指向私有方法return {average: average,failing: failing,};})();myGradesCalculate.failing(); // 'You failed 2 times.'myGradesCalculate.average(); // 'Your average grade is 70.33333333333333.'Modularity（模块化-无模块化）相关推荐
- JavaScript：模块化及模块化规范
什么是JavaScript的模块化?模块化模块化,那就是先有模块,模块是什么?模块就是将一个复杂的程序按照一定的规则拆分并单独封装成一个块或者文件,每一个块内都有自己的内部数据和方法,并且会向外暴露一 ...
- 编程思想-模块化-产品模块化设计：产品模块化设计
ylbtech-编程思想-模块化-产品模块化设计:产品模块化设计 产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的几何连接接口和一致的输入.输出接口的单元,相 ...
- 什么是模块化？模块化的好处？
什么是模块化? 模块化就是将js文件按照功能分离,根据需求引入不同的文件中,源于服务器端. 模块化好处? 1.解耦 对业务进行模块化拆分后,为了使各业务模块间解耦,因此各个都是独立的模块,它们之间是没 ...
- 什么是模块化，模块化开发如何实现？
相信广大前端朋友们都遇到过这么一个问题? 什么是模块化,模块化开发如何实现? 那么什么是模块化呢,时下流行的库与框架又有哪些在利用模块化进行开发呢? 今天我从以下两个方向来进行描述,如果描述不够准确 ...
- 什么是模块化？模块化怎么实现？
什么是模块化?模块化怎么实现? 前言 : 增加印象,留下脚印 ,忘记还可以翻一翻 奥利给. 1,什么是模块化 公司里一个项目是有很多程序员一起开发的,例如 "多人运动" 这个项目 ...
- 模块化：模块化的基本概念
什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个系统来说,模块是可组合.分解和更换的单元. 1. 现实生活中的模块化 2. 编程领域中的模块化 编程领域中的 ...
- osgi 模块化_OSGI –模块化您的应用程序
osgi 模块化 由于我是模块化,低耦合,高凝聚力等的大力拥护者,所以-- 我相信这项技术是我们使用Java平台创建应用程序的突破. 使用OSGi,创建高度可扩展的应用程序非常简单,例如参见Eclip ...
- [Vue.js] 模块化 -- 前端模块化
模块化相关规范 模块化概述 传统开发模式的主要问题 命名冲突 文件依赖 通过模块化解决传统开发模式的问题 模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公 ...
- 什么是模块化？模块化的好处
什么是模块化 简单地说,模块化就是有组织地把一个大文件拆成独立并互相依赖的多个小模块. 模块内部有许多私有属性,只向外暴露一部分公开的接口(如可以修改私有属性的方法等) 模块化是一种处理复杂系统分解为 ...
最新文章
- python请求url非阻塞_Tornado请求中的非阻塞/异步URL获取
- ue4 classuobject没有成员beginplay_关于UE4使用的一些想法（一）
- boost::mpl模块实现unique相关的测试程序
- 我的SSH JDBC数据源配置
- 【渝粤题库】陕西师范大学202081 管理学 作业 （专升本、高起本、高起专）
- efcore 实体配置_创建并配置模型
- 详解自动驾驶仿真框架OpenCDA: An Open Cooperative Driving Automation Framework Integrated with Co-Simulation
- JAVA中增强循环中用线程_在Java中以循环方式运行线程
- 2021年中国少儿编程行业报告
- 【JNI知识一】--JNI接口函数与指针
- linux 用户创建，权限，分组
- 【剑指 offer】（二十九）—— 数组中出现次数超过一半的数字（及该数字出现的次数）
- (转自YYW'S BLOG)IListT 转换成 DataSet
- 淦！这个非科班学妹是真的厉害...
- win10cmd计算机管理界面,Win10命令提示符cmd在哪 Win10以管理员身份运行方法
- 扫描枪速度测试软件,条码扫描枪怎么测试
- Kali学习 | 漏洞扫描：3.1 Nessus安装、配置和新建扫描任务
- AS 编写 Xposed 插件需要修改的地方
- 畅捷通T+ v2接口 发布IIS报错 RsaUsingSha with PSS
- @Value 获取乱码 问题解决