JavaScript写库前的准备工作-javascript 库

能够独立的书写一个库，是很多开发者或者HR认为区分技能的一个标志，而且还存在一个鄙视链：

切图的<用JS<从网上趴代码<自己写简单js<自己写组件<自己数据交互<自己写库给别人用<写nodejs等后台js<自己写后台组件和数据库交互的，

虽然我觉得这个鄙视链很幼稚，但是不能不说很多人拿自己写库作为一个技能区分标准，不管怎样写库都是一个提升技能的好办法，然而并不难。

好，我们看看写库之前需要什么准备知识。

1.严格模式

很多库一开始就是这样子的，

(function(global){ 
    //严格模式 
    'use strict' 
})(window);

不墨迹直接说严格模式的好处，

1.更利于调试，当不定义变量直接用的时候如果不适用严格模式不会报错，而是结果不对。这个很难调试，因为大部分时间这种错误是你单词拼写错误，不报错。

2.防止出现低级错误，除了上面的问题，还有比如if里面定义函数造成问题的情况

3.修复了很多不利的bug和擅长无用功能，比如with。

听不懂我上面那三条也没事记住一个字就够了，以后必须用!

2.初始化。

举个例子写一个jquery的css方法，简单点儿，只实现设置宽高颜色。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>大彬哥版权所有翻录必究</title> 
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"> 
    <meta name="copyright" content="尼古拉斯·屌·大彬哥"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <style> 
 
    </style> 
    <script> 
        function css(obj,width,height,color){ 
 
            obj.style['width'] = width+'px'; 
            obj.style['height'] = height+'px';; 
            obj.style['background'] = color; 
        } 
        document.addEventListener('DOMContentLoaded',function(){ 
            var oDiv = document.querySelector('#div1'); 
            css(oDiv,200,100,'red'); 
        },false); 
    </script> 
 
</head> 
<body> 
    <div id="div1"></div> 
</body> 
</html>

这样写至少有两问题，

1.参数多了我记不住顺序，就死翘翘了。

2.参数多了我忘写两个，就死翘翘了。

怎么解决用json的无序和增加默认值。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>大彬哥版权所有翻录必究</title> 
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"> 
    <meta name="copyright" content="尼古拉斯·屌·大彬哥"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <style> 
 
    </style> 
    <script> 
        function css(obj,json){ 
            json.width = json.width||100; 
            json.height = json.height||100; 
            json.background =  json.background||'#cccccc';    
            obj.style['width'] = json.width+'px'; 
            obj.style['height'] = json.height+'px';; 
            obj.style['background'] = json.background; 
        } 
        document.addEventListener('DOMContentLoaded',function(){ 
            var oDiv = document.querySelector('#div1'); 
//            css(oDiv,{width:200,height:50,background:'red'}); 
            css(oDiv,{background:'red'}); 
        },false); 
    </script> 
</head> 
<body> 
    <div id="div1"></div> 
</body> 
</html>

简单吧。

3.数据类型判断

我们有时候经常要判断用户输入的数据类型。上代码，重点是对象和数组的判断。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>大彬哥版权所有翻录必究</title> 
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"> 
    <meta name="copyright" content="尼古拉斯·屌·大彬哥"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <style> 
 
    </style> 
    <script> 
        //usbnofunc 
        // undefine string boolean number  
        //这几个直接用typeof 不考虑new Number这些情况，神经病才这么用,这里不墨迹 
       // alert(typeof 'abc' === 'string'); 
        //看看null,不要以为null类型是object 这孙子是一个bug 
//        alert(typeof null === 'object'); 
        // 判断数组 
        var arr = [1,3]; 
        function isArray(value){ 
            if (typeof Array.isArray === "function") { 
                return Array.isArray(value); 
            }else{ 
                return Object.prototype.toString.call(value) === "[object Array]"; 
            } 
        } 
        alert(isArrayFn(arr));// true   
         
    </script> 
</head> 
<body> 
    <div id="div1"></div> 
</body> 
</html>

知道你可能不了解数组的判断方式，但是我想告诉你，两件事：

1.看别人的库很有必要，因为你写的不周全，人家已经很周全拿过去用就行了，前提是你知道原理。

2.不是每一个东西都会用到，不要为了学一个东西而去学，你一定是解决实际问题，比如很多人不会用call,bind,apply。其实是因为他们不知道用在哪，学以致用。

看别人库是最快的学习方法，推荐两个库，一个是loadash，一个是underscore.

【本文为51CTO专栏作者“面包理想学院”的原创稿件，转载请通过51CTO联系作者获取授权】

戳这里，看该作者更多好文