最近又一次很久木有更新博客了,但是不是停了,而是一次性更新了太多,想清楚了自己水平有限,不想误导大家,所以就把这里单纯的当做自己的学习笔记。
上次让立方体转起来了,这次我们就直接介绍一个框架《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