Javascript JQuery 函数的最佳实践
我正在尝试 github,并且我想在那里放一个小测试项目。因为它是公开的,所以我通过 JSHint 运行了我,但我得到了一个我无法摆脱的错误:
Line 21 preloadImages();
'preloadImages' is not defined.
这是代码:
$(function() {
var allImagesLoaded = false, imagesLength = 0, counter = 0, imageArray = [], loadedImages = [], loadedImagesCounter = 0;
/*--------------------------------
Add your images to the array
and your good to go
--------------------------------*/
imageArray = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
imagesLength = imageArray.length;
if(imagesLength === 0) {
$('#container').html('<p><strong>You need to put some images in your array</strong></p>');
}
else {
preloadImages();
}
function preloadImages() {
var tempImage = $("<img />").attr("src", imageArray[loadedImagesCounter]);
tempImage.load(function(){
loadedImages.push(this);
loadedImagesCounter++;
if(loadedImagesCounter == imagesLength) {
imageArray = loadedImages;
initEverything();
}
else {
if(!allImagesLoaded)
{
preloadImages();
}
}
});
}
function initEverything() {
allImagesLoaded = true;
$('#preloadingImages').hide();
// Deactivate the context menu that appears on right click
$(document).bind("contextmenu", function(e) {
return false;
});
var theSource = $(imageArray[0]).attr('src');
var theImage = $('<img />');
$(theImage)
.attr('src', theSource)
.attr('width', imageArray[0].width)
.attr('height', imageArray[0].height)
.attr('alt', 'demobild 1')
.attr('id', 'pageImage');
$('#container').append(theImage)
$("#pageImage").mousedown(function(e) {
if (allImagesLoaded) {
switch (e.which) {
case 1:
stepForward();
break;
case 2:
// center button on the mouse
break;
case 3:
stepBackward();
break;
default:
// Nada
}
}
});
$(document).keydown(function(e) {
e.preventDefault();
if (allImagesLoaded) {
switch (e.keyCode) {
case 37: // Left
stepBackward();
break;
case 38: // Up
stepBackward();
break;
case 39: // Right
stepForward();
break;
case 40: // Down
stepForward();
break;
default:
// Nada
}
}
});
}
function stepForward() {
if (counter === imagesLength-1) {
counter = 0;
} else {
counter++;
}
$("#pageImage").attr("src", $(loadedImages[counter]).attr('src'));
$("#pageImage").attr("alt", "demobild " + counter);
}
function stepBackward() {
if (counter === 0) {
counter = imagesLength-1;
} else {
counter--;
}
var sourcePath = $(imageArray[counter]).attr('src');
$("#pageImage").attr("src", sourcePath);
$("#pageImage").attr("alt", "demobild " + counter);
}
});
放置函数的最佳实践在哪里?在顶部?
I'm trying out github and thpught i would put a small test project up there. Since it is public i ran i through JSHint but i get an error that i can't shake:
Line 21 preloadImages();
'preloadImages' is not defined.
This is the code:
$(function() {
var allImagesLoaded = false, imagesLength = 0, counter = 0, imageArray = [], loadedImages = [], loadedImagesCounter = 0;
/*--------------------------------
Add your images to the array
and your good to go
--------------------------------*/
imageArray = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
imagesLength = imageArray.length;
if(imagesLength === 0) {
$('#container').html('<p><strong>You need to put some images in your array</strong></p>');
}
else {
preloadImages();
}
function preloadImages() {
var tempImage = $("<img />").attr("src", imageArray[loadedImagesCounter]);
tempImage.load(function(){
loadedImages.push(this);
loadedImagesCounter++;
if(loadedImagesCounter == imagesLength) {
imageArray = loadedImages;
initEverything();
}
else {
if(!allImagesLoaded)
{
preloadImages();
}
}
});
}
function initEverything() {
allImagesLoaded = true;
$('#preloadingImages').hide();
// Deactivate the context menu that appears on right click
$(document).bind("contextmenu", function(e) {
return false;
});
var theSource = $(imageArray[0]).attr('src');
var theImage = $('<img />');
$(theImage)
.attr('src', theSource)
.attr('width', imageArray[0].width)
.attr('height', imageArray[0].height)
.attr('alt', 'demobild 1')
.attr('id', 'pageImage');
$('#container').append(theImage)
$("#pageImage").mousedown(function(e) {
if (allImagesLoaded) {
switch (e.which) {
case 1:
stepForward();
break;
case 2:
// center button on the mouse
break;
case 3:
stepBackward();
break;
default:
// Nada
}
}
});
$(document).keydown(function(e) {
e.preventDefault();
if (allImagesLoaded) {
switch (e.keyCode) {
case 37: // Left
stepBackward();
break;
case 38: // Up
stepBackward();
break;
case 39: // Right
stepForward();
break;
case 40: // Down
stepForward();
break;
default:
// Nada
}
}
});
}
function stepForward() {
if (counter === imagesLength-1) {
counter = 0;
} else {
counter++;
}
$("#pageImage").attr("src", $(loadedImages[counter]).attr('src'));
$("#pageImage").attr("alt", "demobild " + counter);
}
function stepBackward() {
if (counter === 0) {
counter = imagesLength-1;
} else {
counter--;
}
var sourcePath = $(imageArray[counter]).attr('src');
$("#pageImage").attr("src", sourcePath);
$("#pageImage").attr("alt", "demobild " + counter);
}
});
Where is best practise to put functions? At the top?
Here is my project
https://github.com/Benjaminsson/Image-expo
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
JavaScript 将函数声明提升到作用域的开头。因此该函数在整个范围内可用(传递给
$()
的函数),无论它是在哪里定义的。 JSLint 可能无法正确检测到这一点,并认为该函数在您调用它时处于未定义状态。JavaScript hoists function declarations to the beginning of the scope. So the function is available in the whole scope (the function passed to
$()
) no matter where it is defined. JSLint might not detect this properly and think the function in undefined at the point you are calling it.您的代码之所以有效,是因为 JavaScript 运行时将在代码执行之前首先提升所有命名函数:
最佳实践会将所有命名函数放在执行范围;在您的情况下,它位于第一行之后:
$(function() {
这是为了避免任何可能的混淆。
了解更多信息 http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting
Your code worked because JavaScript runtime will first hoist all named function before code execution:
Best practice would be putting all your named function at the top of an execution scope; In your case it's after the first line:
$(function() {
This is to avoid any possible confusions.
Read more at http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting
有些人认为将所有函数定义和变量声明放在其作用域的顶部(即函数的开头)是个好主意。这是因为无论您的代码在哪里,Javascript 解释器都会执行此操作,并且如果您的代码尽可能接近解释器对其的理解,则有助于避免令人困惑的错误。
这是一种风格选择;你可以随意忽略它。使用 JSHint,您可以取消选择“需要在使用前声明变量”选项,您的代码就会通过。
(好吧,当您更正 JSHint 报告的其他错误时,它就会出现!)
Some people think it is a good idea to put all your function definitions and variable declarations at the top of their scope (i.e. at the beginning of the function). This is because the Javascript interpreter will do that, wherever your code is, and it helps to avoid confusing errors if your code is as close as possible to the interpreter's understanding of it.
This is a stylistic choice; you are free to ignore it. With JSHint, you can deselect the "Require variables to be declared before usage" option, and your code will pass.
(Well, it will when you correct the other error JSHint reports!)