1
回答
管理大量js文件的又一次尝试
终于搞明白,存储TCO原来是这样算的>>>   

大量js文件如何管理?大量js文件的管理,不光要管理加载,还要尽量的减少因不同文件定义同名函数,同名变量的意外。

下面是一次尝试:

js,css加载利用jQuery的ajax:

/**
 * by 大东
 */
var Loader = function() {

    var base = "http://localhost:9000";

    return {

        loadStyle : function(url, target,async) {

            $.ajax({

                url : base + url,

                method : 'get',

                async : (async || false),

                success : function(data) {

                    var head = document.getElementsByTagName((target || "head"))[0];
                    var script = window.document.createElement("link");
                    script.type = "text/css";
                    script.rel = "stylesheet";
                    script.href = url;
                    head.appendChild(script);

                },
               
                error : function(resp){
                        alert('load css error');
                }

            });

        },

        loadJs : function(url, target,async) {

           
            $.ajax({

                method : 'get',

                async : (async || false),

                url : url,
               
                dataType : 'text',//必须是text类型

                success : function(data) {
                    //闭包包裹
                    var scriptText = "(function(){" +
                   
                                data +
                   
                    "}(window))";
                   
                    jQuery.globalEval(scriptText);//危险?
                   
                    // targetDom.appendChild(script);

                },
               
                error : function(resp){
                        alert('load js error');
                }
               
            });

        },

    };

}();

使用方法:


<html>

    <head>

     <script type='text/javascript' src='./jquery.js'></script>

     <script type='text/javascript' src='./Loader.js'></script>

     <script type='text/javascript'>

          $(document).ready(function(){

             Loader.loadJs('/static/Test1.js');
             Loader.loadJs('/static/Test2.js');

          });

     </script> 

    </head>

   <body>

   </body>

</html>

通过这种方式来管理js,因为包裹在闭包中所以:

各子文件中定义的用var声明的变量,不再是全局的,各文件中定义的function也不会意外影响。可以做到隔离,可以在各子文件中放心的如:

Test.js

    function test(){}

Test2.js

    function test();

不会相互影响。

这种方式,为扩展js语法成为了可能?

可能的问题:使用eval,会有安全和性能问题。

初步的想法,和粗糙的代码,只是提供一些思路,欢迎交流。

举报
大东哥
发帖于6年前 1回/667阅
顶部