Question

短版

通常，我通过在html / twig中编写包含它的xy.js来包含jquery。这个文件比使用ready（）或者load（）。

是否有任何缺点，如果我直接在树枝中的scipt-tag中使用jquery而不是 - 在某些情况下 - 直接在twig文件中直接在另一个脚本标记中调用该函数？

长版

在处理问题（if you like to look...）时，我发现，我需要一些非常基本的知识：

当通过自己的js文件包含jquery时，你可以这样做：

当加载DOM时，

$(document).ready()应该用来做事 - 好的

如果js依赖于资源，

$(document).load()应该使用 ready（）

时可能无法完全加载

但是，如果我直接在html中包含一些代码（或者在我的情况下是twig）。即的是：

   ...
   {% block subtitleRechts %}
        {% if app.user %}
            <span id="add">
                <a href="{{ path('add') }}" alt="add Item">
                    <img height="20" src="{{ asset('bundles/myBundle/images/plus.png') }}"></a>
            </span>
            <script>
                $("#add a").each(function() {
                    var url = $("#add a").attr("href");
                    var $dialog = $('<div class="modalerDialog"></div>').
                        dialog({
                            autoOpen: false,
                            modal: true,
                            width: 460
                        });

                    $(this).click(function() {
                        $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) {
                            var title = $('#addPage').attr('title')
                            $dialog.dialog('option', 'title', title);
                        }).dialog('open');
                        return false;
                    });
                });
             </script>
             {% if whatever %}
                $("#add a").trigger("click");
             {% endif %}
        {% endif %}
    {% endblock %}
    ...

这应该在链接中添加ajax对话框，在“无论”的情况下直接执行它。

这适用于本地，但我只是不知道，如果有任何缺点（除了混合树枝，html和js在一个文件中）。就我而言，还会有一个包含的js文件

建议。

Answer 1

我猜一个缺点就是难以维护代码。也许更好的解决方案是创建一个模型，使用来自服务器端代码的单个标志，如下所示：

//this one goes to separate .js file
function MyModel (){

        this.Init = function () {
            $("#add a").each(function() {
                var url = $("#add a").attr("href");
                var $dialog = $('<div class="modalerDialog"></div>').
                    dialog({
                        autoOpen: false,
                        modal: true,
                        width: 460
                    });

                $(this).click(function() {
                    $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) {
                        var title = $('#addPage').attr('title')
                        $dialog.dialog('option', 'title', title);
                    }).dialog('open');
                    return false;
                });
            });
        }();
        this.TriggerClick = function(boolean) {
            if(boolean){
                $("#add a").trigger("click");
            }

        };
}

//this one stays on the page
var model = new MyModel();
model.TriggerClick({% whatever %});

直接在html（和twig）中使用jquery

短版

长版

1 个答案: