jQuery插件编程实践(Step1)

相应代码

1、bootstrap/3.3.7/bootstrap.css

2、site.css

3、bootstrap.min.js

4、jquery-3.3.1.js

5、tag_list.js

6、index.html

第一阶段，实现DOM节点在页面显示，效果图如下，这个2个tag是用本次自定义jQuery插件显示的。

代码风格参考之  jQuery pagination plugin v1.4.2

1、 index.html 

<div class="row">
  <div id="tagList"></div>
</div>
....
<script type="text/javascript">
  //运行插件
  $(function () {
    $('#tagList').tagsPagination({
      startPage: 1
    });
  })
</script>

2、 tag_list.js 

//参考jquery.twbsPagination 怎样设计一个插件。小括号,里面声明一个function,之后用子运行模式执行
(function ($, window, document, undefined) {
  'use strict';
  var TagsPagination = function(element,options){
    this.$element = $(element); //将插件初始化时传入的html dom对象转jQuery对象,这里是div,拿到这个对象很重要,之后就可以基于它做很多事情
    
    //定义对象基本设置参数对象,合并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();
    // console.info(t);
    this.$listContainer = this.$element;//赋值基本属性$listContainer,容器对象

    //this.show();
    //1.绚烂插件对象的DOM,并将绚烂的结果用append方法追加到由参数传入的dom对象上去
    this.render(this.getPages(this.options.startPage));//getPages在下面prototyp链中定义
    return this;//编程模式,不影响DOM显示
  };
  //基本设计模式,在大括号内定义,对TagsPagination原型链进行编程
  TagsPagination.prototype = {
    constructor: TagsPagination,
    //销毁jQuery对象
    destroy:function () {

    },
    show:function() {

    },
    //render相关基础function, 绚烂所有的tag标签,返回数组类型
    _buildListItems: function (pages) {
      var listItems = [];
      for(var i = 0; i < pages.tags.length; i++){
        listItems.push(this._buildItem('page', pages.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); 
      // $itemDelIcon.addClass('glyphicon glyphicon-remove-circle');
      // $itemDelIcon.attr('aria-hidden',"true");
      // $itemContainer.append($itemContent).append($itemDelIcon);
      $itemContainer.append($itemContent);
      return $itemContainer;
    },
    //render相关基础function 获取tag数据,怎样和ajax结合,返回结果传给render function
    getPages: function (currentPage) {
      //TODO Mock(模拟)
      var tags = [];
      tags.push("Default");
      tags.push("Primary");
      return {"currentPage": currentPage, "tags": tags};
    },
    //核心方法,在对象构造器中被调用
    render: function (pages) {
      var _this = this;
      this.$listContainer.children().remove();
      var items = this._buildListItems(pages);
      $.each(items, function (key, item) {
        _this.$listContainer.append(item);
      });

    }
  }

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

})(window.jQuery, window, document);

//TODO 事件处理以及和ajax联动   jQuery插件编程实践(Step2)