Jquery 组件化设计（高级篇）

Jqueryjavascript设计

Jquery 组件化设计

JS组件化设计目的

开发大项目中，解决混乱无章，可读性非常差，作用域的污染等等问题，JS组件化设计实现可读性高，实现可插拔，代码结构清晰，命名空间不同，且作用域与作用域之间隔离，避免入侵。

table组件例子实现

  • 导入jquery
  • 创建table.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function($){
    $.fn.test = function(){};
    $.fn.test.table = function(opt) {
        var defaults = {   //默认参数
            tableId:"#tableId",
        };
        var options = $.extend(defaults,opt);   //合并参数
        this._add=function(){
            controller._add();
        };
        this._delete=function(element){
            controller._delete(element);
        };
        this._update=function(){
        };
        var controller = {
            _add:function(){
                var newTr='<tr><td>小明</td><td>28</td><td><button class="del">删除</button></td></tr>';
               $(options.tableId).append(newTr);
            },
            _delete:function(element){
                $(element).parents("tr").remove();
            },
            _update:function(){
            }
        };
        return this;
    }
})(jQuery);
  • 创建test.html页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Jquery javascript 组件化设计（高级篇）</title>
    <script src="jquery-1.11.0.min.js"></script>
    <script src="table.js"></script>
    <style type="text/css">
        table{  width: 500px;  text-align: center;  }
    </style>
    <script type="text/javascript">
        $(function() {
            //初始化
            table = $("#tableId").test.table({tableId: "#tableId"});
            /**
             * 删除
             */
            $("table").on("click",".del",function(){
               table._delete(this);
            })
        });
        /**
         * 增加
         */
        function add(){
            table._add()
        }
    </script>
</head>
<body>
    <button onclick="add()">添加</button>
    <table id="tableId">
        <tr>
            <th onclick="add()">姓名</th>
            <th>年龄</th>
        </tr>
        <tr><td>小明</td><td>28</td><td><button class="del">删除</button></td></tr>
    </table>
</body>
</html>
  • 浏览器打开test.html，有没有发现代码结构逻辑非常清晰？

table组件例子源码

源码地址：https://github.com/Huangdongrong/soft-and-jar-repository/tree/master/test

本文标题:Jquery 组件化设计（高级篇）

文章作者:Donie.Huang

发布时间:2016-05-16, 18:45:37

最后更新:2016-05-27, 12:34:26

原始链接:https://github.com/2016/05/16/Jquery-and-js-design/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. Jquery 组件化设计
    1. 1.1. JS组件化设计目的
    2. 1.2. table组件例子实现
  2. 2. table组件例子源码
,