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模块模式.

Answer 2

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

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