addPage

来源：

龙崎鹏

2016-07-19

怎么能确定执行addComponent方法是正确添加到当前page页里，this.page存储了很多var page=$('<div class="h5_page section">')对象，老师帮解释下，有点不明

写回答

2回答

Lyn

2016-07-20

一、可以先看下 addPage 的定义

this.addPage = function( name , text ){
        var page = $('<div class="h5_page section">'); // <----  这个是 page
        if( name != undefined ){
            page.addClass('h5_page_'+name);
        }
        if( text != undefined ){
            page.text(text);
        }
        this.el.append(page); 
        this.page.push( page ); // <-----  关键代码，把 page 添加一个数组中

        return this;  // <----- 返回了当前（实例）对象
    }

注意到关键代码：最近一次执行的添加的 page（也就是 div.h5_page），在 this.page 这个数组最后面

this.page.push( page );

可以想想 this.page == [ 第一个Page ，第二个 Page ，最近一次刚添加的 Page ]

二、然后看看 addComponent

this.addComponent = function(name, cfg){
        // ... 
        var component;
        var page = this.page.slice(-1)[0];   // <-----  这里拿到了page ，最近一次添加的 Page
        switch( cfg.type ){
            // ...
        }
        page.append(component); // <--- 就是这里，你的问题的答案
        return this;
    }

page.append(component);

这行代码，让我们正确的把 component 塞到了正确的 page 中。

---

如果还有不清楚的欢迎在群里提问～