Question

我已经构建了一个包含大量javascript的工作页面。 javascript放在<head></head>标签之间没有问题，但我真的想将它移动到外部文件。

我虽然能够简单地剪切并粘贴所有代码减去<script></script>标签，但将$(document).ready(function() { });包含在.js文件中并以通常的方式引用它，但它会让我变大头痛。任何人都可以建议我为什么不能这样做？

作为折衷方案，我虽然会将至少部分功能分离并将它们放在外部文件中，但也存在问题。

function look(){
  var word_id = $(this).attr("id");  
  //    Other stuff
  var   value = $(this).val();  
  //    Other stuff
}

$("input").focus(function(){look();});

在上面的函数中，这个不是以前的这个，代码如下所示：

$("input").focus(function(){
  var word_id = $(this).attr("id");  
  //    Other stuff
  var   value = $(this).val();  
  //    Other stuff
});

我希望一个非常聪明的人能够轻松发现我的错误。非常感谢，帕特里克。

Answer 1

尝试使用此代码：

$("input").focus(look);

问题是当look函数用匿名函数包装时，look内的 this 指针被破坏了。这是一个更明确的解释：

$("input").focus(function() { 
    this; // Refers the DOM element jQuery is acting on
    // The _this_ pointer of the anonymous function is not passed to look.
    look(); // The _this_ pointer in look instead points to the window scope.
});

如果出于某种原因需要使用匿名函数包装函数调用，可以使用apply或call将外部作用域的 this 指针传递给look。这是一个简单的例子：

$("input").focus(function() { 
    ...
    look.apply(this);
    // This works too:
    // look.call(this);
});

call和apply方法几乎相同。他们只在参数方面有所不同。以下是call and apply

的更多信息

Answer 2

当您调用未指定上下文的函数时，在调用look()时，该函数内的this关键字将成为全局对象。

在您的情况下，您只能传递对您的函数的引用，它将正常工作：

$("input").focus(look);

此外，知道this关键字不是完全隐含的可能会有所帮助，可以使用call和apply函数明确设置：

function test(arg1){
  alert(this + arg1);
}

test.call('hello ', 'world'); // will alert 'hello world'

在下列情况下隐式设置上下文（this关键字）：

1-调用作为对象成员的函数时，例如：

obj.myFunc(); // 'this' will refer to obj

2-使用new运算符调用函数时：

var test = new Func(); // 'this' will refer to a new object

3-调用与任何对象无关的函数时：

foo();
// or
(function () {})(); // 'this' will be the global object

Answer 3

我建议将JS放在页脚中，这样就可以确保只有在页面上的其他内容（DOM）完全加载后才会加载。

功能问题（javascript）

3 个答案: