Question

我正在尝试开发一个像jQuery这样允许链接的库。我已经有功能，但我需要将它们链接在一起。请查看下面的代码，并帮助我解决如何使用“this”访问正确的上下文并开发一个类似jQuery的库，允许链接。我希望'learnQuery（）'像jQuery（）一样运行。我无法将cssClass方法链接在一起。

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;
      }
    }

Answer 1

是的，在尝试学习同样的东西之前，我正在玩这样的东西。我仍然保存了这个，所以看看你能理解这个：

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 $;
})();

Answer 2

有点难以弄清楚你想要用这些功能发生什么。 cssPropProxy()会返回cssProp，但cssProp看起来只是对cssPropProxy()的引用。

链接的基本思想是返回对象实例。在您的代码中，您似乎正在返回对该函数的引用。这是一个可能有帮助的简单链接示例：

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" */

以这种方式使用this指向返回的对象。它看起来像：

{ mytext: 'hello there again',
  append: [Function],
  show: [Function] }

当然你可以对此进行扩展，但关键的想法是你返回的对象需要包含你想要调用的函数。 this和原型是JS中比较混乱的部分之一。一个非常方便，简短的文字是：“你不知道JS：这个＆amp; amp;对象原型＆＃39;凯尔辛普森。

Answer 3

感谢Edwin和MarkM的回复。我的主要问题是上下文。我需要learnQuery（element）.someMethod（）在与另一个方法链接时保留其上下文。我仍然有问题在JS中完全理解'this'，以及如何确保它引用调用对象 - 特别是当对象在闭包中调用函数cutoff时，就像在我的例子中一样。我上面的例子使用了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（）使用它们。

请让我知道您的想法以及如何解决它。

用于链接的javascript'this'代码

3 个答案: