import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
  render() {
    return <div>Welcome to the app!</div>
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      {/* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
// 编译后
var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());

req.createNode = function (config, moduleName, url) {
    var node = config.xhtml ?
        document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
        document.createElement('script');
    node.type = config.scriptType || 'text/javascript';
    node.charset = 'utf-8';
    node.async = true; //创建script标签添加了async属性
    return node;
};
req.load = function (context, moduleName, url) { //用来进行js模块加载的方法
    var config = (context && context.config) || {},
    	node;
    if (isBrowser) { //在浏览器中加载js文件
    
        node = req.createNode(config, moduleName, url); //创建一个script标签
        
        node.setAttribute('data-requirecontext', context.contextName); //requirecontext默认为'_'
        node.setAttribute('data-requiremodule', moduleName); //当前模块名
        
        if (node.attachEvent &&
            !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) &&
            !isOpera) {
            
            useInteractive = true;
            
            node.attachEvent('onreadystatechange', context.onScriptLoad);
        } else {
            node.addEventListener('load', context.onScriptLoad, false);
            node.addEventListener('error', context.onScriptError, false);
        }
        node.src = url;
        
        if (config.onNodeCreated) { //script标签创建时的回调
            config.onNodeCreated(node, config, moduleName, url);
        }
        
        currentlyAddingScript = node;
        if (baseElement) { //将script标签添加到页面中
            head.insertBefore(node, baseElement);
        } else {
            head.appendChild(node);
        }
        currentlyAddingScript = null;
        
        return node;
    } else if (isWebWorker) { //在webWorker环境中
    	try {
            setTimeout(function () { }, 0);
            importScripts(url); //webWorker中使用importScripts来加载脚本
            
            context.completeLoad(moduleName);
    	} catch (e) { //加载失败
            context.onError(makeError('importscripts',
                'importScripts failed for ' +
                moduleName + ' at ' + url,
                e,
                [moduleName]));
    	}
    }
};

//通过setTimeout的方式加载依赖，放入下一个队列，保证加载顺序
context.nextTick(function () {
	//Some defines could have been added since the
	//require call, collect them.
	intakeDefines();

	requireMod = getModule(makeModuleMap(null, relMap));

	//Store if map config should be applied to this require
	//call for dependencies.
	requireMod.skipMap = options.skipMap;

	requireMod.init(deps, callback, errback, {
		enabled: true
	});

	checkLoaded();
});

// ...
enable: function () {
	enabledRegistry[this.map.id] = this;
	this.enabled = true;

	//Set flag mentioning that the module is enabling,
	//so that immediate calls to the defined callbacks
	//for dependencies do not trigger inadvertent load
	//with the depCount still being zero.
	this.enabling = true;

	//enable每一个依赖
	each(this.depMaps, bind(this, function (depMap, i) {
		var id, mod, handler;

		if (typeof depMap === 'string') {
			//Dependency needs to be converted to a depMap
			//and wired up to this module.
			depMap = makeModuleMap(depMap,
				(this.map.isDefine ? this.map : this.map.parentMap),
				false,
				!this.skipMap);
			this.depMaps[i] = depMap; //获取的依赖映射

			handler = getOwn(handlers, depMap.id);

			if (handler) {
				this.depExports[i] = handler(this);
				return;
			}

			this.depCount += 1; //依赖项+1

			on(depMap, 'defined', bind(this, function (depExports) {
				if (this.undefed) {
					return;
				}
				this.defineDep(i, depExports); //加载完毕的依赖模块放入depExports中，通过apply方式传入require定义的函数中
				this.check();
			})); //绑定defined事件，同时将dep添加到registry中

			if (this.errback) {
				on(depMap, 'error', bind(this, this.errback));
			} else if (this.events.error) {
				// No direct errback on this module, but something
				// else is listening for errors, so be sure to
				// propagate the error correctly.
				on(depMap, 'error', bind(this, function (err) {
					this.emit('error', err);
				}));
			}
		}

		id = depMap.id;
		mod = registry[id];

		//跳过一些特殊模块，比如：'require', 'exports', 'module'
		//Also, don't call enable if it is already enabled,
		//important in circular dependency cases.
		if (!hasProp(handlers, id) && mod && !mod.enabled) {
			context.enable(depMap, this); //加载依赖
		}
	}));

	//Enable each plugin that is used in
	//a dependency
	eachProp(this.pluginMaps, bind(this, function (pluginMap) {
		var mod = getOwn(registry, pluginMap.id);
		if (mod && !mod.enabled) {
			context.enable(pluginMap, this);
		}
	}));

	this.enabling = false;

	this.check();
},

function checkLoaded() {
	var err, usingPathFallback,
		waitInterval = config.waitSeconds * 1000,
		//It is possible to disable the wait interval by using waitSeconds of 0.
		expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(),
		noLoads = [],
		reqCalls = [],
		stillLoading = false,
		needCycleCheck = true;

	//Do not bother if this call was a result of a cycle break.
	if (inCheckLoaded) {
		return;
	}

	inCheckLoaded = true;

	//Figure out the state of all the modules.
	eachProp(enabledRegistry, function (mod) {
		var map = mod.map,
			modId = map.id;

		//Skip things that are not enabled or in error state.
		if (!mod.enabled) {
			return;
		}

		if (!map.isDefine) {
			reqCalls.push(mod);
		}

		if (!mod.error) {
			//If the module should be executed, and it has not
			//been inited and time is up, remember it.
			if (!mod.inited && expired) {
				if (hasPathFallback(modId)) {
					usingPathFallback = true;
					stillLoading = true;
				} else {
					noLoads.push(modId);
					removeScript(modId);
				}
			} else if (!mod.inited && mod.fetched && map.isDefine) {
				stillLoading = true;
				if (!map.prefix) {
					//No reason to keep looking for unfinished
					//loading. If the only stillLoading is a
					//plugin resource though, keep going,
					//because it may be that a plugin resource
					//is waiting on a non-plugin cycle.
					return (needCycleCheck = false);
				}
			}
		}
	});

	if (expired && noLoads.length) {
		//If wait time expired, throw error of unloaded modules.
		err = makeError('timeout', 'Load timeout for modules: ' + noLoads, null, noLoads);
		err.contextName = context.contextName;
		return onError(err);
	}

	//Not expired, check for a cycle.
	if (needCycleCheck) {
		each(reqCalls, function (mod) {
			breakCycle(mod, {}, {});
		});
	}

	//If still waiting on loads, and the waiting load is something
	//other than a plugin resource, or there are still outstanding
	//scripts, then just try back later.
	if ((!expired || usingPathFallback) && stillLoading) {
		//Something is still waiting to load. Wait for it, but only
		//if a timeout is not already in effect.
		if ((isBrowser || isWebWorker) && !checkLoadedTimeoutId) {
			checkLoadedTimeoutId = setTimeout(function () {
				checkLoadedTimeoutId = 0;
				checkLoaded();
			}, 50);
		}
	}

	inCheckLoaded = false;
}

function breakCycle(mod, traced, processed) {
	var id = mod.map.id;

	if (mod.error) {
		mod.emit('error', mod.error);
	} else {
		traced[id] = true;
		each(mod.depMaps, function (depMap, i) {
			var depId = depMap.id,
				dep = getOwn(registry, depId);

			//Only force things that have not completed
			//being defined, so still in the registry,
			//and only if it has not been matched up
			//in the module already.
			if (dep && !mod.depMatched[i] && !processed[depId]) {
				if (getOwn(traced, depId)) {
					mod.defineDep(i, defined[depId]);
					mod.check(); //pass false?
				} else {
					breakCycle(dep, traced, processed);
				}
			}
		});
		processed[id] = true;
	}
}

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

new Vue({
  el: '#root',
  data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

// 新建项目文件夹
 mkdir page-performance
 
 // 初始化npm，初始化package.json
 npm init
 
 // 准备好封装代码
 // 一般源码是放在src，通过其他打包工具生成的一般是在dist目录或者build目录
 mkdir src
 
 // 可以将自己需要的代码往src中添加了
 // 假设我们只需要发布一个index.js就好
 // ......

# 会依次让你输入用户名、密码、和邮箱
Username:  
Password:
Email: (this IS public)