编写JS原生插件

  第一次写js原生插件，说实话，挺难！！！

  为甚么要自己写呢，我们老大说要理解原理，为什么可以使用别人的插件。所以最后在老大的帮助以及多方面的查资料下，终于完成了。

  回顾了一下，这个不怎么完美的插件中实现的有--------

  创建表格
  载入数据
  获取选择的数据
  全选操作
  单击和双击事件
  添加复选框

  这里表格的样式都是datagrid的，直接来说这个插件就是仿照datagrid插件来写，datagrid的官网  http://www.jeasyui.com/documentation/datagrid.php

  进入正题，代码来啦！！

/**
 * 自定义datagrid原生插件
 */
(function($) {

    $.fn.Mmango = function(options, param) {
        /**
         * 初始化创建表格
         */
        /*typeof(表达式）/typeof 变量名：判断对象类型，对于新创建的对象返回object*/
        
        /*如果对象类型是object，则新建表格*/
        if (typeof options == "object") {
            return createTable($(this), options);
        } else if (typeof options == "string") {
            /**
             * string时，调用对象方法
             */
            return methods[options]($(this), param)
        }

    }
	
	/*定义对象方法*/
    let methods = {

		//载入数据，主要是根据需要把数据库中的数据传输到页面中
        loadData: function($target, data) {
            return loadData($target, data)
        },
		
		//在单行操作中，获取选择的单行数据
        getSelected: function($target) {
            return $target.find("tbody tr.trSelect").data("data");
        },
        
		//在多行操作时，获取所有选择的行数，可用于批量操作
        getSelects: function($target) {
            let array = [];
            for (let i = 0; i < $target.find("tbody tr.trSelect").length; i++) {
                array.push($target.find("tbody tr.trSelect").eq(i).data("data"));
            }
            return array;
        },

		//全选方法
        selectAll: function() {
            /*如果thead中的input为checked状态全选*/
            $('thead input').click(function(event) {
                if (this.checked) {
                    $(this).closest('table').find('tbody tr a.jqTransformCheckbox').addClass('jqTransformChecked');
                } else {
                    $(this).closest('table').find('tbody tr a.jqTransformCheckbox').removeClass('jqTransformChecked');
                }
            });
        }
    };

    /**
     * 创建表格
     * @param $target div
     * @param options 参数
     * @returns {*}
     */
    function createTable($target, options) {
        //添加默认样式
        $target.addClass("selectDiv");

        /*使用$()表示构造一个JQ对象，简化*/
        let $table = $('<table class="attachTable"></table>');
        let $header = createTableHeader(options);
        let $body = createBody(options);
        /*A.append(B):在A结尾插入B；$(A).append(B)：把A追加到B中。*/
        $table.append($header).append($body).appendTo($target);


        //绑定原始配置
        /*data()方法向被选元素附加数据，或者从被选元素获取数据。*/
        $target.data("options", options);

        //绑定事件
        /*绑定事件优势：可以给动态添加的元素通过绑定事件来实现并且当监听多个元素时开销更小*/

        return $target;
    }

    /**
     * 创建表头
     * @param options
     * @returns {*|jQuery|HTMLElement}
     */
    function createTableHeader(options) {

        let $header = $('<thead></thead>');
        let $tr = $('<tr></tr>');
        let columns = options.columns;
        if (!columns || columns.length <= 0) {
            return $header;
        }


        //添加复选框
        let checkbox = options.checkbox;
        if (checkbox) {
            $tr.prepend('<th class="check-all"><div class="formStyle" ><input type="checkbox" name="chbox"></div></th>');
        }
        //添加动态列
        for (let i = 0, len = columns.length; i < len; i++) {
            let col = columns[i];
            let width = col.width ? ("width='" + col.width + "'") : "width='20%'";
            let nowrap = col.nowrap ? "nowrap='nowrap'" : "";
            //TODO 纯数字加上px
            let title = col.title;
            let $td = $(' <th class="col"' + width + ' ' + nowrap + '">' + title + '</th>');

            //绑定数据
            $td.data("field", col.field);
            $tr.append($td);
        }
        $header.append($tr);

        /*绑定事件：点击全选按钮则改行的input为checked状态*/
        $header.find('input').toggle(function() {
            $(this).attr('checked', 'checked');
            $(this).closest('table').find('tbody tr').addClass('trSelect');
        }, function() {
            $(this).removeAttr('checked');
            $(this).closest('table').find('tbody tr').removeClass('trSelect');
        });


        return $header;
    }

    /**
     * 创建body
     * @param options
     * @returns {*|jQuery|HTMLElement}
     */
    function createBody(options) {

        return $('<tbody></tbody>');
    }

    /**
     * 载入数据
     * @param $target
     * @param dataList
     */
    function loadData($target, dataList) {

        if (!dataList || dataList.length <= 0) {
            return;
        }
        //获取数据
        let options = $target.data("options");

        //获取绑定的方法
        let onclickFn = options.singleClick;
        let ondblclickFn = options.doubleClick;

        let $body = $target.find("table tbody");
        for (let i = 0, len = dataList.length; i < len; i++) {

            let data = dataList[i];

            let $tr = $('<tr></tr>');
            //绑定原始数据
            $tr.data("data", data);
            //绑定行数
            $tr.data("index", i + 1);
            //添加复选框
            if (options.checkbox) {
                $tr.append('<td class="check-item""><div class="formStyle" ><input type="checkbox" name="chbox"></div></td>');
            }

            let $headers = $target.find("table thead tr th.col");
            for (let j = 0, jLen = $headers.length; j < jLen; j++) {
                let fieldName = $($headers[j]).data("field");
                let fieldValue = data[fieldName];
                let $td = '<td class="col-value">' + fieldValue + '</td>';
                $tr.append($td);
            }
            $tr.appendTo($body);
            //绑定方法
            if (onclickFn && $.isFunction(onclickFn)) {
                //在选择元素上绑定一个或多个事件的事件处理函数
                $tr.on("click", function(event) {
                    //event.stopPropagation()阻止事件冒泡到父元素
                    event.stopPropagation();
                    onclickFn(data, i + 1, event);
                });
            }
            if (ondblclickFn && $.isFunction(ondblclickFn)) {
                $tr.on("dblclick", function(event) {
                    event.stopPropagation();
                    ondblclickFn(data, i + 1, event);
                });
            }
        }
        //绑定事件,点击添加checked属性,并且再tbody中只要有一个tr为未选择状态，全选按钮都为未选状态。
        $body.find('input').toggle(function() {
            $(this).attr('checked', 'checked');
            $(this).parent().parent().parent().parent().addClass('trSelect');
        }, function() {
            $(this).removeAttr('checked');
            $(this).parent().parent().parent().parent().removeClass('trSelect');
            $(this).closest('table').find('thead a.jqTransformCheckbox').removeClass('jqTransformChecked');
        });
    }

    //单击事件：即单击改行时触发
    function onclickEvent($target, fn) {
        $target.find("table tbody tr").on("click", function(event) {

            let data = $(this).data("data");
            let index = $(this).data("index");
            if (fn && $.isFunction(fn)) {
                fn(event, data, index);
            } else {
                console.warn("回调方法未定义");
            }
        });
    }

	//双击事件
    function ondblclickEvent($target, fn) {
        $target.find("table tbody tr").on("dblclick", function(event) {
            let data = $(this).data("data");
            let index = $(this).data("index");
            if (fn && $.isFunction(fn)) {
                fn(event, data, index);
            } else {
                console.warn("回调方法未定义");
            }
        });
    }
})(jQuery);

  作为一名小白，在很多很多查资料的时候，发现看不懂，所以这里也贴上如何使用自己编写js插件的例子！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <-- 引入样式，可以去下载也可以自己写一个。-->
    <link rel="stylesheet" type="text/css" href="css/datagrid.css"/>
    <script  type="text/javascript" src="js/jquery-1.7.1.js" ></script>
    <script src="js/jquery.jqtransform.js"></script>
    <-- 引入自己写的插件 -->
    <script src="js/own.js"></script>
</head>
<body>
<button id="click" class="blueBtn" style="margin-top:20px">获取选中的值</button>
<-- 记住这个div，装表格的。  -->
<div id="data-grid"></div>
</body>
<script>
    $(function () {
        var time = null;
		/*.Mmango() 回去看一下js插件，我函数的名字是这个*/
        $("#data-grid").Mmango(
            {
             checkbox: true,
            	
            	/* 单击双击事件，这里做了避免单击双击事件处理。*/
               singleClick: function(data, index, event) {
                    clearTimeout(time);
                    time = setTimeout(function(){
                        alert(data.sex + index);
                    },200)
                    
                },
                doubleClick: function(data, index, event) {
                    clearTimeout(time);
                    alert(data.name + index);
                },
                
                /*定义列*/
                columns: [
                    {
                        field: 'name',
                        title: '姓名',
                        width: '20%'
                    }, {
                        field: 'job',
                        title: '职位',
                        width: '20%'
                    }]
            }
        );

        //定义初始化数据
        let dataList = [

            {
                "name": "AA",
                "job": "开发"
            },
            {
                "name": "BB",
                "job": "开发"
            }
        ];

		/*初始化列表，就是把刚定义的数据在页面中显示*/
        $("#data-grid").Mmango("loadData", dataList);

        
        /*获取选中的值*/
        $("#click").click(function () {
           var dat = new Array();
           let data = $("#data-grid").Mmango("getSelects");
           for(var i=0;i<data.length;i++){
                dat.push("姓名:"+data[i].name+",职位:"+data[i].job+"\n")
           }
          alert(dat);
        });
        
		/*点击全选按钮，实现全选*/
         $("#data-grid").Mmango("selectAll");
            
    });
</script>
</html>

  最后贴上，为了写这个插件看过的一些资料，也为以后想看的时候可以看一下。

  •JQuery datagrid详解：
  https://www.cnblogs.com/goloving/p/7560171.html

  •easyui datagrid checkbox的相关属性：
  https://www.cnblogs.com/mr-wuxiansheng/p/6685192.html

  •EasyUI-datagrid中load,reload,loadData方法的区别：
  https://www.cnblogs.com/lhlong/p/7921273.html

  •JQuery编写插件：
  https://www.jianshu.com/p/e177bcc23132

  •JQuery编写插件的简单规范流程：
  https://www.cnblogs.com/dkplus/p/8940858.html

  •JS组件系列：
  https://www.cnblogs.com/landeanfen/p/5821192.html

  •自写JSP：
  https://www.cnblogs.com/GaoAnLee/p/9086582.html