Joh*_* Au 3 javascript jquery scope function document-ready
我只是有一个关于在jQuery中编写函数的问题.在定义自己的函数时,它们应该写在内部$(function(){});还是外部？请注意,这些只是示例功能,可以是任何东西.我选择了一个jQuery函数和一个原生JavaScript来查看是否存在任何差异,即应该在文档内部定义自定义的jQuery函数吗？
例如:
$(function(){
$('select').jQueryExample();
nativeExample();
});
$.fn.jQueryExample = function(){
//Do something
}
function nativeExample(a, b)
{
return a + b;
}
与此相反,它们在文档准备中被称为AND定义？
$(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;
}
在此先感谢您的回复.
pom*_*meh 14
我认为你应该在jQuery ready方法之外定义你的函数,因为:
ready事件之前使用你的函数,如果在事件中定义了函数,你就不能这样做,ready只有在真正需要的时候才应该使用jQuery 方法,这意味着当你真的必须等待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();
});
关于您的编辑,您的问题what would happen as opposed to having it defined outside but called inside document ready没有通用的答案.看看这个例子:
<!-- 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',因此无论何时何地调用它(在'ready'事件内部或外部),该函数都可以工作.
该函数getAnchor查询DOM并返回页面中锚标记的集合.第一个调用,在脚本"ONE"中,在ready事件之外并返回undefined.第三个调用,在脚本"THREE"中,也在ready事件之外,但它在控制台中记录了一组锚元素.这意味着,函数调用的放置可以改变函数行为.在第一次调用中,显然页面中没有锚标记,这就是函数返回的原因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>?]
查看日志顺序:一,三,二,四; 这与源顺序不同:一,二,三,四.功能ready已被延迟,直到页面加载完成.