PPT的開始
一圈膏、如何分析源碼：
優(yōu)秀的架構(gòu)設(shè)計思維：
注意框架設(shè)計思維鸦采，如vue響應(yīng)式的思維，如何設(shè)計咕幻，如何模仿搭建架構(gòu)渔伯。
對于所用工具更深的理解
通過閱讀源碼，對工具理解更深肄程，幫助我們更好的使用工具锣吼。
優(yōu)秀的技巧
通過看源碼，學(xué)習(xí)優(yōu)秀的技巧绷耍，優(yōu)秀的框架，代碼的質(zhì)量必然很高鲜侥，掌握別人如何去寫的褂始，哪里寫得好。
二描函、源碼都有的特性
開始時會出現(xiàn)大量的健壯的處理：if else 的判斷崎苗，閱讀時大部分可以忽略掉狐粱。
健壯事例：
//不夠健壯的代碼
function add(a,b){
return a+b;
}
function add(a,b){
if(! typeof a == 'number'){
a =0;
}
return a+b;
}
//健壯性最有效的保證就是在參數(shù)層面去判斷
健壯性事例：
Node中讀取文件，但是文件可能不存在胆数，如果不處理肌蜻，可能就會報錯，Node是服務(wù)必尼，那么一定是持久的蒋搜，如果不加判斷，可能這個異常會導(dǎo)致服務(wù)的停止判莉。那么我們?nèi)绾稳ピ鰪?qiáng)其健壯性豆挽？
try{//把容易出問題的代碼用 try 包裹起來
fs.readFile('xxx');
}catch(e){
console.log(e);
}
其他源碼的事例：
讀源碼規(guī)則：
源碼往往是模塊調(diào)用模塊
不要試圖一句一句的讀源碼
先理架構(gòu)，在看入口券盅，按流程讀下去
摒棄其他代碼帮哈，尋找核心代碼
經(jīng)典框架都是什么樣的套路
分別有工廠模式，建造者模式锰镀，函數(shù)式娘侍；
（1）工廠模式 ----> 給一個批量對象的工廠，來幫助你獲取對象
應(yīng)用場景：你的框架泳炉，插件憾筏，需要大量的產(chǎn)出對象時
舉例：jquery
如果每一次使用的話 都用new $()是不是特別繁瑣,所以 jquery沒有new,而是使用$. 或者$('xxx'). 的形式
舉例：彈窗插件
頁面中也會經(jīng)常用到，如果每次都去new PopWindow()也是很繁瑣的胡桃，最好的使用方式就是通過PopWindow.Show()的方式踩叭。
（2）建造者模式 ----> 構(gòu)造比較復(fù)雜，產(chǎn)生的東西不多翠胰，一個頁面只有一個的情況下
例如：好比建造房子容贝，不可能從頭到尾原材料加工，而是鋼筋之景，磚瓦一起拼接到一起的來建造房子的斤富。
舉例：
function banner(){
this.htmlInit = new htmlInit();
this.runner = new runner();
}
function htmlInit(){}
function runner(){}
舉例：
vue 利用的建造者模式
函數(shù)式編程：
loadsh,都是函數(shù)式編程。
疑問：為什么VUE3 又變回函數(shù)式锻狗？
（1）满力、組合大于繼承,
優(yōu)點(diǎn)：組合擴(kuò)展性更好，繼承的話 還要修改其他父類子類轻纪。
缺點(diǎn)：需要再次調(diào)用油额，重復(fù)寫方法的名字。
？讨恪Ａ仕弧！ 重要：能用組合的不要用繼承來解決崇众。
function a(){}
function b(){}
function c(){
a();
b();
}
（2）掂僵、為了使用tree-shaking庫
如果這個庫有100個方法航厚，但是你只用到2個方法，那么用tree-shaking锰蓬，他只會幫你把這兩個方法打包進(jìn)去幔睬。
但是tree-shaking只會對函數(shù)有效，無法對對象進(jìn)行操作shaking芹扭。
（3）麻顶、壓縮的時候，獨(dú)立的方法壓縮的更簡單
如：
function add(){}
壓縮成
_a(){}
三冯勉、手寫jQuery澈蚌。
(function(window){
function jquery(seletor){
return new jquery.fn.init(seletor);
}
jquery.fn.init.prototype=jquery.fn;
jquery.fn = jquery.prototype={
init:function(){
}
}
jquery.extend = jquery.fn.extend = function(){
//前提：這個方法可能會傳1個參數(shù)，也可能傳兩個灼狰，如何優(yōu)化宛瞄？
//不規(guī)范的寫法
if(arguments.lenght == 1){
for(var item in arguments[0]){
this[item] = arguments[0][item]//{a:1} ==> a = 1
}
}else{
for(var item in arguments[1]){
arguments[0][item] = arguments[1][item]
}
}
//規(guī)范寫法：享元模式的寫法:拿出不同的，保留相同的交胚。
var target = arguments[0]||{};
var options;
var i = 1;
if(arguments.length == 1){
target = this;
i--;
}
options = arguments[i];//如果只有1個份汗，那么i0,這時候拿的是第一個參數(shù)
for(var name in options){
target[name] = options[name]
}
}
jquery.fn.extend({
//CSS 模塊會擴(kuò)展在這里面
})
jquery.fn.extend({
//動畫模塊擴(kuò)展
})
//模塊化檢測的，插件蝴簇，模塊杯活，建議大家都去加入這個判斷 amd ,cmd;
if(typeof define === "function" && define.amd && define.amd.jQuery) {
define( "jquery",[],function(){ return jQuery });
}
window.jquery = window.$=jquery;
})(window)
疑問：為什么jquery每個方法都需要傳遞window？
答案：是因為減少查找,提高性能熬词，javaScript查找window對象的時候旁钧，會先從當(dāng)前層級一步步往外查詢，如果發(fā)現(xiàn)當(dāng)前層級有window互拾，那么就可以直接使用歪今，如果沒有繼續(xù)向上一層查找，直到找到最外層window為止颜矿。
我們這兒window傳進(jìn)來寄猩，則不會去向外查找，解決性能上的優(yōu)化骑疆，減少查找時間田篇。
vue 源碼初始化的模塊化的判斷
(function (global,factory){
typeof exports === 'object' && typeof module !== 'undefined'
?
module.exports = factory()
:
type define === 'function' && define.amd
?
define(factory)
:
(global = global || self,global.Vue = factory());
}(
this.,function(){
.....
}
))
檢測當(dāng)前使用的是什么規(guī)范，再使用當(dāng)前有的規(guī)范去初始化
四箍铭、Express 部分源碼
舉例泊柬，如果app對象上面有很多方法，應(yīng)該怎么寫最簡潔
const http = require('http');
var app = module.exports={}
app.handle = function(req,res){
res.end('hello');
}
//錯誤寫法
app.post = {
}
app.get = {
}
app.put = {
}
......
//靠譜點(diǎn)的寫法 诈火，用橋接模式
var methods=['put','get','post','delete'];
methods.forEach((method)=>{
app[method]=function(){
router[method].call(this);//在通過路由去分發(fā)他們要做的事情
}
})
