AngularJs按需要加载js的例子分析

写ng应用时，往往需要封装大量的指令。对于一些指令来说，可能是别的插件改过来的，这时候就会要引入那些相关js。这个一个非常简单的应用。实现起来也比较简单。

伪代码如下：（以依赖于echarts和ckeditor为例）

这看起来确实很ok。也确实能成功运行。

但在一个以项目中应用，这真的好吗？

我个人觉得这个不好，主要在于如下：

当我这个页面不需要ckeditor这个东西的时候了，即我要删除这行代码的时候

此时我还要手动的删除

不然会造成垃圾。因为我都用不到这个了啊。

还有一个问题是我一个后台有几十个页面，十几个页面中都要用ckeditor的。我不是要写很多次

你TM这不是废话。但在大项目中反复维护这个有点复杂。有没有更好的办法。。。

我觉得些问题的根本在于实际是因为没有解决要用到这个指令的时候再去加载相关js，此时，我们需要设计一个，按这个指令的时候再去加载相关js的方式。以echarts为例：

directivesApp.directive('bdzEcharts', function(){
    return {
        restrict: 'EA',
        template: '

',
        replace: true,
        scope: {
            option: '=?'
        },
        link: function(scope, element, attrs){
 
            scope.$watch('option', function(){
                var getChart = function () {
                    var myChart = echarts.init(element[0]);
                    myChart.setOption(scope.option);
                };
 
                if(!window.echarts){
                   $.getScript('/assets/vendor/echarts/2.0.3/build/echarts-plain.js', function(){
                       
                        getChart();
                    });
                }else{
                    getChart();
                }
            })
 
        }
    }
});

重要的代码其实也就这么几句：

if(!window.echarts){
                   $.getScript('/assets/vendor/echarts/2.0.3/build/echarts-plain.js', function(){
                       
                        getChart();
                    });
                }else{
                    getChart();
                }
动态的去加载他相关的js。那么判断这个window.echarts又是做什么的呢？

是因为有时候，我们一个页面用到了几次这个指令，其实这个js已经加载了，总没必要反复加载吧。所以才有这句。

最后再说几句。因为$.getScript是异步的。所以其实这个js在加载时也可能出现判断window.echarts实际没有。最好的方式，如果你想完全判断window.echarts是否存在 ，可以改为同步加载。

 if(!window.echarts){
                    $.ajax({
                        async: false,
                        url: "/assets/vendor/echarts/2.0.3/build/echarts-plain.js",
                        dataType: "script",
                        success: function(){
                            getChart();
                        }
                    });
 
                }else{
                    getChart();
}

这样就能完美解决按需加载了。

现在你想想，你在一个页面中添加一个指令，或者删除一个指令的时候，你就不需要手动增加删除一些js，爽吧