jQuery插件编程实践(Step3)

继续重构,增加ajax请求WebApi, 使用System.Web.Http.ApiController 5.2.7.0

 common.js  封装ajax请求模块

/*! 通用工具方法 */
//自定义ajax封装functoin
$.wzAjax = function (requestParamObj) {
    var i = requestParamObj.customErrorCb || function (n) {//i:自定义错误处理函数,
        $.alert(n)
    }
    , r, u, dfd;  //当传入参数定义success时,r:自定义成功处理函数
    return requestParamObj.success ? (r = requestParamObj.success, //逻辑1,
        u = function (n, t, u) {
            n.success != undefined && n.success === !1 && n.message ? i(n.message) : r(n, t, u)
        }
        ,
        requestParamObj.success = u,
        $.ajax(requestParamObj)) : (dfd = $.Deferred(), //没有定义成功回调函数时
            $.ajax(requestParamObj).then(function (n, r, u) {
                //then 当只有一个参数时,表示done回调函数,即成功返回时的回调
                if (n.success != undefined && n.success === !1 && n.message) {
                    i(n.message);
                }
                else {
                    return dfd.resolve(n, r, u)
                }
            }
                // ,function(n,r,u){  
                //     return dfd.resolve(n, r, u)//返回调用点:wz_popup@936 getMyTags
                // }
            ), //当有2个参数,程序执行到这
            dfd.promise()) //返回新的Deferred对象
};
//封装请求模块,自运行模式
$(function () {
    //TODO
}),
function () {
    $.wzClient = {
        getTagesPager: function () {//按分页获取tag
            var pageIndex = 0;
            var pageSize = 10;
            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 class TagController : ApiController
{
    // GET: api/Tag
    // 下面方法供开发模拟使用
    /**
    public HttpResponseMessage Get(int page = 0, int size = 30)
    {
        Tag[] tagList = {
            new Tag {
                tagName = "Vue",
                total = 9
            },
            new Tag {
                tagName = "UML",
                total = 7
            },
            new Tag {
                tagName = "前端 模块化",
                total = 6
            }
        };
        //string str = "{\"resultCode\":\"0000\",\"resultMessage\":\"success\"}";
        HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(JsonConvert.SerializeObject(tagList), Encoding.GetEncoding("UTF-8"), "application/json") };
        return result;
    }
    */

    /*数据库联动代码*/
    public IEnumerable<tgfc_article_tagEntity> GetTagsPage(int page, int size)
    {
        tgfc_article_tagBLL article_TagBLL = new tgfc_article_tagBLL();
        List<SqlDbParameter> parms = new List<SqlDbParameter>();
        int recordCount;
        return article_TagBLL.Gettgfc_article_tagPaged(parms, "Id DESC", size, page, out recordCount);
    }
}

 tag_list.js  tag插件核心文件

(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对象
    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>');
      $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方法实践, 与API 返回的对象属性相关联
      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().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);

  Index.cshtml  基于ASP.NET.MVC5

@{
    ViewBag.Title = "标题管理";
}
<div class="row"><div class="col-lg-12">
        <div class="ibox float-e-margins"><div id="tagList"></div>
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination"></ul>
            </nav>
        </div>
    </div>
</div>

@section Styles {

}
@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 () {
            window.pagObj = $('#pagination').twbsPagination({
                totalPages: 35,
                visiblePages: 10,
                initiateStartPageClick: true,
                onPageClick: function (event, page) {    //这里将此事件注册给一监听器, 相关代码如右 this.$element.first().on('page', this.options.onPageClick);
                    console.info(page + ' (from options)');
                }
            }).on('page', function (event, page) {     //twbsPagination是怎样定义的?  twbsPagination返回jQuery对象
                console.info(page + ' (from event listening)');
            });
            $('#tagList').tagsPagination({
                startPage: 1
            });
        });
    </script>
}

jQuery插件编程实践(Step2)

jQuery插件编程实践(Step4)