使用面向对象思想封装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         });