关于异步加载script脚本

来源:互联网 发布:纳西莎.马尔福 知乎 编辑:程序博客网 时间:2024/06/08 01:11
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>异步的方式加载库</title>    <!--使用script.js或者国内的load.js实现,此处使用script.js,配合使用angular-loader.js使用,压缩后的文件只有2k大小-->    <!--load.js github地址-->    <!--https://github.com/node-js-libs/load.js-->    <script src="bower_components/script.js/dist/script.js"></script>    <script src="bower_components/angular-loader/angular-loader.js"></script>    <script>    //使用方法:    //1..       /* $script('what you want to load',function (){            //回调函数,加载完成上面的文件后,执行此处操作        })*/    //2..       /* $script([                './bower_components/angular/angular.js',                './bower_components/jquery/dist/jquery.js'        ],function (){            console.log(angular);            console.log($);        })*/        //此时也存在加载次序问题,因为angular.js相对于自己的app.js,太重,所以app.js加载完成后,就会执行,       //而app.js依赖于angular的一些组件,所有会报错,解决方式:       //1.按照上面的方式:在回调函数中嵌套引用,       /* $script([        './bower_components/angular/angular.js'        ],function (){                $script('./bower_components/angular-route/angularRoute.js',function (){                    ...                });        })       *       * */       //2.依赖外部资源angular-loader.js会自动的引导加载顺序       $script([           './bower_components/angular/angular.js',           './bower_components/jquery/dist/jquery.js',               'app.js'       ],function (){           console.log(angular);           angular.bootstrap('document',['myapp']);       })    </script></head><body></body></html>
原创粉丝点击