終於來到最後一篇啦!!
參賽感言甚麼的...
就深刻感覺到自己的料還很少
可以繼續努力
或著想想怎麼可以把他教出去
這樣吧

那麼我們直接來開始最後一篇吧!!

按照這次有存在的表定行程中
我們來淺淺的說框架的實現
這邊的所說的框架都是只對DOM樹有所操作的框架

首先要有一個一般前端工程師不太會用到的東西

IIFEs(Immediately Invoked Functions Expressions)

這啥?!
名字看起來好長好可怕
...其實就只是js的引擎讀完這個function後直接運行
程式碼如下

var con=function(a){
    console.log(a)
 } ('jquery')
 //or
 (function(a){
    console.log(a)
 } ('Vue'))

這兩個程式碼都會在資源包被導入後直接運行

但要注意的是這兩個程式碼都無法再重複使用

(....當剛剛在測程式碼時有不小心執行出來，應該是不小心按到enter)

那麼我們繼續來說框架了
現行框架 看起來 有兩種

1. 工程師並不需要寫個甚麼建構子(new jquery())這樣子的東西

   • 只要引入資源包即可使用所有所有框架內部方法
   • 例如jquery只需要用到'$'就可以對DOM樹進行操作

   $('.FontR').css('color', 'red');
   

2. 而另一種需要工程師自行設定出虛擬機
   來將要操作的html部分放入或著對於html做一些標記才能運行的框架

   • ex:Vue.js 需要再根元素放置id或著其他標記將牠放入虛擬機中
   • ex:如下我們將某個html設定唯一DOM為App
     然後將他送入一個new VUE()的虛擬機裡面，那這個東西是怎麼實現工程師主動式運行框架呢?
   • 假設頁面程式碼如下

   <div id="App">
       <h1>title : {{title}}</h1>
       <h1>author : {{url}}</h1>
       <h1>{{ITIronMan()}}</h1>
   </div>
   <script type="text/javascript">
       var vm = new Vue({
           el: '#App',
           data: {
               title: "完成第三十天啦!!!",
               author: "theRookie",
           },
           methods: {
               ITIronMan: function() {
                   return  this.author+this.title;
               }
           }
       })
   </script>
   

然而他們所做的事情是一樣的
都是在導入cdn資源包後直接運行了一個匿名方法
然後對window這個物件有所操作
進而獲取當前頁面所有資訊

先來看看jquery2.1.4的起手式

 var jquery=function (a, b) {
    "object" == typeof module && "object" == typeof module.exports ? module.exports = a.document ? b(a, !0) : function (a) {
        if (!a.document) throw new Error("jQuery requires a window with a document");
        return b(a)
    } : b(a)
}("undefined" != typeof window ? window : this, function (a, b) {
    //.....底下略掉海量程式碼
})

在來看看Vue2的起手式

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global.Vue = factory());
}(this, (function () {
    //....這邊也略掉山多程式碼
)})

是的，請往上拉，文章例子沒亂舉，我知道有看倌跳過IIFEs的說明，但console.log所印出來的就是那個框架所用的

這邊我們看到我們之前一直防止this只像window

function ex(){
    var vm = this;
}

而這邊框架故意指向window來進行參數設定
Dom樹的獲取

而jquery只是多做了點window有沒有被工程師拿去做別的事情

然後再來看看Vue的建構子實現

 function Vue(options) {
        if ("development" !== 'production' &&
            !(this instanceof Vue)
        ) {
            warn('Vue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
    }

    initMixin(Vue);
    stateMixin(Vue);
    eventsMixin(Vue);
    lifecycleMixin(Vue);
    renderMixin(Vue);

是的，照這個慢慢追究可以把VUE追完
如果破壞了那個if就可以實現一個虛擬機多個html el
但一般不會這樣做，因為一個沒處理好就會變成原型繼承

那麼再來看看jquery的人工語法糖$

if ( !noGlobal ) {
	window.jQuery = window.$ = jQuery;
}

沒錯，就這樣理所當然的利用js如果物件沒有他就會自己做一個
把上面哩哩喳喳做了的一堆東西直接放到這兩個裡面
所以

jQuery('.FontR').css('color', 'red');

也是可以運行的

好了今天就這樣了，時間不早了，在不發文鐵人賽就失敗了
在第30天失敗也太捶心肝
明天心情好的話再來打參賽感言吧