零碎知识点

ゝ一纸荒年。 2022-06-05 01:28 228阅读 0赞

# [IE浏览器下，输入框最后不显示X][IE_X] #

IE浏览器下，输入框最后不显示X。设置：

.login-input::-ms-clear \{  
display: none;  
\}

.login-input::-ms-reveal \{  
display: none;  
\}

2。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title> 修改input上下箭头的属性</title>  
<style type="text/css">  
input\[type='date'\]::-webkit-inner-spin-button \{  
    margin-top: 20px;  
  \}  
</style>  
</head>  
<body>  
  
<input type="date"  style="height: 44px;  line-height:44px; font-size: 20px;" name="" id="" value="" />  
  
</body>  
</html>

# [45个实用的JavaScript小贴士、小技巧和最佳实践][45_JavaScript] #

*  [java][]

[两仪][Link 1] 2015年01月05日发布

*  赞  |   4收藏  |  20
 *  1.1k 次浏览

## 翻译介绍 ##

翻译标题：45 Useful JavaScript Tips, Tricks and Best Practices

翻译来源：[http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/][http_modernweb.com_2013_12_23_45-useful-javascript-tips-tricks-and-best-practices]

如有翻译不正确的地方，请在下放评论出反馈。

## 翻译正文 ##

1.  第一次声明变量时，请不要忘记使用 `var` 关键字声明
2.  使用 `===` 代替 `==`
    
        [10] === 10    // is false
        [10]  == 10    // is true
        '10' == 10     // is true
        '10' === 10    // is false
         []   == 0     // is true
         [] ===  0     // is false
         '' == false   // is true but true == "a" is false
         '' ===   false // is false
3.  undefined, null, 0, false, NaN, '' (空字符串) 转成布尔值都为`false`.
4.  每行代码的末尾最好都加上个分号
5.  最好给对象都添加上构造函数
    
        function Person(firstName, lastName){
            this.firstName =  firstName;
            this.lastName = lastName;        
        }  
        
        var Saad = new Person("Saad", "Mousliki");
6.  在使用`typeof`,`instanceof`和`constructor`尽量小心。
7.  善用匿名自调用函数(IIFE)
    
        (function(){
            // some private code that will be executed automatically
        })(); 
        (function(a,b){
            var result = a+b;
            return result;
        })(10,20)
8.  在一个数组中获取一个随机的项目
    
        var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
        var  randomItem = items[Math.floor(Math.random() * items.length)];
9.  在指定范围内获取一个随机数
    
        var x = Math.floor(Math.random() * (max - min + 1)) + min;
10. 生成一个0到指定最大值的数字数组。
    
        var numbersArray = [] , max = 100;
        
        for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100]
11. 随机生成指定长度的字符串
    
        function generateRandomAlphaNum(len) { var rdmString = ""; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); }
12. 对一个数字数组随机排序
    
        var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
        numbers = numbers.sort(function(){ return Math.random() - 0.5});
13. 去掉字符串的前后空格
    
        String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g, "");};
14. 将一个数组添加到另一个数组
    
        var array1 = [12 , "foo" , {name "Joe"} , -2458];
        
        var array2 = ["Doe" , 555 , 100];
        Array.prototype.push.apply(array1, array2);
15. 将`arguments`转换成数组
    
        var argArray = Array.prototype.slice.call(arguments);
16. 验证给定参数是否为数字
    
        function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); }
17. 验证给定的参数是否为数组
    
        function isArray(obj){
            return Object.prototype.toString.call(obj) === '[object Array]' ;
        }
18. 获取数字数组中的最大值和最小值
    
        var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
        var maxInNumbers = Math.max.apply(Math, numbers); 
        var minInNumbers = Math.min.apply(Math, numbers);
19. 清空一个数组
    
        var myArray = [12 , 222 , 1000 ];  
        myArray.length = 0; // myArray will be equal to [].
20. 不要使用`delete`来删除数组中的项目
    
    请使用splice来代替deletel来删除数组中的项目，使用delete会用undefinedl来替换数组中被删除的哪一项。
    
    delete
    
        var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
        items.length; // return 11 
        delete items[3]; // return true 
        items.length; // return 11 
        /* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
    
    splice
    
        var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
        items.length; // return 11 
        items.splice(3,1) ; 
        items.length; // return 10 
        /* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
21. 用长度来截取一个字符串
    
        var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
        myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
22. 在条件判断里面使用逻辑`AND`或者`OR`
    
        var foo = 10;  
        foo == 10 && doSomething(); // 等效 if (foo == 10) doSomething(); 
        foo == 5 || doSomething(); // 等效 if (foo != 5) doSomething();
    
    默认值取值
    
        function doSomething(arg1){ 
            arg1 = arg1 || 10; // 如果arg1没有被赋值，则取10
        }
23. 使用map()函数来遍历数组
    
        var squares = [1,2,3,4].map(function (val) {  
            return val * val;  
        }); 
        // squares will be equal to [1, 4, 9, 16]
24. 获取指定精度的数字
    
        var num =2.443242342;
        num = num.toFixed(4);  // num will be equal to 2.4432
25. 浮点数小数点的问题
    
        0.1 + 0.2 === 0.3 // is false 
        9007199254740992 + 1 // is equal to 9007199254740992  
        9007199254740992 + 2 // is equal to 9007199254740994
    
    你可以使用`toFixed(`)或者`toPrecision()`来解决这类问题
26. 当使用`for-in`来迭代一个对象时，检查其属性
    
        for (var name in object) {  
            if (object.hasOwnProperty(name)) { 
                // do something with name                    
            }  
        }
    
    这段代码可以用来避免迭代自己内部的属性
27. 逗号运算符
    
        var a = 0; 
        var b = ( a++, 99 ); 
        console.log(a); // a will be equal to 1 
        console.log(b); // b is equal to 99
28. 当一个变量需要被查询或者计算的时候，可以把它缓存起来
    
        var navright = document.querySelector('#right'); 
        var navleft = document.querySelector('#left'); 
        var navup = document.querySelector('#up'); 
        var navdown = document.querySelector('#down');
29. 使用`isFinite()`来验证一个参数在传递之前
    
        isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undefined); // false isFinite(); // false isFinite(null); // true !!!
30. 避免在数组中使用负值索引
    
        var numbersArray = [1,2,3,4,5]; 
        var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
        numbersArray.splice(from,2);    // will return [5]
31. 序列和解析一个JSON
    
        var person = {
                   name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
        var stringFromPerson = JSON.stringify(person); 
        /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */ 
        var personFromString = JSON.parse(stringFromPerson);  
        /* personFromString is equal to person object  */
32. 避免使用 `eval()` 桌和 `Function` 构造函数
    
        var func1 = new Function(functionCode); var func2 = eval(functionCode);
33. 避免使用使用 `with()`
34. 避免使用 `for-in` 来迭代一个数组
35. 对于`setTimeout()` 和 `setInterval()`,最好传递函数而不是字符串。
36. 使用`switch/case`来替代多重`if/else`
37. 把switch/case用在数据分类上
    
        function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); // will return "Baby"
38. 创建一个对象，并且他的原型是我们指定的对象。
    
        function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype= object; return new OneShotConstructor(); } clone(Array).prototype ; // []
39. 一个 `HTML` 实体替换函数
    
        function escapeHTML(text) { var replacements= { "<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }
40. 避免在循环中使用 `try-catch-finally`
    
    不好的用法：
    
        for (i = 0, len = object.length; i <len; i++) {  
            try {  
                // do something that throws an exception 
            }  
            catch (e) {   
                // handle exception 
            } 
        }
    
    好的用法：
    
        var object = ['foo', 'bar'], i;  
        try { 
            for (i = 0, len = object.length; i <len; i++) {  
                // do something that throws an exception 
            } 
        } 
        catch (e) {   
            // handle exception 
        }
41. 对`XMLHttpRequests`设置定时失效的时间
    
        var xhr = new XMLHttpRequest (); 
        xhr.onreadystatechange = function () {  
            if (this.readyState == 4) {  
                clearTimeout(timeout);  
                // do something with response data 
            }  
        }  
        var timeout = setTimeout( function () {  
            xhr.abort(); // call error callback 
        }, 60*1000 /* timeout after a minute */ ); 
        xhr.open('GET', url, true);  
        
        xhr.send();
42. 解决 `WebSocket`的失效时间
    
        var timerID = 0; 
        function keepAlive() { 
            var timeout = 15000;  
            if (webSocket.readyState == webSocket.OPEN) {  
                webSocket.send('');  
            }  
            timerId = setTimeout(keepAlive, timeout);  
        }  
        function cancelKeepAlive() {  
            if (timerId) {  
                cancelTimeout(timerId);  
            }  
        }
43. [记住使用原生的运算符代替函数调用][Link 2]。使用[VanillaJS][].
    
        示例demo
        
        var min = Math.min(a,b); 
        A.push(v);
        
        使用下面代替上面的demo
        
        var min = a < b ? a : b; 
        A[A.length] = v;
44. 不要忘记在编码的时候规范美化。在部署的时候用`JSLIint`和压缩
45. `JavaScript` 是令人敬畏。[学习JavaScript最好的资源][JavaScript]

[IE_X]: http://www.cnblogs.com/maoyazhi/p/7486139.html
[45_JavaScript]: https://segmentfault.com/a/1190000002463846
[java]: https://segmentfault.com/t/java/blogs
[Link 1]: https://segmentfault.com/u/liangyi
[http_modernweb.com_2013_12_23_45-useful-javascript-tips-tricks-and-best-practices]: http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/
[Link 2]: https://dev.opera.com/articles/efficient-javascript/?page=2#primitiveoperator
[VanillaJS]: http://vanilla-js.com/
[JavaScript]: http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript