JS架构探讨－精彩討論进行中...

danny.chiu

浏览: 89413 次
性别:
来自: 北京

最近访客更多访客>>

yyd19948

skyfei511

liti2298

issac2015

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

prototype 游戏 HTML5 jQuery 百度

    此前做过一个坦克大战小游戏，感谢大家热情回复，但从此中也发现前台开发人员水平参差，而且从接触到的同行可以看出，这方面大家的理解差距较大。

    JS前景很好，2014年HTML5标准更新之后，在很长的时间内，她都会越来越流行，特别是在游戏横行，移动设备更新快，很多人又不愿意用各种软件把手机弄得半死不活的今天，JS在移动设备上可能可能首先打败flash，成为前端的一哥。

    为什么要写此文？不可否认JS越来越流行，因为她灵活，什么样的水平都可以写出能实现功能的代码；这也突显出一个尖锐的问题：代码规范化。至于架构的重要性，我想不用多说，无非是规范代码、提高重用性、易扩展易维护。百度、新浪、豆瓣等都有自己的架构，今天在下分享一个DEMO，希望抛砖引玉，懂行的不要保留，分享是金；顺便把新浪架构PPT分享给大家。

    个人对架构的理解，无非是分层和模块化，以下代码主要基于此理解。使用jQuery作为底层，模块为中层，功能为上层、模块的组合。我们的目的是用此框架，我们可以把注意力集中在模块开发上，以实现易扩展、易重用、规范化的目标。

    待完善的地方有很多，比如针对每个页面独立一个配置文件(例如JSON)，服务器端把此页面用到的JS合并压缩，以减少请求数，等，期待大家提出更多更好的建议。

核心实现：
constructor/js/aispeech.js
var AIS = (function() {
	var ONE_PROP = 'test'; // 私有属性和私有方法，只供框架内部使用
	return {
		create: function(obj, supr) { // 创建类或子类
			var sb = obj.initialize, sp;
			delete obj.initialize;
			if (!supr || typeof supr === 'object') {
				sb.prototype = obj;
			} else {
				sp = function() {};
				sp.prototype = supr.prototype;
				sb.prototype = new sp();
				sb.supr = sp.prototype;
				$.extend(sb.prototype, obj);
			}
			sb.prototype.constructor = sb;
			return sb;
		},
		getScript: function(url, cb) { // 引入js文件
			$.getScript(url, cb);
		},
		modual: {}, // 注册模块及其路径
		namespace: function(ns, cb) { // 命名空间
			var nsArr = ns.split('.'), o;
			o = window[nsArr[0]] = window[nsArr[0]] || {};
			$.each(nsArr.slice(1), function(i, n) {
				o = o[n] = o[n] || {};
			});
			AIS.modual[nsArr.slice(-1)].ns = ns;
			if (cb && typeof cb === 'function') cb.call(o);
		},
		importMD: function(modual, cb) { // 导入模块，根据模块名
			cb = cb || function() {};
			if (AIS.modual[modual].ns) {
				cb.call(eval(AIS.modual[modual].ns));
			} else {
				AIS.getScript(AIS.modual[modual].url, function() {
					cb.call(eval(AIS.modual[modual].ns));
				});
			}
		},
		util: { // 工具集
			isEmptyObject: function(obj) {
				for (var prop in obj) {
					return false;
				}
				return true;
			},
			toArray: function(arrLike) {
				return Array.prototype.slice(arrLike);
			},
			// browsers..
			isIE: function() {
				return !-[1,];
			}
		}
	}
})();

使用方法：
var A = AIS.create({
	initialize: function(name) { // 每个类都必须声明的构造器方法
		this.name = name;
	},
	hello: function() {
		alert('hello: '+ this.name);
	}
});
var a = new A('danny');
a.hello();
var B = AIS.create({  //　Ｂ继承自Ａ
	initialize: function(name, age) {
		B.supr.constructor.call(this, name);
		this.age = age;
	},
	world: function() {
		alert('world: '+ this.age);
	}
}, A);

一个用户登陆和切换用户的DEMO：

constructor/ais.modual.js
AIS.modual = {
	'login': {
		'url': 'js/login/login.js'
	},
	'switcher': {
		'url': 'js/login/switch.js'
	}
}

constructor/js/login/login.js
AIS.namespace('com.ais.aid201105.login', function() {
	//var PrivateClass = AIS.create({...}); 可以创建包内私有的类
	this.LoginForm = AIS.create({ // public class
		initialize: function(pid) {
			this.parentId = pid;
			this.initForm();
			this.submit();
		},
		initForm: function() {
			var $f = $('<form></form>');
			$f.append('<fieldset style="width: 250px;"></fieldset>').find('fieldset')
			.append('<legend>Login Form</legend>')
			.append('<label class="username">name: </label>&nbsp;<input type="text" id="username" /><br />')
			.append('<label class="password">password: </label>&nbsp;<input type="password" id="password" /><br />')
			.append('<label class="gender">gender: </label>&nbsp;<select id="gender"><option>male</option><option>female</option></select><br />')
			.append('<input type="button" id="submit" value="submit" />&nbsp;<input type="reset" value="reset" />');
			$('#' + this.parentId).html($f).show('slow').find('#username').focus();
			$('.username, .password, .gender').css({
				'display': 'inline-block',
				'width': '70px',
				'text-align': 'right'
			});
		},
		submit: function() {
			var that = this;
			$('#submit').click(function() {
				//alert('name: ' + $('#username').val() + '\npassword: ' + $('#password').val()); // submit check
				$('#' + that.parentId).hide();
				$('#welcome').find('span').text($('#username').val()).end().show();
			});
		}
	});
});

切换用户引用登陆

constructor/js/login/switch.js
AIS.namespace('com.ais.aid201105.switcher', function() {
	this.Switch = AIS.create({
		initialize: function(sid, lid) {
			this.switchId = sid;
			this.lid = lid;
			this.attachEvent();
		},
		attachEvent: function() {
			var that = this;
			$('#switch').click(function() {
				AIS.importMD('login', function() {
					new this.LoginForm(that.lid);
				});
				$('#welcome').hide();
			});
		}
	});
});

constructor/js/index.js
$(function() { // index
	AIS.importMD('login', function() {
		new this.LoginForm('login_md');
	});

	AIS.importMD('switcher', function() {
		new this.Switch('switch', 'login_md');
	});

})

constructor/index.html
<!DOCTYPE HTML>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="js/aispeech.js"></script>
		<script type="text/javascript" src="js/ais.modual.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<div id="welcome" style="display: none;">欢迎<b><span></span></b> | <a 

href="#" id="switch">切换用户</a></div>
		<div id="login_md"></div>
	</body>
</html>

share_session.rar (3.2 MB)
下载次数: 950

查看图片附件

分享到：

浅析HTML5基于组件的游戏引擎 | jQuery tank war

2011-05-17 22:28
浏览 3248
评论(49)
论坛回复 / 浏览 (63 / 26960)
分类:Web前端
查看更多

49 楼 y14734817777 2011-05-31

if (AIS.modual[modual].ns)
{
    cb.call(eval(AIS.modual[modual].ns));
}
else
{
AIS.getScript(AIS.modual[modual].url, function()
{
    cb.call(eval(AIS.modual[modual].ns));
});
}

//你这种写法AIS.modual[modual].ns 外面有的还套个eval(), 可读性差

48 楼 eyezgx 2011-05-24

lokinell2006 写道

个人觉得现在dojo的整体架构做的不错
分为core， base， dijit 和 dojox
多看看dojo的源码相信对于面向对象的JS有莫大的帮助。

个人认为，DOJO的反应速度（加载速度）还是有待提高的！

47 楼 eyezgx 2011-05-24

lokinell2006 写道

个人觉得现在dojo的整体架构做的不错
分为core， base， dijit 和 dojox
多看看dojo的源码相信对于面向对象的JS有莫大的帮助。

个人认为，DOJO的反应速度（加载速度）还是有待提高的！

46 楼 rainsilence 2011-05-23

fch415 写道

To rain:
——更重要的是，是找一家有实力的民族企业
都什么年代了，写开源项目还要投靠一家企业？直言：您的观点无法苟同。

另外，就算是找靠山，我也不看好国内任何一家大公司的框架领导力（我本人也在一家大的互联网公司待着），无论是Java框架还是JS框架。
他们能把自个的框架（主要就是些工具+小组件）写写好，就谢天谢地了。
如果让我去领导他们，他们思路和眼界足以让我头疼。罢了。

这也是为什么国内外很多优秀开源框架往往来自于个人而非企业的原因之一。

To danny：
1）YUI的dom-event最为精炼、简单好学，功能也最弱（相比于jQuery）但足够用了。YUI完全面向OO，最适宜搭建对象体系（这也是Ext作者的早期选择）。
而jQuery的思想注定了它的面向DOM编程的风格，也注定了它不适合搭建复杂对象体系，适合于作为一种工具库（而且是一种引诱低劣代码的工具库）。

要知道写游戏或写组件都是足够复杂之事，必然需要构建一套稳健的对象体系，最最需要框架层提供的完全面向对象的支持。jQuery这种工具库是难以胜任的。另外，YUI3并没有越来越像jQuery了，而是提供了更多的DOM+CSS操作API耳。

在我（以及众多Java工程师的）眼里，YUI的思想非常OO。这种在Java领域司空见惯的OO思想，在JS框架领域是如此的难得和耀眼。远远胜过jQuery（Prototype等）那种面向函数或DOM的框架。这可不是靠jQuery庞大Fans群所能得来的赞誉。

就像围棋一流国手们追求的是棋道，以留下名局（棋谱）为无憾，而不是以追求谁拿的奖金最多、谁的Fans多、谁的转播人数最高。
优秀的程序员追求的是编程之道，代码之美，而不是找个靠山、伙同风投、骗个名利。

2）——一个好的框架应该使用简单，学习成本低。
真正简单好学的是组件对象的使用，而不是如何复杂高超的操作DOM。
这就是面向对象和面向DOM的本质区别。
操作一个对象的API，而不是操作DOM+CSS（熟悉大量结构化的潜规则），哪一个封装性更好？更为易学？更易读易维护？

最后说一句，倒是很多jQuery的Web组件（的API）越来越像YUI/Ext的组件了。

3）JS2D图形绘制API不是基于HTML5的canvas实现的。虽然叫Canvas类。
如果未来要提供高级绘图能力，我可能要考虑集成canvas标签对象。
但目前矢量图形绘制与旋转外等，这些游戏用不到的功能，暂时没必要集成。

我以前和你的观点一样。
>写开源项目还要投靠一家企业？
您认为，是企业吗？
>这也是为什么国内外很多优秀开源框架往往来自于个人而非企业的原因之一。
优秀，但不成功吗？

45 楼 fch415 2011-05-23

44 楼 danny.chiu 2011-05-23

fch415 写道

我作JSDK的思路，可以概述一下。
1）如果我在六年前就开始写JSDK的话，大概会考虑一切代码自己写。现在暂时不会打算改写YUI的dom-event体系，因为它写得已经足够好。没有必要所有轮子自己造。
而且，JSDK会集成更多优秀的第三方类库作为实现（只要我对外封装提供标准API即可）

2）JSGF只是JSDK的一小部分，只是为了实践我的JS2D才发展起来的。不论是写游戏还是写组件，JS2D这套图形绘制API才是核心API体系。

3）商业化推广确实可以做到：“把狗屎当作黄金卖”（转自销售语录）。但我认为更重要的是：产品质量 + 时间。
现在的API仍在高度发展变化中，哪怕我花三年时间稳定API也没关系，我不会急于正式发布JSDK或写文档推广。
我相信真正高质量的代码是来自于我充分的自由创造，而不是来自商业契约的约束与驱使。

　　感謝fch415大哥抽时间与我们分享您的JSDK思路。
　　个人以为YUI的dom-event体系使用过于复杂，远不如jQuery，实际上YUI3也越来越像jQuery了。一个好的框架应该使用简单，学习成本低。
　　不知道您的团队有多少人，如何学习您的思路，期待您为我们大众分享下您的设计理念，既要出世，亦要入世嘛。
　　顺便问下，您的JS2D图形绘制API是基于canvas实现的吗？大概有哪些API，都可以做什么撒？

43 楼 rainsilence 2011-05-23

fch415 写道

你太理想化了。要实现自己的目标，很多时候就需要折中，站在不同的角度，不同的高度。狗屎虽然能在短期内卖出黄金的价格，但是是没有生命力的。
我曾经参与过一些有潜力的framework的架构，也曾经看到过一大批代码写的很好的国产framework最后都没有得到推广。为什么现在struts仍然是用的最多的framework？为什么webwork的思想如此之好，最后改名为struts2？成功的案例背后无处不在的是成熟的商业运作。产品质量 + 时间是很重要的。但是现实是，时间永远是不够的，而质量是不能差的。机会是留给有准备的人，但是机会通常来临的时候，你的准备通常都不会太充分。那你怎么办？任机会溜走？

p.s. jsdk在google后，我很惊异的得出了两种查询结果。java sdk和js dk。而你起名为jsdk2毫无意义。。因为1）jsdk并不成功。2）容易和其他产品混淆。为了你的framework的生命力，建议你改名。我的话不好听，请见谅。

42 楼 fch415 2011-05-23

41 楼 rainsilence 2011-05-22

danny.chiu 写道

fch415 写道

Sina、Taobao、腾讯等国内前端框架，基本不值得一看。

如果要研究JS框架，建议只读YUI就够了。
如果想要自己搭建框架，想法虽好，但要量力而为。
希望国人先打好JS语言基础，再打好面向对象设计基础，再在大项目上至少实践OO（任何一门非JS的对象语言）开发5年以上，当你能用该OO语言建立框架的时候，你差不多就可以自制一个比较好的JS框架了。

实际上，我正在做的JSDK的（以YUI2为底层）目标是：统一与结束前端框架的混乱局面，或者说，未来的前端框架都以与JSDK集成使用为目标。
JS业界最缺乏的不是框架，而是标准与规范。目前，我没有看到那个前端框架有资格成为JS中的"JDK"。

    fch415是我接触过的令人尊敬的少数牛人之一，JSGF作者，您现在也在开发JSDK吗？
    古语有云：三人行必有我师。我希望在一个浮躁的行业面前，大家都能虚心学习，每个人都有他独特的想法，不必说话过于苛刻，毕竟像fch415、大城小胖、天天(圆角骑士作者)、邂逅思维等这样的牛人不多，一味排外，只会导致自己的目光短浅。
    此文的目的，或者说期望并不是将来完善成JSDK之类，也不可能，只是本着和大家分享的态度，希望大家加入一块讨论，最终输出一套简单的标准。
    比如说，某人自己建个小站，或者开发个小项目，籍此可以快速地把前台搭建起来，再根据需求步步完善。这个DEMO希望提供一套行之有效、简单易用的基础思路。
    当然jQuery不是必须的，还是跟出发点有关系，不可否认的是，目前大多数项目前台做得都很烂，东拼西凑，为了实现功能，各种框架混用。。我们只是希望基于jQuery(当前最流行的框架之一)，提供开发思路与标准，让大部分人或公司的工作可以做得更好，因为他们往往并不具有独立开发框架的能力。BTW，jQuery早在1.2就支持跨域了，并且有更多更有用的东西，比如丰富的插件。
    最后补充一句，前台架构没有好坏，只有合适与不合适。项目大小不一，权重不同，我们既不能用牛刀杀小鸡，也不好使眉刀途牛。这个DEMO着眼点也不是牛

，而是众生

。
小弟再次提出呼吁，希望大家多多分享自己的想法，信息社会，分享是金，沉默是屎。

我曾经仔细的读过jsdk的源码。我只能说：如果他真的想把jsdk发展成一个通用的jdk的话。那么他第一步，应该摆脱对yui的依赖。第二步，我认为更重要的，是找一家有实力的民族企业。他的现状让我想起了5年前的html5。现在html5的成功除了他本身高质量的规范，更重要的是他的后台是google和apple。jdk之所以成功，不是因为一开始代码就写得很完美(java1的awt等组件可以看出来)。而是sun公司的整体战略，商业眼光及宣传造就了这一切。而投资者看到jsdk是必须依赖于yui的时候，还有谁有兴趣呢？没有人希望自己投资的产品受制于人。一个成功的产品，他本身的质量固然重要，但是更重要的是，他的商业运作手段。而商业运作并非靠个人就能完成。需要强大的后台。
p.s jsdk其他的代码的确是非常的优秀，是我看到过的最好的代码，虽然还有些思路上的问题。。

40 楼 danny.chiu 2011-05-22

fch415 写道

，而是众生

。
小弟再次提出呼吁，希望大家多多分享自己的想法，信息社会，分享是金，沉默是屎。

39 楼蓝色飞扬 2011-05-21

不错，学习了，。

38 楼 honlin 2011-05-20

楼主的图不错，用什么工具画的？

37 楼 __游乐场 2011-05-20

该醒醒了.

fch415 写道

36 楼 wangzaixiang 2011-05-20

fch415 写道

只看这个架势，够NB坑坑了。

35 楼 yanzhexian 2011-05-20

我了个去的前端入门简单深入难啊

34 楼 fch415 2011-05-19

33 楼 wu_yong988 2011-05-19

//
$.ajax({
    url: 'a.js',
    type: 'GET',
    timeout: 1000,
    success: function(text){
        eval(text);
    }
});
//
这种写法为什么不能跨域呢？

32 楼 liuzhuo84 2011-05-19

rainsilence 写道

你这招的好处，在于利用同步令牌和一系列加密的方式，可以在某种程度上隐藏js代码。
缺陷在于，不能跨域。
而我这个是可以跨域的。

嗯，明白了，之前作的系统都在同域内，所以没考虑跨域的问题。

31 楼 liuzhuo84 2011-05-19

rainsilence 写道

你这招的好处，在于利用同步令牌和一系列加密的方式，可以在某种程度上隐藏js代码。
缺陷在于，不能跨域。
而我这个是可以跨域的。

嗯，明白了，之前作的系统都在同域内，所以没考虑跨域的问题。

30 楼 rainsilence 2011-05-19

liuzhuo84 写道

rainsilence 写道

wu_yong988 写道

讨论一下：
switch.js和switch.js能不能在用的时候才加载某个呢？
这样在模块多的时候，性能会有很大提升。

你说的这个原理很简单啊。。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
<script type="text/javascript">
	function importScript(scriptPath, callback) {
		var headTag = document.getElementsByTagName("head")[0];
		
		var scriptTag = document.createElement("script");
		scriptTag.type = "text/javascript";
		var isOver = false;
		scriptTag.onload = function() {
			if (isOver) {
				return;
			}
			isOver = true;
			callback();

		}
                // IE9/10同时支持onreadystatechange & onload
		scriptTag.onreadystatechange = function() {
			
			if (isOver) {
				return;
			}
			
			isOver = true;
			if (this.readyState == 'loaded' || this.readyState == 'complete') {
				callback();
			}
		};
		scriptTag.src = scriptPath;
		headTag.appendChild(scriptTag);
	}
	window.onload = function() {
		importScript("a.js", function() {test();});
	};
</script>
</head>
<body>

</body>
</html>

高手！可不可以用异步请求的方式去请求js文件，回来之后eval一下。如下：不知道可行不？

$.ajax({
    url: 'a.js',
    type: 'GET',
    timeout: 1000,
    success: function(text){
        eval(text);
    }
});

你这招的好处，在于利用同步令牌和一系列加密的方式，可以在某种程度上隐藏js代码。
缺陷在于，不能跨域。
而我这个是可以跨域的。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论