jQuery插件编程实践(Step4)

继续重构代码,实现TagList jQuery插件和twbsPagination 插件联动,分页功能基本实现

  common.js  参考 Setp3 给出变动部分

//封装请求模块,自运行模式
$(function () {
    //TODO
}),
function () {
    $.wzClient = {
        getTagesPager: function (_options) {//按分页获取tag
            var pageIndex = _options.pageIndex;
            var pageSize = _options.pageSize;
            return $.wzAjax({
                url: "/api/tag?page=" + pageIndex + '&size=' + pageSize,
                type: "get",
                dataType: "text",
                contentType: "application/json; charset=utf8"
            })
        }
    }
}();

 TagController.cs 基于System.Web.Http.ApiController 5.2.7.0实现

public HttpResponseMessage GetTagsPage(int page, int size)
{
    tgfc_article_tagBLL article_TagBLL = new tgfc_article_tagBLL();
    List<SqlDbParameter> parms = new List<SqlDbParameter>();
    int recordCount;
    List<tgfc_article_tagEntity> data = article_TagBLL.Gettgfc_article_tagPaged(parms, "Id DESC", size, page, out recordCount);
    IDictionary info = new Hashtable();
    info.Add("recordsTotal", recordCount);
    info.Add("recordsFiltered", recordCount);
    info.Add("data", data);
    HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(JsonConvert.SerializeObject(info), Encoding.GetEncoding("UTF-8"), "application/json") };
    return result;
}

 tag_list.js  tag插件核心文件

function,之后用子运行模式执行
(function ($, window, document, undefined) {
    'use strict';
    var TagsPagination = function (element, options) {
        this.$element = $(element); //将插件初始化时传入的html dom对象转jQuery对象,这里是div,拿到这个对象很重要,之后就可以基于它做很多事情
        //保存tag数据集属性
        this.state = {
            tags: [],
            total:0
        };
        //定义对象基本设置参数对象,合并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.name);
            $itemContainer.append($itemContent);
            return $itemContainer;
        },
        //重构render方法核心方法,在对象构造器中被调用
        render: function (_tagsArray) {
            var _this = this;
            this.$listContainer.children().remove();
            //数组内对象属性名转换 map方法实践
            var tagArray = _tagsArray.map(function (n) {
                return {
                    name: n.TagName,
                    value: n.Id
                }
            });
            var items = this._buildListItems(tagArray);
            $.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格式的结果集,定义jQuery.wzClient.getTagesPager 模块
            return this.state.tags && this.state.tags.length > 0 ? dfd.resolve(this.state.tags) : jQuery.wzClient.getTagesPager(_this.options).then(function (_data) {
                var i = JSON.parse(_data);//WebApi 返回结果重新封装了,包含集合属性data,总记录属性recordsTotal
                _this.state.tags = i.data;
                _this.state.total = i.recordsTotal;//TagController: ApiController 与接口对应
                _this.state.totalPages = parseInt((i.recordsTotal + _this.options.pageSize - 1) / _this.options.pageSize);//总页数
                dfd.resolve(i);
            }).fail(function (t) {
                dfd.reject(t)
            }),
                dfd.promise()
        },
        //初始化插件对象
        initTagList: function () {
            //使用jQuery Deferred 先后调用getMyTags和这里的render
            var _this = this,
                dfd = jQuery.Deferred();
            _this.getMyTags().then(function (tags) {
                _this.render(tags.data);
                _this.setupEvents();
                //从API获取tag数据后,绚烂分页
                var pageObj = $('#pagination').twbsPagination({
                    totalPages: _this.state.totalPages,//总页数
                    visiblePages: 10,
                    initiateStartPageClick: false,
                    onPageClick: function (event, page) {
                        //console.info(page + '(from options)');
                    }
                }).on('page', function (event, page) {//点击分页按钮会trigger page事件
                    _this.state.tags = [];//清除原tag结果集
                    _this.options.pageIndex = page - 1;
                    _this.getMyTags().then(function (tags) {
                        _this.render(tags.data);
                    });
                })
            }).fail(
                function () {
                    console.log("test_fail");
                }
            )
        }

    }

    //入口之一:开始定义插件模块,页面引用从这里加载执行
    $.fn.tagsPagination = function (option) {
        var $this = $(this);//设计模式
        var tagsObj = new TagsPagination(this, option);//调用自己定义的jQuery插件对象,之后就是思考怎样定义TagsPagination对象了
        //TO MOCK
        //tagsObj.state.tags.push("Default");
        //tagsObj.state.tags.push("Primary");
        tagsObj.initTagList();
        var data = $this.data('tag-list');//将TagPagination对象使用data()方法保存
        if (!data) $this.data('tag-list', (data = tagsObj));
        return $this;
    };

    //设置默认参数,属于插件定义的部分
    $.fn.tagsPagination.defaults = {
        pageIndex: 0,
        pageSize:5 //每页记录数

    };

    //将自定义JS对象赋值给插件,感觉仅仅起到标识作用
    //$.fn.tagsPagination.Constructor = TagsPagination;
})(window.jQuery, window, document);

  Index.cshtml  于ASP.NET.MVC5  给出改动部分

@section scripts {
    @Scripts.Render("~/Scripts/cnblog/common.js")
    @Scripts.Render("~/Scripts/cnblog/tag_list.js")
    @Scripts.Render("~/Scripts/plugins/twbs-pagination/1.4.2/jquery.twbsPagination.js")
    <script type="text/javascript">
        $(function () {
            //绚烂tagList 节点
            var tagsObj = $('#tagList').tagsPagination({
                startPage: window.pagObj ? window.pagObj.data('twbs-pagination').currentPage : 0
            });
        });
    </script>
}

 jQuery插件编程实践(Step3)