js 常见代码

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>js执行顺序</title>
    <div id="a"></div>
    <script src="/Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
    <script>

        console.log("-- 申明事件 --");
        /*
         * 等价于 $(document).ready(function(){})
         * 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
         */
        $(function () {
            console.log("执行 $(function () {}");
        });


        console.log("-- 申明变量 --");
        var varA = "a";
        var varB = 1;
        var varC = [varA, varB];
        var varD = {
            a: varA,
            b: varB,
            c: varC
        };

        console.log("-- 申明方法或对象 --");
        /*
         * 方法或对象
         * */
        function fa() {
            console.log("执行 方法 fa");

            this.a = function () {
                console.log("fa 中的 a方法");
            }
        }

        //将fa作为方法来处理
        fa();
        //将fa作为对象来处理
        var a = new fa();
        a.a();


        console.log("-- 闭包的研究 --");
        /*匿名函数*/
        (function () {
            console.log("匿名函数 不返回任何对象");
        })();

        var b = (function () {
            var model = { a: 1 };
            return model;
        })();
        console.log("匿名函数 返回一个对象", b);

        var c = (function () {
            var model = function () {
            };

            model.prototype.a = function () {
                console.log("匿名函数返回的类中，再申明一个方法", this);
            }
            return model;
        })();
        console.log("匿名函数 返回一个方法", c);

        var d = new c();
        d.a();


        //回调解决方案 https://www.cnblogs.com/beimingbingpo/p/8548986.html
        $.ajax({
            url: "test.json",
            type: "get"
        }).done(function (data) {
            console.log(1);
        }).fail(function () {
            console.log(2);
        });
        function Ajax(option) {
            var dfdAjax = $.Deferred();  
            console.log(1);
            $.ajax({
                url: "test.json",
                type: "get"
            }).done(function () {
                console.log("dfdAjax.resolve()");
                dfdAjax.resolve();
                }).fail(function () {
                    console.log("dfdAjax.reject()");
                    dfdAjax.reject();
                });
            return dfdAjax.promise();
        };
        Ajax().done(function () {
            console.log(3);
        }).fail(function () {
            console.log(4);
            });

        function Ajax2(option) {
            var dfdAjax2 = $.Deferred(function () {
                console.log(1);
                $.ajax({
                    url: "test.json",
                    type: "get"
                }).done(function () {
                    console.log("dfdAjax2.resolve()");
                    dfdAjax2.resolve();
                }).fail(function () {
                    console.log("dfdAjax2.reject()");
                    dfdAjax2.reject();
                });
            });
            return dfdAjax2;
        };
        Ajax2().resolve();
        Ajax2().done(function () {
            console.log(5);
        }).fail(function () {
            console.log(6);
            });

        var dfd = $.Deferred();
        dfd.done(function (value) {
            console.log("$.Deferred().done()");
        })
        console.log("dfd.resolve");
        dfd.resolve();
        console.log("dfd.resolve");
        dfd.resolve();

        var dfd2 = $.Deferred();
        dfd2.fail(function () {
            console.log("$.Deferred().fail()");
        });
        console.log("dfd2.reject");
        dfd2.reject();

        console.log("--$.Deferred()--");

    </script>

    //步骤很多的回调
    <script type="text/javascript">
        var array = [];
        array.push(function () {
            return $.ajax({
                url: "test.json",
                type: "get"
            }).then(function () { console.log(1); });
        });
        array.push(function () {
            return $.ajax({
                url: "test.json",
                type: "get"
            }).then(function () { console.log(2); });
        });
        array.push(function () {
            return $.ajax({
                url: "test.json",
                type: "get"
            }).then(function () { console.log(3); });
        });
        function doAll(array, i) {
            if (!i) i = 0;
            if (i < array.length - 1) {
                array[i]().then(function () {
                    doAll(array, i + 1)
                });
            }
            else {
                array[i]();
            }
        }
        doAll( array);
    </script>
</body>
</html>

常见代码

 

 

--未完待续--

posted @ 2020-05-28 21:56  胡正  阅读(209)  评论(0)  编辑  收藏  举报