js函数过多的编码思考

最新推荐文章于 2021-08-15 16:46:36 发布

原创最新推荐文章于 2021-08-15 16:46:36 发布 · 922 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#function #产品 #ajax #oop

javascript/CSS/HTML5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript面向对象编程来组织代码的方法，通过将功能模块相关的操作封装在一个类中，提高了代码的可读性和可维护性。

前段时间做个一个项目，当中用到了很多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下，方便维护的同时也解决了函数过多同名的问题。虽然只识编码方式的不同，也没有高深的技艺，但是这样的代码看起来也比较舒服且直观。