1

能够独立的书写一个库,是很多开发者或者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.


彬哥头发多
4.3k 声望1.4k 粉丝

一个会写代码的职业规划师,2本职业规划书作者。争取未来1年帮100个朋友薪资上涨50%。