如何在页脚中插入 jQuery 时定义变量

How to define variables when jQuery is inserted in the footer

本文关键字：jQuery 定义 变量 插入      更新时间：2023-09-26

我正在为一个在html文档末尾嵌入jQuery的cms编写一个插件。

我确实在我的模板代码中动态定义了一些变量，如下所示：

<script>
    var name = '<?php echo $nameTakenFromTheDatabase; ?>';
</script>

这段代码是我的插件的一部分，它没有嵌入到每个页面上。因此，并非在每个页面上都定义名称。

我确实在一个单独的文件中有这个 Javascript 代码（由 cms 自动添加到页面末尾）：

var MyNamespace = (function() {
    MyClass = function(name) {
        // Do something with name
    }
    return {
        MyClass: MyClass
    }
})();

如果jQuery嵌入在顶部，我会在我的模板代码中做这样的事情：

<script>
    var name = '<?php echo $nameTakenFromTheDatabase; ?>';
    $(document).ready(function() {
        new MyNamespace.MyClass(name);        
    });
</script>

但是，由于底部包含jQuery，我无法这样做（$尚未定义）。我也不能只是将 jQuery-DomReady 调用添加到单独的代码文件中，因为这在每个页面上执行，但名称 var 并没有在每个页面上启动并破坏代码。

我能做什么？好的旧文档.ready是一个明智的方法吗？

您可以在脚本中定义方法，并从全局 javascript 文件执行它们。

如果您在页面中执行此类操作

<script>
    var name = '<?php echo $nameTakenFromTheDatabase; ?>';
    function runWhenReady(){
        new MyNamespace.MyClass(name);        
    }
</script>

然后在页面底部添加的全局文件中，您可以执行以下操作：

$('document').ready(function() {
    if (typeof runWhenReady != 'undefined') {
        runWhenReady();
    }
});

如果你有创意，你可以让"runWhenReady"成为方法的集合，这些方法在页面准备就绪时总是加载。

编辑我添加了一个使用数组的示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        // check if array is already created. This is necessary if it is possible to render multiple pages which uses the runWhenReadyFunctions collection.
        if (typeof runWhenReadyFunctions == 'undefined'){
            window.runWhenReadyFunctions = new Array();
        }
        runWhenReadyFunctions.push(function(){
            $('#testDiv').text('hello world!');
        });
        runWhenReadyFunctions.push(function(){
            $('#testDiv2').text('hello another world!');
        })
    </script>

    <div id="testDiv"></div>
    <div id="testDiv2"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        if (typeof runWhenReadyFunctions != 'undefined') {
            $.each(runWhenReadyFunctions, function(idx, func){
                func();
            });
        }
    </script>
</body>
</html>

编辑 - 好的，你不应该弄乱全局空间，我不明白你为什么不把你的<script>标签放在你包含jQuery的标签下面。否则，您可以进行 AJAX 调用

<script>

    $('document').ready(function() {
        $.getJSON('getmyname.php', function(data){
            new MyNamespace.MyClass(data.name);        
        });
    });
</script>
相关文章：