JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript代码分组技术大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有很多功能和事件处理程序分割在多个 JavaScript文件,包括在我的网站的不同的页面.

出于性能原因,我想将所有这些文件合并到整个网站全球的1个文件中.@H_801_3@

问题是我将对不一定存在的元素和相同的函数名称调用事件处理程序.@H_801_3@

这是一个典型的javascript文件的例子…@H_801_3@

$(document).ready(function(){
    $('#blah').keypress(function(E){
        if (e.which == 13) {
            checkMap();
            return false;
        }
    });
});

function checkMap() {
    // code
}

function loadMap() {
    // code
}

我需要将该代码分离成一个在该特定页面上调用的对象.@H_801_3@

我的想法是我可以重写如下:@H_801_3@

(function($) {
    $.homepage = {
        checkMap: function(){
            // code
        },loadMap: function(){
            //code  
        }
    };
})(jQuery);

然后在需要它的页面上,我可以调用$.homepage.checkMap()等.@H_801_3@

但是,如何在document.ready中声明事件处理程序,但不包含它自己的函数呢?@H_801_3@

任何关于最佳做法的建议将是非常好的,谢谢!@H_801_3@

解决方法

我认为你所需要的就是你的应用程序的命名空间.命名空间是一个简单的JSON对象,可以如下所示:
var myApp = {
    homepage : {
      showHeader : function(){},hideHeader : function(){},animationDelay : 3400,start : function(){} // the function that start the entire homepage logic
    },about : {
    .... 
    }
}

您可以将其拆分为更多文件:@H_801_3@

> MyApp将包含myApp = {}对象,也许有一些有用的实用程序,如object.create或者你有什么.
> Homepage.js将包含myApp.homepage = {…}与您的首页页面的所有方法.
>列表继续与其余的页面.@H_801_3@

把它当成包装.你不需要使用$作为主要对象.@H_801_3@

<script src="myapp.js"></script>
 <script src="homepage.js"></script>
 <-....->
 <script>
   myApp.homepage.start();
 </script>

将是我使用主页对象的方式.@H_801_3@

当使用YUI进行压缩时,您应该具有:@H_801_3@

<script src="scripts.min.js"></script>
<script>
    myApp.homepage.start();
 </script>

大佬总结

以上是大佬教程为你收集整理的JavaScript代码分组技术全部内容,希望文章能够帮你解决JavaScript代码分组技术所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。