转：五段实用的js淫荡技巧

标签： Javascript | 发表时间：2011-12-19 22:40 | 作者：gouki
出处：http://www.neatstudio.com/

奇技淫巧？其实不能算是什么特别的东西，但有些小技巧还是可以试试的，比如说第一个，我们一般都会是用setInterval，然后每1秒执行一次，10秒后取消，但setTimeout也可以。只是意义不大而已喽
原文来自：http://www.cnblogs.com/nothingbrother/archive/2011/12/19/2293131.html

应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInterval,技巧一就是克服这个问题

JavaScript代码
  1. (function () {  
  2.     var i = 0;  
  3.     function job() {  
  4.         console.log(i++);  
  5.         if (i < 10) {  
  6.             setTimeout(job, 1000);  
  7.         }  
  8.     }  
  9.     job();  
  10.       
  11. })();  

上面这个job函数就只会乖乖的执行10次.然后自动停止

技巧二之高效的for循环 

应用案例:抛弃传统的循环方式

JavaScript代码
  1. (function () {  
  2.    var arr=[];  
  3.    for(var i=arr.length;i--;){  
  4.       doStuff();  
  5.    }  
  6. })();  

这个方式为什么高效?

一:少了一个参数l=arr.length;

二:for语句中间那个玩意少进行了一次计算,以前的话是for(i=0;i<l;i++)这样的话中间的语句会先比较i<l  然后比较出来的结果在

跟true 或者false比较,自然多了次计算

技巧三之高效赋值 

应用案例:抛弃传统的if判断赋值

JavaScript代码
  1. var i=1,ret;  
  2.   ret=i!==1||true;  
  3.   console.log(ret);  

以上代码会很神奇的告诉你ret会是true.高效吧不用if(i!==1)了在赋值了

技巧四之强悍的简短的attr 

应用案例:setAttribute,getAttribute.这个方法不仅可以设置标准的属性,还可以设置任意属性,兼容好

JavaScript代码
  1. function attr(elem, name, value) {  
  2.     var ret;  
  3.     if (value) {  
  4.         if (/msie [6-7]\.0/i.test(navigator.userAgent)) {  
  5.             ret = elem.getAttributeNode(name);  
  6.             if (!ret) {   //ie6 7不合法的属性设置捕鸟,通过这里可以设置  
  7.                 ret = document.createAttribute(name);  
  8.                 elem.setAttributeNode(ret);  
  9.             }  
  10.             ret.nodeValue = value + "";  
  11.         } else {  
  12.             elem.setAttribute(name, value);  
  13.         }  
  14.         return elem;  
  15.     } else {  //ie6 7有得属性获取不鸟  
  16.         ret = elem.getAttribute(name);  
  17.         fixIe = elem.getAttributeNode(name).nodeValue;  
  18.         ret = ret ? ret : fixIe ? fixIe : undefined;  
  19.         return ret;  
  20.     }  
  21. }  

以上方法如何测试呢?

 attr(document.getElementById("test"), "classxx", "xx")
 alert(attr(document.getElementById("test"),"classxx"));

技巧五之getElementsByClassName. 

应用案例 :以前js没什么框架的时候,大家都再模仿这个方法,看看今天我是怎么高效的模仿出它来.这也不愧是js初学者的经典代码

JavaScript代码
  1. (function () {  
  2.    var getElementsByClassName=function(cls,context){  
  3.       var root = context || document;  
  4.     return document.querySelectorAll ? root.querySelectorAll("." + cls) : root.getElementsByClassName ?  
  5.            root.getElementsByClassName(cls) : help("*", cls, context);  
  6.    }  
  7.    var help=function(tagName,cls,context){  
  8.         var root= context || document,  
  9.             ret=[],elems,i,  
  10.             rcls=new RegExp("^|\\s+"+cls+"\\s+|$");  
  11.         elems = root.getElementsByTagName(tagName || "*");  
  12.         for(i=elems.length;i--;){  
  13.             if(rcls.test(elem[i].className)){  
  14.               ret.push(elems[i]);  
  15.             }  
  16.         }  
  17.         return ret;  
  18.    }  
  19. })();  
以上几个js淫荡技巧还是蛮实用的,前提是你没用使用别人的js框架,用原生创造效率为前提的代码.

----------

上面的代码其实真要说的话也就这样样了，但如果你以前没有接触过原生代码，还是可以折腾的。比如最后一个函数，在JS的高版本中（或者说FF5以上，Safari5以上，）都在支持了querySelector了。这个玩意可是直接支持.class或者#id之类（就象jQuery的选择器）

多学一点东西还是有好处的。

 

 

 

 

相关 [段实 js 技巧] 推荐：

转：五段实用的js淫荡技巧

- - 膘叔
其实不能算是什么特别的东西，但有些小技巧还是可以试试的，比如说第一个，我们一般都会是用setInterval，然后每1秒执行一次，10秒后取消，但setTimeout也可以. 原文来自：http://www.cnblogs.com/nothingbrother/archive/2011/12/19/2293131.html.

冷门JS技巧 - think_fish

- - 博客园_首页
像 console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个 帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来. 现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容.

解决JS脚本兼容的几个小技巧

- - BlogJava-首页技术区
1.使用HTML注释掉脚本. 关于兼容性我们第一个要考虑的问题应该是运行的平台是否支持客户端脚本. 通常的做法是将脚本主体包括在一条HTML注释中：. 这样不支持脚本的浏览器会忽略标签并把其他代码当作一条HTML注释处理，而支持脚本的浏览器则把""用"//"进行单行注释.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了，但講了大概又會被戰. 相較於英文維基百科，中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的，而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識，而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識，所以有自覺的百科編輯者反而是少數；中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一：传this参数调用方法：.  方式二：js方法中通过选择器获取节点：. //此处删除的是a节点 }. 方式三：通过jQuery方式获取节点：（尚未测试，有待测试. 此处a标签传this到js中，js通过this（即a节点）取parent（即p节点）. （1）p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于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.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库，方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍，交互式的方式比单纯的文字说明更简洁易懂. 不废话了，赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏） 演示：http://mrdoob.github.com/three.js/.