js面向对象实践

编写可重用的代码
当与其它程序员共同开发代码时（这里对大多数合作或团队项目来说是很常见的），为了保持你们的清醒而维护良好的编程惯例将会变得极其重要。随着今年来JavaScript已经开始得到认可，专业程序员所编写的JavaScript代码量急剧增加。这种观念上的转变和JavaScript的使用导致围绕它的开发惯例得到了长足的发展。

标准化面向对象代码
编写可重用代码的第一个也是最重要的步骤就是以一种贯穿整个应用程序的标准方式编写你的代码，尤其是面向对象的代码。设计出一种最符合你需要的编写面向对象继承（把对象的属性克隆到新的对象里）的体制是很重要的

以页面回拨电话项目为例：
产品需求效果图



针对效果图进行设计流程图：



针对该需求，我们需要对整个功能做分析：



1、号码功能区整块是相对独立，考虑抽象为widget，于是我们产生了如下构思，以代码（基于zepto类库来开展）骨架来说明
代码用extend来进行对象扩展：扩展方法分别静态方法和动态方法
静态方法：所有使用该widget都具备的通用基本方法
动态方法：每个使用该widget各自独立状态产生的特有方法
号码框代码框架如下：
(function ($) {

/**

* 号码缓存等等应该都是这个 Widget 的工作

*/

var TextField = function () {

this.init.apply(this, arguments);

};

/**
* 静态方法
*/

$.extend(TextField, {
/*号码配对*/

match: function () {

},
/*号码缓存*/

saveToLocalStorage: function (value) {

}

});

/**
* 动态方法
*/

$.extend(TextField.prototype, {
init: function () {

//号码输入框初始化

},

clear: function () {

//号码输入框清空
},

validate: function () {

//号码格式校验

},

disable: function () {

//禁用输入框

},

enable: function () {

//启用输入框

},

save: function () {

//号码缓存

}

});

/**
* 对外暴露的调用接口
*/

$.fn.ecLxbTextField = function () {

return this.each(function () {

});

};

})(Zepto);

2、创建电话拨打对象
(function ($) {

/**

* 电话对象

*/

var Lxb = function () {

this.init.apply(this, arguments)

};

/**
* 创建电话对象静态方法
*/

$.extend(Lxb, {
/**
* 电话拨打的几种状态
*/

states: {

success: {

codes: [0],

text: '稍后您将接到我们的电话,该通话完全免费'

},

frequently: {

codes: [102, 103, 104, 105],

text: '非常抱歉!您的呼叫过于频繁,请稍后再试.'

},

unable: {

codes: [109, 111],

text: '非常抱歉!暂时无法建立通话,请稍后再试.'

},

error: {

codes: [135, 152],

text: '提示:您输入的电话号码有误,请检查重新输入<p class="ec_lxb_info">手机请直接输入:如13800138000</p><p class="ec_lxb_info">座机前请加区号:如0108888888</p>'

}

},
/*展开状态标识常量*/

STATE: {

FOLD: 0

},
/*获取状态-将状态码映射为状态*/

getStateByCode: function (stateCode) {

},
/*获取状态文本*/

getHintText: function (stateCode) {

}

};

/*电话对象动态方法*/

$.extend(Lxb.prototype, {

/*初始状态*/
state: Lxb.STATE.FOLD,
/*初始化*/

init: function () {

},
/*收起*/

unfold: function () {

},
/*收起*/

fold: function () {

},
/*拨号*/

dial: function () {

/* 进行 json 请求 */

/* 置按钮，输入框为不可用 */

this.disableDial();

},
/*禁用拨号*/

disableDial: function () {

// 禁用掉回拨按钮

// 禁用掉拨打键

},
/*开启拨号*/

enableDial: function () {

// 启用回拨按钮

// 启用拨打键

}

});

/*电话对象暴露的接口*/

$.fn.ecLxb = function () {

return this.each(function () {

});

};

})(Zepto);

最后调用的方式：$(dom).ecLxb();

到目前为止：依然还有一个问题未解决，那就是事件选择在什么时机去监听，后续陆续补充