《webgl入门指南》学习笔记一three.js与sim.js

最近又一次很久木有更新博客了，但是不是停了，而是一次性更新了太多，想清楚了自己水平有限，不想误导大家，所以就把这里单纯的当做自己的学习笔记。

上次让立方体转起来了，这次我们就直接介绍一个框架《webgl入门指南》的sim.js 这个东西是什么玩意呢，就是一个模拟器（官方说法），实际上就是简化了three.js里面的各种初始化，比如设置渲染器，循环重绘，处理DOM事件，基本的层级（层次模型）操作，作者没有对这个进行详解，只是说了，一句代码很易读，的确很易读，唯一的缺点就是，真有人不懂，比如我，现在看了《webgl编程指南》还好点，以后也会把《webgl编程指南的读书笔记贴出来，和大家交流下,这次贴的只是部分注释，关于dom操作的没有写，因为大家应该都比我懂，

// Sim.js - A Simple Simulator for WebGL (based on Three.js)

Sim = {};//空对象，用来构建后续的框架

// Sim.Publisher - base class for event publishers
// 以下为一个订阅者模式的基类，也称为观察者模式，是几乎sim.js对象的基类
Sim.Publisher = function() {//Publisher的构造函数
    this.messageTypes = {};//构造函数的属性
}

Sim.Publisher.prototype.subscribe = function(message, subscriber, callback) {//Publisher的原型方法
    var subscribers = this.messageTypes[message];
    if (subscribers)
    {
        if (this.findSubscriber(subscribers, subscriber) != -1)//若是在数组里面找到了，说明之前注册了，直接退出
        {
            return;
        }
    }
    else
    {
        subscribers = [];
        this.messageTypes[message] = subscribers;
    }

    subscribers.push({ subscriber : subscriber, callback : callback });//这句才是这个函数的关键，将订阅的函数
                                                                       //以及回调函数压入subscribers这个栈
}

Sim.Publisher.prototype.unsubscribe =  function(message, subscriber, callback) {
    if (subscriber)
    {
        var subscribers = this.messageTypes[message];

        if (subscribers)
        {
            var i = this.findSubscriber(subscribers, subscriber, callback);//为何这里是三个参数 
                                                                           //下面定义的明明是两个参数
                                                                           //js对传入的参数无所谓？
                                                                           //解决：的确无所谓，js都传入的参数个数无所谓
                                                                           //对于多了的参数自动忽略，但不能使未定义的参数
                                                                           //对于少传了参数的函数也能运行，只是这个参数默认为未定义
            if (i != -1)
            {
                this.messageTypes[message].splice(i, 1);//从数组中删除该
            }
        }
    }
    else
    {
        delete this.messageTypes[message];
    }
}

Sim.Publisher.prototype.publish = function(message) {
    var subscribers = this.messageTypes[message];

    if (subscribers)
    {
        for (var i = 0; i < subscribers.length; i++)
        {
            var args = []; 
            for (var j = 0; j < arguments.length - 1; j++)//这里的arguments到底是从哪里来的argument属于谁？
            	                                          //为什么不直接传入到下面的apply中？作用域问题？
            {
                args.push(arguments[j + 1]);//这里为什么要+1？？
            }
            //
            subscribers[i].callback.apply(subscribers[i].subscriber, args);//什么意思？
             //subcribers里面的回调函数被执行同时传入参数  ，apply是调用函数 第一个参数为callback的作用域
             //第二个是传入的参数数组（js的参数列表本身就是一个“类似数组”）
        }
    }
}

Sim.Publisher.prototype.findSubscriber = function (subscribers, subscriber) {//找到指定索引的位置
    for (var i = 0; i < subscribers.length; i++)
    {
        if (subscribers[i] == subscriber)
        {
            return i;
        }
    }
    
    return -1;
}








// Sim.App - app