使用面向对象思想封装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("注册成功啦");
        });