如何在保持相同API的同时将此JavaScript包装在立即调用的函数表达式(IIFE)中?

How do I wrap this JavaScript in an Immediately-Invoked Function Expression (IIFE) while maintaining the same API?

本文关键字：表达式 函数 调用 IIFE API JavaScript 包装      更新时间：2023-09-26

(纯粹是为了学习目的)我们正在实现JQuery的一些功能，并想知道如何在IIFE ("模块")中包装代码。

我们正在尝试实现的两个JQuery方法是addClass和removeClass，我们需要能够链接这些方法。

目前我们的代码工作:

 var FAQuery = function(selector) {
  this.id = selector.replace('#','');
  this.elem = document.getElementById(this.id);
  this.addClass = function(className) {
    this.elem.className = this.elem.className + className;
    return this;
  }
  this.removeClass = function(className) {
    this.elem.className = this.elem.className.replace(className, '');
    return this;
  }
  return this;
}

，然后以以下方式调用:

FAQuery('#div3').addClass('pass').removeClass('fail');

我们将如何在生活中包装它?

试试吧:http://morning-challenge.herokuapp.com/20150519.html
完整的代码与基于浏览器的单元测试: http://git.io/vTcRL

谢谢!

IIFE用于强制变量为局部变量而不是全局变量。但是，您已经导出了您想要的变量，因此IIFE在这里不会做太多事情。

也就是说，我可以推荐的一件事是将方法放在"原型"上，而不是将它们附加到每个实例上。

var FAQuery = function(selector) {
  if(!(this instanceof FAQuery)){
    return new FAQuery(selector);
  }
  this.id = selector.replace('#','');
  this.elem = document.getElementById(this.id);
}
FAQuery.prototype.addClass = function(className) {
  this.elem.className = this.elem.className + className;
  return this;
}
FAQuery.prototype.removeClass = function(className) {
  this.elem.className = this.elem.className.replace(className, '');
  return this;
}

我还添加了一个带有instanceof检查的行，因此在创建FAQuery对象时不需要使用new操作符。

相关文章：