前段时间做个一个项目,当中用到了很多ajax异步获取数据以及页面局部刷新。由于功能模块过多,所以导致要编写很多的js函数也是必然。当时由于时间比较紧,前端js函数越写越多。仅仅针对一个CRUD的请求可能就需要编写4个函数。
例如:
function addProduct(){
//TODO:增加产品
}
function udateProduct(){
//TODO:更新产品信息
}
function selectProduct(){
//TODO:查询一条或者批量商品
}
function removeProduct(){
//TODO:删除一个商品
}
正如所看到,这样会导致很多个函数,虽然可以可以把相关的js函数放到一个js文件下,而但是还要注意不能有同名的函数,必然会费点脑子想想每个函数都该取个什么样子函数。而且后期迭代的时候会增加N多个不知道什么实现要求的函数,所以会导致一个js文件里的函数层次不清晰,代码后期不好维护等问题。
其实针对这个情况,很简单的做法就是为每一个功能模块的相关操作都利用js的类OOP的编码特性组织代码逻辑。
例如:
var Product = {
add:function( amount,price,desc ){
//TODO:增加产品
}
update:function( id,amount,price,desc ){
//TODO:更新产品信息
}
select:function( ids){
//TODO:查询一条或批量产品
}
remove:function( id ){
//TODO:删除产品信息
}
//其他产品类操作
}
Product.add( 100, 1.2, '产品1' );
Product.update( 99,1.12,'产品1');
var ids = [1,2,3]; //查询的产品id
Product.select( ids );
Product.remove( 2 );
如此这般,针对一个功能模块的相关js函数都聚集一个Product下,方便维护的同时也解决了函数过多同名的问题。虽然只识编码方式的不同,也没有高深的技艺,但是这样的代码看起来也比较舒服且直观。