JS是按值传递还是按引用传递

按值传递 VS. 按引用传递

按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本。修改形参的值并不会影响实参。
按引用传递(call by reference)时,函数的形参接收实参的隐式引用,而不再是副本。这意味着函数形参的值如果被修改,实参也会被修改。同时两者指向相同的值。
按引用传递会使函数调用的追踪更加困难,有时也会引起一些微妙的BUG。
按值传递由于每次都需要克隆副本,对一些复杂类型,性能较低。两种传值方式都有各自的问题。
Continue reading “JS是按值传递还是按引用传递”

Vue.js介绍

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。

本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

v-for Demo v-bind Demo Page Demo GitHub Source

Continue reading “Vue.js介绍”

JavaScript对frameset的操作总结

1 框架编程概述
    一个Html
页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一
个独立的Html 页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,
例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一
个框架中表单的行为等。

2 框架间的互相引用
   
一个页面中的所有框架以集合的形式作为window 对象的属性提供,例如:
window.frames 就表示该页面内所有框架的集合,这和表单对象、链接对象、图片对象等是
类似的,不同的是,这些集合是document 的属性。因此,要引用一个子框架,可以使用如
下语法:


Javascript 代码

   
window.frames[“frameName”]; 
   
window.frames.frameName 
   
window.frames[index] 

其中,window字样也可以用self代替或省略,假设frameName 为页面中第一个框架,
则以下的写法是等价的:


JavaScript 代码

  
self.frames[“frameName”] 
  
self.frames[0] 
   frames[0]
frameName
   
了解了如何引用一个框架,那么引用的这个框架到底是什么呢?其实,每个框架都对应
一个HTML 页面,所以这个框架也是一个独立的浏览器窗口,它具有窗口的所有性质,所
谓对框架的引用也就是对window 对象的引用。有了这个window 对象,就可以很方便地对
其中的页面进行操作,例如使用window.document对象向页面写入数据、使用window.location
属性来改变框架内的页面等。


下面分别介绍不同层次框架间的互相引用:


   
2.1.父框架到子框架的引用
知道了上述原理,从父框架引用子框架变的非常容易,即:
Java 代码

   1.
window.frames[“frameName”]; 
   
这样就引用了页面内名为frameName 的子框架。如果要引用子框架内的子框架,根据
引用的框架实际就是window对象的性质,可以这样实现:
JavaScript 代码

       
window.frames[“frameName”].frames[“frameName2”]; 
   
window.frames[“frameName”].frames[“frameName2”];

这样就很引用到了二级子框架,以此类推,可以实现多层框架的引用。


2.2.子框架到父框架的引用
每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,
则window.parent 还表示该框架本身。


2.3.兄弟框架间的引用
如果两个框架同为一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相
引用,例如一个页面包括2 个子框架:
Java 代码

   
<frameset
rows=”50%,50%”> 
   
<frame src=”1.html” name=”frame1″
/> 
   
<frame src=”2.html” name=”frame2″
/> 
   
</frameset> 

<frameset rows=”50%,50%”>
<frame src=”1.html” name=”frame1″
/>
<frame src=”2.html” name=”frame2″
/>
</frameset>

在frame1 中可以使用如下语句来引用frame2:
self.parent.frames[“frame2”];


2.4.不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一
个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,
例如:
Java 代码

   1.
self.parent.frames[“childName”].frames[“targetFrameName”]; 

self.parent.frames[“childName”].frames[“targetFrameName”];


2.5.对顶层框架的引用
和parent 属性类似,window 对象还有一个top 属性。它表示对顶层框架的引用,这可
以用来判断一个框架自身是否为顶层框架,例如:
//判断本框架是否为顶层框架
Java 代码

   1.
if(self==top){ 
   2.
//dosomething 
   3. } 

if(self==top){
//dosomething
}

3 改变框架的载入页面
前面已经讲到,对框架的引用就是对window对象的引用,利用window对象的location
属性,可以改变框架的导航,例如:
window.frames[0].location=”1.html”;
这就将页面中第一个框架的页面重定向到1.html,利用这个性质,甚至可以使用一条链
Java 代码

   1.
接来更新多个框架。 
   2. <frameset
rows=”50%,50%”> 
   3. <frame
src=”1.html” name=”frame1″
/> 
   4. <frame
src=”2.html” name=”frame2″
/> 
   5.
</frameset> 
   6.
<!–somecode–> 
   7. <a
href=”frame1.location=’3.html;frame2.location=’4.html’”
onclick=””>link</a> 
   8.
<!–somecode–> 

接来更新多个框架。
<frameset rows=”50%,50%”>
<frame src=”1.html” name=”frame1″
/>
<frame src=”2.html” name=”frame2″
/>
</frameset>
<!–somecode–>
<a
href=”frame1.location=’3.html;frame2.location=’4.html’”
onclick=””>link</a>
<!–somecode–>

 

4 引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前,先来看以下代码:
Java 代码

   1. <script
language=”JavaScript”
type=”text/javascript”> 
   2.
<!– 
   3. function
hello(){ 
   4.
alert(“hello,ajax!”); 
   5. } 
   6.
window.hello(); 
   7.
//–> 
   8.
</script> 

<script language=”JavaScript”
type=”text/javascript”>
<!–
function hello(){
alert(“hello,ajax!”);
}
window.hello();
//–>
</script>

如果运行了这段代码,会弹出“hello,ajax!”的窗口,这正是执行hello()函数的结果。
那为什么hello()变成了window对象的方法呢?事实上,在一个页面内定义的所有全局变量
和全局函数都是作为window对象的成员。例如:
var a=1;
alert(window.a);
就会弹出对话框显示为1。同样的原理,在不同框架之间共享变量和函数,就是要通过
window对象来调用。


为了方便大家的理解,下面举例说明。一个商品浏览页面由两个子框架组成,左侧表示
商品分类的链接;当用户单击分类链接时,右侧显示相应的商品列表;用户可以单击商品旁
的【购买】链接将商品加入购物车。


在这个例子中,可以利用左侧导航页面来存储用户希望购买的商品,因为当用户单击导
航链接时,变化的是另外一个页面,即商品展示页面,而导航页面本身是不变的,因此其中
的JavaScript变量不会丢失,可以用来存储全局数据。其实现原理如下:
假设左侧页面为links.html,右侧页面为show.html,页面结构如下:


Java 代码

   1. <!DOCTYPE
HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”> 
   2.
<html> 
   3.
<head> 
   4.
<title> New Document
</title> 
   5.
</head> 
   6. <frameset
cols=”20%,80%”> 
   7. <frame
src=”link.html” name=”link”
/> 
   8. <frame
src=”show.html” name=”show”
/> 
   9.
</frameset> 
  10.
</html> 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”>
<html>
<head>
<title> New Document
</title>
</head>
<frameset cols=”20%,80%”>
<frame src=”link.html” name=”link”
/>
<frame src=”show.html” name=”show”
/>
</frameset>
</html>


在show.html 中展示的商品旁边可以加入这样一条语句:
Java 代码

   1. <a
href=”void(0)”
onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a> 

<a href=”void(0)”
onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a>

其中link表示导航框架,在link.html 页面中定义了arrOrders数组来存储商品的id,函
数addToOrders()用来响应商品旁边【购买】链接的单击事件,它接收的参数id 表示商品的
id,例子中是一个id为32068 的商品:
Java 代码

   1. <script
language=”JavaScript”
type=”text/javascript”> 
   2.
<!– 
   3. var arrOrders=new
Array(); 
   4. function
addToOrders(id){ 
   5.
arrOrders.push(id); 
   6. } 
   7.
//–> 
   8.
</script> 

<script language=”JavaScript”
type=”text/javascript”>
<!–
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push(id);
}
//–>
</script>

这样,在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。
框架可以使一个页面划分为功能独立的多个模块,每个模块之间彼此独立,但又可以通
过window 对象的引用来建立联系,是web 开发中的一个重要机制。在Ajax 开发中,还可
以利用隐藏框架实现各种技巧,在后面介绍Ajax 实例编程时可以发现,无刷新上传文件以
及解决Ajax的前进后退问题都会用到这种技术。

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/andensy/archive/2010/05/20/5611535.aspx

jQuery取得iframe元素的方法

收集利用Jquery取得iframe中元素的几种方法 :

 

Js代码  
  1. $(document.getElementById(‘iframeId’).contentWindow.document.body).htm()  

 

 显示iframe中body元素的内容。

 

Js代码  
  1. $(“#testId”, document.frames(“iframename”).document).html();  

 根据iframename取得其中ID为”testId”元素

 

Js代码  
  1. $(window.frames[“iframeName”].document).find(“#testId”).html()  

 作用同上

 

 

收集网上的一些示例:

用jQuery在IFRAME里取得父窗口的某个元素的值

只好用DOM方法与jquery方法结合的方式实现了

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames[“iframe1”].document).find(“input[@type=’radio’]”).attr(“checked”,”true”);

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find(“input[@type=’radio’]”).attr(“checked”,”true”);

iframe框架的:<iframe src=”test.html” id=”iframe1″ width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>

IE7中测试通过

Ajax请求跨域的理解(端口,域名,主机)

今天同事遇到个奇怪的问题,就是他用JQ的AJAX请求一个URL的时候,通过FIREBUG看到的返回状态时200,但是没有数据,而且那个请求时红色 的,就像返回回来的是404一样。我帮他调了很久,最后看到他浏览器的访问地址是www.xxx.com/xxx,而他AJAX请求的是 www.xxx.com:8080/xxx,端口不一致。我突然想到肯定是AJAX跨域,不过这个可是一个服务器,只是不同的端口而已。然后让他吧 8080去掉,就可以了。

 
经过几次测试,发现浏览器对AJAX跨域限制很严格,我有一个主机,IP为A,A上80端口,81端口都有服务,然后IP为A的主机上绑定了两个域 名,www.test.com 和www.test1.com,通过这两个IP都能方位到80的服务,但是如果在www.test.com上用AJAX请求www.test1.com的 URL,就不行。就属于跨域。同样,www.test.com上访问www.test.com:81的请求也是跨域。虽然是同一个主机,同一个IP,但是 只要域名不一致,甚至端口不一致,都属于跨域。
 
 
那么,如果一个主机上不同端口上部署有不同的服务,怎么用AJAX去调用呢?我的解决办法是通过中间层转发请求。比如www.test.com上要用 AJAX请求81的服务,就在80上写一个功能,请求80,把要传递的参数传给80,在由80的服务器端去发请求,将请求到的数据返回给AJAX.
 

Javascript:history 刷新、返回

<a href=”javascript:history.go(1);”>前进</a>
<a href=”javascript:history.go(0);”>本页</a>
<a href=”javascript:history.go(-1);”>返回</a>

补充

Javascript 返回上一页
1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2);
  2. history.back().
  3. window.history.forward()返回下一页
  4. window.history.go(返回第几页,也可以使用访问过的URL)
例:
<a href=”javascript:history.go(-1);”>向上一页</a>
response.Write(“<script language=javascript>”)
response.Write(“if(!confirm(‘完成任务?’)){history.back();}”)
response.Write(“</script>”)
response.Write(“<script language=javascript>history.go(-1);</script>”)
<a href=”javascript:history.go(-1);”>向上一页</a>
页面跳转:onclick=”window.location.href=’list.jsp'”

P.S.
小技巧(JS引用JS):
<script type=text/javascript>
<!–
if (typeof SWFObject == “undefined”) {
document.write(‘<scr’ + ‘ipt type=”text/javascript” src=”/scripts/swfobject-1.5.js”></scr’ + ‘ipt>’);}
//–>
</script>

 
 

Javascript刷新页面的几种方法:
1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand(‘Refresh’)
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href

自动刷新页面的方法:
1.页面自动刷新:把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20″>
其中20指每隔20秒刷新一次页面.

2.页面自动跳转:把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20;url=http://www.javaeye.com”>
其中20指隔20秒后跳转到http://www.javaeye.com页面

3.页面自动刷新js版
<script language=”JavaScript”>
function myrefresh()
{
       window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>

ASP.NET如何输出刷新父窗口脚本语句
1.   this.response.write(“<script>opener.location.reload();</script>”);
2.   this.response.write(“<script>opener.window.location.href = opener.window.location.href;</script>”);
3.   Response.Write(“<script language=javascript>opener.window.navigate(”你要刷新的页.asp”);</script>”)

JS刷新框架的脚本语句
//如何刷新包含该框架的页面用 
<script language=JavaScript>
   parent.location.reload();
</script>

//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href=”javascript:opener.location.reload()”>刷新</a>   )

//如何刷新另一个框架的页面用 
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。
<body onload=”opener.location.reload()”> 开窗时刷新
<body onUnload=”opener.location.reload()”> 关闭时刷新
<script language=”javascript”>
window.opener.document.location.reload()
</script>

获取Javascript时间戳

获取 javascript 时间戳:

var timestamp = Date.parse(new Date());

或者:

var timestamp = (new Date()).valueOf();

以上代码将获取从 1970年1月1日午夜开始的毫秒数。二者的区别是,第一种方法的毫秒位上为全零,即只是精确到秒的毫秒数。

跨域资源共享的10种方式

在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?

 
 

同源策略

在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚 本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.org),那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是 同域,而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。 本地的html文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的隐患。

受到同源策略的影响,跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步,目前在跨域请求的技巧上,有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种,一种是单向的数据请求,还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式,以下跨域实例的源代码可以从这里获得

 
 

单向跨域

JSONP

JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的JavaScript,于是我们可以通过script标 记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA 需要的数据,然后在pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函 数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果 第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

 

flash URLLoader

flash有自己的一套安全策略,服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问,SWF也可以通过API来确定自身能被哪些域的SWF加载。当跨域访问资源时,例如从域www.a.com请求域www.b.com上的数据,我们可以借助flash来 发送HTTP请求。首先,修改域www.b.com上的crossdomain.xml(一般存放在根目录,如果没有需要手动创建) ,把www.a.com加入到白名单。其次,通过Flash URLLoader发送HTTP请求,最后,通过Flash API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案,不过需要支持iOS的话,这个方案就无能为力了。

 

Access Control

Access Control是比较超越的跨域方式,目前只在很少的浏览器中得以支持,这些浏览器可以发送一个跨域的HTTP请求(Firefox, Google Chrome等通过XMLHTTPRequest实现,IE8下通过XDomainRequest实现),请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头,该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的 asset.php发送了一个跨域的HTTP请求,那么asset.php必须加入如下的响应头:

window.name

window 对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。那么我们可以在页面 A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给window.name,iframe加载完成之后,页 面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。这个方式非常适合单向的数据请求,而且协议简单、安 全。不会像JSONP那样不做限制地执行外部脚本。

 

server proxy

在数据提供方没有提供对JSONP协议或者 window.name协议的支持,也没有对其它域开放访问权限时,我们可以通过server proxy的方式来抓取数据。例如当www.a.com域下的页面需要请求www.b.com下的资源文件asset.txt时,直接发送一个指向 www.b.com/asset.txt的Ajax请求肯定是会被浏览器阻止。这时,我们在www.a.com下配一个代理,然后把Ajax请求绑定到这个代理路径下,例如www.a.com/proxy/, 然后这个代理发送HTTP请求访问www.b.com下的asset.txt,跨域的HTTP请求是在服务器端进行的,客户端并没有产生跨域的Ajax请求。这个跨域方式不需要和目标资源签订协议,带有侵略性,另外需要注意的是实践中应该对这个代理实施一定程度的保护,比如限制他人使用或者使用频率。

 
 

双向跨域

document.domain

通 过修改document的domain属性,我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域,比如www.a.com和 sub.a.com是不同的域,这时,我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它 们document的domain属性都修改为a.com,浏览器就会认为它们处于同一个域下,那么我们就可以互相调用对方的method来通信了。

 

FIM – Fragment Identitier Messaging

不 同的域之间,JavaScript只能做很有限的访问和操作,其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写,iframe也可以读写父窗口的URL,URL有一部分被称 为frag,就是#号及其后面的字符,它一般用于浏览器锚点定位,Server端并不关心这部分,应该说HTTP请求过程中不会携带frag,所以这部分 的修改不会产生HTTP请求,但是会产生浏览器历史记录。FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他 window的location来发送消息,并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录,而且有些浏览器 不支持onhashchange事件,需要轮询来获知URL的改变,最后,URL在浏览器下有长度限制,这个制约了每次传送的数据量。

 

Flash LocalConnection

页 面上的双向通信也可以通过Flash来解决,Flash API中有LocalConnection这个类,该类允许两个SWF之间通过进程通信,这时SWF可以播放在独立的Flash Player或者AIR中,也可以嵌在HTML页面或者是PDF中。遵循这个通信原则,我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递 数据的目的了。SWF通过LocalConnection交换数据是很快的,但是每次的数据量有40kb的大小限制。用这种方式来跨域通信过于复杂,而且 需要了2个SWF文件,实用性不强。

 

window.postMessage

window.postMessage是HTML5定义的一个很新的方法,这个方法可以很方便地跨window通信。由于它是一个很新的方法,所以在很旧和比较旧的浏览器中都无法使用。

 

Cross Frame

Cross Frame是FIM的一个变种,它借助了一个空白的iframe,不会产生多余的浏览器历史记录,也不需要轮询URL的改变,在可用性和性能上都做了很大 的改观。它的基本原理大致是这样的,假设在域www.a.com上有页面A.html和一个空白代理页面proxyA.html, 另一个域www.b.com上有个页面B.html和一个空白代理页面proxyB.html,A.html需要向B.html中发送消息时,页面会创建 一个隐藏的iframe, iframe的src指向proxyB.html并把message作为URL frag,由于B.html和proxyB.html是同域,所以在iframe加载完成之后,B.html可以获得iframe的URL,然后解析出 message,并移除该iframe。当B.html需要向A.html发送消息时,原理一样。Cross Frame是很好的双向通信方式,而且安全高效,但是它在Opera中无法使用,不过在Opera下面我们可以使用更简单的 window.postMessage来代替。

 
 

总结

跨域的方法很多,不同的应用场景我们都可以找到一个最合适的解决方 案。比如单向的数据请求,我们应该优先选择JSONP或者window.name,双向通信我们采取Cross Frame,在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

JS游戏引擎列表

这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来。关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示

游戏引擎

Name Latest Release License Type Notes
The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2
gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用
gTile 0.0.1 Tile based
Akihabara 1.3 GPL2/MIT Classic Repro 基于JS+HTML5的街机风格的游戏 3
The Javascript 2D Game Engine GPL 注重于重力、物理、碰撞检测方面,使用HTML5 Canvas 和IE的ExplorerCanvas 低CPU消耗. 4
The GMP Javascript Game Engine 1.7.4 (2010-10-31) GPL2/MIT 注重于数度的操作简化,”easy to learn and use” 5
Crafty 0.1 GPL/MIT 轻量级和模块化。 6
Effect Games
PropulsionJS 1.1 MIT 使用 HTML5 Canvas. 7
Flax Apache 2.0 还没有released。使用 GWT 和 HTML5。关注于Linux和Mac OS上的Web游戏开发。8
j5g3 GPLv3 还在开发过程中
cssgameengine 用于初学者。
jsGameSoup v74 LGPLv3
Javascript Gamelib 2.10
Sarien.net interpreter GPL 2D Adventure
jGen Isometric
Isogenic Engine Isometric
GammaJS 1.0 MIT 2.5D Platform
Tom’s Halls 3.0 Platform
Diggy BSD 基于 DHTML, 正在暂停中
Impact Commercial ($99) 2D
Rocket Engine Commercial
Aves Commercial?
Rosewood 2D
Cocos2D BSD 2D
GameJS MIT 2D CommonJs; 可以和 RingoJs server 整合,很像 PyGame; 仅支持Canvas;
xc.js BSD 2D
vegalib LPGL
ClanFX 0.0.1 Tile based
Canvex FPS
bdge Demo
js-verge 2D Demo
FlixelJS 2D Demo Port of Flixel (Flash) to JS. Announcement thread.
Unity3D Commercial (free version too) JS backend


3D 引擎

相比起成熟的游戏引擎来说,这些引擎没有包括诸如AI、声音、游戏逻辑、网络等等功能,不过,你可以使用别的一些JS库来辅助完成这些功能。

Name Latest Release License Notes
Pre3d Demo
three.js MIT
C3DL 2.1 (?) MIT
CopperLicht 1.3.2 (?)
JS3D 0.1a (2007-02-05) GPL
Sandy 3D 由Haxe编辑成 JS
O3D BSD
GLGE 0.5.2
SpiderGL

碰撞检测

动画

Name Latest Release License Notes
sprite.js VIEW Created with goal of having common JS framework for dsktop and web. 1

声音

图形

Canvas

Name Size (KB) License IE SVG Docs Notes
canto.js 56
fabric.js 97 yes yes yes Demo
gury.js 10 yes
CAKE 211
Mootools Canvas Library (MCL) 8
HTML5 Canvas Library 12
Layered Canvas Library (LCL) 21
Artisan.js 17
canvg 78.3 yes no
burst 56 yes 没有维护了
easel.js 33 MIT no no yes 尝试像Flash的DisplayList 一样在 Canvas 上创建图形。
processing.js
toxiclibsjs LPGL2.1 和 processing.js 结合和很好
CAAT MIT
Unveil.js
doodle.js BSD

注意,文件尺寸比较并不一定准确,因为有些lib并没有压缩过。

WebGL

Color

  • color.js – 颜色管理工具。 MIT

Math

其它

  • PlayMyCode – 在线游戏社区。使用 Quby (像Ruby) 编译成JavaScript.
  • Sphere RPG Engine – 为 RPG 游戏设计。使用 JavaScript
  • playtomic – Commercial service providing analytics, leaderboards etc. services for games. Provides HTML5/JS API in addition to AS2/AS3 ones.

(全文完)

JavaScript去除相同Array数组元素

  1. <style>  
  2. body, div , a {  
  3. color: #666666;  
  4. font-family: tahoma, verdana, ‘courier new’, sans-serif;  
  5. font-size: 12px !important;  
  6. font-size: 11px;  
  7. line-height: 18px;  
  8. background: white;  
  9. text-align: center;  
  10. }  
  11. a {  
  12. color: #2C78C5;  
  13. text-decoration:none;  
  14. }  
  15. a:hover {  
  16. /*color: red; 
  17. text-decoration:underline;*/  
  18. border-bottom: 1px dotted #ff0000;  
  19. text-decoration: none;  
  20. }  
  21. </style>  
  22. <style>  
  23. fieldset {  
  24. padding-right: 8px;  
  25. padding-left: 8px;  
  26. padding-top: 8px;  
  27. padding-bottom: 8px;  
  28. width: 78%;  
  29. }  
  30. legend {  
  31. margin-bottom: 0px;  
  32. font-size: 9pt;  
  33. }  
  34. #divheader {  
  35. width:100%;  
  36. text-align:right;  
  37. margin-top:0px;  
  38. padding-bottom:8px;  
  39. border-bottom:1px #cccccc solid;  
  40. }  
  41. #divfooter {  
  42. width:100%;  
  43. text-align:right;  
  44. margin-top:15px;  
  45. padding-top:8px;  
  46. border-top:1px #cccccc solid;  
  47. }  
  48. #divOut {  
  49. text-align:left;  
  50. /*float: left;*/  
  51. }  
  52. </style>  
  53. <fieldset>  
  54. <legend><b><a>菜单</a></b></legend>  
  55. <div id=“divheader”><b><a>专注Web技术 体验开发乐趣 — Redhat</a></b></div>  
  56. <div id=“divOut”>  
  57. <script language=“JavaScript”>  
  58. <!–  
  59. var arrData=new Array();  
  60. for(var i=0; i<1000; i++)  
  61. {  
  62.     arrData[arrData.length] = String.fromCharCode(Math.floor(Math.random()*26)+97);  
  63. }  
  64. //document.write(arrData+”<br/>”);  
  65. //方法一,普通遍历  
  66. function myArray_Unique(myArray)  
  67. {  
  68.     //var myArray=new Array(“a”,”a”,”c”,”a”,”c”,”d”,”e”,”f”,”f”,”g”,”h”,”g”,”h”,”k”);  
  69.     var haha=myArray;  
  70.     for(var i=0;i<myArray.length;i++)  
  71.     {  
  72.         for(var j=0;j<myArray.length;j++)  
  73.         {  
  74.             temp=myArray[i];  
  75.             if((i+j+1)<myArray.length&&temp==myArray[i+j+1]) //如果当前元素与后一个元素相等  
  76.             haha.splice(i+j+1,1);       //然后就移除下一个元素  
  77.         }  
  78.     }  
  79.     return haha;  
  80. }  
  81. //方法二  
  82. function getUnique(someArray)  
  83. {  
  84.     tempArray=someArray.slice(0);//复制数组到临时数组  
  85.     for(var i=0;i<tempArray.length;i++)  
  86.     {  
  87.         for(var j=i+1;j<tempArray.length;)  
  88.         {  
  89.             if(tempArray[j]==tempArray[i])  
  90.             //后面的元素若和待比较的相同,则删除并计数;  
  91.             //删除后,后面的元素会自动提前,所以指针j不移动  
  92.             {  
  93.                 tempArray.splice(j,1);  
  94.             }  
  95.             else  
  96.             {  
  97.                 j++;  
  98.             }  
  99.             //不同,则指针移动  
  100.         }  
  101.     }  
  102.     return tempArray;  
  103. }  
  104. //方法三 正则表达式 — 适用于字符型数组  
  105. function getUnique2(A)  
  106. {  
  107.     var str = “\x0f”+ A.join(“\x0f”);  
  108.     while(/(\w+)[^\1]*\1/.test(str))  
  109.     str = str.replace(“\x0f”+ RegExp.$1, “”);  
  110.     return str.substr(1).split(“\x0f”);  
  111. }  
  112. //方法四 关联结构  
  113. Array.prototype.unique = array_unique;  
  114. function array_unique()  
  115. {  
  116.     var o = new Object();  
  117.     for (var i=0,j=0; i<this.length; i++)  
  118.     {  
  119.         if (typeof o[this[i]] == ‘undefined’)  
  120.         {  
  121.             o[this[i]] = j++;  
  122.         }  
  123.     }  
  124.     this.length = 0;  
  125.     for (var key in o)  
  126.     {  
  127.         this[o[key]] = key;  
  128.     }  
  129.     return this;  
  130. }  
  131.   
  132. var d = new Date().getTime();  
  133. document.write(myArray_Unique(arrData));  
  134. d = new Date().getTime()-d;  
  135. document.write(“<br/>2000元素 方法一算法计耗时 “+ d +” 毫秒!<br/><br/>”);   //大约370ms~390ms左右  
  136. var d = new Date().getTime();  
  137. document.write(getUnique(arrData));  
  138. d = new Date().getTime()-d;  
  139. document.write(“<br/>2000元素 方法二算法计耗时 “+ d +” 毫秒!<br/><br/>”);   //大约360ms~380ms左右  
  140. var d = new Date().getTime();  
  141. document.write(getUnique2(arrData));  
  142. d = new Date().getTime()-d;  
  143. document.write(“<br/>2000元素 正则表达式 方法三算法计耗时 “+ d +” 毫秒!<br/><br/>”);//大约80ms左右  
  144. var d = new Date().getTime();  
  145. document.write(arrData.unique());  
  146. d = new Date().getTime()-d;  
  147. document.write(“<br/>2000元素 关联结构 方法四算法计耗时 “+ d +” 毫秒!<br /><br />”);//大约0ms~10ms左右  
  148. //–>  
  149. </script>