Question

因此，对javascript和jQuery不熟悉我遇到了两种定义构造函数的方法。

首先是这样的。大概是简单的javascript构造函数

var assigner = function assigner(object){
  this.title = object.title;
  this.message = object.message;
  this.backGround = object.svgBackground;
  this.content = object.content;
  this.id = '#' + object.title;
  
  var className = "projects-title";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  
  var className = "projects-message";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  
  var className = "projects-background";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  
  var className = "projects-content";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  $(this.id).find('.projects-title').append(this.title);
  $(this.id).find('.projects-message').append(this.message);
  $(this.id).find('.projects-background').append(this.backGround);
  $(this.id).find('.projects-content').append(this.content);
};

然后是第二个。本质上是一个jQuery构造函数。

(function( $ ){
$.fn.methodToCreate= function(tagName,className,id) {
  $(id).append("<"+tagName+" "+"class="+"\'"+className+"\'>"+"SampleContent"+"</"+tagName+">");
  return this;
}; 
})( jQuery );

我希望有人可以解释为什么我们在第二个函数中需要这种特殊语法。我经常遇到的一件事是人们说它“扩展”了jQuery。是否有任何资源让新手可以围绕这种现象？

Answer 1

您提供的第一个示例可以用作构造函数，但约定规定我们将构造函数方法名称大写以阐明该区别（有关详细信息，请参阅此处：https://stackoverflow.com/a/1564489）。以下是Book构造函数的简单示例：

function Book(name, year) {
  this.name = name;
  this.year = '(' + year + ')';
};

您也可以将其分配给变量：

var Book = function(name, year) {
  this.name = name;
  this.year = '(' + year + ')';
};

在此示例中，此构造函数可用于创建Book实例，如下所示：

var hamlet = new Book('Hamlet', 1603);

您提供的第二个示例不是我所谓的构造函数方法，而是jQuery 插件。它将扩展 jQuery实例，通过附加一个新方法，允许你在一个JS文件中调用该方法，如下所示：

$('someSelector').methodToCreate('div', '.someClass', '#someId');

在您给出的示例中使用了立即调用的函数表达式，用于封装和保护$实例。您可以在此处了解有关如何创建jQuery插件的更多信息：https://learn.jquery.com/plugins/basic-plugin-creation/

Answer 2

使用es6类语法

class MyGreatClass {

  constructor(){

  }

}

定义构造函数

2 个答案: