体验javascript之美-第十课写库前的准备工做

时间 2020-02-07

原文原文链接

可以独立的书写一个库，是不少开发者或者HR认为区分技能的一个标志，并且还存在一个鄙视链css

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

虽然我以为这个鄙视链很幼稚，可是不能不说不少人拿本身写库做为一个技能区分标准，无论怎样写库都是一个提高技能的好办法，然而并不难。node

好，咱们看看写库以前须要什么准备知识。jquery

1.严格模式

不少库一开始就是这样子的，数据库

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

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

1.更利于调试,当不定义变量直接用的时候若是不适用严格模式不会报错，而是结果不对。这个很难调试，由于大部分时间这种错误是你单词拼写错误，不报错。
2.防止出现低级错误 除了上面的问题，还有好比if里面定义函数形成问题的状况
3.修复了不少不利的bug和擅长无用功能  好比with

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

2.初始化。

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

<!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.

体验javascript之美-第十课 写库前的准备工做

1.严格模式

2.初始化。

3.数据类型判断

体验javascript之美-第十课写库前的准备工做