javascript';这';链接代码
我正在尝试开发一个类似jQuery的库,它允许链接。我已经有了可以工作的功能,但我需要将它们链接在一起。请查看下面的代码,并帮助我解决如何使用“this”访问正确的上下文,以及如何开发类似jQuery的库来允许链接。我希望“learnQuery()”的功能与jQuery()类似。我无法将cssClass方法链接在一起javascript';这';链接代码,javascript,methods,this,Javascript,Methods,This,我正在尝试开发一个类似jQuery的库,它允许链接。我已经有了可以工作的功能,但我需要将它们链接在一起。请查看下面的代码,并帮助我解决如何使用“this”访问正确的上下文,以及如何开发类似jQuery的库来允许链接。我希望“learnQuery()”的功能与jQuery()类似。我无法将cssClass方法链接在一起 function learnQuery(elementSelector) { 'use strict'; var learnQueryContext = this;
function learnQuery(elementSelector) {
'use strict';
var learnQueryContext = this;
function cssPropProxy(property, value) {
return cssProp(elementSelector, property, value);
}
function ajaxReqProxy(url, options) {
return ajaxReq(url, options);
}
var cssClass = new CssClass();
return {
cssProp : cssPropProxy,
ajaxReq : ajaxReqProxy,
cssClass: {
add: function(setClass) {
cssClass.add(elementSelector, setClass);
return learnQueryContext;
},
remove: function(deleteClass) {
cssClass.remove(elementSelector, deleteClass);
return learnQueryContext;
},
toggle: function(toggleClass) {
cssClass.toggle(elementSelector, toggleClass);
return learnQueryContext;
},
has: function(hasClass) {
cssClass.has(elementSelector, hasClass);
return learnQueryContext;
}
}
是的,在尝试学习同样的东西之前,我一直在玩类似的东西。我仍保存了此文件,请查看您是否理解:
var $ = (function(){
$ = function(selector){ return new MyQuery(selector); };
var MyQuery = function(selector){
var nodes = document.querySelectorAll(selector);
this.each = Array.prototype.forEach.bind(nodes);
this.map = Array.prototype.map.bind(nodes);
var len = this.length = nodes.length;
for(var i = 0; i < len; i++) this[i] = nodes[i];
};
$.fn = MyQuery.prototype = {
addClass: function(classes){
this.each(function(el){
classes.forEach(function(className){
el.classList.add(className);
});
});
return this;
},
removeClass: function(classes){
this.each(function(el){
classes.forEach(function(className){
el.classList.remove(className);
});
});
return this;
},
addAttribute: function(newAttrib, value){
this.each(function(el){
el.setAttribute(newAttrib, value);
});
return this;
},
removeAttribute: function(attrib, value){
this.each(function(el){
el.removeAttribute(attrib);
});
return this;
},
remove: function(){
this.each(function(el){
el.remove();
});
return this;
},
on: function(type, callback){
this.each(function(el){
el.addEventListener(type, callback);
});
return this;
},
append: function(elem){
this.each(function(el){
el.appendChild(elem);
});
return this;
},
css: function(prop, value){
this.each(function(el){
el.style[prop] = value;
});
return this;
}
}
return $;
})();
var$=(函数(){
$=函数(选择器){返回新的MyQuery(选择器);};
var MyQuery=函数(选择器){
var节点=document.querySelectorAll(选择器);
this.each=Array.prototype.forEach.bind(节点);
this.map=Array.prototype.map.bind(节点);
var len=this.length=nodes.length;
对于(var i=0;i
很难弄清楚这些函数的用途。
cssproproxy()
链接的基本思想是返回对象实例。在代码中,您似乎返回了对函数的引用。下面是一个简单的链接示例,可能会有所帮助:
function chainingExample(startText){
return {
mytext: startText,
append: function(text){
this.mytext += text;
return this;
},
show: function(){
return this.mytext;
}
}
}
console.log(chainingExample("hello").append(" there").append(" again").show());
/* results in: "hello there again" */
当以这种方式使用时,此
指向返回的对象。它将看起来像:
{ mytext: 'hello there again',
append: [Function],
show: [Function] }
当然,您可以在此基础上进行扩展,但关键思想是,您返回的对象需要包含您想要调用的函数<代码>这个
和原型是JS中比较混乱的部分之一。Kyle Simpson的一篇非常方便的短文是:“你不知道JS:this&Object Prototype” 感谢Edwin和MarkM的回复。我的主要问题是上下文。我需要learnQuery(element).someMethod()在与另一个方法链接时保留其上下文。我仍然无法完全理解JS中的“this”,以及如何确保它引用调用对象——特别是当对象在闭包中调用函数截断时,如我的示例中所示。我上面的示例使用learnQueryContext变量指出,我知道这就是我的问题所在,但我不知道如何保留上下文(即正确的对象),以便调用的函数对其进行操作并返回所需的值。我非常接近。我没有像最初那样返回长对象,而是将其转换为一个可以在其内部引用的变量,然后返回该变量。这允许它保留正确的上下文。见下文:
function learnQuery(elementSelector) {
'use strict';
function cssPropProxy(property, value) {
return cssProp(elementSelector, property, value);
}
function ajaxReqProxy(url, options) {
return ajaxReq(url, options);
}
var cssClass = new CssClass();
var dom = new Dom();
var eventListener = new EventListener();
var returnedContext = {
cssProp : cssPropProxy,
ajaxReq : ajaxReqProxy,
cssClass: {
add: function(setClass) {
cssClass.add(elementSelector, setClass);
return returnedContext;
},
remove: function(deleteClass) {
cssClass.remove(elementSelector, deleteClass);
return returnedContext;
},
toggle: function(toggleClass) {
cssClass.toggle(elementSelector, toggleClass);
return returnedContext;
},
has: function(hasClass) {
return cssClass.has(elementSelector, hasClass);
}
}
};
return returnedContext;
}
现在我可以使用:
learnQuery('someElement').cssClass.add('someClass').cssClass.toggle('someClass');
它的工作原理与预期一致。cssClass本身就是一个构造函数,我在别处定义了它及其方法。这段代码只是作为一个接口,允许learnQuery()使用它们
请告诉我您的想法以及解决方法。除非learnQuery是一个构造函数,
此
可能是您代码中的窗口
。如果输入Edwin需要更多帮助,请发表评论。我在下面发布了我的解决方案,它非常简单,只对代码做了很小的更改。我还进一步解释了这段特定代码的作用以及我想要实现的目标。看看,让我知道你的想法。输入的thx。我在下面贴出了我自己的解决方案,因为我用一种非常简单的方式解决了我的问题。我还更清楚地解释了我的代码试图实现什么。我同意根据我问题中有限的信息很难理解我想要什么。请随时发表评论。你到底想完成什么?我很乐意帮助你,因为我还可以通过教学更多地了解类似jquery的库?嗨,Edwin,我实际上正在协助一个名为learnQuery的开源项目,该项目即将发布。我会很高兴提供一个链接,一旦它出来-这应该是在未来几周。它的目的是帮助开发人员更好地理解JavaScript语言的来龙去脉,所以我认为这是您的拿手好戏。