注册登录

前端常用的库和实用技术之JavaScript高级函数

1.惰性载入函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建了各个浏览器下面可以访问的xhr对象
        function createXHR(){
            var xhr = null;
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                // handleErr(e);
                try{
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                    try{
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                        xhr =null;
                    }
                }
            }
            return xhr;
        }
        console.log(e);
    //    function handleErr(err){
    //        var errXHR = err;
    //    }
    // 惰性函数
    // 第二次运行时加载
    function createXHR(){
        var xhr = null;
        if(typeof XMLHttpRequest!='undefined'){
            xhr = new XMLHttpRequest();
            createXHR=function(){
                return new XMLHttpRequest();
            }
        }else{
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTp');
                createXHR = function(){
                    return new ActiveXObject('Msxml2.XMLHTTP');
                }
            }catch(e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                    createXHR = function(){
                        return new ActiveXObject('Microsoft.XMLHTTP');
                    }
                }catch(e){
                    createXHR = function(){
                        return null;
                    }
                }
            }
        }
        return xhr;
    }
    </script>
</body>
</html>
知识兔

2.函数柯里化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    //   合并参数 第一个函数的参数合并成整体的 传递给统一的函数
      function add(num1,num2){
          return num1+num2;
      }
      function totalAdd(num3){
          return 50+add(1,2)
      }
      alert(totalAdd(50));
    </script>
    <script>
    function curry(fn){
        var args = Array.prototype.slice.call(arguments,1);
        console.log('args...',args);
        return function(){
            var innerArgs = Array.prototype.slice.call(arguments);
            console.log('innerArgs',innerArgs);
            var finalArgs = args.concat(innerArgs);
         console.log('.finalArgs...',finalArgs);
            return fn.apply(this,finalArgs);
        }
    }
    function add(num1,num2,num3){
        return num1+num2+num3;
    }
    var t = curry(add,50)(1,2);
    alert(t);
    </script>
</body>
</html>
知识兔

3.级联函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    function classA(){
        this.lian = "";
        this.zui = "";
        this.tui = "";
    }
    // 原型链的constructor指定回来
    classA.prototype = {
        setLian:function(){
            this.lian = "红彤彤";
            return this;
        },
        setZui:function(){
            this.zui = "大嘴";
            return this;
        },
        setTui:function(){
            this.tui = "长腿欧巴"
        }
    };
    var person = new classA();
    // person.setLian();
    // person.setZui();
    // person.setTui();
    // 级联函数，把相关属性的东西全部串起来
    person.setLian().setZui().setTui();
    console.log(person);

    // $('#btn').html().val().attr();
    </script>
</body>
</html>
知识兔

by上面的例子其实不够经典也不够高级
本文看自前端常用的库和实用技术之JavaScript高级函数

计算机