javascript - 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()