Javascript模块模式：如何将方法/插件注入/创建/扩展到我们自己的库？

Question

我是javascript的新手。对不起，如果我的问题有问题。

如何将方法或插件注入/创建/扩展到我们自己的库中？ 这是“yourlib.js”

var Yourlib = (function() {
    // privt. var
    var selectedEl = {}

    // some privt. funct
    function something() {

    }

    return {
        getById : function() {

        },
        setColor : function() {

        }
    }
}());

以下是您的“plugin.js”

/*
How to create the plugin pattern?
Example: I want to create/inject a method/plugin named "setHeight" .
So, i can call it later, like this: Yourlib.getById('an-id').setHeight(value);
How is the pattern?
*/

Answer 1

您需要在函数中返回this以使其可链接。下面的示例代码显示了如何扩展模块以允许链式调用并在需要时添加新函数。

var Yourlib = (function() {

  // privt. var
  var selectedEl = {}

  // some privt. funct
  function something() {


  }

  return {

    setColor: function(newcolor) {

      var obj = document.getElementById('colorbox1');
      obj.style.background = newcolor;

    }
  }

}());

// call the original module sub-function
Yourlib.setColor('blue');

/**
 * Extend the module again to allow chaining.
 * Chainable functions return "this"
 */
var Yourlib = (function(object) {

  // private variable to store id of a box
  var box = '';

  object.getById = function(id) {

    box = document.getElementById(id);
    return this;
  };

  object.setColor = function(newcolor) {

    box.style.background = newcolor;
    return this;

  };

  object.setAnotherColor = function(newcolor) {

    var box = document.getElementById('colorbox4');
    box.style.background = newcolor;

  };

  return object; // return the extended object

}(Yourlib)); // original module passed in as an object to be extended


// example of a chained function call 
Yourlib.getById('colorbox2').setColor('purple');

// same functions without chained call
Yourlib.getById('colorbox3')
Yourlib.setColor('green');

// new function within extended module
Yourlib.setAnotherColor('orange');

.colorbox {
  height: 40px;
  width: 40px;
  background: #000;
  border: #000 1px solid;
  margin-bottom: 5px;
}

<strong>module sub-function</strong>
<br />Yourlib.setColor('blue');
<br />
<div id="colorbox1" class="colorbox"></div>

<strong>chained function calls</strong>
<br />Yourlib.getById('colorbox2').setColor('purple');
<br />
<div id="colorbox2" class="colorbox"></div>

<strong>functions called without chaining</strong> 
<br />Yourlib.getById('colorbox3')
<br />Yourlib.setColor('green');
<br />
<div id="colorbox3" class="colorbox"></div>

<strong>new function added to extended module</strong>
<br />Yourlib.setAnotherColor('orange');
<br />
<div id="colorbox4" class="colorbox"></div>

如需进一步参考，您还可以阅读JavaScript Module Pattern in Depth。

Answer 2

请注意，您的函数返回一个具有两个方法的对象。您可以直接向其添加属性：

Yourlib.setHeight = function (val) {
    // logic for setting the height
};

Answer 3

var Module = (function(){
 var set = {}
 set.show = function(){
   alert('Module method')
 }
 return set
})()

所以现在我将扩展当前的模块。

var Ext = (function(Module){

 Module.get = function(){
   Module.show()
 }

 return Module

})(Module)

现在我可以这样做：

Module.get()
Ext.get()