如何编写一般的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;
};