代码重构（编写优雅的前端代码）

代码重构（编写优雅的前端代码）

1.自执行函数，严格模式

将当前的模块对象写在一个自执行函数内。

需要使用ES5的严格模式。

该模块需要用到的全局变量需要用入参的方式传入自执行函数，供函数内部使用。

(function (global, $, doc, lsObj, zhugeSwitch, zhuge) {    'use strict';    /* 这里是代码 */})(this, this.jQuery, document, lsObj, zhugeSwitch, zhuge);

2.构造函数与原型

为当前模块对象创建一个构造函数，和他的原型。

我们将构造函数作为模块的入口函数。入口函数里通常会执行初始化变量、绑定事件等等。

(function (global, $, doc, lsObj, zhugeSwitch, zhuge) {    'use strict';    var something = function(){    };    something.prototype = {          constructor: something,    }})(this, this.jQuery, document, lsObj, zhugeSwitch, zhuge);

3.选择器统一管理

将选择器对象写在类属性中。

将初始化选择器的函数写在原型中，在构造函数内调用。

    var something = function(){        this.initializeElements();      };    something.Eles = {        name: '.name',        password: '.password',          };    something.prototype = {        initializeElements: function () {            var eles = loginClass.Eles;            for (var name in eles) {                if (eles.hasOwnProperty(name)) {                    this[name] = $(eles[name]);                }            }        }       }

4.事件统一管理

1. ##### 将事件Map统一写在构造内。

    var something = function(){        this.eventsMap = {            'focus .name input': 'nameFocus',            'blur .name input': 'nameBlur',            'focus .password input': 'pswdFocus',            'blur .password input': 'pswdBlur',            'click .btn': 'login',        };            };

1. ##### 将事件要触发的函数写进原型中。

（注意此时this的指向）

  something.prototype = {        login: function () {            var p = this.passwordInput;            var n = this.nameInput;            var pt = this.pTip;            var nt = this.nTip;            this.nameVal = n.val().trim();            this.passwordVal = MD5(p.val().trim());            var nameVal = this.nameVal;            var passwordVal = this.nameVal;            var phoneReg = /^1\d{10}$/;            if (nameVal == "" || nameVal == null) {                nt.text('手机号码不能为空');                p.val('')            } else if (!phoneReg.test(nameVal)) {                nt.text('您输入的手机号码不正确');            } else if (passwordVal == '' || passwordVal == null) {                nt.text('');                pt.text('密码不能为空');            } else {                nt.text('');                pt.text('');                this._requestIfTelregisted();            }        },    }

1. ##### 我们会使用事件代理的方式对这些事件进行循环绑定。

在原型中书写一个扫描事件Map的函数。

  something.prototype = {        _scanEventsMap: function (maps, isOn) {            var delegateEventSplitter = /^(\S+)\s*(.*)$/;            var type = isOn ? 'on' : 'off';            for (var keys in maps) {                if (maps.hasOwnProperty(keys)) {                    if (typeof maps[keys] === 'string') {                        maps[keys] = this[maps[keys]].bind(this); //改变this的指向                    }                    var matchs = keys.match(delegateEventSplitter);                    $('body')[type](matchs[1], matchs[2], maps[keys]);                }            }        },          }

1. ##### 在原型中写入以下函数，优化我们的逻辑。

  something.prototype = {        initialization: function () { //初始化            this.bindEvent();        },        bindEvent: function () { //绑定事件            this.initializeOrdinaryEvent(this.eventsMap);        },        unbindEvent: function () { //解绑事件            this.uninitializeOrdinaryEvent(this.eventsMap);        },        initializeOrdinaryEvent: function (maps) { //绑定普通事件            this._scanEventsMap(maps, true);        },        uninitializeOrdinaryEvent: function (maps) { //解绑普通事件            this._scanEventsMap(maps);        },            _scanEventsMap: function (maps, isOn) { //扫描事件地图，绑定或者解绑        },          }

1. ##### 在构造函数内调用初始化函数。

    var something = function(){        this.initialization();            };

5.添加属性和方法

当前模块对象会有一些初始化参数，可以理解为我们自己定义的全局变量。我们将这些参数写进构造函数中。

        var something = function(){           this.passwordVal = null;           this.nameVal = null;        };

将其他用到的函数写入原型中。

something.prototype = {        _requestIfTelregisted: function () { // 验证手机号是否注册接口            var _data = {                "registNum": this.nameVal            };            var nt = this.nTip;            var that = this;            $.ajax({                type: "GET",                url: "/cloudlink-core-framework/login/isExist",                contentType: "application/json",                data: _data,                dataType: "json",                success: function (data, status) {                    var res = data.rows.isExist;                    if (res == 0) {                        nt.text('账号未注册');                        utils.zhugeTrackForFailed(that.nameVal,'账号未注册');                        return false;                    } else {                        that._requestData();                        return true;                    }                }            });        },    }

6.抽离工具类（对象）

例如：

    var utils = {        hide:function(ele){ //元素的显隐            $(ele).addClass('hidden');         },        show:function(ele){            $(ele).removeClass('hidden');         },              zhugeTrackForFailed: function (tel, sRsn) { //诸葛埋点            if (zhugeSwitch == 1) {                zhuge.track('登陆失败', {                    '手机号': tel,                    '原因': sRsn                });            }        },    };

7.执行构造函数

可以选择是否把类或new出的对象暴露出去。

    //global.something = something; 选择是或否暴露    $(function() {        global.somethingObj = new something(); //暴露出对象，供其他使用        //new something(); 直接执行    }); 

8.最终结构

(function (global, $, doc, lsObj, zhugeSwitch, zhuge) {    'use strict';    var something = function(){         this.eventsMap = {            'focus .name input': 'nameFocus',        };        this.initializeElements();        this.initialization();          };    something.Eles = {             password: '.password',          };    var utils = {        zhugeTrackForFailed: function(tel, sRsn) {            if (zhugeSwitch == 1) {                zhuge.track('登陆失败', {                    '手机号': tel,                    '原因': sRsn                });            }        },          };    something.prototype = {        constructor: something,        initialization: function() {            this.bindEvent();        },        initializeElements: function() {            var eles = loginClass.Eles;            for (var name in eles) {                if (eles.hasOwnProperty(name)) {                    this[name] = $(eles[name]);                }            }        },        bindEvent: function() {            this.initializeOrdinaryEvent(this.eventsMap);        },        unbindEvent: function() {            this.uninitializeOrdinaryEvent(this.eventsMap);        },        initializeOrdinaryEvent: function(maps) {            this._scanEventsMap(maps, true);        },        uninitializeOrdinaryEvent: function(maps) {            this._scanEventsMap(maps);        },        _scanEventsMap: function(maps, isOn) {            var delegateEventSplitter = /^(\S+)\s*(.*)$/;            var type = isOn ? 'on' : 'off';            for (var keys in maps) {                if (maps.hasOwnProperty(keys)) {                    if (typeof maps[keys] === 'string') {                        maps[keys] = this[maps[keys]].bind(this);                    }                    var matchs = keys.match(delegateEventSplitter);                    $('body')[type](matchs[1], matchs[2], maps[keys]);                }            }        },              destroy: function() {            this.unbindEvent();        }           }    //global.something = something; 选择是或否暴露    $(function() {        global.somethingObj = new something(); //暴露出对象，供其他使用        //new something(); 直接执行    });    })(this, this.jQuery, document, lsObj, zhugeSwitch, zhuge);