iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧系列 第 30

三本柱大混戰 # 30 框架的實現與起手式, 鐵人賽初體驗完成啦~~

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


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

按照這次有存在的表定行程中
我們來淺淺的說框架的實現
這邊的所說的框架都是只對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天失敗也太捶心肝
明天心情好的話再來打參賽感言吧


上一篇
三本柱大混戰 # 29 一樣的事情做一次就好,重複的字也打一次就好,前端工程師們別打架
下一篇
三本柱大混戰 # 31 感謝IT邦與所有贊助辦了場這麼有意義跟有趣的自我比賽,來發篇賽後文結尾吧!!
系列文
大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧31

尚未有邦友留言

立即登入留言