傳遞JavaScript對象以jQuery方式運行？

是的，所以我一直在用javascript搞亂了一段時間，但最近才進入像面向對象，原型設計和所有函數和變量的對象之類的東西。傳遞JavaScript對象以jQuery方式運行？

但是，如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

來源

2010-06-23 neph

您應該查看jQuery源代碼作爲初學者 – 2010-06-23 19:47:50

jQuery和其他庫定義了一個名爲$的函數，它具有幾個可選參數。通過調用$返回的對象不是DOM元素，而是一個jQuery對象，它用一組方便的函數包裝DOM元素。

你可以做類似的東西自己：

<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。

來源

2010-06-23 19:52:52

您需要在JavaScript中創建一個原型。這就是允許你添加一個函數給已經定義的對象（例如你給出的.click（）函數）。

你可以看看jQuery code，它是開源的。這不是最簡單的代碼，但你仍然可以看到它是如何工作的以及它們是如何工作的。

來源

2010-06-23 19:51:23

Mike的評論是一個很好的答案：看看jquery或Ext-Core的來源。

也許你錯過的是，在jQuery中，例如$（）返回一個jquery對象，它包裝普通的vanilla DOM節點，提供擴展功能。

來源

2010-06-23 19:52:46 timdev

是的，'click'和其他jQuery函數是jQuery對象的一部分，而不是HTML元素對象。使用像Firebug或Web Inspector這樣的調試器，並查看'$（）'函數返回的內容，如果你感興趣的話。 – tcooc 2010-06-23 19:55:41

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

來源

2010-06-23 19:59:07

嗯，這是有道理的，一旦你清楚地看到它真的很容易：D但jQuery代碼有一堆東西不是很容易感覺像在乾草堆裏尋找針 – neph 2010-06-23 20:44:16

因爲沒有人真正地回答了有關分機，你可以輕鬆地擴展元素包裝原型：

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

});

「這」指的Ext.Element的對象。

來源

2010-06-24 02:51:00

傳遞JavaScript對象以jQuery方式運行？

回答

相關問題