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

Question

Suppose we have 3 chapters of a book and that they are located on their own URL like this:

• Chapter 1 = /1.html
• Chapter 2 = /2.html
• Chapter 3 = /3.html

Now suppose we want to think OO and create 2 JS objects (with the help of jQuery):

• Chapter : which loads the chapter into an element, and
• Book : which vertically displays the chapters (one after the other).

JS code:

// 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 =
{
    // ?
}

In your opinion, thinking object-oriented, what's the best way to define the object "Book", along with methods in its prototype?

What's the most elegant way to handle the instantiation of the objects "Chapter" in Book.prototype?

Thank you

Answer 1

When I started writing OO styled JavaScript I read this article . Some good tips and solutions in there!

Answer 2

I would just pass the chapter ids as a parameter in Book and load the chapters in an array. Something like this:

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

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

Then you can create methods to loop the chapters and manipulate them as needed.

Answer 3

have you tried this :

(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

Ah I didn't read your question well before. I would do something like this:

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