javascript - 如何编写一个通用的 javascript 插件

Question

我有以下 javascript 代码

$(function(){
    // loading source image
   $('#panel').mousemove(function(e) { // binding mouse move event
       // some code
   });
   $('#panel').mousedown(function(e) { // binding mousedown event
       // some code
   });
   $('#panel').mouseup(function(e) { // binding mouseup event
       // some code
   });
});

function getResults() {
    // some code
}

以这种方式工作

<button onclick="getResults()">Crop</button>
<canvas id="panel" width="100" height="200"></canvas>

---

我想重新编写这个 js-plugin 以使其更通用。
我想使用它的好方法是以下方式：

$('#panel').myLib({
    onSelect: getResults,
    onClick: getResults
});

任何想法我应该如何重写我的 js 代码来获得这个结果？谢谢

Answer 1

使用fn属性（实际上是 的别名prototype）添加插件：

$.fn.myLib = function(options){

  // bind events
  this.mousemove(function(e) { // binding mouse move event
    // some code
  });
  this.mousedown(function(e) { // binding mousedown event
    // some code
  });
  this.mouseup(function(e) { // binding mouseup event
    // some code
  });

  // add a button
  this.before($('<button>').text('Crop').click(options.onSelect));

  // return the object to make the function chainable
  return this;
};