0

我正在使用这个外部长 .js 文件附带的 colorbox 插件：

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

在演示中，还有一个内联 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文件中，无论我将其放在代码之前还是之后，它都有效。所以这基本上解决了我的问题和谷歌页面速度问题，我只想知道这样做是否有任何缺点？

4

2 回答 2

1

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

  1. 编辑时可能会出现问题
    --> 这可以通过使用一些注释来解决
         --> 然后这会导致代码混乱

  2. 一些代码可能会崩溃，您的代码成功将远离您|。|
    --> 没有解决办法——除非你更了解代码！

  3. 代码升级问题
    <--如果外部代码升级了，你可能很难知道哪个是那个代码
         -->再次使用注释
              -->再一次更混乱

所以这些是我可以考虑的！

编辑 - -

一些缺点：

  1. 可以让编辑更方便
    --> 一次可以编辑多个代码

  2. 您可以编辑一些您无法编辑的代码（之前的外部资源）
    --> 修改更方便。

  3. 您可以使其加载速度更快
    --> 1 个 1000 KB 的文件比 1000 个每个 1 KB 的文件快。

  4. 更安全
    --> 不用担心外部资源被删除！！

这些是我的建议。试着多考虑一下！

于 2014-04-06T09:30:51.733 回答
-1

您通常通过使用所谓的构建工具来做到这一点。http://gruntjs.com/是这种工具的一个非常突出的例子。

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

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

通过这种方式，您可以保留所有优点（最小化文件大小、最小化 HTTP 请求数量），同时保持所有编辑优点（用于分离功能的分离文件、代码中的注释）。

于 2014-04-06T09:44:40.847 回答