JS组件系列——封装本身的JS组件，你也能够

时间 2019-11-10

原文原文链接

前言：以前分享了那么多bootstrap组件的使用经验，这篇博主打算研究下JS组件的扩展和封装，咱们来感觉下JQuery为咱们提供$.Extend的神奇，看看咱们怎么自定义本身的组件，好比咱们想扩展一个$("#id").MyJsControl({})作咱们本身的组件，咱们该如何去作呢，别急，咱们慢慢来看看过程。html

1、扩展已经存在的组件

一、需求背景

不少时候，咱们使用jquery.ajax的方式向后台发送请求，型如jquery

　　　　　　$.ajax({
                type: "post",
                url: "/User/Edit",
                data: { data: JSON.stringify(postdata) },
                success: function (data, status) {
                    if (status == "success") {
                        toastr.success('提交数据成功');
                        $("#tb_aaa").bootstrapTable('refresh');
                    }
                },
                error: function (e) {
                },
                complete: function () {
                }

            });

这种代码太常见了，这个时候咱们有这样一个需求：在本身调用ajax请求的时候，咱们不想每次都写error:function(e){}这种代码，可是咱们又想让它每次都将ajax的错误信息输出到浏览器让用户可以看到。怎么办呢？ajax

二、实现原理

要想实现以上效果其实并不难，咱们能够将$.ajax({})封装一层，在封装的公共方法里面定义error对应的事件便可。确实，这样能达到咱们的要求，可是并不完美，缘由很简单：1）在jquery的基础上面再封装一层，效率不够高；2）须要改变调用者的习惯，每次调用ajax的时候须要按照咱们定义的方法的规则来写，而不能直接用原生的$.ajax({})这种写法，这是咱们不太想看到。数据库

既然如此，那咱们如何作到既不封装控件，又能达到以上要求呢？答案就是经过咱们的$.extend去扩展原生的jquery.ajax。bootstrap

其实实现起来也并不难，经过如下一段代码就能达到咱们的要求。api

(function ($) {
    //1.获得$.ajax的对象
    var _ajax = $.ajax;
    $.ajax = function (options) {
        //2.每次调用发送ajax请求的时候定义默认的error处理方法
        var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }
        //3.若是在调用的时候写了error的处理方法，就不用默认的
        if (options.error) {
            fn.error = options.error;
        }
        if (options.success) {
            fn.success = options.success;
        }
        if (options.beforeSend) {
            fn.beforeSend = options.beforeSend;
        }
        if (options.complete) {
            fn.complete = options.complete;
        }
        //4.扩展原生的$.ajax方法，返回最新的参数
        var _options = $.extend(options, {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                fn.success(data, textStatus);
            },
            beforeSend: function (XHR) {
                fn.beforeSend(XHR);
            },
            complete: function (XHR, TS) {
                fn.complete(XHR, TS);
            }
        });
        //5.将最新的参数传回ajax对象
        _ajax(_options);
    };
})(jQuery);

若是没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好，咱们首先来看看jquery API对$.extend()方法是做何解释的。浏览器

什么意思呢？咱们来看官方的两个例子就知道了app

栗子一：函数

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

结果：post

settings == { validate: true, limit: 5, name: "bar" }

栗子二：

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

结果：

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

以上的两个简单例子就说明extend()方法做用就是合并另个对象，有相同的则覆盖，没有相同的则添加。就是这么简单。

了解了$.extend()的做用，咱们就能大概看懂上面那个扩展jquery.ajax的实现了吧。主要的步骤分为：

1）定义默认的error处理方法。

var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }

2）判断用户在调用$.ajax({})的时候是否自定了error:function(){}，若是定义过，则使用用户定义的，反之则用默认的error处理方法。

3）使用$.extend()将error默认处理方法传入$.ajax()的参数中。咱们看options参数时包含$.ajax()方法里面全部的参数的，而后用默认的fn去扩展它便可。

经过以上三步就可以实现对$.ajax()方法里面error默认处理方法。这样扩展，对于咱们使用者来讲彻底感受不到变化，咱们仍然能够$.ajax({});这样去发送ajax请求，若是没有特殊状况，不用写error处理方法。

三、组件扩展的意义

使用组件扩展，可以帮助咱们在原有组件上面增长一些和咱们系统业务相关的处理需求，而在使用时，仍是和使用原生组件同样去调用，免去了在组件上面再封装一层的臃肿。

2、扩展本身组件

上面经过$.extend()方法扩展了$.ajax()的error事件处理方法。下面咱们来封装一个本身的组件试试，功能很简单，但比较有说明性。咱们就以select这个组件为例，不少状况下，咱们的select里面的option都是须要从数据库里面取数据的，因此通常的作法就是发送一个ajax请求，而后在success方法里面拼html。如今咱们就封装一个select远程取数据的方法。

一、代码实现以及使用示例

先上干货吧，将写好的整出来：

(function ($) {
     //1.定义jquery的扩展方法combobox
    $.fn.combobox = function (options, param) {
        if (typeof options == 'string') {
            return $.fn.combobox.methods[options](this, param);
        }
        //2.将调用时候传过来的参数和default参数合并
        options = $.extend({}, $.fn.combobox.defaults, options || {});
        //3.添加默认值
        var target = $(this);
        target.attr('valuefield', options.valueField);
        target.attr('textfield', options.textField);
        target.empty();
        var option = $('<option></option>');
        option.attr('value', '');
        option.text(options.placeholder);
        target.append(option);
        //4.判断用户传过来的参数列表里面是否包含数据data数据集，若是包含，不用发ajax从后台取，不然否送ajax从后台取数据
        if (options.data) {
            init(target, options.data);
        }
        else {
            //var param = {};
            options.onBeforeLoad.call(target, options.param);
            if (!options.url) return;
            $.getJSON(options.url, options.param, function (data) {
                init(target, data);
            });
        }
        function init(target, data) {
            $.each(data, function (i, item) {
                var option = $('<option></option>');
                option.attr('value', item[options.valueField]);
                option.text(item[options.textField]);
                target.append(option);
            });
            options.onLoadSuccess.call(target);
        }
        target.unbind("change");
        target.on("change", function (e) {
            if (options.onChange)
                return options.onChange(target.val());
        });
    }

    //5.若是传过来的是字符串，表明调用方法。
    $.fn.combobox.methods = {
        getValue: function (jq) {
            return jq.val();
        },
        setValue: function (jq, param) {
            jq.val(param);
        },
        load: function (jq, url) {
            $.getJSON(url, function (data) {
                jq.empty();
                var option = $('<option></option>');
                option.attr('value', '');
                option.text('请选择');
                jq.append(option);
                $.each(data, function (i, item) {
                    var option = $('<option></option>');
                    option.attr('value', item[jq.attr('valuefield')]);
                    option.text(item[jq.attr('textfield')]);
                    jq.append(option);
                });
            });
        }
    };

    //6.默认参数列表
    $.fn.combobox.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '请选择',
        onBeforeLoad: function (param) { },
        onLoadSuccess: function () { },
        onChange: function (value) { }
    };
})(jQuery);

先来看看咱们自定义组件如何使用：

用法一：经过URL远程取数据并初始化

首先定义一个空的select

<select id="sel_search_plant" class="form-control"></select>

而后初始化它

$(function(){
     $('#sel_search_plant').combobox({
            url: '/apiaction/Plant/Find',
            valueField: 'TM_PLANT_ID',
            textField: 'NAME_C'
      });
})

参数很简单，就不一一介绍了。很简单有木有~~

用法二：取值和设置

var strSelectedValue = $('#sel_search_plant').combobox("getValue");

$('#sel_search_plant').combobox("setValue", "aaa");

其实对于简单的select标签，博主以为这里的getValu和SetValue意义不大，由于直接经过$('#sel_search_plant').val()就能解决的事，何须要再封一层。这里仅仅是作演示，试想，若是是封装成相似select2或者multiselect这种组件，getValue和setValue的意义就有了，你以为呢？

二、代码详细讲解

上面的实现代码，若是您一眼就能看懂，证实您是常常封组件的大虾了，下面的就不用看了。若是看不懂，也不要紧，咱们将代码拆开详细看看里面是什么鬼。

（1）首先看看咱们最常看到的以下写法：

(function ($) {
      //....封装组件逻辑
})(jQuery);

初初看到这种用法，博主也是狂抓，这是什么鬼嘛，四不像啊。使用多了以后才知道原来这就是一个匿名函数的形式。将它拆开来看以下：

var fn = function($){
       //.....组件封装逻辑
};
fn(jQuery);

也就是说这种写法就表示先定义一个方法，而后当即调用这个方法，jQuery至关于实参。打开jquery.js的原文件能够看到，jQuery是这个文件里面的一个全局变量。

（2）定义本身的组件的代码：

$.fn.combobox = function (options, param) {
    
};

习惯这种写法的应该知道，这个就表示向jquery对象添加自定义方法，好比你想使用文章开始的 $("#id").MyJsControl({}) 这种用法，你就能够这样定义 $.fn.MyJsControl=function(options){} 。

（3） options = $.extend({}, $.fn.combobox.defaults, options || {}); 这一句，看过上文的朋友应该还记得extend这么一个方法吧，怎么样，又来了你。这句话其实就没什么好说的了，合并默认参数和用户传进来的参数。

（4）默认参数列表

 $.fn.combobox.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '请选择',
        onBeforeLoad: function (param) { },
        onLoadSuccess: function () { },
        onChange: function (value) { }
    };

若是用户没有传参，就用默认的参数列表。若是你够细心，你会发现博主以前分享的其余bootstrap组件的js文件里面都有这么一个default参数列表。咱们随便找两个：

bootstrap上传组件

bootstrap table组件

基本都是这么些用法。这样来看，是否也能够本身封一个js组件~~

3、总结

以上就是博主对js组件扩展以及封装用法的认识和总结。固然，都是些比较简单基础的封装，若是想要实现相似bootstrap table的组件，那还差得很远。不过万丈高楼平地起，只要打好基础，封一个本身的table组件也不是什么大问题。文中若是有理解不对的地方，欢迎指出，博主将不胜感激。若是本文可以对你有丝毫帮助，麻烦抬起你的小手点个推荐，博主必定继续努力，将更好的文章分享给你们。