美文网首页
javascript模块模式

javascript模块模式

作者: 成熟稳重的李先生 | 来源:发表于2019-12-06 00:01 被阅读0次

先来看一段代码

function foo() {
  var something = "cool";
  var another = [1,2,3];
  function doSomething() {
    console.log(something)
  }
  function doAnother() {
    console.log(another.join(","))
  }
}

foo函数包含了两个变量和两个函数,这里没有明显的闭包。这两个内部函数的词法作用域就是函数foo的内部作用域。接下来,我们把上边函数改进一下:

function foo() {
  var something = "cool";
  var another = [1,2,3];
  function doSomething() {
    console.log(something)
  }
  function doAnother() {
    console.log(another.join(","))
  }
return {doSomething, doAnother}
}
var fooInstance = foo();
fooInstance.doSomething();
fooInstance.doAnother();

这个模式在javascript中被称为模块,最常见的实现模块的方法通常被称为模块暴露。 这里foo只是一个函数,必须要调用它来创建一个模块实例,如果不执行外部函数,内部作用域和闭包都无法被创建。
因为foo函数每被调用一次就会创建一个模块实例。当只需要一个实例是,可以使用IIFE来实现单例

var foo = (function foo() {
  var something = "cool";
  var another = [1,2,3];
  function doSomething() {
    console.log(something)
  }
  function doAnother() {
    console.log(another.join(","))
  }
return {doSomething, doAnother}
})()

现代的模块机制

大多数模块依赖加载器本质上都是将这种模块定义封装进一个友好的API。核心概念大抵如此:

var myModules = (function Manager() {
  var modules = {};
  function define(name, deps, impl){
    for(var i=0;i<deps.length;i++){
      deps[i] = modules[deps[i]];
    }
    modules[name] = impl.apply(impl, deps);
  }
  function get(name){
    return modules[name]
  }
  return {define, get}
})()

myModules.define("bar", [], function(){
  function hello(a){
    return `Hello World Hello ${a}`
  }
  return {hello}
})

myModules.define("foo", ["bar"], function(bar) {
  let person = "小明";
  function awesome(){
    return bar.hello(person).toUpperCase()
  }
  return {awesome}
})
var bar = myModules.get("bar"); 
var foo = myModules.get("foo");
console.log(bar.hello("小明")); //Hello World Hello 小明
console.log(foo.awesome()); //HELLO WORLD HELLO 小明

这就是模块管理器的核心逻辑,“foo”和“bar”模块都是通过一个返回公共API的函数来定义的。“foo”甚至接收“bar”的实例作为依赖参数。
在ES6中,已经为模块增加了一级语法支持,但了解以前的模块管理器还是很有必要的,它使我们能够深入的理解闭包

模块有两个主要特征: ⑴. 为创建内部作用域而调用了一个包装函数;⑵. 包装函数的返回值必须至少包括一个对内部函数的引用,这样就会创建涵盖整个包装函数内部作用域的闭包。

相关文章

  • JavaScript 模块

    模块 【示例】: 【解释】: 这个模式在 JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为...

  • JavaScript模块模式

    一、什么模块模式 在JavaScript中没有包(Package)的概念,而面对日益庞大的JavaScript代码...

  • javascript模块模式

    当一个javascript文件很大的时候,会出现一些问题:1.里面定义了大量的变量,你不得不把变量的名字写的越来越...

  • JavaScript模块模式

    转自:http://www.oschina.net/translate/javascript-module-pat...

  • javascript模块模式

    先来看一段代码 foo函数包含了两个变量和两个函数,这里没有明显的闭包。这两个内部函数的词法作用域就是函数foo的...

  • Es6 模块 export、export default 、im

    说到模块这里我们要说下javascript严格模式。 ES6的模块自动采用严格模式,不管你有没有在模块头部加上"u...

  • H5-2.25Javascript模块模式

    从javascript对象创建说起说起Module(模块)模式,可能一些刚刚接触javascript的同学还是觉得...

  • 初涉 JavaScript 模块模式

    什么是模块模式   在JavaScript中没有包(Package)的概念,而面对日益庞大的JavaScript代...

  • 阮一峰 关于JavaScript的模块化笔记

    JavaScript实现模块化的方法: 宽放大模式: var module = (function(mod){ ...

  • Javascript 设计模式 -- Module(模块)模式

    1 . 公有方法改变私有变量 :Module 模式使用闭包封装"私有" 状态和组织.它提供了一中包装混合公有/私有...

网友评论

      本文标题:javascript模块模式

      本文链接:https://www.haomeiwen.com/subject/zjwjgctx.html