当前位置: 代码迷 >> Web前端 >> 1些小函数
  详细解决方案

1些小函数

热度:226   发布时间:2013-11-09 17:06:34.0
一些小函数
好久没写日志了
一方面人懒  另一方面新公司只有中午一个半小时可以上网
就抹杀了写日志的兴致。。。


最近做了点自己的事情,写了不少自我感觉还有点用的JS小函数  当然都是基于JQ的
就放出来   大神们给给意见   欢迎各种吐槽


一。提供模板  彻底分离json  html  js
<script type="text/template" id="template">
<div class="item">
	<img src="==img==" width="100%" height="300" alt=""/>
</div>
</script>

var data = {
	img : "123.png"
};
var _template_str = $("#template"),
	_str = "";
//返回一个填充好的 html 代码 支持任意的json排列组合
_str = fill_json( data , _template_str );  


function fill_json( fill_json , template_str){
	var json = fill_json,
		_str = template_str.split("=="),
		_len = _str.length,
		str = {};
	for(var i = 0; i < _len; i++){
		str[_str[i]] = _str[i];
	};
	for(var a in str){
		if(json[a])str[a] = json[a];
	};
	_str = [];
	for(var a in str){
		_str.push(str[a]);
	};
	return _str.join("");
};


分离 HTML 和 JS 很早之前就有写过,这个算是改良版   性能上也比之前自己发的有了不少提升




二。代码模块化加载  这个与其说是小函数倒不如说是一中 架构机制
其实对于系统整体的性能提升并没有数量级上的提升  不过对于模块化项目组件的解读上 有着很好的拆分
核心代码:
var input = {}; //存入已导入的 模板
var input_url = {
	//aaa  简称      "template/aaa.html"  具体的存放地址
	aaa 		: "template/aaa.html",
	bbb 		: "template/bbb.html",
};
ajax_template( "aaa" , "click");
ajax_template( "bbb" , "hover");
 /**
*	获取  对应点击的模块
*	template_id  每个模块出发的元素id名称
*	type触发事件	 click  hover...
**/
function ajax_template( template_id , type ){
	var _id = template_id,
		_type = type;
	switch( _type ){
		case "click":
			$("#" + _id).unbind("click").click(function(){
				x();
			});
			break;
		case "hover":
			$("#" + _id).unbind("hover").hover(function(){
				x();
			});
			break;
	};
	function x(){
		if( !input[_id] ){
			window.setTimeout(function(){
				x();
			},100);
			$.post( input_url[_id] , function(result){
				var _result = result;
				$("body").append(_result);
				eval(_id + "_start();");
				input[_id] = true;
			});
		} else {
			eval(_id + "_start();");
		};
	};
},




template/aaa.html  页面:
<script type="text/javascript" id="aaa_js">
function aaa_start(){
	var obj = null;
	var tool = {
		init : function(){
			console.log("加载成功!!");
		}
	};
	tool.init();
};
</script>




这个其实很早就运用到自己的项目中了    这几天偶然看到了Dojo的东西  发现这货好像也是这种架构想法
望其项背啊。。。。


写了这么久的JS。。。  发现写得越多 用得越多   这东西就越难
现在就是有种感觉  用JS写RIA就像造房子
JS只是给了你  造砖头的工具
你得先把各种砖头都烧好了 地板用瓷砖  墙壁用红白砖等等
然后在把砖头一块一块的去砌在它应该在的地方  慢慢的一幢房子就这么搭成了
但是 什么地方用什么砖 这个东西还真难去管理
稳定性、高性能、独立模块化、适当的向后兼容。。。
这些东西 都只能凭自己在各个项目中摸爬滚打才能深刻体会它的好与坏
好好学习  天天向上吧。。。。
  相关解决方案