重構程式碼,增加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)