淺談:javascript的面向對象編程之具體實現

時間 2019-12-06

標籤淺談 javascript 面向對象編程具體實現欄目 JavaScript 简体版

原文原文鏈接

下面的javascript代碼都是須要使用jQuery插件來作的。但願你們能夠搭建好工做環境javascript

首先咱們來作一個練習：在一個刪除的超連接中添加一個提示信息，提示是否確認刪除。php

通常狀況下咱們都會這麼作css

<html>
  <head>
    <title>delete.html</title>
  </head>
  <script type="text/javascript">
      function deleteTest(){
          window.confirm("是否確認刪除");
      }
  </script>
  <body>
    This is my HTML page. <br>
  </body>
  <!-- 給a的超連接添加一個點擊事件 -->
  <a onclick="deleteTest()" href="">刪除</a>
</html>

可是若是如今整個項目中，有100個刪除的超連接，若是按照上面的方法，豈不是要寫100個onclick=deleteTest()，會累死人的html

能不能寫一個方法delete方法，而後每次在頁面上調用便可。答案是能夠的java

具體的代碼和分析以下node

delete.html的代碼jquery

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>delete2.html</title>
 5     
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9     
10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11 
12   </head>
13   <!-- 導入jQuery和自定義插件，jQuery的插件你們本身去下載 -->
14   <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
15   <script type="text/javascript" src="../js/js_delete.js"></script>
16   <body>
17   <!-- 能夠測試一些，每一個刪除的超連接都有了提示方法 -->
18     <a href="">刪除</a><br/>
19     <a href="">刪除</a><br/>
20     <a href="">刪除</a><br/>
21     <a href="">刪除</a><br/>
22     
23   </body>
24 </html>

js_delete.js的代碼以下c++

 1 /**
 2  * 既然是但願全部的頁面均可以使用刪除提示，那咱們乾脆作一個jQuery的插件
 3  * 在引入jQuery的同時，引入咱們本身的js文件，這樣頁面就可使用了
 4  * 這裏咱們使用的全局方法來定義
 5  * 
 6  * 說明：
 7  * 一、在jQuery插件中，使用的是帶參數的json格式的參數，這樣能夠下降耦合性，
 8  *         固然你也能夠直接寫$(this).text()=="刪除" 可是這樣耦合性較高
 9  * 二、this
10  *         這裏的this指的是a標籤對象
11  * 三、爲何先要給a標籤unbind("click")(解除click綁定)，而後在綁定點擊事件
12  *         緣由：首先咱們不肯定a標籤是否有其餘綁定事件，由於多個事件的疊加或形成錯誤
13  *             這樣寫的會避免一些沒必要要的麻煩。
14  *         $(this).bind("click",function(){
15                     點擊時候發生的事件均可以子啊這個函數裏面寫
16                 });
17  */
18 (function(jQuery){//形參是jQury
19     $.deleteTest = function(json){//自定義jquery的插件,參數是使用帶有json的參數
20         $("a").each(function(){//獲取指定頁面面上全部的超連接標籤(a)
21             if($(this).text()==json.condision){//判斷的條件
22                 $(this).unbind("click");//首先給刪除超連接去除點擊時間
23                 $(this).bind("click",function(){//給刪除超連接添加點擊時間
24                     return window.confirm(json.message);//顯示判斷框
25                 });
26             }
27         });
28     };
29     
30 })(jQuery);//實參也是jQuery
31 
32 $().ready(function(){//在頁面加載完成之後馬上執行
33     $.deleteTest({//傳遞json格式的參數
34         condision:"刪除",//傳入執行的條件
35         message:"您肯定要刪除嗎?"//傳入提示信息
36     });
37     //只要把這個js導入相應的頁面，那麼就能夠對任何刪除的超連接進行提示
38 });

經過上面的例子咱們能夠發現，咱們能夠經過製做jQuery插件的方法，來對頁面上的元素進行操做，而不須要在頁面上寫onclick=""ajax

真正的javascript架構，在頁面上是不多能夠看到js代碼的。js代碼通常都封裝在js文件裏面。數據庫

下面再來作一個練習：

寫一個全選的方法，讓他在這個項目中，對全部引入該js的頁面都有效

詳細的代碼和分析以下：

selectAll.html代碼以下

 1 <html>
 2   <head>
 3     <title>selectAll.html</title>
 4   <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 5   <!-- 只要導入這個js文件，全部的全選對應名字，就能夠擁有全選功能了
 6    -->
 7   <script type="text/javascript" src="../js/js_selectAll.js"></script>
 8   <body>
 9       <input name="selectAll" type="checkbox"/>全選<br/>
10       
11     <input name="demoCheckboxs" type="checkbox"/>java<br/>
12     <input name="demoCheckboxs" type="checkbox"/>php<br/>
13     <input name="demoCheckboxs" type="checkbox"/>c++<br/>
14     <input name="demoCheckboxs" type="checkbox"/>.net<br/>
15     <input name="demoCheckboxs" type="checkbox"/>c<br/>
16   </body>
17 </html>

js_selectAll.js代碼以下

 1 /*
 2  * 首先咱們分析一下：全選是針對某個對象的，在某個對象有個全選按鈕，點擊按鈕
 3  * 把下面的複選框都設置成爲被選中，全部製做jQuery插件應該是一個原型方法
 4  */
 5 
 6 (function(jQuery){
 7     $.fn.selectAll=function(checkboxName){
 8         //誰調用此函數，this表明誰
 9         if($(this).attr("checked")){//判斷全選按鈕是否是被選中，
10             //若是被選中,把名稱爲checkboxName的複選框所有選中
11             $("input[name='"+checkboxName+"']").attr("checked",true);
12         }else{
13             //若是沒有被選中，把名稱爲checkboxName的複選框所有不選中
14             $("input[name='"+checkboxName+"']").attr("checked",false);
15         }
16     };
17 })(jQuery);
18 
19 
20 $().ready(function(){
21     //給全選按鈕添加點擊事件
22     $("input[name='selectAll']").unbind("click");
23     $("input[name='selectAll']").bind("click",function(){
24         $(this).selectAll("demoCheckboxs");//傳入須要被全選的複選框的name屬性
25     });
26 });

經過上面兩個練習，咱們能夠得出，在寫js代碼的時候，必定要考慮重用性。不能看到一個功能，就直接onclick什麼的，那樣代碼的複用率極低，也不利於後期的維護

下面進入咱們js的面向對象的編程介紹

咱們下面的案例使用了jQuery的一個插件zTree ,若是但願看懂所有代碼，須要學習zTree的知識，若是僅僅須要看懂思想，只有看懂架構便可

需求：有一個權限樹，管理員，在爲用戶添加權限，點擊設置權限，下面顯示隱藏div和用戶名。異步查詢數據庫裏面的用戶權限，若是擁有所有權限，把全選按鈕選中

點擊權限按鈕能夠全選全部權限。點擊保存，向服務器發送請求，保存數據到數據庫。還能夠設置用戶的權限，添加或者修改。全程使用無刷新的方式進行操做！(使用ajax異步的方式發送請求)

頁面示例：

共總有以下權限：

點擊設置權限按鈕

顯示在下面隱藏的div、用戶名，權限樹等信息

想想這個應該怎麼去作：

若是使用之前js函數的寫法，感受就是一個很累並且工廠量很大的事情，咱們可使用面向對象的方法來思考問題

咱們把點擊設置權限之後的操做分爲：初始化(包含初始化事件、初始化數據)，對象的操做行爲、數據保存等

首先咱們給出頁面jsp代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/jsp/comm/common.jsp"%>
<script language="javascript" src="${pageContext.request.contextPath}/js/user-list.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/js/jquery-checkbox.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/js/jquery-ztree-2.5.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/js/privilege_practice2.js"></script>
<link rel="stylesheet" type="text/css" href="zTreeStyle/zTreeStyle.css">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>用戶列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="Title_bar">
    <div id="Title_bar_Head"> 
        <div id="Title_Head"></div>
        <div id="Title"><!--頁面標題-->
            <img border="0" width="13" height="13" src="${pageContext.request.contextPath }/css/images/title_arrow.gif"/> 用戶管理
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<div id="MainArea">
    <table cellspacing="0" cellpadding="0" class="TableStyle">
       
        <!-- 表頭-->
        <thead>
            <tr align=center valign=middle id=TableTitle>
                <td width="100">用戶名</td>
                <td width="100">所屬部門</td>
                <td>職位</td>
                <td>相關操做</td>
            </tr>
        </thead>
        
        <!--顯示數據列表-->
        <tbody id="TableData" class="dataContainer" datakey="userList">
        <s:iterator>
            <tr class="TableDetail1 template">
                <td><s:property value="username"/></td>
                <s:hidden name="uid"></s:hidden>
                <td><s:property value="department.dname"/></td>
                <td>
                    <s:iterator value="posts">
                        <s:property value="pname"/>
                    </s:iterator>
                 </td>
                <td><a onClick="return delConfirm()" href="list.html">刪除</a>
                    <a href="saveUI.html">修改</a>
                    <s:a>設置權限</s:a>
                </td>
            </tr>
       </s:iterator>
        </tbody>
    </table>
    
     <div id="TableTail">
        <div id="TableTail_inside">
            <a href="userAction_addUI.action"><img src="${pageContext.request.contextPath }/css/images/createNew.png" /></a>
        </div>
    </div>
    
    <div class="ItemBlock_Title1" id="userTitle" style="display: none;"><!-- 信息說明 --><div class="ItemBlock_Title1">
            <img border="0" width="4" height="7" src="${pageContext.request.contextPath }/css/blue/images/item_point.gif"/>
            <div id="userImage"></div>
        </div>
    <div class="ItemBlock_Title1" id="privilegeTitle" style="display: none;"><div class="ItemBlock_Title1">
            <img border="0" width="4" height="7" src="${pageContext.request.contextPath }/css/blue/images/item_point.gif" />選擇權限</div> 
        </div>
        
        <!-- 表單內容顯示 -->
        <div class="ItemBlockBorder" style="display: none;" id="privilegeContent">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
                    <!--表頭-->
                    <thead>
                        <tr align="LEFT" valign="MIDDLE" id="TableTitle">
                            <td width="300px" style="padding-left: 7px;">
                                <!-- 若是把全選元素的id指定爲selectAll，而且有函數selectAll()，就會有錯。由於有一種用法：能夠直接用id引用元素 -->
                                <input type="checkbox" id="allchecked" />
                                <label for="cbSelectAll">全選</label>
                            </td>
                        </tr>
                    </thead>
                   
                       <!--顯示數據列表-->
                    <tbody id="TableData">
                        <tr class="TableDetail1">
                            <!-- 顯示權限樹 -->
                            <td>
                                <ul id='privilegeTree' class="tree">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 表單操做 -->
        <div id="InputDetailBar">
            <image id="savePrivilege" src="${pageContext.request.contextPath }/css/images/save.png"/>
        </div>
</div>

</body>
</html>

給出js的框架代碼(只有框架，沒有具體實現)：下面代碼就是使用js面向對象編程，把全部的定義都放在privilege對象中

 最後只須要調用privilege.init.initEvent();便可完成對內容的實現

 1 var privilege ={
 2         /**
 3          * 初始化的東西所有在init裏面完成
 4          */
 5         init:{
 6             
 7             /**
 8              * 初始化事件，全部的初始化事件都在initEvent完成
 9              */
10             initEvent:function(){
11                 
12             },
13 
14             /**
15              * 初始化數據，對數據的初始化操做所有在initData完成
16              */
17             initData:function(){
18                 
19             },
20             
21             
22         },
23         
24         
25         /**
26          * 全部功能的操做都是在這裏面完成
27          */
28         pFunction:{
29             
30             /**
31              * 全部和權限樹有關的操做都在privilegeTree裏面完成
32              */
33             privilegeTree:{
34                 
35                 /**
36                  * loadPrivilegeTree：完成對權限樹的加載
37                  */
38                 loadPrivilegeTree:function(){
39                     
40                 },
41                 
42                 
43                 /**
44                  * controlCheckBox：完成對樹規則控制
45                  */
46                 controlCheckBox:function(){
47                     
48                 },
49                 
50                 
51                 /**
52                  * checkAll：完成對樹的全選操做
53                  */
54                 checkAll:function(){
55                     
56                 },
57                 
58                 /**
59                  * savePrivilege：完成對樹權限的保存
60                  */
61                 savePrivilege:function(){
62                     
63                 }
64             },
65             
66             /**
67              * userOption：完成全部的用戶功能的實現
68              */
69             userOption:{
70                 /**
71                  * 顯示用戶名的操做
72                  */
73                 showUsername:function(){
74                     
75                 }
76             },
77             
78             /**
79              * divOption：對div的全部操做
80              */
81             divOption:{
82                 /**
83                  * 顯示div的全部操做
84                  */
85                 showDiv:function(){
86                     
87                 }
88             }
89             
90         },
91         
92         data:{
93             
94         }    
95 };

$().ready(function(){
    privilege.init.initEvent();
});

對上面代碼的部分實現：

  1 var privilege ={
  2         /**
  3          * 初始化的東西所有在init裏面完成
  4          */
  5         init:{
  6             
  7             /**
  8              * 初始化事件，全部的初始化事件都在initEvent完成
  9              */
 10             initEvent:function(){
 11                 //點擊設置權限按鈕的事件
 12                 $("a").each(function(){
 13                     if($(this).text()=="設置權限"){
 14                         $(this).unbind("click");
 15                         $(this).bind("click",function(){
 16                             /**
 17                              * 在點擊設置權限的時候，首先要初始化數據
 18                              * 一、顯示div
 19                              * 二、顯示用戶名
 20                              * 三、加載權限樹
 21                              * 
 22                              * 說明：使用nitData.call(param)，能夠把
 23                              * initData的這個函數的調用者設置爲param
 24                              * 
 25                              * 在這裏進行調用，而後在在每一個具體的方法裏面進行實現，
 26                              * 作到了面向對象的變成，這是javascript面向對象的核心
 27                              */
 28                             
 29                             privilege.init.initData.call(this);
 30                             privilege.pFunction.divOption.showDiv();
 31                             privilege.pFunction.userOption.showUsername();
 32                             privilege.pFunction.privilegeTree.loadPrivilegeTree();
 33                             return false;
 34                         });
 35                     }
 36                 });
 37 
 38 
 39                 /**
 40                  * 全選按鈕事件
 41                  */
 42                 $("#allchecked").unbind("click");
 43                 $("#allchecked").bind("click",function(){
 44                     privilege.pFunction.privilegeTree.checkAll();
 45                 });
 46                 
 47                 /**
 48                  * 保存權限事件
 49                  */
 50                 $("#savePrivilege").unbind("click");
 51                 $("#savePrivilege").bind("click",function(){
 52                     privilege.pFunction.privilegeTree.savePrivilege();
 53                 });
 54                 
 55             },
 56 
 57             /**
 58              * 初始化數據，對數據的初始化操做所有在initData完成
 59              */
 60             initData:function(){
 61                 /*
 62                  * 使用jQuery賦值
 63                  * $(this).parent().siblings("td:first").text()
 64                  * 表示調用該方法的節點的父節點的兄弟節點中第一個的文本值
 65                  * 也就是<td><s:property value="username"/></td>
 66                  * $(this).parent().siblings("input[type='hidden']:first").val();
 67                  * 表示：調用此方法的節點的父節點的兄弟節點類型爲input type=hidden的第一個的值
 68                  * 也就是    <s:hidden name="uid"></s:hidden>
 69                  * 
 70                  * 下面是具體的jsp頁面的對應值
 71                  * <s:iterator>
 72                         <tr class="TableDetail1 template">
 73                             <td><s:property value="username"/></td>
 74                             <s:hidden name="uid"></s:hidden>
 75                             <td><s:property value="department.dname"/></td>
 76                             <td>
 77                                 <s:iterator value="posts">
 78                                     <s:property value="pname"/>
 79                                 </s:iterator>
 80                              </td>
 81                             <td><a onClick="return delConfirm()" href="list.html">刪除</a>
 82                                 <a href="saveUI.html">修改</a>
 83                                 <s:a>設置權限</s:a>
 84                             </td>
 85                         </tr>
 86                        </s:iterator>
 87                  */
 88                 var username = $(this).parent().siblings("td:first").text();
 89                 var uid = $(this).parent().siblings("input[type='hidden']:first").val();
 90                 //給data數據中數據賦值
 91                 privilege.data.user.uid = uid;
 92                 privilege.data.user.username=username;
 93                 
 94             },
 95             
 96             
 97         },
 98         
 99         
100         /**
101          * 全部功能的操做都是在這裏面完成
102          */
103         pFunction:{
104             
105             /**
106              * 全部和權限樹有關的操做都在privilegeTree裏面完成
107              */
108             privilegeTree:{
109                 
110                 /**
111                  * loadPrivilegeTree：完成對的加載
112                  */
113                 loadPrivilegeTree:function(){
114                     
115                 },
116                 
117                 
118                 /**
119                  * controlCheckBox：完成對樹規則控制
120                  */
121                 controlCheckBox:function(){
122                     
123                 },
124                 
125                 
126                 /**
127                  * checkAll：完成對樹的全選操做
128                  */
129                 checkAll:function(){
130                     
131                 },
132                 
133                 /**
134                  * savePrivilege：完成對樹權限的保存
135                  */
136                 savePrivilege:function(){
137                     
138                 }
139             },
140             
141             /**
142              * userOption：完成全部的用戶功能的實現
143              */
144             userOption:{
145                 /**
146                  * 顯示用戶名的操做
147                  */
148                 showUsername:function(){
149                     $("#userImage").text(privilege.data.user.username);
150                 }
151             },
152             
153             /**
154              * divOption：對div的全部操做
155              */
156             divOption:{
157                 /**
158                  * 顯示div的全部操做
159                  */
160                 showDiv:function(){
161                     $("#userTitle").show();
162                     $("#privilegeTitle").show();
163                     $("#privilegeContent").show();
164                 }
165             }
166             
167         },
168         
169         
170         /**
171          * 全部須要的數據均可以在這裏面進行定義
172          */
173         data:{
174             user:{//user數據
175                 uid:'',
176                 username:''
177             }
178         }    
179 };
180 
181 $().ready(function(){
182     privilege.init.initEvent();
183 });

若是是瞭解一下思想，看到這裏就能夠了，下面的代碼須要jQuery的ZTree知識。

上述代碼的所有實現：說明： $.post（）由服務器調用，是異步的，也就是說，想使用$.post()裏面的數據，必須保證他被服務器調用已經完成

var privilege ={
        /**
         * 全部初始化的操做
         */
        init:{
            /**
             * 全部初始化的事件
             */
            initEvent:function(){
                //設置權限的click事件
                $("a").each(function(){
                    if($(this).text()=="設置權限"){
                        $(this).unbind("click");
                        $(this).bind("click",function(){
                            /**
                             * 一、顯示全部div
                             * 二、動態顯示用戶名
                             * 三、加載動態權限樹
                             */
                            var hobj = this;
                            //privilege.init.initData(hobj);
                            //設置initData()方法的調用對象就是this，這樣就不用傳遞參數了
                            privilege.init.initData.call(this);
                            privilege.pFunction.divOption.showDiv();//顯示全部的div
                            privilege.pFunction.userOption.showUsername();//動態顯示用戶名
                            privilege.pFunction.privilegeTree.loadPrivilegeTree();//加載權限樹
                            //判斷全選按鈕是否須要全選不能在這，由於在這樹還不肯定是否已經加載
                            return false;
                        });
                    }
                });
                
                /**
                 * 全選按鈕事件
                 */
                $("#allchecked").unbind("click");
                $("#allchecked").bind("click",function(){
                    privilege.pFunction.privilegeTree.checkAll();
                });
                
                /**
                 * 保存權限事件
                 */
                $("#savePrivilege").unbind("click");
                $("#savePrivilege").bind("click",function(){
                    privilege.pFunction.privilegeTree.savePrivilege();
                });
                
            },
            
            /**
             * 全部初始化的數據
             */
            initData:function(){
                //alert($(hobj).parent().siblings("td:first").text());
                //alert($(hobj).parent().siblings("input[type='hidden']:first").val());
                var username = $(this).parent().siblings("td:first").text();
                var uid = $(this).parent().siblings("input[type='hidden']:first").val();
                privilege.data.user.uid=uid;
                privilege.data.user.username=username;
                
            }
        },
        
        /**
         * 按照功能區域的劃分
         */
        pFunction:{
            
            privilegeTree:{//對全部權限樹的操做
                zTree:'',
                setting: {
                    isSimpleData: true,
                    treeNodeKey: "mid",
                    treeNodeParentKey: "pid",
                    showLine: true,
                    root: {
                        isRoot: true,
                        nodes: []
                    },
                    checkable: true,
                    //設置點擊規則
                    checkType:{
                        "Y":"p",
                        "N":"s"
                    },
                    
                    callback:{
                        beforeChange:function(treeId, treeNode){//在點擊樹的複選框以前觸發
                            //在點擊樹的複選框以前，改變規則
                            privilege.pFunction.privilegeTree.controlCheckBox({
                                "Y":"p",
                                "N":"s"
                            });
                        },
                    
                        /**
                         * 節點點擊的時候觸發,若是已經全選了，那就把全選按鈕選中，不然全選按鈕不選中
                         * @param treeId
                         * @param treeNode
                         */
                        change:function(treeId, treeNode){
                            if(privilege.pFunction.privilegeTree.zTree.getCheckedNodes(false).length!=0){//若是沒有所有選中
                                $("#allchecked").attr("checked", false);
                            }else{
                                $("#allchecked").attr("checked", true);
                            }
                        }
                        
                        
                    
                    }
                },
                    
                /**
                 * 顯示權限樹
                 */
                loadPrivilegeTree:function(){
                    var params={
                            uid:privilege.data.user.uid
                    };
                    
                    $.post("privilegeAction_showPrivilegesByUid",params,function(data){
                        alert(data);
                        privilege.pFunction.privilegeTree.zTree=$("#privilegeTree").zTree(privilege.pFunction.privilegeTree.setting,data.privilegeList);
                        /**
                         * 全選按鈕是否被選中要在點擊設置權限以後顯示出來，
                         * 可是又須要在樹加載以後，全部這裏是判斷全選按鈕是否選中的最佳位置
                         */
                        if(privilege.pFunction.privilegeTree.zTree.getCheckedNodes(false).length!=0){//若是沒有所有選中
                            $("#allchecked").attr("checked", false);
                        }else{
                            $("#allchecked").attr("checked", true);
                        }
                    });
                },
                
                /**
                 * 對權限樹複選框的控制
                 */
                controlCheckBox:function(checkType){//設置setting的屬性
                    //獲取當前樹的setting
                    var setting = privilege.pFunction.privilegeTree.zTree.getSetting();
                    //前一個setting是屬性，後一個數傳遞的值
                    setting.checkType = checkType;
                    privilege.pFunction.privilegeTree.zTree.updateSetting(setting);
                },
                /**
                 * 針對某個用戶的保存權限
                 */
                savePrivilege:function(){
                    var checkedNodes = privilege.pFunction.privilegeTree.zTree.getCheckedNodes(true);
                    var mids="";
                    var length = checkedNodes.length;
                    for(var i=0;i<length;i++){
                        if(i<length-1){
                            mids = mids+checkedNodes[i].mid+",";
                        }else{
                            mids = mids+checkedNodes[i].mid;
                        }
                    }
                    var params={
                            uid:privilege.data.user.uid,
                            mids:mids,
                            aa:[1,2,3]
                    };
                    $.post("privilegeAction_savePrivilege.action",params,function(data){
                        //alert(data);
                    });
                },
            
                /**
                 * 全選複選框的實現
                 */
                checkAll:function(){
                    /**
                     * 在點擊全選的時候，設置下新的規則，讓全選公共能夠實現
                     * 爲何能夠設置，由於只有當樹加載出來的時候，你纔會進行全選，因此，能夠保證樹加載
                     */
                    privilege.pFunction.privilegeTree.controlCheckBox({
                        "Y":"ps",
                        "N":"ps"
                    });
                    if($("#allchecked").attr("checked")){
                        privilege.pFunction.privilegeTree.zTree.checkAllNodes(true);
                    }else{
                        privilege.pFunction.privilegeTree.zTree.checkAllNodes(false);
                    }
                }
            
            },
            
            //用戶的全部操做
            userOption:{
                /**
                 * 動態顯示用戶名，把用戶名顯示到div中
                 */
                showUsername:function(){
                    $("#userImage").text(privilege.data.user.username);
                }
            },
            
            //div的操做
            divOption:{
                /**
                 * 顯示全部的div
                 */
                showDiv:function(){
                    //把隱藏域變成顯示
                    $("#userTitle").show();
                    $("#privilegeTitle").show();
                    $("#privilegeContent").show();
                }
            }
        },
        
        /**
         * json對象的數據封裝
         */
        data:{
            user:{//封裝user數據
                uid:'',
                username:''
            }
        }
};

$().ready(function(){
    privilege.init.initEvent();
});