昨天做了工具的页面重构。
主要是对原来匆匆写就的函数式js进行重构。
诸多无奈,这个系统要从头做到尾,数据库设计到页面开发就俺一个。。。时间也蛮紧,但是紧归紧,做一个新的东西就应该比原来的代码写的上一个台阶。
尝试面向对象式的js开发,余以为应该看看《JavaScript高级程序设计》及《Oject-orented JavaScript》(这本没有中文版),《Javascript设计模式》可能用不到那么深吧。
开发前快速浏览了一下李战的《悟透JavaScript》。之前对这样的开发只是只知皮毛。因为项目本身存在的问题,当初开发页面各自为战,写java的做页面,自己开发自己的js,没法做到复用,命名空间等等就更别想了。后来迁至SH,终于和页面的DEV人员挂上钩。但那时旧的东西都开发的差不多了,新的任务又上来了,也不敢去回头审视已经开发过的代码了。
悟透JavaScript里面的甘露模型着实不错。但是那貌似是人家原创的东西,而且初试身手,也不需要优雅至此。故采用原型模型开发,“原型模型需要一个构造函数来定义对象的成员,而方法却依附在该构造函数的原型上。”
按照功能,定义四个原型:
获取数据 ItemSearch
筛选数据 ItemFilte
计算数据 ItemCount
处理数据 ItemResult
因为没有继承,所以也没定义什么对象的成员,个别的象征性的定义了几个。我觉得这种情况下参数从构造函数传递和从方法传递也没什么区别。
在开发时遇到了,在IE下判断一个checkbox的是否checked属性失效的问题。
以前貌似解决过这个问题,不过不知道怎么弄了。。。但是现在既然是在jquery的框架下开发,通过给方法传递一个checkbox对象本身$(this)作为参数,然后在方法里
判断if(checkbox.attr("checked")==true),即可解决。
还有一些让自己感觉很愚蠢的this问题。在一个function里面还有一个function,里面的this误以为还能取到外面this的东西。。。其实里面的this应该指到是里面的function的调用者。
其他的用到的地方,像parseFloat啦,把价格转成数字。toFixed啦,取保留位数,否则会出错。
这里面还有一个需要注意的地方,页面加载时会通过jquery把事件绑定到dom上,但是页面会动态生成checkbox,这个上面也有事件,开始也放在了页面加载的地方绑定,当然没有效果了。然后把这一部分移到了ajax获取生成了这部分dom之后再进行一步绑定就可以了。
页面加载后会把需要的对象都new出来,然后在每个地方就不new了,直接调用。这样也节省了内存。
清空一下各输入框免的操作的时候误提交。