用jq写项目js代码凌乱以及单页面问题

最近接到一个公司的小产品，技术要求是jq单页面切换，对于我这个两年没怎么碰jq的人来说还是挺头疼。因为之前代码都是用react来写，所以基本代码的流程跟文件结构都是相对清晰的。但jq总体给人写完就是凌乱不堪就跟古代的裹脚布一样。

首先定义js文件的时候，我定义了三个文件，一个帮助类（help.js）主要放自己封装的一些弹窗，路由，日期处理，正则表达式等等，然后用构造对象封装成Help对象。还有就是api.js(专门用来放接口，域名)

最后我的做法就是用构造函数一个页面一个对象，把每个页面中所有的function都放到该页面的对象中，为了避免new 完之后会有调很多function，所以在每个对象中我都会写一个render的方法

function Index(){
  this.one=function(){
    console.log('one')
  }
  this.two=function(){
    console.log('two')
  }
  this.render=function(){
    this.one();
    this.two();
  }
}
var Index=new Index()
Index.render()

大概写法就是这个样子。这样一个页面一个对象就会比较工整，当然如果该页面里还要细分成小的模块，也可以两层构造函数或者更（建议不要超过两层以上，因为这样写为的是便于阅读，嵌套太深会影响阅读）。

接下来就是单页面切换，说起单页面肯定离不开js路由楼，这个js封装的路由网上有很多都差不多，原理相对也是比较简单，地址栏的哈希值而已。那么我就直接贴代码了（基本都是面向对象，构造一个Router的对象，然后将其挂在window下。）下面直接贴代码了

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf8" />
		<!--<script type="text/javascript" src="./router.js"></script>-->
		<style type="text/css">

		</style>
		<script type="text/javascript">
			(function() {
				window.Router = function() {
					var self = this;
					self.hashList = {};
					self.index = null;
					self.key = '!';
					window.onhashchange = function() {
						self.reload();
					};
				};
				Router.prototype.add = function(addr, callback) {
					var self = this;
					self.hashList[addr] = callback;
				};
				Router.prototype.remove = function(addr) {
					var self = this;
					delete self.hashList[addr];
				};
				Router.prototype.setIndex = function(index) {
					var self = this;
					self.index = index;
				};
				Router.prototype.go = function(addr) {
					var self = this;
					window.location.hash = '#' + self.key + addr;
				};
				Router.prototype.reload = function() {
					var self = this;
					var hash = window.location.hash.replace('#' + self.key, '');
					var addr = hash.split('/')[0];
					var cb = getCb(addr, self.hashList);
					if(cb != false) {
						var arr = hash.split('/');
						arr.shift();
						cb.apply(self, arr);
					} else {
						self.index && self.go(self.index);
					}
				};
				Router.prototype.start = function() {
					var self = this;
					self.reload();
				};

				function getCb(addr, hashList) {
					for(var key in hashList) {
						if(key == addr) {
							return hashList[key];
						}
					}
					return false;
				}
			})();
		</script>
	</head>

	<body>
		<a href="#!index">go to index</a><br />
		<a href="#!search/SB/shi/ni">go to search</a>
	</body>

	<script type="text/javascript">
		window.onload = function() {
			var router = new Router();
			router.add('index', function() {
				alert('current page: index');
			});

			router.add('search', function(wd, sortType, sortBy) {
				alert('current page: search' + '\nwd: ' + wd + '\nsortType: ' + sortType + '\nsortBy: ' + sortBy);
			});
			router.setIndex('index');
			router.start();
		};
	</script>

</html>

这个是我从网上贴过来，也是自己测试过的，可以跑通。

最近写代码效率比较低，最近一直在考虑的是怎么样才能让代码写出来，人家后期维护的时候不被别人问候自己的祖宗十八代。因为我维护别人的代码的时候出现过这种情况，所以我现在写代码尽量是能让别人看懂，容易的看懂里面的逻辑。

下一次会把发一篇关于jq图片上传的的思路以及代码，然后会封装成react的组件放到githup上。个人觉得刚开始的一些东西能自己封装就自己封装，不要拿人家现成的（只是个人想法）。后半年的主要博客是react的源码的思想，还有VUE全家桶的语法。希望跟大家一起成长。以后争取每个月三篇博客。

用jq写项目js代码凌乱以及单页面问题

猜你喜欢