使用面向对象思想封装js（附实例）

平时在写js时应该用面向对象思想将每一组功能封装成一个模块，可实现模块间的高内聚低耦合、重用、结构清晰...........

如果页面中逻辑复杂、功能多，不使用模块封装是不可想象的，维护起来非常复杂。

举个栗子，比如页面中的登录弹窗：封装弹窗代码，外界代码订阅弹窗内的事件（登录、注册...）

         function LoginBox() {
             if (!(this instanceof LoginBox)) {
                 return new LoginBox();
             }
             var _this = this;
             var _cache = {
                 $loginWindow: $("#box")
             };
             var _eventNames = ["loginSuccess", "registSuccess"];
             var _events = { "loginSuccess": [], "registSuccess": [] };

             //触发登录成功事件
             var _onLoginSuccess = function () {
                 var funcs = _events["loginSuccess"];
                 for (var i = 0, len = funcs.length; i < len; i++) {
                     funcs[i].call(this, _returnUrl, _loginCallBack);
                 }
                 _this.hide();
             };
             //绑定事件
             var _initEvents = function () {
                 $.bindEvent({
                     bindInfo: [
                         { "#buttonLogin": "click buttonLoginClick" },
                         { "#buttonReg": "click buttonRegClick" },
                     ],
                     buttonLoginClick: function () {
                         //异步登录，登录成功调用
                         _onLoginSuccess();
                     },
                     buttonRegClick: function () {
                         //注册成功
                         _onLoginSuccess();
                     }
                 },
 });

         };
         //外部添加事件
         this.on = function (eventName, func) {
             if (_eventNames.indexOf(eventName) > -1) {
                 _events[eventName].push(func);
             }
         };
         this.show = function (returnUrl, guestReturnUrl, isShowGuest, loginCallBack) {
             //显示登录弹窗逻辑....
         };
         this.hide = function () {
             //隐藏登录弹窗逻辑...
         };
         $(function () {
             _initEvents();
         });
 }

         -----------------------------------------

             外部调用：
         var loginBox = new LoginBox();
         loginBox.show();//显示登录弹窗
         loginBox.hide();//隐藏登录弹窗
         loginBox.on("loginSuccess", function () {
             alert("登录成功啦");
         });
         loginBox.on("registSuccess", function () {
             alert("注册成功啦");
         });