zoukankan      html  css  js  c++  java
  • 五段实用的js高级技巧

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

    复制代码 代码如下:

    (function () {
    var i = 0;
    function job() {
    console.log(i++);
    if (i < 10) {
    setTimeout(job, 1000);
    }
    }
    job();
    })();


    上面这个job函数就只会乖乖的执行10次.然后自动停止
    技巧二之高效的for循环
    应用案例:抛弃传统的循环方式

    复制代码 代码如下:

    (function () {
    var arr=[];
    for(var i=arr.length;i--;){
    doStuff();
    }
    })();


    这个方式为什么高效?
    一:少了一个参数l=arr.length;
    二:for语句中间那个玩意少进行了一次计算,以前的话是for(i=0;i<l;i++)这样的话中间的语句会先比较i<l 然后比较出来的结果在
    跟true 或者false比较,自然多了次计算
    技巧三之高效赋值
    应用案例:抛弃传统的if判断赋值

    复制代码 代码如下:

    var i=1,ret;
    ret=i!==1||true;
    console.log(ret);


    以上代码会很神奇的告诉你ret会是true.高效吧不用if(i!==1)了在赋值了
    技巧四之强悍的简短的attr
    应用案例:setAttribute,getAttribute.这个方法不仅可以设置标准的属性,还可以设置任意属性,兼容好

    复制代码 代码如下:

    function attr(elem, name, value) {
    var ret;
    if (value) {
    if (/msie [6-7].0/i.test(navigator.userAgent)) {
    ret = elem.getAttributeNode(name);
    if (!ret) { //ie6 7不合法的属性设置捕鸟,通过这里可以设置
    ret = document.createAttribute(name);
    elem.setAttributeNode(ret);
    }
    ret.nodeValue = value + "";
    } else {
    elem.setAttribute(name, value);
    }
    return elem;
    } else { //ie6 7有得属性获取不鸟
    ret = elem.getAttribute(name);
    fixIe = elem.getAttributeNode(name).nodeValue;
    ret = ret ? ret : fixIe ? fixIe : undefined;
    return ret;
    }
    }


    以上方法如何测试呢?
    attr(document.getElementById("test"), "classxx", "xx")
    alert(attr(document.getElementById("test"),"classxx"));
    技巧五之getElementsByClassName.
    应用案例 :以前js没什么框架的时候,大家都再模仿这个方法,看看今天我是怎么高效的模仿出它来.这也不愧是js初学者的经典代码

    复制代码 代码如下:

    (function () {
    var getElementsByClassName=function(cls,context){
    var root = context || document;
    return document.querySelectorAll ? root.querySelectorAll("." + cls) : root.getElementsByClassName ?
    root.getElementsByClassName(cls) : help("*", cls, context);
    }
    var help=function(tagName,cls,context){
    var root= context || document,
    ret=[],elems,i,
    rcls=new RegExp("^|\s+"+cls+"\s+|$");
    elems = root.getElementsByTagName(tagName || "*");
    for(i=elems.length;i--;){
    if(rcls.test(elem[i].className)){
    ret.push(elems[i]);
    }
    }
    return ret;
    }
    })();


    以上几个js淫荡技巧还是蛮实用的,前提是你没用使用别人的js框架,用原生创造效率为前提的代码.
    还是那句话js代码爱好者nothing原创,谢谢大家支持,觉得写得好可以顶下,或者把链接发给朋友

    出处至 :脚本之家   http://www.jb51.net/article/29146.htm

  • 相关阅读:
    jquery获取当前元素的坐标
    JS获取鼠标点击位置坐标
    基于jquery fly插件实现加入购物车抛物线动画效果
    PHP下载远程图片的方法
    IQ测试
    PHP面试题
    Apache服务器错误问题Internal Server Error
    php获取当前浏览器完整地址
    jQuery检测滚动条到达顶部或底部
    scrapy 命令
  • 原文地址:https://www.cnblogs.com/bcphp/p/7080140.html
Copyright © 2011-2022 走看看