当前位置:首页 > 日记 > 正文

JavaScript模块模式实例详解

JavaScript模块模式实例详解

本文实例讲述了JavaScript模块模式。分享给大家供大家参考,具体如下:

在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern)。

JS中有一个显著的特性: 匿名函数(anonymous function),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突。

(function () {  // 所有的变量和函数只在这个范围内有效  // 仍然可以使用全局变量}());

经典的模块模式模板

var myNamespace = (function () { var myPrivateVar, myPrivateMethod; // A private counter variable myPrivateVar = 0; // A private function which logs any arguments myPrivateMethod = function( foo ) {   console.log( foo ); }; return {  // A public variable  myPublicVar: "foo",  // A public function utilizing privates  myPublicFunction: function( bar ) {   // Increment our private counter   myPrivateVar++;   // Call our private method using bar   myPrivateMethod( bar );  } };})();

通过闭包,可以看到,当我们使用myNamespace时,我们只能看到myPublic*的属性和方法,而myPrivate*的属性和方法是无法直接访问的。

基本模式扩展

Import mixins

JS有一个重要特性叫隐式全局变量,也就是说无论什么时候,JS解释器都对一个变量寻找var声明,如果没有找到,就视为这个变量时全局变量。这样看起来在闭包中使用全局变量时很容易的事,但同时很容易造成代码的混乱。好在匿名函数也可以接收参数,这样通过参数传递,我们可以把想使用的全局变量import到匿名函数中,从而提供一个更清晰干净的使用方法。

(function ($, YAHOO) {  // 这样就可以访问jQuery (as $) 和 YAHOO 库}(jQuery, YAHOO));

Module exports

有时候不仅仅使用全局变量,而且也想声明一个自己的全局变量,这可以通过匿名函数的return value轻松实现。

var MODULE = (function () {  var my = {},    privateVariable = 1;  function privateMethod() {    // ...  }  my.moduleProperty = 1;  my.moduleMethod = function () {    // ...  };  return my;}());

高级扩展

基于上面的基本模式,我们可以继续扩展。

Augmentation

基本模块模式的限制是我们必须把整个模块放在一个file里,那么当需要把一个模块分散到多个文件时,怎么办呢?

一个号办法就是augment modules。我们首先输入module,然后增加属性方法,然后再输出。例子如下

var MODULE = (function (my) {  my.anotherMethod = function () {    // added method...  };  return my;}(MODULE));

Loose  Augmentation

上面的例子需要先有一个Module,然后在此基础上增加新的特性。但有的时候,我们异步加载JS脚本,这样就需要一个低耦合的模块建立方法, 通过如下结构便可实现。

var MODULE = (function (my) {  // add capabilities...  return my;}(MODULE || {}));

Sub-modules

可以基于Module建立Sub modules,这个非常简单,例子如下:

MODULE.sub = (function () {  var my = {};  // ...  return my;}());

至此,我们简单的介绍了模块模式,该模式作为最经典的JS模式,被各种JS框架广泛使用。它使得你的代码封装性更强,结构化更合理,更OOP。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

angular 用拦截器统一处理http请求

angular 用拦截器统一处理http请求

响应,方法,拦截器,电脑软件,angular,想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}}index.html里引入以下js:angular.module('app.factorys',[]) .factory('ht…

JavaScript在控件上添加倒计时功能

JavaScript在控件上添加倒计时功能

控件,倒计时,代码,功能,电脑软件,一.概述在有些 报表 需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表…

jquery仿京东商品放大浏览页面

jquery仿京东商品放大浏览页面

浏览,商品,京东,页面,电脑软件,jquery仿京东商品页面京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!!仿京东商品页面css的代码!!!*{ margin: 0; padding: 0;}.da{ width: 360px; …

PPT制作墙砖字的方法怎么做

PPT制作墙砖字的方法怎么做

方法,怎么做,电脑软件,PPT,  还在为你的PPT文字平凡不起眼而烦恼吗?Duang~墙砖字震撼来袭!墙砖的字体,看起来还是非常不错滴。以下是小编为您带来的关于PPT制作墙砖字,希望对您有所帮助。PPT制作墙砖字1、在“设计”选项卡中将幻…

Photoshop调制出昏暗的霞光色铁路

Photoshop调制出昏暗的霞光色铁路

调制,霞光,弯道,昏暗,铁路,素材图片有点杂乱,同时天空部分泛白;处理的重点是把天空换上霞光;然后在合适的位置渲染一些阳光;再把图片边角区域压暗,杂乱的区域涂暗即可。原图最终效果 1、打开原图素材大图,创建可选颜色调整图层,对红、黄、绿进行调…

jquery实现放大点击切换

jquery实现放大点击切换

电脑软件,jquery,本文实例为大家分享了jquery放大点击切换图片展示的具体代码,供大家参考,具体内容如下html代码<body><div class="boss"> <div class="bigimg"> <img src="img/s1.jpg" height="350" width="350" id="spic"> …

canvas的神奇用法

canvas的神奇用法

神奇,电脑软件,canvas,canvas有一个神奇的方法getImageData这个玩意。它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变。如果你有各种滤镜的算法。那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能。使…

ppt2010主题样式库的使用方法

ppt2010主题样式库的使用方法

使用方法,样式,主题,电脑软件,今天小编给大家讲ppt2010主题样式库的使用方法,有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的。ppt2010主题样式库的使用方法1、切换到演示文稿的&ldquo;设计&rdquo;选项卡,在&ldquo;主题&rdqu…

jquery使用iscorll实现上拉、下拉

jquery使用iscorll实现上拉、下拉

下拉加载,刷新,上拉,电脑软件,jquery,本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码,供大家参考,具体内容如下实现原理是:判断fiiptop,flipdown是否显示为依据myScroll = new iScroll('wraphome', { fixedScrollbar:…

微信个性签名伤感短语伤感好听好看

微信个性签名伤感短语伤感好听好看

微信签名,流行,伤感,短语,个性签名,  最喜欢的音乐是你的声音,最喜欢的文字是你说过的话,最喜欢的路是和你一起走过的路,最喜欢的人是你。最伤心的事,是离开你。下面是小编整理的微信个性签名伤感短语的内容,希望能够帮到您。微信个性签名伤感…

nodejs mysql 实现分页的方法

nodejs mysql 实现分页的方法

方法,分页,电脑软件,nodejs,mysql,这两天学习了nodejs mysql 实现分页,很重要,所以,今天添加一点小笔记。代码如下var express = require('express');var router = express.Router();var settings = require('../settings.js');var mysql …