如何在jquery中使用来自另一个函数的变量答案

【问题标题】：how to use a variable from another function in jquery如何在jquery中使用来自另一个函数的变量
【发布时间】：2012-03-13 15:31:19
【问题描述】：

这是我的功能的基本版本（我第一次这样做，所以如果我解释得不好，我很抱歉）

var pages = {
    init:function(){

    },
    home:function(){

        articleid = this.closest("article").attr('id');
        skillsbtn =  $(this).hasClass("skillsbt");
        home = $('#home');
        homeheight = '-' + home.height();

    if (skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
},
    work:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    skills:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    contact:function(){

    },
}

所以这个想法是技能btn = $(this) 参考$(this) 在home:function 的任何内容。我试图将变量从home:function 复制到work:function 并且它唤醒得很好。但是我可以将我需要的变量放在init:function 中，但能够在home:function 中调用它们，并通过这样做，能够改变$(this) 的含义，即this->home，或this- >工作

我曾尝试像pages.init.skillsbtn.call(this) 一样访问它，但它死了也不起作用。

希望你能帮忙 - 谢谢

【问题讨论】：

标签： javascript jquery oop function

【解决方案1】：

您到处使用全局变量（var 在home 函数中的前四个赋值之前的位置在哪里）？

您想共享状态并且不为此使用对象？这就是他们的目的。什么是页面？如果是某种“repository”或“namespace”，可能用大写的名字来区分它不是普通的实例。

由于jQuery事件中的this是绑定到事件源的，所以不能直接使用this，但是可以这样做：

var Pages = {
    init:function(){
      Pages.worker = new PagesWorker;
      // later if you see fit you can have more of these
    },
    home:function(){
      return Pages.worker.home($(this));
    },
    work:function(){
      return Pages.worker.work($(this));
    },
    skills:function(){
      return Pages.worker.skills($(this));
    },
    contact:function(){
      return Pages.worker.contact($(this));
    },
}

function PagesWorker(src){
  // init
}

PagesWorker.prototype.home = function(src){

    // use var xxx = yyy for ones local for this function only
    // use this.xxx = yyy for those that should persist between functions   
    var articleid = src.closest("article").attr('id');
    this.skillsbtn =  src.hasClass("skillsbt");
    var home = $('#home');
    var homeheight = '-' + home.height();

    if (this.skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
};

PagesWorker.prototype.work = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

PagesWorker.prototype.skills = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

PagesWorker.prototype.contact = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

如果你真的确定你只有一个 pages 对象，你可以使用 pages.xxx 在函数调用和你的原始代码之间共享变量。但这不是正确的做法，除非你真的非常确定。

【讨论】：

这一切（编程）都可以通过实践和教程来学习还是我需要阅读任何背景资料？为了擅长这个
我想说练习是不够的，如果没有某种指导，你会学到很多“黑客”和“捷径”。如果您知道自己想要什么，则复制粘贴修改有效，但作为长期学习的方法较少。你应该读一些书，或者好的博客（不过我不知道有什么适合初学者的；我在 www.c2.com 或 www.martinfowler.com 上感觉不错，但这些更多的是关于更高层次的——但毕竟，设计才是最重要的，程序（和编写它的语言）只是一种实现——如果你的设计不好，即使是 Smalltalk 也无法帮助你做好）。

【解决方案2】：

创建另一个对象，其中包含您需要在全局范围内的变量并将其用作存储库。试试这个：

var pages = {
    init: function() {
    },
    settings: {
        skillsButton: "test"
    },
    home: function() {
        this.settings.skillsButton = "value changed in 'home'";
    }
}

然后，您可以在需要时参考settings.skillsButton。

Example fiddle

【讨论】：

他在这里会遇到问题，因为在我看来this 指的是他代码中的一个 DOM 元素。

【解决方案3】：

通过在函数外部声明变量并在函数内部分配它来使变量成为全局变量

var globalVar,
    pages = {
    init:function(){

    },
    home:function(){

        articleid = this.closest("article").attr('id');
        skillsbtn =  $(this).hasClass("skillsbt");
        home = $('#home');
        homeheight = '-' + home.height();

    if (skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
},
    work:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    skills:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    contact:function(){

    },
}

然后将你想使用的任何东西赋值给全局变量

【讨论】：