个人中心
gpt4 book ai didi

javascript - 应该在 jQuery 文档内部或外部编写和调用 Javascript 函数吗？

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:52:52 25 4
gpt4 key购买 nike

我只是有一个关于在 jQuery 中编写函数的问题。在定义自己的函数时，它们应该写在 $(function(){}); 内部还是外部？请注意，这些只是示例函数，可以是任何东西。我选择了一个 jQuery 函数和一个原生 JavaScript 来查看是否存在任何差异，即是否应该在文档中定义一个自定义的 jQuery 函数？

例如:

$(function(){
    $('select').jQueryExample();
    nativeExample();    
});

$.fn.jQueryExample = function(){
    //Do something
}

function nativeExample(a, b)
{   
    return a + b;
}

与此相反，它们在文档准备就绪中被调用和定义？

$(function(){
    $('select').jQueryExample();
    nativeExample();

    $.fn.jQueryExample = function(){
        //Do something
    }

    function nativeExample(a, b)
    {   
        return a + b;
    }
});

::编辑::

一个额外的问题。如果一个函数被定义为外部文档就绪并且也被称为外部文档就绪，那么相对于在外部定义但被称为内部文档就绪会发生什么？

我问这个是因为我在文档就绪范围之外定义了一个函数，这个函数是一个 ajax 调用，它在页面加载时获取新消息。应该叫外部文档准备好还是内部文档准备好？

例如:

$(function(){
 //Hello, I am jQuery

});

nativeExample();

function nativeExample(a, b)
{   
    return a + b;
}

相对于:

$(function(){

 nativeExample();

});


function nativeExample(a, b)
{   
    return a + b;
}

预先感谢您的回复。

最佳答案

我认为你应该在 jQuery ready 方法之外定义你的函数，因为:

  • 函数定义代码是一种“被动”代码:它不需要DOM 是runt
  • 如果你想在 ready 事件之前使用你的函数，如果函数是在事件内部定义的，你就不能这样做，
  • jQuery ready 方法只应在真正需要时使用，这意味着当您*真的必须等待 DOM 准备就绪时

作为引用，这是我每次都使用的简化但常见的 HTML 页面模式，它运行良好:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>
    <!-- your CSS code -->
    <link rel="stylesheet" href="/path/to/file.css">
</head>
<body>
    <!-- your HTML elements -->

    <!-- all your scripts elements at the bottom -->

    <!-- load jQuery from Google CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- load all your "passive" code that defines custom or vendor jQuery plugins -->
    <script src="jquery.plugins.js"></script>

    <!-- load all your "active" code -->
    <script src="yourcode.js"></script>
</body>
</html>

jquery.plugins.js 文件可能包含您提供的内容:

// define all jQuery plugin, aka "passive" code
// "passive" means it won't affect the page
$.fn.jQueryExample = function(){
    //Do something
};

$.fn.somePlugin = function(){
    // Do something
};

// you could define vanilla JavaScript functions in a separated file if you want
function nativeExample(a, b)
{
    return a + b;
}

文件 yourcode.js 可以是:

// place here all "active" code
// by "active" code I mean all code that will interact/alter/modify your page
$(function(){
    $('select').jQueryExample();
    nativeExample();    
});

关于您的编辑，您的问题与在外部定义但调用内部文档就绪相比会发生什么没有通用答案。看这个例子:

<!-- basic html setup -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        // placing <script> tag in the <head> tag is considered as a bad practice
        // I use it for the example but you should not do the same in real code

        // define your functionsin the <head> tag
        function getFoo() {
            return "foo";
        }
        function getAnchor() {
            return document.getElementsByTagName('a');
        }
    </script>

    <script>
        // reference: ONE
        // call your function in the <head> tag
        console.log( "one", getFoo() ); // "foo"
        console.log( "one", getAnchor() ); // empty array
    </script>
    <script>
        // reference: TWO
        $(document).ready(function(){
            // call your function inside the jQuery 'ready' event
            console.log( "two", getFoo() ); // "foo"
            console.log( "two", getAnchor() ); // array with one element
        });
    </script>
</head>
<body>

    <a href="www.example.com">bar</a>


    <script>
        // reference: THREE
        // call your function at the end of the <body> tag
        console.log( "three", getFoo() ); // "foo"
        console.log("three",  getAnchor() ); // array with one element
    </script>

    <script>
        // reference: FOUR
        $(document).ready(function(){
            // call your function inside the jQuery 'ready' event
            console.log( "four", getFoo() ); // "foo"
            console.log( "four", getAnchor() ); // array with one element
        });
    </script>
</body>
</html>

getFoo 函数不需要 DOM 就可以工作。因此，它的 4 次调用始终返回“foo”，因此无论何时何地调用该函数(在“就绪”事件内部或外部)，该函数都有效。

函数getAnchor 查询DOM 并返回页面中 anchor 标记的集合。脚本“ONE”中的第一个调用在 ready 事件之外并返回未定义。第三次调用，在脚本“THREE”中，也在 ready 事件之外，但是它在控制台中记录了一组 anchor 元素。这意味着，函数调用的位置可以改变函数行为。在第一次调用中，显然页面中不存在 anchor 标记，这就是函数返回 undefined 的原因。然后，位于页面开头和末尾的第二次调用和第四次调用都记录了一个数组。在这种情况下，函数调用的位置不会改变函数行为，因为函数 getAnchor 实际上是在加载所有 DOM 元素之后调用的。如果您查看控制台日志，您会看到如下内容:

one foo
one []

three foo
three [<a href=​"www.example.com">​bar​</a>​]

two foo
two [<a href=​"www.example.com">​bar​</a>​]

four foo
four [<a href=​"www.example.com">​bar​</a>​]

查看日志顺序:一、三、二、四；这与源顺序不同:一、二、三、四。函数 就绪 已延迟到页面加载完成。

关于javascript - 应该在 jQuery 文档内部或外部编写和调用 Javascript 函数吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10649867/

25 4 0
文章推荐： javascript - 如何检查面板在 JavaScript 中是否可见？
文章推荐： iphone - 音乐播放器只播放一首轨道
文章推荐： ios - Storyboard - 如何设计屏幕外的内容？
文章推荐： android - 如何在横向模式下只打开半键盘？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com