yos*_*-fo 8 javascript jquery procedural-programming function
我的应用程序的JavaScript/jQuery包含在外部scripts.js文件中.它通常看起来像这样:
$('document').on('ready', function() {
giraffe();
elephant();
zebra();
});
function giraffe() {
// code
}
function elephant() {
// code
}
function zebra() {
// code
}
giraffe()仅用于可用的视图,/animal/giraffe
elephant()仅用于可用的视图,/animal/elephant
zebra()仅用于可用的视图/animal/zebra,
但是所有3个都应该在可用的视图上运行/animal/all.这是一个基本的例子,但这是将它们全部放在一个.js文件中的原因,除了将HTTP请求保持在最低限度之外.
我的问题是,这会影响JavaScript呈现吗？即使giraffe()没有使用(没有可用的元素)/animal/zebra,它仍然被调用.如果找不到任何操作,js/jQuery会忽略该函数吗？我确定整个脚本都被读了,这可能需要时间.那么,处理这个问题的最佳方法是什么？
为了避免冲突,我在js文件的顶部创建了条件,只运行活动页面所需的函数:
$('document').on('ready', function() {
var body = $('body');
if( body.hasClass('giraffe') ) {
giraffe();
}
if( body.hasClass('elephant') ) {
elephant();
}
if( body.hasClass('zebra') ) {
zebra();
}
});
这比我想要的更冗长,但它成功地使这些功能模块化/冲突免费.我欢迎对此解决方案进行改进.
只运行您需要的代码肯定会更好。这并不难；唯一的复杂性是处理您的/animals/all案件。如果您想将所有代码保存在一个文件中，可以这样做：
var animals = {
giraffe: function() {
console.log( "I'm a giraffe" );
},
elephant: function() {
console.log( "I'm an elephant" );
},
zebra: function() {
console.log( "I'm a zebra" );
}
};
$(function() {
var animal = location.pathname.split('/').pop();
if( animal == 'all' ) {
for( var animal in animals ) {
animals[animal]();
}
}
else if( animal in animals ) {
animals[animal]();
}
else {
console.log( "I'm a mystery animal" );
}
});
实际上，您可以通过访问 Stack Overflow 上类似的 URL 来测试此代码，然后将该代码粘贴到 JavaScript 控制台中：
https://stackoverflow.com/animal/giraffe
https://stackoverflow.com/animal/elephant
https://stackoverflow.com/animal/zebra
https://stackoverflow.com/animal/ocelot
https://stackoverflow。 com/动物/全部
更新：好的，所以你在评论中解释说实际情况有点复杂。我会将这段代码留在这里，以防它对任何人都有用，但对于您的情况，您可能会使用已有的代码更接近您需要的内容。
WRT 的问题是，当您在与它无关的页面上时，您的动物功能之一会做什么，当然这取决于它的编码方式。它可能成功地什么也不做，或者可能出错，对吗？
由于我们正在讨论 jQuery 代码，因此这里有几个示例。假设您有代码通过 ID 查找元素，然后假设该元素存在：
var zebraElement = $('#zebra')[0];
console.log( zebraElement.value );
在元素存在的页面上#zebra，此代码将记录其value属性。（为了讨论，我假设它是一个具有值的元素，例如输入元素。）
但如果#zebra不存在，则zebraElement存在undefined，并且尝试访问它value将会失败并进入调试器。
OTOH，如果你这样编码：
var $zebra = $('#zebra');
console.log( $zebra.val() );
#zebra如果丢失也不会失败，它会成功打印undefined而不会导致错误。
同样，如果您有使用 的代码$().each()，当元素丢失时，它通常会运行而不会失败，因为它根本不会执行回调函数：
$('.animal').each( function( i, e ) {
console.log( $(e).val() );
});
如果没有带有 的元素class="animal"，则console.log()永远不会到达调用。所以没有错误，它只是什么也没做。
根据您正在做的事情，这可能是一种完全合理的方法，可以仅启动您需要的行为 - 只需确保您的代码通过干净地执行任何操作来处理丢失的 DOM 元素。
另请务必阅读尼克的回答以获取更多见解。
还有一个更新……在评论中您提到关闭body元素上的类名。一个很好的方法是类似于上面的代码示例。您不需要为每种动物都提供条件，只需要一个循环和一个条件：
var animals = {
giraffe: function() {
console.log( "I'm a giraffe" );
},
elephant: function() {
console.log( "I'm an elephant" );
},
zebra: function() {
console.log( "I'm a zebra" );
}
};
$(function() {
var $body = $('body');
for( var animal in animals ) {
if( $body.hasClass(animal) ) {
animals[animal]();
}
}
});
因此，例如，如果有的话，<body class="giraffe zebra">它将调用animals.giraffe()和animals.zebra()函数。