javascript - 定义构造函数的不同方式

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/