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;
};

如何编写一般的javascript插件

1 个答案: