zoukankan      html  css  js  c++  java
  • 七个开法者经常忽略或误用的JavaScript基本知识

    翻译自 http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly ,我觉得4、5、6条还是蛮有用的哈。

    1.  String.prototype.replace: /g and /i 标识

    让很多新手疑惑的是,JavaScript里的字符串的replace方法不会替换所有匹配的字符,而是只替换第一次匹配的字符。当然熟悉JavaScript的老手知道我们需要一个正则表达式和一个/g标识。

    // 错误的用法
    str ="David is an Arsenal fan, which means David is great";
    str.replace("David","Darren");// "Darren is an Arsenal fan, which means David is great"
    // 想要的效果
    str.replace(/David/g,"Darren");// "Darren is an Arsenal fan, which means Darren is great"

    另一种常犯的错误是当字符串大小写不敏感时不使用 /i 标志来匹配

    str.replace(/david/gi,"Darren")// "Darren will always be an Arsenal fan, which means Darren will always be great"

    每一个JavaScript开发者都被每一个标志坑过,所以要保证在适合的时候使用这些标志。

    2.  Array-Like Objects 和 Array.prototype.slice

    Array的slice方法主要用来提取数组中的一部分,很多开发者不知道slice方法可以将类数组的对象转换成真正的数组,比如 arguments,NodeLists。

    var nodesArr =Array.prototype.slice.call(document.querySelectorAll("div"));// "true" array of DIVs
    
    var argsArr =Array.prototype.slice.call(arguments);// changes arguments to "true" array

    你甚至可以用slice克隆一个数组:

    var clone = myArray.slice(0);// naive clone

    Array.prototype.slice 绝对是JavaScript世界中的精华,即时JS熟手也不一定知道它全部的威力。

    3.  Array.prototype.sort

     Array sort 方法被广泛使用,很多开发者以为sort方法做这样的事情:

    [1,3,9,2].sort();// Returns: [1, 2, 3, 9]

    这样是对的,但是sort有更强大的用法,像这样:

    [
        { name: "Robin Van PurseStrings", age: 30 },
        { name: "Theo Walcott", age: 24 },
        { name: "Bacary Sagna", age: 28  }
    ].sort(function(obj1, obj2) {
        // Ascending: first age less than the previous
        return obj1.age - obj2.age;
    });
        // Returns:  
        // [
        //    { name: "Theo Walcott", age: 24 },
        //    { name: "Bacary Sagna", age: 28  },
        //    { name: "Robin Van PurseStrings", age: 30 }
        // ]

    4.  Array 长度截断

    没有一个开发者没被JavaScript的传递对象引用的特性坑过,常常这样来清空一个数组,但却错误的创建了一个新的数组。

    var myArray = yourArray =[1,2,3];// :(
    myArray =[];// "yourArray" 还是 [1, 2, 3]
    // 正确的方法,保持引用
    myArray.length =0;// "yourArray" and "myArray" 都变成了 []

    5.  push方法来合并数组

    我在第二条展示了Array的slice方法的强大能力,所以push方法有这样的能力你也不会见怪了。这次我们用push方法来合并数组

    var mergeTo =[4,5,6];
    var mergeFrom =[7,8,9];
    Array.prototype.push.apply(mergeTo, mergeFrom);
    mergeTo;// is: [4, 5, 6, 7, 8, 9]

    6. 高效的特性检测或者属性检测

    我们常常这样来检测一个浏览器的特性:

    if(navigator.geolocation){
    // Do some stuff
    }

    当然,这能正常工作,但它不是很高效。因为对象的方法检测在浏览器中可能会导致分配资源,上面的代码在某些浏览器曾导致内存泄漏。更好的方法检测对象的key:

    if("geolocation"in navigator){
    // Do some stuff
    }

    这样的key检测使用简单并且避免了很多问题,比如一个属性的值是false,那么你的检测会失败,即使key存在。

    7. Event preventDefault 和 stopPropagation

    当元素被点击时(比如链接),我们经常触发自己的函数。显然,我们不希望浏览器继续访问这个链接,所以我们使用JavaScript库的Event.stop方法:

    $("a.trigger").on("click",function(e){
        e.stop();
    // Do more stuff
    });

    这个方法的问题在于它不仅阻止了浏览器的默认行为,而且阻止了事件冒泡。也就是说,其他的事件监听器不会监听到这个事件。

    所以最好是直接使用preventDefault方法。

    一些开发者可能会说:“我知道这些!”,但是他们也常常犯这样的错误,所以不要忽略这些小的细节,它们可能造成大的差异。

    附:preventDefault与return false 的区别  http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

  • 相关阅读:
    进程池,线程池,协程,gevent模块,协程实现单线程服务端与多线程客户端通信,IO模型
    线程相关 GIL queue event 死锁与递归锁 信号量l
    生产者消费者模型 线程相关
    进程的开启方式 进程的join方法 进程间的内存隔离 其他相关方法 守护进程 互斥锁
    udp协议 及相关 利用tcp上传文件 socketserver服务
    socket套接字 tcp协议下的粘包处理
    常用模块的完善 random shutil shevle 三流 logging
    day 29 元类
    Django入门
    MySQL多表查询
  • 原文地址:https://www.cnblogs.com/friskfly/p/3251287.html
Copyright © 2011-2022 走看看