OO Javascript - Object.prototype 中的对象实例化

Question

假设我们有一本书的 3 个章节，并且它们位于各自的 URL 上，如下所示：

• 第 1 章 = /1.html
• 第 2 章 = /2.html
• 第 3 章 = /3.html

现在假设我们想考虑 OO 并创建 2 个 JS 对象（在 jQuery 的帮助下）：

• 章节：将章节加载到元素中，并且
• 书籍：垂直显示章节（一个接一个）。

JS代码：

// Chapter
function Chapter(chapterId)
{
    this.chapterId = chapterId;
}

Chapter.prototype =
{
    getChapterId: function()
    {
        var chapterId = this.chapterId;
        return chapterId;
    },
    loadChapter: function(el)
    {
        $(el).load( this.getChapterId + ".html" ); // Ajax
    }
}

// Book
function Book()
{
    // ?
}

Book.prototype =
{
    // ?
}

在您看来，考虑到面向对象，定义对象“Book”及其原型中的方法的最佳方式是什么？

在 Book.prototype 中处理对象“Chapter”实例化的最优雅的方式是什么？

谢谢

Answer 1

当我开始编写面向对象风格的 JavaScript 时，我阅读了 this article。里面有一些很好的提示和解决方案！

Answer 2

我只需将章节 ID 作为参数传递到 Book 中，然后将章节加载到数组中。像这样的：

// Book
function Book(chapters) {
  this.chapters = chapters.map(function(id){ return new Chapter(id) });
}

var book = new Book([1,2,3,4]);

然后您可以创建方法来循环章节并根据需要对其进行操作。

Answer 3

你试过了吗：

(function (namespace, chapterId) {

var Chapter = function (chapterId) {
    this.chapterId = chapterId;
}

Chapter.prototype ={
getChapterId: function () {
    var chapterId = this.chapterId;
    return chapterId;
},

loadChapter: function (el) {
    $(el).load(this.getChapterId + ".html"); // Ajax
}}

namespace.Chapter = Chapter;
})(new Book(), chapterId);

Answer 4

啊，我之前没有很好地阅读您的问题。我会做这样的事情：

// Chapter
var Chapter = function(chapterId) {
    this.chapterId = chapterId;
}

Chapter.prototype.loadChapter: function(el) {
    $(el).load( this.chapterId + ".html" ); // Ajax
}


// Book
var Book = function(chapters) {
    this.chapters = (chapters) ? chapters : [];
    this.numberOfChapters = (chapters) ? chapters : 0; 
    // assume that this has to make sence, so if it is number of chapters, 
    // it start with 0.
}

Book.prototype.addChapter = function () {
    this.chapters.push(new Chapter(++this.numberOfChapters));
}