game.js 是主文件. 加载的有:
vargame = { init:function(stageContainer){this.stageContainer = stageContainer;this.bindEvent(); loading.start(); resource.load(); },
loading.js
start:function(){this.elem.style.display ="block";
设置或返回元素的 style 属性。 改变元素的属性
display属性 设置元素如何被显示
block块,此元素将显示为块级元素，此元素前后会带有换行符。
this.elem.innerHTML ='loading... '+ (num*100).toFixed(2) +'%';
属性设置或返回表格行的开始和结束标签之间的 HTML
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
this.elem.parentNode.removeChild(this.elem);
2.resource.js
require.js加载的模块，采用AMD规范。
define函数
define('mygame/resource', ['hilo/loader/LoadQueue', 'mygame/mediator'], function(LoadQueue, mediator){...});
模块必须采用特定的define()函数来定义
如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中
'hilo/loader/LoadQueue', 'mygame/mediator' 是依赖模块. function(LoadQueue, mediator)的入参LoadQueue, mediator; 在其后的方法体内可以引用.
var resource = { loadedRes:{}, loadedRes:[ {id:'fish',src:'src/images/fish.png'}, {id:'bg',src:'src/images/bg.png'} ],
resource 变量, 对象. 在game.js中"resource.load();"中的resource
加载动效图片.
局部变量loadedRes,loadedRes
load:function(){ var res = this.res; var loadedRes = this.loadedRes; var queue = this.queue = new LoadQueue; queue.add(res);
load 方法名. function(){} 符合AMD编写规范. 用queue.add方法加载资源.
queue.on("complete",function(){var imgs = [];for(vari=0;i< res.length;i++){ var id = res[i].id; loadedRes[id] = queue.getContent(id); } mediator.fire("resource:complete"); }); queue.on("load",function(d){mediator.fire("resource:loaded", { num:queue._loaded/(queue._source.length+1) }); }); queue.start();
用queue的on方法,描绘资源.
mediator.fire("resource:complete"); 中resource:complete 什么意思? queue.start(); 队列开始,类似线程开始
/** *@language=en *@classLoadQueue is a queue-like loader. *@mixesEventMixin *@borrowsEventMixin#on as #on *@param{Object} source resource that need to be loaded,could be a single object or array resource. *@modulehilo/loader/LoadQueue *@requireshilo/core/Class *@property{Int} maxConnections the limited concurrent connections. default value 2. */
@class（@constructor） —— 标注该函数是一个构造函数，需要使用new来实例化 function @mixes —— 标注该对象混入了另一个对象的所有成员 @borrow —— 将另一个标识符的描述添加到当前标识符的描述 @requires 描述: 这个文件需要一个 javascript 模块。 borrows EventMixin#on as #on on的方法是用的EventMixin的on
LoadQueue是处理队列; EventMixin.js 是具体处理数据的实现,其中是实际的处理方法.
varLoadQueue = Class.create(/** @lends LoadQueue.prototype */{ Mixes: EventMixin, constructor:function(source){this._source = [];this.add(source); },
构造函数,调用add
add: function(source){ var me =this;if(source){source=sourceinstanceofArray ?source: [source]; me._source = me._source.concat(source); }returnme; },
在函数中，this 表示全局对象。
concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
start:function(){varme =this; me._loadNext();returnme; },
/** *@language=en *@private*/_loadNext:function(){varme = this, source = me._source, len = source.length;//all items loadedif(me._loaded >= len){ me.fire('complete');return; } ...},
_loadNext是具体实现的方法, load完成,则直接返回return 否则继续实现:
if(me._currentIndex < len -1&& me._connections < me.maxConnections){ var index = ++me._currentIndex;var item = source[index];var loader = me._getLoader(item);if(loader){ var onLoad = loader.onLoad, onError = loader.onError;loader.onLoad = function(e){ loader.onLoad = onLoad;loader.onError = onError;var content = onLoad && onLoad.call(loader, e)||e.target;me._onItemLoad(index, content);};loader.onError = function(e){ loader.onLoad = onLoad;loader.onError = onError;onError && onError.call(loader, e);me._onItemError(index, e);};me._connections++;} me._loadNext();loader && loader.load(item);} },
js 与或运算符 || && 妙用 可用于精简代码，降低程序的可读性。 var index = me._currentIndex; 的 = 还不甚理解. 用_getLoader方法判断加载的资源类型. var 定义变量,可以用"," 分割.
_getLoader: function(item){varloader = item.loader;if(loader)returnloader;vartype= item.type|| getExtension(item.src); switch(type){case'png':case'jpg':case'jpeg':case'gif':case'webp': loader =newImageLoader();break;case'js':case'jsonp': loader =newScriptLoader();break; }returnloader; },
_onItemLoad: function(index, content){ varme= this,item=me._source[index];item.loaded =true;item.content = content;me._connections--;me._loaded++;me.fire('load',item);me._loadNext(); },
EventMixin.js 使用频繁, 先看看 ===表示类型什么的全部相等
fire: function(type,detail){varevent, eventType;if(typeoftype==='string'){ eventType =type; }else{ event =type; eventType =type.type; }varlisteners =this._listeners;if(!listeners)returnfalse;vareventListeners = listeners[eventType];if(eventListeners){vareventListenersCopy = eventListeners.slice(0); event = event ||newEventObject(eventType,this, detail);if(event._stopped)returnfalse;for(vari =0; i < eventListenersCopy.length; i++){varel = eventListenersCopy[i]; el.listener.call(this, event);if(el.once) {varindex = eventListeners.indexOf(el);if(index >-1){ eventListeners.splice(index,1); } } }if(eventListeners.length ==0) delete listeners[eventType];returntrue; }returnfalse; }};
js注释 this._source = []; 定义的私有变量,
网友评论