jQ的自定义插件

此文运用的是优雅的Markdown而书

项目中写js时，有很多时候有需要重复利用的东西，我们可以给它们写成一个插件的形式，这样阅读性和适用性都会大大提高。最近抽个时间，好一番的研究了下 Jcrop 的插件，发现它们的代码写的还算比较清晰，所以扒出来研究了一番、记录，以备后面呢利用。研究的不够透彻，还望多多指点 😉

以下是我自己根据源码，总结出来的一份模板，在使用时候根据模板嵌套自己的代码即可。上代码

• pageplugin.js

  (function ($) {

  $.PagePlugin = function (obj, opt) {

  var options = $.extend({}, $.PagePlugin.defaults),
  docOffset,
  _ua = navigator.userAgent.toLowerCase(),
  is_msie = /msie/.test(_ua),
  ie6mode = /msie [1-6]./.test(_ua);

  if (typeof (obj) !== 'object') {
  obj = $(obj)[0];
  }

  if (typeof (opt) !== 'object') {
  opt = {};
  }

  function setOptions(opt) {
  if (typeof (opt) !== 'object') opt = {};
  options = $.extend(options, opt);
  }

  //自定义方法，需要在下面api声明
  function setImage(src, callback) {

  if (typeof (callback) == 'function') {
  callback.call(api);
  }
  }

  setOptions(opt);
  var $orig = $(obj);

  //调用内部方法
  ScoreManager.getBo();
  ScoreManager.getCo();

  //scoreManager，相当于自定义类
  var ScoreManager = (function () {
  function getScore1(){
  alert("key1");
  }

  function getScore2(){
  alert("key2");
  }

  return {
  getBo: getScore1,
  getCo: getScore2
  };

  }());

  //定义api
  var api = {
  setImage: setImage,
  focus:ScoreManager.getBo,
  getBounds: function () {
  return [1, 2];
  }

  };

  $orig.data('PagePlugin', api);
  return api;
  }

  //设置默认属性
  $.PagePlugin.defaults = {
  marginT: 0,
  marginL: 0
  };
  }(jQuery));

• 如何使用？
  
  index.js

  var api = null;

  //这里"#page_plugins"我定义为传入控件的内容，可能为id，亦可能class。

  api = $.PagePlugin("#page_plugins", {
  marginT: 10,
  marginL: 20
  });

  api.getBounds();
  api.setImage("h1", function () {

  });