jQuery插件编程实践(Step2)

重构代码,增加ajax联动功能

 tag_list.js 

(function ($, window, document, undefined) {
  'use strict';
  var TagsPagination = function(element,options){
    this.$element = $(element); //将插件初始化时传入的html dom对象转jQuery对象,这里是div,拿到这个对象很重要,之后就可以基于它做很多事情
    
    //保存tag数据集属性
    this.state = {
      tags:[]
    };
    //定义对象基本设置参数对象,合并2个对象到第一个对象
    this.options = $.extend({}, $.fn.tagsPagination.defaults, options);//设计模式,参数处理
    
    var tagName = (typeof this.$element.prop === 'function') ?
      this.$element.prop('tagName') : this.$element.attr('tagName');
    
    //访问页面上的HTML DOM对象
    // var t = this.$element.first();
    this.$listContainer = this.$element;//赋值基本属性$listContainer,容器对象
    return this;//编程模式,不影响DOM显示
  };
  //基本设计模式,在大括号内定义,对TagsPagination原型链进行编程.注:有二种编程风格
  TagsPagination.prototype = {
    constructor: TagsPagination,
    //销毁jQuery对象
    destroy:function () {

    },
    show:function() {

    },
    //render相关基础function, 绚烂所有的tag标签,返回数组类型
    _buildListItems: function (tags) {
      var listItems = [];
      for(var i = 0; i < tags.length; i++){
        listItems.push(this._buildItem('page', tags[i]));
      }
      return listItems;
    },
    //render相关基础function  绚烂一个tag DOM标签,返回jQuery对象
    _buildItem:function(type,tag) {
      //绘制一个tag标签的dom节点
      var $itemContainer = $('<div></div>'), $itemContent = $('<span></span>');
      // var $itemDelIcon = $('<span></span>');

      $itemContainer.addClass('tag_container');
      $itemContent.addClass('label label-default').html(tag); 
      $itemContainer.append($itemContent);
      return $itemContainer;
    },
    //重构render方法核心方法,在对象构造器中被调用
    render: function (_tagsArray) {
      var _this = this;
      this.$listContainer.children().remove();
      var items = this._buildListItems(_tagsArray);
      $.each(items, function (key, item) {
        _this.$listContainer.append(item);
      });
    },
    //核心function 为tag注册click处理事件, 事件相关,可以在构造器中初始化执行
    setupEvents: function (){
      var _this = this;
      this.$listContainer.off('click').on('click','span.label',function(evt){
        var $this = $(this);
        console.info($this.html());
        //TODO
      })
    },
    //声明端:funciton 1.获取接口tag数据方法,1.数据来自当前对象state属性或ajax模块;2.jQuery.Deferred()编程模式;3.return 多来源值
    //获取数据后绚烂界面,使用jQuery.Deferred()编程模式
    getMyTags : function (){
      var _this = this,
        dfd = jQuery.Deferred();//形参i是wzClient.getMyTags()返回的array格式的结果集,wcClient 自定义插件,重新封装ajax请求,TODO
        return this.state.tags && this.state.tags.length > 0 ? dfd.resolve(this.state.tags) : jQuery.wzClient.getMyTags().then(function (i) {
          i = JSON.parse(i);
          _this.state.tags = i;
          dfd.resolve(_this.state.tags);
      }).fail(function (t) {
          dfd.reject(t)
      }),
          dfd.promise()
    },
    //初始化插件对象
    initTagList: function () {
      //使用jQuery Deferred 先后调用getMyTags和这里的render
      var _this = this;
      _this.getMyTags().then(function (tags) {
        _this.render(tags);
        _this.setupEvents();
      }).fail(
        function () {
          console.log("test_fail");
        }
      )
    } 
  }

  //入口之一:开始定义插件模块,页面引用从这里加载执行
  $.fn.tagsPagination = function(option){
    var tagsObj = new TagsPagination(this, option);//调用自己定义的jQuery插件对象,之后就是思考怎样定义TagsPagination对象了
    //TO MOCK
    tagsObj.state.tags.push("Default");
    tagsObj.state.tags.push("Primary");
    tagsObj.initTagList();
  };
  //将自定义JS对象赋值给插件,感觉仅仅起到标识作用
  //$.fn.tagsPagination.Constructor = TagsPagination;
})(window.jQuery, window, document);

jQuery插件编程实践(Step1)

jQuery插件编程实践(Step3)