JavaScript模块模式实例详解

 更新时间:2017年10月25日 10:40:54   作者:骑车捡玛瑙  
这篇文章主要介绍了JavaScript模块模式,结合实例形式详细分析了js模块模式的相关概念、功能、扩展等操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • JS中split()用法(将字符串按指定符号分割成数组)

    JS中split()用法(将字符串按指定符号分割成数组)

    这篇文章主要介绍了JS中split()用法(将字符串按指定符号分割成数组)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • JavaScript表单验证实例之验证表单项是否为空

    JavaScript表单验证实例之验证表单项是否为空

    表单验证几乎在每个需要注册或者是登录的网站都是必不可少,下面通过本篇文章给大家介绍JavaScript表单验证实例之验证表单项是否为空,涉及到js表单验证实例相关知识,对js表单验证实例代码需要的朋友一起学习吧
    2016-01-01
  • Javascript的原型和原型链你了解吗

    Javascript的原型和原型链你了解吗

    这篇文章主要为大家详细介绍了Javascript的原型和原型链,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 详解redux异步操作实践

    详解redux异步操作实践

    这篇文章主要介绍了详解redux异步操作实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • js中prototype用法详细介绍

    js中prototype用法详细介绍

    这篇文章详细介绍了js中prototype用法及实例,有需要的朋友可以参考一下
    2013-11-11
  • 转换layUI的数据表格中的日期格式方法

    转换layUI的数据表格中的日期格式方法

    今天小编就为大家分享一篇转换layUI的数据表格中的日期格式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 再谈JavaScript线程

    再谈JavaScript线程

    继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题):
    2015-07-07
  • uniapp项目优化方式及建议

    uniapp项目优化方式及建议

    性能优化自古以来就是重中之重,本文关于uniapp项目优化方式最全整理,会根据开发情况进行补充,感兴趣的可以了解一下
    2021-08-08
  • js自调用匿名函数的三种写法(推荐)

    js自调用匿名函数的三种写法(推荐)

    下面小编就为大家带来一篇js自调用匿名函数的三种写法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS实现去除数组中重复json的方法示例

    JS实现去除数组中重复json的方法示例

    这篇文章主要介绍了JS实现去除数组中重复json的方法,涉及javascript针对json数组数据的遍历、判断、存取等相关操作技巧,需要的朋友可以参考下
    2017-12-12

最新评论