使用面向對象思想封裝js（附實例）

平時在寫js時應該用面向對象思想將每一組功能封裝成一個模塊，可實現模塊間的高內聚低耦合、重用、結構清晰...........

若是頁面中邏輯複雜、功能多，不使用模塊封裝是不可想象的，維護起來很是複雜。

 

舉個栗子，好比頁面中的登陸彈窗：封裝彈窗代碼，外界代碼訂閱彈窗內的事件（登陸、註冊...）

 1         function LoginBox() {
 2             if (!(this instanceof LoginBox)) {
 3                 return new LoginBox();
 4             }
 5             var _this = this;
 6             var _cache = {
 7                 $loginWindow: $("#box")
 8             };
 9             var _eventNames = ["loginSuccess", "registSuccess"];
10             var _events = { "loginSuccess": [], "registSuccess": [] };
11 
12             //觸發登陸成功事件
13             var _onLoginSuccess = function () {
14                 var funcs = _events["loginSuccess"];
15                 for (var i = 0, len = funcs.length; i < len; i++) {
16                     funcs[i].call(this, _returnUrl, _loginCallBack);
17                 }
18                 _this.hide();
19             };
20             //綁定事件
21             var _initEvents = function () {
22                 $.bindEvent({
23                     bindInfo: [
24                         { "#buttonLogin": "click buttonLoginClick" },
25                         { "#buttonReg": "click buttonRegClick" },
26                     ],
27                     buttonLoginClick: function () {
28                         //異步登陸，登陸成功調用
29                         _onLoginSuccess();
30                     },
31                     buttonRegClick: function () {
32                         //註冊成功
33                         _onLoginSuccess();
34                     }
35                 },
36 });
37 
38         };
39         //外部添加事件
40         this.on = function (eventName, func) {
41             if (_eventNames.indexOf(eventName) > -1) {
42                 _events[eventName].push(func);
43             }
44         };
45         this.show = function (returnUrl, guestReturnUrl, isShowGuest, loginCallBack) {
46             //顯示登陸彈窗邏輯....
47         };
48         this.hide = function () {
49             //隱藏登陸彈窗邏輯...
50         };
51         $(function () {
52             _initEvents();
53         });
54 }
55 
56         -----------------------------------------
57 
58             外部調用：
59         var loginBox = new LoginBox();
60         loginBox.show();//顯示登陸彈窗
61         loginBox.hide();//隱藏登陸彈窗
62         loginBox.on("loginSuccess", function () {
63             alert("登陸成功啦");
64         });
65         loginBox.on("registSuccess", function () {
66             alert("註冊成功啦");
67         });