Question

是的，所以我一直在搞乱javascript，但最近才进入了面向对象，原型设计和使用所有功能和变量对象的东西。

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

var a = $('#mydiv');

然后你可以做a.click（函数）;

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

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

所以我定义了我的对象，在这种情况下它是一个dom元素或者其他什么，现在我将它传递给带有参数的函数“neph”，我想创建允许我这样做的代码。但是因为mydiv没有任何函数，所以它在这种情况下只有dom元素，所以mydiv.neph不存在，但在jquery中你可以定义var和.click或.mouseover或者对象中存在的任何东西作为函数？随之而来的是混乱！：d

对不起，如果这是一个迟钝的问题btw = P

Answer 1

您需要在javascript中创建一个Prototype。这是允许您将函数添加到已定义的对象（即您提供的.click（）函数）的原因。

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

Answer 2

Mike的评论是一个很好的答案：查看jquery或Ext-Core的来源。

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

Answer 3

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>

当然，jQuery要复杂得多。例如，它会使用apply and call在this等调用中正确设置jQuery.each。

Answer 4

在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);

Answer 5

由于没有人真正回答过Ext，你可以轻松扩展元素包装器原型：

Ext.override(Ext.Element, {
    myMethod: function(a, b){
        console.log(a, b, this);
    }

});

“this”将引用Ext.Element对象。

以jquery方式传递javascript对象的功能？

5 个答案: