文档章节

JavaScript模块化开发(一)基础知识

Enjoy前端开发
 Enjoy前端开发
发布于 2015/03/23 16:34
字数 1003
阅读 9
收藏 0

随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试。模块化是一种非常好的代码组织方式,本文试着对JavaScript模块化开发的一些基础知识做一些阐释。


对象字面量(Object Literals)

对象字面量表示,其实就是用一对大括号括起来的键值对,也就是JavaScript声明对象的方式。

    
var myObject = { variableKey : variableValue, functionKey : function() { ... } }

比较一下下面代码声明方式,使用对象字面量表示,可以减少全局变量的污染,一般来说,强烈建议在任何时候都不要使用下面的声明方式:


var variableName = ...; function name1(){ ... } function name2(){ ... }

立即执行函数(IIFE Immediately-Invoked Function Expressions)

立即执行函数是现在非常流行的写法,大部分JS库都使用了这种技巧,主要是防止全局变量的污染。

当我们在声明类似于var name1 = function (){ … }这样的函数时,在后面加一对括号 (),就可以让它立即执行,但是如果是function name1() { … }这样的函数,则会有问题:

function name1(){ alert("123"); }();

上面代码在执行时会抛出错误,Unexpected token(意外的标记),因为后面的()会被解析为分组操作符

解决上面的问题,只需要加上括号将function代码全部括住即可,下面就是立即执行函数的声明方式:

(function () { /* code */ } ()); (function () { /* code */ })();
注意,上面两种方式都是可以的,主要看个人习惯。立即执行函数可以不对外暴露私有变量,比如:
var myObject = { name : "FeeldesignStudio", getName : function(){ return this.name; } }; myObject.name; //FeeldesignStudio myObject.getName(); //FeeldesignStudio var myObject = (function(){ var name = "FeeldesignStudio"; return { getName : function(){ return name; } } })(); myObject.name; //出错! myObject.getName(); //FeeldesignStudio

导入全局变量

把全局变量作为参数传递给一个立即执行函数,这样就完成了全局变量的导入,立即执行函数中可以使用此全局变量的方法,并可以修改(简化)全局变量的名称:

var myModule = (function ( jQ ) { function method1(){ jQ(".container").html("test"); } return{ publicMethod: function(){ method1(); } }; })( jQuery ); myModule.publicMethod();

模块导出

当然,有导入也可以有导出,有时我们不仅要导入全局变量,也要把模块导出到全局空间供其他模块使用。通过在立即执行函数中返回一个Object,就可以实现模块导出功能:

var myModule = (function () { var module = {}, privateVariable = "Feeldesign"; function privateMethod() { // ... } module.publicProperty = "FeeldesignStudio"; module.publicMethod = function () { console.log( privateVariable ); }; return module; })();

扩展模块

在开发中,我们经常会对一些模块进行扩展,扩展当然可以直接修改模块的源代码,但是这不是一个好的方法,比如我们要给 myModule 模块增加几个方法,通过前面的“立即执行函数”、“导入全局变量”、“模块导出”的知识,我们可以推导出下面的扩展方式:

var myModule = (function ( my ) { my.xxMethod = function () { ... }; return my; })( myModule );
问题来了:上面的代码可以很好地对 myModule 进行扩展,不过前提是 myModule 必须已经定义,如果扩展的 xxMethod 方法和 myModule 本身没有任何的依赖,那么要求 myModule 必须已经定义就毫无必要了,怎么解决这个问题呢,非常简单,只需要或一个空对象:

//松散扩展 var myModule = (function ( my ) { my.xxMethod = function () { ... }; return my; })( myModule || {} );
上述代码还存在一个问题,那就是如果a.js中声明了var myModule = …,b.js中也声明了var myModule = …,这样在引入a.js和b.js时,后者会将前者覆盖,这并不是我们期望的,所以对上述代码,可以再加改进:

(function ( my ) { my.xxMethod = function () { ... } })( window.myModule = window.myModule || {} );
上面把JavaScript模块化开发的基础知识作了介绍,接下来,会进一步介绍常见的规范和针对这些规范的一些js库实现,通过这些js库,我们可以很好的将模块化开发赋予实施。


本文转载自:http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-basics/

共有 人打赏支持
Enjoy前端开发
粉丝 3
博文 27
码字总数 3417
作品 0
海淀
私信 提问
学习 React 前你需要知道些什么

如果你正在看这篇文章,你很可能已经知道 React 是啥了。React 的学习曲线陡峭是众所周知的,很多人在开始学习 React 时都一头雾水,笔者自然也不例外。究其原因,是因为我们在学习 React 的...

Hopsken
前天
0
0
前端自学路线之 JavaScript 篇

今天来聊聊前端工程师的核心技能之——JavaScript。js这门语言看似简单,但要做到入门、熟练以至于架构的程度,还是有一段路要走的,今天就来聊聊这段路上都要经历些什么。准备好小板凳,开讲...

花仲马
2016/08/21
10.9K
14
手把手教你撸一个简易的 webpack

背景 随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的,。到后来的和。但是目前很多脚手架工具,比如已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现...

muwoo
2018/06/07
0
0
javascript——从「最被误解的语言」到「最流行的语言」

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,...

modernizr
2014/05/20
1K
12
黑马程序员:前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

传智播客
2017/03/08
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

2亿用户背后的Flutter应用框架Fish Redux

背景 在闲鱼深度使用 Flutter 开发过程中,我们遇到了业务代码耦合严重,代码可维护性糟糕,如入泥泞。对于闲鱼这样的负责业务场景,我们需要一个统一的应用框架来摆脱当下的开发困境,而这也...

阿里云官方博客
11分钟前
0
0
C++生成随机数:高斯/正态分布(gaussian/normal distribution)

高斯分布也称为正态分布(normal distribution)。 常用的成熟的生成高斯分布随机数序列的方法由Marsaglia和Bray在1964年提出,C++版本如下: #include <stdlib.h>#include <math.h> d...

天蚕宝衣
15分钟前
0
0
从 Jenkins 迁移到 Jenkins X:一场持续交付之旅

背景 在 dailymotion,我们信奉 DevOps 最佳实践,并且重度使用了 Kubernetes。我们的部分产品(并非全部)已经部署在 Kubernetes 上。在迁移我们的广告技术平台时,为了赶时髦(作者你这么直...

微笑向暖wx
19分钟前
0
0
Kafka Producer Consumer

Producer API org.apache.kafka.clients.producer.KafkaProducer 如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:...

编程SHA
26分钟前
0
0
在centos上搭建git服务器并自动同步代码

在centos上搭建git服务器并自动同步代码 tortoisegit git centos linux 5k 次阅读 · 读完需要 15 分钟 0 参考文章 CentOS安装Git实现多人同步开发 centos中GIT服务器搭建及使用密钥连接 简述...

linjin200
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部