以jquery方式将javascript对象传递给函数？_Javascript_Jquery_Extjs

以jquery方式将javascript对象传递给函数？

javascript jquery extjs

以jquery方式将javascript对象传递给函数？,javascript,jquery,extjs,Javascript,Jquery,Extjs,是的，所以我在javascript上混了一段时间，但直到最近才开始研究面向对象、原型设计和为所有函数和变量使用对象但是，像jQuery或extJS这样的许多框架都有一些我还没有掌握的东西，您可以通过使用内置函数来搜索dom来定义对象，例如： var a = $('#mydiv'); 然后你可以做一个。点击（功能）所以我的问题是，如何创建一个“框架”，我可以用这种风格编写代码，比如： var mydiv = document.querySelector('mydiv'); mydiv.nep

是的，所以我在javascript上混了一段时间，但直到最近才开始研究面向对象、原型设计和为所有函数和变量使用对象

但是，像jQuery或extJS这样的许多框架都有一些我还没有掌握的东西，您可以通过使用内置函数来搜索dom来定义对象，例如：

var a = $('#mydiv');

然后你可以做一个。点击（功能）

所以我的问题是，如何创建一个“框架”，我可以用这种风格编写代码，比如：

var mydiv = document.querySelector('mydiv');
mydiv.neph(args,args);

所以我定义了我的对象，在本例中，它是一个dom元素或其他什么，现在我将它传递给带有参数的函数“neph”，我想创建允许我这样做的代码。但由于mydiv没有任何函数，因此在本例中它只有dom元素，因此mydiv.neph不存在，但在jquery中，您可以定义变量和.click或.mouseover或对象中存在的任何函数？混乱随之而来！：D

好的，很抱歉，如果这是一个迟钝的问题，那么btw=p

您需要用javascript创建一个原型。这就是允许您将函数添加到已定义的对象（即您作为示例给出的.click（）函数）的功能

你可以看看，它是开源的。这不是最简单的代码，但您仍然可以看到它是如何工作的以及它们是如何工作的。

Mike的评论是一个很好的答案：查看jquery或Ext Core的源代码

可能您缺少的是，在jquery中，例如$（）返回一个jquery对象，它包装了普通DOM节点，提供了扩展功能。

jquery和其他库定义了一个名为

的函数，该函数接受多个可选参数。调用

返回的对象不是DOM元素，而是用一组方便的函数包装DOM元素的jQuery对象

你可以自己做类似的事情：

<html>
   <body>
      <input id="derp" type="text"/>
<script type="text/javascript">

function $(id)
{
   return new myLibrary(id);
};

function myLibrary(id)
{
   this.el = document.getElementById(id);
};

myLibrary.prototype.help = function()
{
   alert(this.el.id);
   return this;
};

// Woah! My own fake jquery!
$("derp").help();
</script>

   </body>
</html>


函数$（id）
{
返回新的myLibrary（id）；
};
功能myLibrary（id）
{
this.el=document.getElementById（id）；
};
myLibrary.prototype.help=函数（）
{
警报（此el.id）；
归还这个；
};
//哇！我自己的假jquery！
$（“derp”）.help（）；

当然，jQuery要复杂得多。例如，它将用于在诸如

jQuery之类的调用中正确设置this
。在jQuery中，$
只是jQuery
对象的别名。所以当你调用$（'#mydiv'）
您实际上是在调用一个函数，比如jQuery（'#mydiv'）因此，使jQuery如此酷的部分原因是，$（）
函数返回this
，这意味着当调用$（）
时，您将获得jQuery对象及其所有方法的句柄。这就是允许您执行以下操作的原因：
var a = $('#mydiv');
a.click(function() { // etc etc etc });

因此，要完成您的示例：
var mydiv = document.querySelector('mydiv');
mydiv.neph(args,args);

您必须创建一个对象，该对象上有一个名为neph
的函数，并在调用querySelector时在mydiv
的上下文中返回该对象
var myFramework = function() {
  this.context = undefined;
  this.neph = function(arg, args) {
    console.log(arg, args);
  }
};

var myCuteFunction = function(element) {
  var f = new myFramework();
  f.context = element;
  return f;
}

// ...

var x = myCuteFunction('#mydiv');
x.neph(arg, args);

由于没有人真正回答过Ext，您可以轻松地扩展元素包装器原型：
Ext.override(Ext.Element, {
    myMethod: function(a, b){
        console.log(a, b, this);
    }

});

“this”将引用Ext.Element对象。
您应该像starterYes一样签出jQuery源代码，并且单击
和其他jQuery函数是jQuery对象的一部分，而不是HTML元素对象。如果您感兴趣，可以使用Firebug或Web Inspector之类的调试器，查看$（）
函数返回的内容。啊，是的，这是有道理的，一旦您清楚地看到它，实际上非常容易：D但是jquery代码有一大堆东西，这并不容易，感觉就像大海捞针一样