《SPA设计与架构》之JavaScript模块化

原文

  简书原文:https://www.jianshu.com/p/d5fc38506bc4

大纲

  1、什么是模块?
  2、基本的模块模式
  3、模块模式概念
  4、模块结构
  5、揭示模式
  6、模块编程的意义
  7、模块化编程的重要性

1、什么是模块?

  通常模块(Module)是指某个更大结构的一部分或组件。然而,模块术语依据不同上下文,甚至在软件开发范畴内,都可以用不同含义。有时我们会听到人们在一般意义层面讨论模块。比如,他们可能说“支付模块”或者“旅行计划模块”。这时候模块意指整体特性是完全没有什么问题的。而在我们特指JavaScript代码块的时候,模块就代表一个函数——一个通过模块模式创建的特定函数。

2、基本的模块模式

3、模块模式概念

3.1、命名空间

  命名空间是一种为一组相关成员提供具体作用域的方式。尽管命名空间当前并非JavaScript语言的一部分,但仍可以通过为更大作用域的任何变量(如全局变量)分配模块函数来达到同样效果。

3.2、匿名函数表达式

  函数表达式是表达式的一部分,且不以function关键字开头。如果函数表达式未命名,则被称为匿名函数表达式。模块体包含在一个匿名函数表达式当中。

3.3、对象字面量

  JavaScript提供了一种创建对象的快捷方式,被称为字面量标记法,其通过花括号声明一个对象,它的Property用键值对来表示。

3.4、闭包

  通常,当函数执行完毕,在其中创建的任何局部变量的生命周期也就宣告结束。闭包则是一个例外情况,当函数包含了外层作用域的变量引用时,例外就发生了。在JavaScript中,每个函数也都有一个外层作用域,即使外层作用域恰好就是全局作用域(所以从技术角度来讲,所有函数都是闭包)。闭包对于我们的讨论内容是非常重要的,因为即使模块模式的外层函数立即执行完毕,只要模块仍在使用,外层函数返回语句所引用作用域链之上的任何对象或值,都无法被垃圾回收。

4、模块结构

  模块结构巧妙地使用一个函数作为封装其逻辑的容器。这是可能的,因为在模块中局部声明变量及函数可以避免模块外部直接访问它们。模块内部功能的访问可以通过访问语句暴露的内容来控制。

5、揭示模式

  模块模式的吸引力之一就是在模块内部功能与公开功能之间划定了清晰的界限。有一种频繁用到并能够让划分更加清晰的改良版模块模式——揭示模式(revealing module pattern)。
  其实现思路是:将任何API所需代码移到内部,将公有函数作为纯粹指向内部代码的指针,并只暴露该公有函数。

6、模块编程的意义

6.1、避免命名冲突

  不用模块限制函数作用域,把函数一股脑地放进全局作用域,将很容易导致命名冲突
  模块模式能够让你按自己意愿命名变量或函数,而不用担心不同模块代码间会产生命名冲突问题

6.2、保护代码完整性

  在某些语言中,访问某部分应用程序代码可以通过注入public或private这样的访问修饰符来控制。而在JavaScript中private是保留关键字。我们仍然可以通过模块模式限定变量和函数的访问权限。这是可能的,因为在某个函数里声明的变量和函数,意味着它们的作用域已限制为容器函数。这种限制访问某部分模块代码的能力将组织其他代码直接改变其内部状态,维系模块内部正常运作,并避免模块数据遭到肆意修改导致违背其预期目的。
正确编写安全的代码难度很大。如果你无法阻止代码内逻辑的错误使用,编写安全代码的希望就愈发渺茫。模块模式提供了一种管理内部代码访问性的方式。

6.3、隐藏复杂性

  当讨论隐藏编程复杂度时,并非说我们想讨论如何保守秘密或者如何增加安全性。我们要讨论的是两种方式的差异性:通过大量全局函数实现具体功能的复杂逻辑,以及将复杂逻辑放至内部并只通过公有接口暴露开发者所需功能。后者减少了混乱,并使得函数调用更加清晰起来,以正确使用应用功能。

7、模块化编程的重要性

  模块化编程最重要的思想:通过模块模式来内化逻辑复杂性并提供功能对应公有API,这是JavaScript的封装实现方式。
模块化的代码能够将应用逻辑组织成单一目标的更小单元,其更容易管理及修改。毫无疑问这带来了更好的可重用性。模块还有助于保持数据完整性、代码组织以及避免命名冲突。毕竟我们为无刷新的单一页面编写代码,如果不按这种设计方式编写代码,纯粹依赖全局变量和函数的话,代码将很快变得难以管理。

原文地址:https://www.cnblogs.com/shcrk/p/9291932.html

时间: 2024-11-14 12:41:56

《SPA设计与架构》之JavaScript模块化的相关文章

SPA设计与架构-理解单页面Web应用 (埃米顿.A斯科特) 中文pdf扫描版

SPA 开发技术的运用是当今Web 开发领域的热门趋势,但真正全面掌握该技术的开发者并不多.本书详尽阐述单页面Web 应用(SPA)开发技术,从SPA 构建基础入手,通过MV*.模块化编程.路由.模块间通信.服务器端交互等概念的阐述,全面介绍SPA 的设计与架构,帮助读者正确掌握SPA 开发的各方面知识要素.同时,<SPA设计与架构:理解单页面Web应用>中还讨论了SPA 的单元测试及客户端任务自动化,覆盖了从开发到部署的一系列任务,让读者在阅读完<SPA设计与架构:理解单页面Web应用

《SPA设计与架构》之认识SPA

原文 简书原文:https://www.jianshu.com/p/84323f530223 大纲 前言 1.什么是单页面应用程序(SPA) 2.SPA与传统Web应用的区别 3.关于SPA的使用 4.SPA的相关知识 5.服务器端通信 6.单元测试 7.认识自动化工具 前言 本篇博客以及之后的几篇关于SPA的博客是本人阅读过<SPA设计与架构>之后整理的知识,并且针对一些知识点也查找了相关博客,对其有一定的了解.而我也将我对SPA的认识和理解写出来,希望对读者能有所帮助.如果有想要深入了解关

《SPA设计与架构》之MV*框架

原文 简书原文:https://www.jianshu.com/p/39f8f0aefdc2 大纲 1.认识MV*框架 2.传统UI设计模式 3.对框架的本质认识--框架有效性和框架分类 4.MV*基础概念 5.为什么要用MV*框架 1.认识MV*框架 MV*术语表示基于浏览器的一系列框架,用于构建应用程序的关注分离.这些框架立足于传统 的UI设计模式,但在整个实现过程中,其遵循某种模式的程度是变化的. 在MV*概念中,M代表模型(Model),V代表视图(View) 模型:典型的模型包含了数据

深入了解Javascript模块化编程

本文译自Ben Cherry的<JavaScript Module Pattern: In-Depth>.虽然个人不太认同js中私有变量存在的必要性,但是本文非常全面地介绍了Javascript中模块化模式地方方面面.我读完之后还是受益匪浅,所以翻译出来希望对各位也有些帮助. 本文最初发布于我的个人博客:http://jerryzou.com/posts/jsmodular/ 模块化编程是一种非常常见Javascript编程模式.它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为

关于Javascript模块化和命名空间管理的问题说明

最近闲下来的时候,稍微想了想这个问题.关于Javascript模块化和命名空间管理 [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名字空间污染的问题是因为我相信已经考虑到模块化思想的编码者应该至少有了一套自己的命名法则,在中小型的站点中,名字空间污染的概率已经很小了,但也不代表不存在,后面会说这个问题). 其实模块化思想还是和面向对象的思想如出一辙,只不过可能我们口中所谓的“模块”是比所谓的“对象”更大的对象而已.我们把致力完成

Javascript模块化编程详解

在这篇文章中,我将会回顾一下js模块化编程的基础,并且将会讲到一些真的非常值得一提的进阶话题,包括一个我认为是我自创的模式. 模块化编程是一种非常常见Javascript编程模式.它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为人知. 基础 我们首先简单地概述一下,自从三年前Eric Miraglia(YUI的开发者)第一次发表博客描述模块化模式以来的一些模块化模式.如果你已经对于这些模块化模式非常熟悉了,大可以直接跳过本节,从“进阶模式”开始阅读. 匿名闭包 这是一种让一切变为

简述JavaScript模块化编程(二)

前置阅读:简述JavaScript模块化(一) 在前面一文中,我们对前端模块化所经历的三个阶段进行了了解: CommonJs,由于是同步的,所以主要应用于服务器端,以Node.js为代表. AMD,异步模块定义,预加载,推荐依赖前置.以require.js为代表. CMD,通用模块加载,懒加载,推荐依赖就近.以Sea.js为代表. 而在ES6已经大行其道的今天,ES6中所提供的模块化的方法也自然而然成了我们进行JavaScript模块化编程的标准,因此ES6模块的语法虽然在一些较为老的浏览器上不

Javascript模块化编程(二):AMD规范

作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了. 目前,通行的Javascript模块规范共有两种

Javascript模块化开发 – AMD规范

通行的Javascript模块规范共有两种:CommonJS和AMD. 2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程.这标志"Javascript模块化编程"正式诞生.因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限:但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性