全面解析JavaScript Module模式

yizhihongxing

全面解析JavaScript Module模式

什么是Module模式

Module模式是指使用JavaScript语言实现的,在一个程序或一个库中,将类似函数、变量等进行私有化,封装成一个独立的对象(即Module)来提供给外部调用。这种模式能够帮助开发者避免命名冲突和变量污染 ,提高代码的可维护性。

Module模式的基本实现

Module模式的基本核心是运用函数作用域和闭包特性。主要的实现方法是将需要私有化的变量和函数定义在一个函数的作用域内,并利用闭包的特性,使得这个函数的内部变量和函数对外部不可见、不可修改,根据作用域链的特性由内部变量和函数的组合形成不同的Module。

下面是一个简单的示例,用于展示Module模式的基本实现:

var Module = (function(){
  var a = 1;

  function privateFunc() {
    console.log('privateFunc invoked');
  }

  return {
    publicFunc() {
      console.log('publicFunc invoked, a:', a);
      privateFunc();
    }
  }
})();

Module.publicFunc();   // 输出:publicFunc invoked, a: 1
                        //     privateFunc invoked
Module.a = 2;  // 不会改变a的值

在上面的示例中,创建了一个名为Module的Module,其中包含了一个私有变量a和一个私有函数privateFunc,以及一个公共函数publicFuncaprivateFunc被定义在了闭包内部,只在此闭包内可见,外部无法访问。publicFunc由于在return语句中被暴露出来,所以可以被外部访问,而且由于JavaScript的“词法作用域”特性,它内部能够访问aprivateFunc

Module模式的变化

上面的示例只是一个最基本的Module模式实现,现实中,在实际项目中,开发者不能只局限于这种形式,随着业务模型的增长,可能需要使用一个更灵活的形式来满足需求——“增强的Module模式”。

暴露公共成员

虽然在基本的实现中可以使用return语句暴露出公共函数,但是在实际项目开发中,可能需要暴露出更多的公共成员(例如常量等),这时候可以使用一个简单的技巧,在Module内部定义一个公共对象,将公共函数和变量全部绑定在这个对象上,最后返回这个对象。

请看下面的示例,用于展示如何暴露出多个公共成员:

var Module = (function(){
  var privateVar = 1;

  function privateFunc() {}

  var publicObj = {
    publicFunc1(){},
    publicFunc2(){},
    publicVar1: true,
    publicVar2: 'test'
  }

  return publicObj;
})();

console.log(Module);   // 输出:{publicFunc1: ƒ, publicFunc2: ƒ, publicVar1: true, publicVar2: 'test'}

惰性实例化

Module模式还有另外一个很重要的特性:惰性实例化。通过惰性实例化,我们可以推迟某个对象(单例)的创建和初始化操作,当我们需要使用该对象时再进行创建和初始化。这样做能够提高性能,并且得到更好的封装性和灵活性。

下面的示例展示了如何进行惰性实例化:

var Module = (function() {
  var instance;

  function init() {
    // 实例化代码...
    return {
      publicFunc() {},
      publicVar: true
    };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

var module1 = Module.getInstance();
var module2 = Module.getInstance();
console.log(module1 === module2); // true,说明它们引用同一个单例

在这个示例中,init函数表示一个Module的实例化过程,在getInstance中,首次调用时才会执行该函数,然后将结果存储在闭包内的变量instance中,以便下次调用时不会再次实例化。

在浏览器中使用require.js

在JavaScript语言中,使用require方法和define方法来管理Module是很常见的做法。而在浏览器中,使用require.js库可以方便地实现Module的异步加载、依赖管理等功能。下面是一个简单的示例,用于演示在浏览器中如何使用require.js来管理Module。

首先,我们需要下载并引入require.js库:

<script src="require.js"></script>

然后,我们可以通过define方法来定义一个Module:

define('Module', [], function(){
  var privateVar = 1;

  function privateFunc() {}

  var publicObj = {
    publicFunc1() {},
    publicFunc2() {},
    publicVar1: true,
    publicVar2: 'test'
  };

  return publicObj;
});

在上面的代码中,我们定义了一个名为Module的Module,它依赖于空数组(表示它没有依赖),并且返回一个公共对象publicObj

接着,我们可以通过require方法来加载和使用Module:

require(['Module'], function(Module){
  Module.publicFunc1();
  console.log(Module.publicVar1);
});

在上面的代码中,我们使用require方法来加载了名为Module的Module,并在回调函数中使用了它的公共函数和变量。这些代码将在Module加载完成后执行,因此可以确保我们的代码可以顺利地访问到Module的公共成员。

示例:模拟jQuery插件

下面我们来演示一个更复杂的示例,使用Module模式来实现一个简单的jQuery插件。这个插件包含了一个名为$$的全局对象,它提供了类似jQuery语法的选择器、DOM操作等功能。这个对象存储在私有作用域中,不会与其他脚本的全局变量产生冲突。

var $$ = (function(){
  var _window = window;
  var _document = document;

  function _select(selector, context) {
    context = context || _document;
    return context.querySelectorAll(selector);
  }

  function _addEvent(elem, type, handler) {
    elem.addEventListener(type, handler);
  }

  function _addClass(elem, className) {
    if (elem.classList) {
      elem.classList.add(className);
    } else {
      elem.className += ' ' + className;
    }
  }

  function _removeClass(elem, className) {
    if (elem.classList) {
      elem.classList.remove(className);
    } else {
      elem.className = elem.className.replace(
        new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),
        ' '
      );
    }
  }

  function _toggleClass(elem, className) {
    if (elem.classList) {
      elem.classList.toggle(className);
    } else {
      var classes = elem.className.split(' ');
      var existingIndex = -1;
      for (var i = classes.length - 1; i >= 0; i--) {
        if (classes[i] === className) {
          existingIndex = i;
          break;
        }
      }
      if (existingIndex >= 0) {
        classes.splice(existingIndex, 1);
      } else {
        classes.push(className);
      }
      elem.className = classes.join(' ');
    }
  }

  function _each(obj, callback) {
    for (var prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        callback.call(obj[prop], obj[prop], prop, obj);
      }
    }
  }

  function _extend() {
    var target = {};
    for (var i = 0; i < arguments.length; i++) {
      for (var prop in arguments[i]) {
        if (arguments[i].hasOwnProperty(prop)) {
          target[prop] = arguments[i][prop];
        }
      }
    }
    return target;
  }

  return {
    select: _select,
    addEvent: _addEvent,
    addClass: _addClass,
    removeClass: _removeClass,
    toggleClass: _toggleClass,
    each: _each,
    extend: _extend
  };
})();

在上面的代码中,定义了一个私有对象$$,它包含了一些常用的DOM操作函数,如选择器、事件添加、添加类名、移除类名、切换类名等。这些函数都被定义在了闭包内部,不会与全局作用域产生冲突。我们可以通过$$对象来调用这些函数。

下面我们来演示如何使用这个插件:

$$.select('#test'); // 在页面中查找id为test的元素
$$.addEvent(document.querySelector('#btn'), 'click', function(){}); // 为id为btn的元素添加点击事件
$$.addClass(document.querySelector('#test'), 'selected');   // 给id为test的元素添加selected类
$$.removeClass(document.querySelector('#test'), 'selected');    // 将id为test的元素上的selected类移除
$$.toggleClass(document.querySelector('#test'), 'selected');    // 切换id为test的元素上的selected类
$$.each({'a': 1, 'b': 2, 'c': 3}, function(item, index){
  console.log(item, index);
}); // 遍历对象并打印值

在上面的代码中,我们首先使用$$.select方法来查找页面中的某个元素,然后使用$$.addEvent方法为此元素添加了一个点击事件。接着,我们使用$$.addClass方法为此元素添加一个selected类,并使用$$.removeClass方法将此类从元素上移除。最后,我们使用$$.toggleClass方法来切换此类的显示。最后,我们还使用了$$.each方法来遍历一个对象。

这个简单的示例展示了如何使用Module模式和JavaScript的一些基本操作来实现一个功能强大的jQuery插件。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:全面解析JavaScript Module模式 - Python技术站

(1)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 自己写一个uniapp全局弹窗(APP端)

    下面是详细讲解如何自己写一个uniapp全局弹窗(APP端)的完整攻略。 1. 准备工作 在开始之前,需要先确定以下几点: 确定弹窗的样式和内容,包括弹窗的尺寸、背景色、字体等; 确定弹窗的触发方式,比如是否需要点击按钮或者触发特定事件; 确定弹窗的位置,比如是否需要固定在屏幕底部或者居中展现。 2. 实现步骤 实现全局弹窗的基本步骤如下: 在 App.vu…

    JavaScript 2023年6月11日
    00
  • JavaScript实现的select点菜功能示例

    下面是JavaScript实现的select点菜功能示例的完整攻略: 概述 在Web开发中,经常需要实现一些具有选择性质的功能,比如点菜、物品选择等。这时候我们可以使用select元素结合JavaScript来实现。 HTML结构 首先,我们需要在HTML中定义一个select元素,用于用户选择不同的选项。具体代码如下: <select id=&quo…

    JavaScript 2023年6月10日
    00
  • javascript json对象小技巧之键名作为变量用法分析

    本文将详细讲解”javascript json对象小技巧之键名作为变量用法”,该技巧可以提高代码的灵活性和可读性。 什么是json对象? JSON是一种轻量级的数据交换格式,JS中的JSON对象是Javascript原生支持的一种格式化的数据类型,它可以用来传递和存储简单的结构化数据。 JSON 常用于与服务端交换数据。 通常我们获取的json对象会有多个键…

    JavaScript 2023年5月27日
    00
  • js获取ajax返回值代码

    接下来我将详细讲解JS获取AJAX返回值的完整攻略。 准备工作 在使用JS获取AJAX返回值之前,需要先引入jQuery库,因为AJAX主要是使用jQuery库的ajax方法来实现的。在头部引入jQuery库的代码如下: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/j…

    JavaScript 2023年6月11日
    00
  • Javascript Worker子线程代码实例

    Javascript Worker子线程代码实例完整攻略 在前端开发中,为了避免一些复杂的计算或者耗时操作影响到UI的性能,我们可以使用Web Worker来创建一个新的线程来执行这些计算。 Worker的特点 Web Worker是一种实现了多线程的JavaScript。它可以使得浏览器在后台运行独立的脚本线程,将一些需要较长时间才能运行完成的任务交给这些…

    JavaScript 2023年5月28日
    00
  • JS的数组的扩展实例代码

    首先我们先来了解一下JS的数组的扩展。ES6引入了许多新的数组扩展方法,大大提高了我们处理数组时的效率。以下是几个常用的方法。 扩展操作符 使用扩展操作符,可以轻松的将一个数组展开成另一个数组: const arr1 = [1, 2, 3]; const arr2 = […arr1, 4, 5, 6]; console.log(arr2); // [1,…

    JavaScript 2023年5月27日
    00
  • 浅谈layui 绑定form submit提交表单的注意事项

    浅谈layui 绑定form submit提交表单的注意事项 简介 Layui是一个简洁易用、界面优美的前端UI框架,由于其易于上手,成为了很多前端工程师首选框架之一。在Layui中,表单提交是一个常见的操作,而绑定表单提交的事件则是经常使用到的操作。本文将会简单介绍在Layui中,绑定form submit提交表单的注意事项。 使用方式 通常情况下,在La…

    JavaScript 2023年6月10日
    00
  • JavaScript表单验证示例详解

    下面是“JavaScript表单验证示例详解”的完整攻略: 一、概述 在网页开发中,为了保证用户输入的信息的正确性和完整性,我们通常会对用户所填写的表单进行验证。JavaScript是一种常用的前端语言,它可以通过编写代码实现表单验证的功能。本文将对JavaScript表单验证进行详细讲解,让大家可以通过学习掌握该技术。 二、表单验证的准备工具 实现表单验证…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部