webuploader上传插件源代码重点难点分析
webuploader源代码设计博大精深，具有工匠精神，本文分析webuploader源代码总体流程和一些重点难点，webuploader采用模块机制，比较复杂，模块编程和异步加载现在几乎已经成为历史，本文忽略wiget组件机制和flash部分的源码分析。
先看webuploader的总体程序结构：
(function( root, factory ) { // 直接执行匿名函数，传参，root就是window，factory就是模块构造函数
var modules = {},
_require = function( deps, callback ) { //获取依赖模块，调用callback，传递依赖模块，callback调setModule( id, factory, arguments )
var args, len, i;
// 如果deps不是数组，则直接返回指定module
if ( typeof deps === 'string' ) {
return getModule( deps );
} else {
args = [];
for( len = deps.length, i = 0; i < len; i++ ) {
args.push( getModule( deps[ i ] ) );
}
return callback.apply( null, args );
}
}
_define = function( id, deps, factory ) { // 调require
_require( deps || [], function() {
setModule( id, factory, arguments );
});
}
setModule = function( id, factory, args ) { // 执行模块构造函数factory，返回对象保存到modules[]
var module = {
exports: factory
},
returned;
if ( typeof factory === 'function' ) {
args.length || (args = [ _require, module.exports, module ]);
returned = factory.apply( null, args );
returned !== undefined && (module.exports = returned);
}
modules[ id ] = module.exports;
}
getModule = function( id ) {}
exportsTo = function( obj ) { // obj是引用所有模块集合，此函数是修改引用对象之后再返回引用对象，修改什么呢？就是把模块名中的xxx/路径转换为.xxx namespace
var key, host, parts, part, last, ucFirst;
// make the first character upper case.
ucFirst = function( str ) { //把首字母变为大写
return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
};
for ( key in modules ) { // 循环处理modules[]中每一个模块，key就是模块名，以runtime/runtime为例
host = obj; // 每次循环开始时host重新引用obj
if ( !modules.hasOwnProperty( key ) ) {
continue;
}
parts = key.split('/'); //如果模块名有/xxx这样的路径，就取路径名到数组 parts=['runtime','runtime']
last = ucFirst( parts.pop() ); // 从parts取出（去掉）最后一部分，第一个字母变大写，数组变为['Runtime']，下面只循环一次，只有一个路径
while( (part = ucFirst( parts.shift() )) ) { // 如果模块名有路径，循环处理每一个部分，第一个字母大写
host[ part ] = host[ part ] || {}; // 修改属性是修改引用的obj的属性，第一次循环obj.Runtime={}
host = host[ part ]; // host重新赋值，不再引用之前的对象，而是引用host[part]对象也就是obj的一个属性。第一次循环host重新引用obj.Runtime
}
host[ last ] = modules[ key ]; //就是设置obj.Runtime.Runtime=modules['runtime/runtime']，这样就把moudles[]中的路径名变成了obj[]中的namespace，比如在modules[]中有一个模块runtime/runtime，那么在obj[]中就建立一个Runtime.Runtime模块，也就是建立obj.Runtime.Runtime模块，第一个Runtime是namespace，没有其它意义，第二个Runtime是属性名/模块名，其值是模块对象或函数。
}
return obj; //返回修改之后的模块集合，如果以为函数是修改host但却返回obj那就理解错了。
}
makeExport = function( dollar ) {
root.__dollar = dollar;
return exportsTo( factory( root, _define, _require ) ); //在这里执行factory函数产生各个模块
}
root.WebUploader = makeExport(); //把模块集合存储到全局对象window.WebUploader做为应用程序可以访问的api
})( window, function( window, define, require ) { //匿名函数即为factory函数，构造各个模块保存到modules[]，最终返回webuploader全局对象含所有模块。
。。。
return require('webuploader');
});
webuploader调用方式：
uploader = WebUploader.create(opts) // 调用WebUploader.create这个api创建new Uploader实例
Base.create = Uploader.create = function( opts ) {
return new Uploader( opts );
};
Uploader构造函数：
function Uploader( opts ) {
this.options = $.extend( true, {}, Uploader.options, opts );
this._init( this.options );
}
之后写应用代码调用uploader实例的方法，比如：
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
再比如：
stats = uploader.getStats(); //获取上传统计数据
点击按钮开始上传这个事件绑定是在应用程序upload.js中设置的：
$upload.on('click', function() { // $upload就是上传按钮元素对象。
if ( state === 'ready' ) {
uploader.upload(); // upload()方法就是执行request('start-upload',args)，就是执行start-upload命令函数
Uploader.prototype[ upload ] = function() {
return this.request( 'start-upload', arguments );
// start-upload命令函数
startUpload: function(file) { // 点击"开始上传"按钮执行startupload，开始上传第一步是getfile，并不是真正开始上传
if ( file ) {
}else { // 执行这儿，获取文件，改变文件在queue里面的状态从inited->queued
$.each( me.request( 'get-files', [ Status.INITED ] ), function() { //request返回获取的文件，再循环处理每一个文件
this.setStatus( Status.QUEUED ); // this代表循环项(获取的文件对象)
setStatus: function( status, text ) {
this.trigger( 'statuschange', status, prevStatus ); //处理文件/queue/stats
}
});
Base.nextTick( me.__tick ); // 延迟执行__tick，uploader实例初始化时定义了__tick，就是执行_tick绑定uploader实例
this.__tick = Base.bindFn( this._tick, this ); //bindfn返回function(){_tick.apply(this,args)}，__tick就是执行_tick绑定作用域
me.owner.trigger('startUpload'); //开始上传时要进行一些相关的状态数据处理，应用代码也可以绑定这些事件进行一些状态处理
_startSend: function( block ) {
promise = me.request( 'before-send', block, function() { // 先执行before-send命令，再执行回调，before-send命令不存在，因此就是延迟一秒执行callback(传入的匿名函数)
if ( file.getStatus() === Status.PROGRESS ) {
me._doSend( block ); // dosend是真正的上传代码，之前都是预处理，预处理还涉及到统计和进度数据处理，非常复杂。
}
});
_tick: function() { // 异步调度执行_startsend
me._startSend( val );
// 做上传操作。
_doSend: function( block ) { // 从startupload开始经过多次延迟异步调度才执行到这儿真正开始上传，封装层次非常多非常细致复杂
// 开始发送。
tr.appendBlob( opts.fileVal, block.blob, file.name );
tr.append( data );
tr.setRequestHeader( headers );
tr.send(); // 底层用xhr = new XMLHttpRequest()上传文件
命令的定义：
$.each({
upload: 'start-upload',
stop: 'stop-upload',
。。。
}, function( fn, command ) {
Uploader.prototype[ fn ] = function() {
return this.request( command, arguments );
};
});
调用命令函数的方式，比如：
promise = me.request( 'before-send', block, function() { //先执行before-send命令函数，再执行匿名函数（回调），并且返回promise，根据命令函数执行结果resolve返回的promise对象
some code 。。。
});
promise.fail(function() {} //注册失败回调， 如果失败则执行回调
执行命令函数的request代码是webuploader源代码的精华之一，非常复杂高深，下面就分析一下：
request: function( apiName, args, callback ) { //apiName比如是"start-upload"
for ( ; i < len; i++ ) { // 相当于假定每个组件都有apiName函数，要把每个组件的apiName函数都执行一遍
widget = widgets[ i ];
rlt = widget.invoke( apiName, args ); // invoke就是调用执行函数，这里就是执行apiName对应的函数并传递widget组件为作用域
}
// 如果有callback，则用异步方式。
if ( callback || dfds.length ) { // callback就是调用request时传入的匿名函数
return promise[ key ](function() { // 这个匿名函数就是为了延迟执行下一个then(callback)，相当于setTimeout()的作用
var deferred = Base.Deferred(),
args = arguments;
if ( args.length === 1 ) {
args = args[ 0 ];
}
setTimeout(function() {
deferred.resolve( args );
}, 1 );
return deferred.promise();
})[ callback ? key : 'done' ]( callback || Base.noop );
//这个return语句超级复杂，它其实就是promise.then(fn).then(callback)，由于promise是when返回的，因此是已经resolved的，会立即执行第一个then()，fn代码resolve返回的promise才执行下一个then(callback)里面的callback，也就是延迟执行callback。
//这个return语句的意思就是，在执行完apiName函数之后，再延迟执行callback，并返回promise对象，这样在调用request之后还可以写比如promise.fail(fn)，继续下一个异步处理。
} else {
return rlts[ 0 ]; //最简单的情况就是返回执行apiName函数的结果数据，比如get-file执行完就是返回获取到的文件对象WUfile。
}
},
webuploader的功能模块有一部分用widget组件方式，还有一部分用new实例方式，html5runtime用new实例方式实现。
至于trigger/on那是webuploader自己设计的一套逻辑事件机制，用于异步调度执行相关过程，因为在操作过程中，会有几十个上百个异步过程需要调度执行，需要同步，比如过程2要保证在过程1之后执行。
tick也是延迟/异步调度方法。
webuploader博大精深，本文只是一个粗浅的分析，抱着学习人家对象编程技术的态度，文中错误不妥之处欢迎指正交流，呵呵。
