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 () {
  
  });