按需加載代碼的實現

先上代碼:html

/*按需加載*/
	function sendsearch() {
		queryString();
		var url = "/xwiki/rest/wikis/xwiki/query?q="+sqlStr+"&type=hql";
		var str = "";
		S.one(".searchresultnum span").html("0");
        S.IO.get(url,{},function(data) {
		//	var xmlDoc = loadXMLDoc(data);
			var node = data.getElementsByTagName("title");
			S.one(".searchresultnum span").html(node.length);
			if(node.length < 15) {
				num = node.length;
				S.one(".clickMore").hide();
				for (var i = 0; i < num; i++) {
					var title = node[i].childNodes[0].nodeValue;
					if(title != "Search"){
						str += "<li><a href='/xwiki/bin/view/人物/" + title + "'>";
						str += "<img src='/xwiki/bin/download/人物/" + title + "/avaterImg.jpg'/>";
						str += "<div></div></a>";
						str += "<h2>" + title + "</h2>";
						str += "<p class='intro'></p></li>";
					}
				}
				S.one(".resultlist").html(str);
				S.all(".loading").remove();
			} else {
				num = 15;
				S.one(".clickMore").show();
				S.one(".clickMore").on("click", function() {
					console.log(num);
					if(num > node.length) {
						num1 = node.length;
						num2 = num - node.length;
						console.log(num1);
						console.log(num2);
					} else {
						num1 = num;
						num2 = 15;
						console.log(num1);
						console.log(num2);
					}
					for (var i = num1 - num2; i < num1; i++) {
						var title = node[i].childNodes[0].nodeValue;
						if(title != "Search"){
							str += "<li><a href='/xwiki/bin/view/人物/" + title + "'>";
							str += "<img src='/xwiki/bin/download/人物/" + title + "/avaterImg.jpg'/>";
							str += "<div></div></a>";
							str += "<h2>" + title + "</h2>";
							str += "<p class='intro'></p></li>";
						}
					}
					S.one(".resultlist").html(str);
					S.all(".loading").remove();
					if(num < node.length){
						num = num + 15;
					} else {
						num = 15;
						S.all(".clickMore").html("暫無更多內容");
					}	
				}).fire("click");
			}
		}, "xml");
	}

其中queryString()的做用就是拼接檢索條件,由於裏面涉及公司內部數據,故暫不公開,你們只要知道他的功能就能夠了。不過我仍是以爲這樣寫代碼實現是實現了,可是效率不高,正思考加入js面向對象的特性改進下。你們有什麼好的建議能夠提下。
前端

KISSY 是由阿里集團前端工程師們發起建立的一個開源 JS 框架。node

它具有模塊化、高擴展性、組件齊全,接口一致、自主開發、適合多種應用場景等特性。sql

有興趣的讀者能夠訪問他的API:http://docs.kissyui.com/前端工程師

相關文章
相關標籤/搜索