手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

JS 刷新页面的几个技巧

Submitted by gouki on 2011, April 24, 9:29 PM

做WEB开发，有时候会需要在获取数据后重新刷新页面，如果删除一条数据时，就需要刷新一下显示。以前很多时候，我都是用location.reload()来解决的。
今天再看到某篇 文章的时候才发现，原来还有那么多的技巧，一下子傻眼了。

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    

第一种，我真的没想过。第三种，第七种我看过，其他的还。。。。真没有注意过。
我OUT了。。

Tags: js, refresh

Javascript | 评论:0 | 阅读:21155

JS实现的街头霸王

Submitted by gouki on 2011, April 11, 10:21 AM

自从canvas越来越被大多数人接受后，基于它的游戏也越来越多了。。。
而这个，居然没用canvas也能实现这样的效果，看这里：http://www.cnblogs.com/Random/archive/2011/04/11/2011962.html

作者这么说了：
继 《天机》 之后，这次又山寨了个名为《街斗霸主》的经典格式游戏《街头霸王》的模仿版Demo，花了几个月的业余时间写了这么个东西，算是对目前的技术学习的一种练习吧。

其实这种练习的结果不是很重要，主要是体会其中的过程，虽然大部分的时间是在痛苦中渡过，但也是有很多收获的，同时也暴露出很多技术方面的不足，也为以后的学习明确了一些目标。

技术方面因为考虑到大部分IE用户（而且是非IE9），所以没有用HTML5的canvas，用的div的方式处理的，这样挑战也相对大了一些，

不过确实，性能上还是不理想，IE下的表现还是比较糟糕（特别是IE6。。。恩。。。- -！）。
目前兼容IE6/7/8(理论上也兼容IE9，只是没有测试)，safari，FF3.5+(因为FF2.0/3.0不支持水平翻转的样式。。- -！)，Chrome，Opera。
自己写了一个小型框架，包括了开发流程和js类库，类库用了OOP Like的方式包了个语法糖衣，看上去还算是像个OOP的样子，不过因为为了追求“优雅”，直接扩展了function的prototype，所以不建议在其它地方使用。
框架开发的整体思路就是用PHP作后端代码合并输出，js代码里用$import去建立了各个代码文件之间的关系，然后页面引用合并js的PHP文件，该模式需要在本地建立一个web服务器才能作测试，并且需要设置hosts为 127.0.0.1 aralork

　　游戏说明

 

　　　　游戏是一个Demo版本，实现了核心的整体流程。游戏分为“单人游戏”模式、“双人对战”模式和“练习模式”三种玩法，不过其实实现都是一样，只是改改初始化的参数而已，挺坑爹的。。。

　　　　游戏只需要键盘操作，不需要鼠标，

　　　　菜单的操作是方向键移动，Enter键选择，ESC键取消；

　　　　玩家1的操作:

　　　　   上：W，下：S，左：A，右：D，拳：J / K / L，腿：U / I / O

 　　　　玩家2的操作:

　　　　  上：↑，下：↓，左：←，右：→，拳：小键盘 1 / 2 / 3，腿：小键盘 4 / 5 / 6

　　　　这里的 ↑ ↓ ← → 代表方向键。

　　　　游戏演示地址

 　　　　完整源代码下载

Tags: js, 街霸, div, canvas

Javascript | 评论:1 | 阅读:20221

浏览器对JavaScript代码执行的限制

Submitted by gouki on 2011, March 21, 11:36 PM

这是相对比较值得关注的内容，要知道浏览器对JS的解析都是通过他们自带的一些引擎来牏的。比如chrome所谓的V8引擎，都会有针对性的进行加速和处理，再者比如说IE对JS的规范支持又是比较延后的。因此，了解一下各个浏览器对JS代码执行的限制等，对于开发中遇到的问题也会有一定的了解。。

好吧，原文来自于：“http://rockux.com/archives/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9javascript%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E7%9A%84%E9%99%90%E5%88%B6”

浏览器的用户界面和JavaScript代码共享同一个处理进程。无论是浏览器需要响应一个菜单的点击，还是渲染一个页面或者执行Ajax请求，每一个事件都会添加到一个队列中。当浏览器空闲的时候，就会继续执行队列中的任务。

浏览器的线程

实际上，在高端一些的浏览器中都不是只有一个线程。作为极端的例子，IE9和Chrome会为每一个tab生成一个系统的进程。然而，对于每一个页 面来说，仍然只有一个事件处理的队列，也就意味着一次只能执行一个任务。这很必要，因为浏览器或者你的JS都可能会去更改HTML的内容。

不难理解，浏览器必须要限制你的JS执行的时间。如果执行时间很长，会锁死进程甚至导致系统崩溃。这就是你会看到这个“无响应的脚本”的对话框原因。

但是浏览器怎么来决定一个代码是不是执行的时间超长了呢？正如你所想的，5个流行的浏览器的处理方式都不一样。

IE

IE对JS代码的限制是500万条。

Firefox

FireFox使用时间来限制，最多是10秒。

Safari

Safari也是限制5秒。

Chrome

Chrome没有特别的限制，但是他会去检测浏览器是否崩溃或者没有响应。

Opera

Opera也没有限制。但是浏览器不会引起系统的崩溃，你在这个停止响应的时候还可以继续开Tab。

有的浏览器允许你自己配置限制的数额，但是不推荐这样改。这样有的人可能用这种办法来修复“不能响应”的页面。你可以搜一下，但是通过修改浏览器的配置来解决响应的问题不是最终的解决办法。

那么如何才能防止JavaScript抛出这样的错误呢？最佳的解决办法就是避免在客户端执行需要长时间运行的函数。理想情况下，所有的函数都应该在几十毫秒内解决问题。更多更复杂的计算应该交给后端然后通过刷新页面或者异步方法来处理。

然而，我们应该意识到减少客户端的压力在现在这种JS大型应用中不是最佳的办法。还有一些别的办法，我们后面会讲到。

 

Javascript | 评论:0 | 阅读:18802

收藏的关于JS的一些文章

Submitted by gouki on 2011, March 19, 9:53 PM

这是一些链接，纯收藏，其实我都用firefox的read it later保存下来过，只是我在这里做一点分享罢了。。。

好了。。先贴这么多。。。

 

 

Tags: 收藏, js

Javascript | 评论:0 | 阅读:18142

变量的顺序

Submitted by gouki on 2011, March 11, 4:37 PM

我是在一个博客上看到这个代码的。同时也理所当然的认为值是我想象中的那样，然而，现实无情的击破了我的幻想。。代码如下：

JavaScript代码
  1. var x = 1; 
  2. function fn(){  
  3.     alert(x);  
  4.     var x = 2; 
  5. }  
  6. fn();  
  7. alert(x);  

看到上面的代码，如果清楚全局变量和局部变量的或许都会说，输出1,1，但事实真是这样的吗？COPY出来到浏览器中运行一下，你会发现，第一次alert居然是undefined。。。这是为什么 ？真相呢？真相在哪时在？？？

让我们翻开这篇博客看一下。。。http://www.cnblogs.com/snandy/archive/2011/03/11/1980399.html ，作者的标题是JavaScript中同名标识符优先级。

一，局部变量先使用后声明，不影响外部同名变量（代码略，就是我上面那一段 ）

第一点，函数fn内第一句输出x，x是在第二句才定义的。这在JS中是允许的，这里的允许是指不会出现语法错误程序可以运行。
但在其它语言如C，Java中却是不允许的。变量必须先声明后使用，如

Java代码
  1. public class Test {  
  2.     public static void main(String[] args) {  
  3.         System.out.println(x); // 先使用  
  4.         int x = 10; // 后声明  
  5.     }  
  6. }  

Java中编译器会提示错误，程序无法运行。
第二点，函数fn内的局部变量x不会影响到外部的变量x。即fn内alert输出不是1，而是undefined。

二，形参优先级高于函数名

JavaScript代码
  1. function fn(fn){  
  2.     alert(fn);  
  3. }  
  4. fn('hello'); // --> "hello"  
可以看到函数名和形参同名都是fn，输出的是字符串"hello"，却不是函数fn的函数体(fn.toString())。

三，形参优先级高于arguments

JavaScript代码
  1. function fn(arguments){  
  2.     alert(arguments);  
  3. }  
  4. fn('hello'); // --> "hello"<br>  

arguments对象可以直接在函数内使用，是语言本身提供的一个 特殊标识符 。
这里刚好将形参声明成与其同名。输出可以看到是"hello"而非"[object Object]"，即形参arguments覆盖了语言本身提供的真正的arguments。

四，形参优先级高于只声明却未赋值的局部变量

JavaScript代码
  1. function fn(a){  
  2.     var a;  
  3.     alert(a);  
  4. }  
  5. fn('hello'); // --> "hello"  

函数fn形参为a，函数内第一句仅声明局部变量a，却并未赋值。从输出结果是"hello"而非undefined可以看出形参a优先级高于仅声明却未赋值的局部变量a。

五，声明且赋值的局部变量优先级高于形参

JavaScript代码
  1. function fn(a){  
  2.     var a = 1;  
  3.     alert(a);  
  4. }  
  5. fn('hello'); // --> "1"  

 

函数fn形参为a，函数内第一句仅声明局部变量a，赋值为1。从输出结果是"1"而非"hello"可以看出声明且赋值的局部变量a优先级高于形参a。

 

六，形参赋值给同名局部变量时

JavaScript代码
  1. function fn(a){  
  2.     var a = a;  
  3.     alert(a);  
  4. }  
  5. fn('hello');  
暂不运行，猜测下结果。如果按照第五点：声明且赋值的局部变量优先级高于形参。那么a将是undefined。但实际上a是"hello"，即右a是形参a，左a才是局部变量a。

大小: 13.82 K 尺寸: 454 x 96 浏览: 1684 次 点击打开新窗口浏览全图

这里的两个a互不干扰，谁也没覆盖谁。这与刚刚说的赋值的局部变量优先级高于形参又矛盾了。但引擎这样做的确是我们想要的，因为并不希望var a = a后a是undefined。

---EOF---
看了上面的内容，你懂了多少？

Javascript | 评论:0 | 阅读:17646

Records:306«‹17181920212223242526›»