Question

我正在使用colorbox插件，它带有这个外部长.js文件：

http://www.jacklmoore.com/colorbox/jquery.colorbox.js

和in the demo，还有一个内联javascript，可以使一切正常运行，例如：

<script>
        $(document).ready(function(){
            //Examples of how to assign the Colorbox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox();
            $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
            $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            $('.non-retina').colorbox({rel:'group5', transition:'none'})
            $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){ 
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });

就我个人而言，我不希望内嵌这样的代码，所以最初我用另外一段代码创建了另一个外部.js，但是“google page speed tool”建议我将其设为内联，因为它是一个非常小的文件。

所以我尝试将此代码移动到长jquery.colorbox.js文件中，无论我在代码之前还是之后放置它，它都能正常工作。所以这基本上解决了我的问题和谷歌页面速度问题，我只是想知道这样做是否有任何不利之处？

Answer 1

不适合我，但我可以提出一些可能性：

编辑时可能会出现问题 - ＆GT;这可以通过使用一些评论来解决 - ＆GT;然后这将导致代码更加混乱
某些代码可能会崩溃，您的代码成功将远离您|。|
- ＆GT;没有解决方案 - 除非您对代码有更多了解！
代码升级问题
＆lt; - 如果外部代码已升级，您可能有问题知道该代码是什么 - ＆GT;再次使用评论
- ＆GT;再次凌乱

所以这些是我能想到的！

EDIT ---

有些缺点：

您可以更方便地编辑 - ＆GT;您可以一次编辑多个代码
您可以编辑一些您无法编辑的代码（之前的外部资源）
- ＆GT;修改更方便。
您可以加快加载次数 - ＆GT; 1个1000 KB的文件比1000个文件快1个KB。
更安全 - ＆GT;您无需担心外部资源被删除!!

这些是我的建议。试着多想想吧！

Answer 2

您通常通过涉及所谓的构建工具来执行此操作。 http://gruntjs.com/是此类工具的一个非常突出的例子。

您一直在编写代码（例如，您在/ lib文件夹中拥有所有库，而在另一个文件夹中拥有所有自己的代码）。您自己的代码格式很好，带有注释和所有使编辑变得容易的东西。 Grunt然后获取所有javascript文件，删除注释并最小化它们（使它们变得丑陋）并将它们全部放在您在HTML中引用的文件中。

这一切都是在构建过程中自动完成的，你不应该手动做任何事情，甚至在这样的混乱中进行编辑。

通过这种方式，您可以保留所有专业人员（最小化文件大小，最小化HTTP请求数），同时保持编辑的所有专业人员（分离的功能，代码中的注释的分隔文件）存活。

有没有理由不将2个外部javascript资源合并为一个？

2 个答案: