javascript 中的中間件的本質

http://cnodejs.org/topic/53f2b7af8f44dfa35140bca1javascript

 

本質就是一個函數棧的調用,在調用的時候傳如參數,相似一種鉤子,也像插件,可是插件是一個功能總體的擴展.html

裏面還提到了pipe 這個 在函數式編程中是一個很是形象有用的比喻.vue

 

補充一下關於鉤子:java

for(let f in window) {if(f == 'a')console.log(window[f])}node

 

var m = window.alert
window.alert = function(str){m('prefix: ' + str)}react

 

若是有個全局的函數或者變量是a  就能夠經過這種方式索引,注意變量和函數名相同都是能夠覆蓋的.jquery

https://segmentfault.com/q/1010000004335505?_ea=573129webpack

這裏其實就是利用了javascript 的函數能夠把引用存在變量中,等待一個合適的實際再調用的機制,web

調用能夠用call,apply,bind+調用等等.編程

var oriAlert = window.alert; window.alert = function(txt){ //改造函數 oriAlert(txt); }

 

參照:http://www.cnblogs.com/baochuan/archive/2012/06/11/2542048.html

// 處理鉤子的對象
var hook = (function(){
    return {
        timer:null,
        init:function(){
            this.callHooks('init');
        },  
        callHooks:function(init){
            var s = "hook_" + init + '_event',
            f = []; 
            for(var h in window){
                if(h.indexOf(s) != 0) continue;
                f.push(h);
            }   
            this.hooksTimeout(f);
        },  
        hooksTimeout:function(hooks){
            if(0 === hooks.length){
                if(this.timer) clearTimeout(this.timer);
                return;
            }   

            var h = hooks.shift();
            window[h].apply();
            window[h] = undefined;

            window.setTimeout(function(){hook.hooksTimeout(hooks);}, 200);
        }   
    }   
}());

// 鉤子1
var hook_init_event_tpl_html = function(){
    document.getElementById('test').innerHTML = 'This is HTML!';
}

// 鉤子2
var hook_init_event_tpl_console = function(){
    console.log('This is console!');
}

// 最好在頁面加載完以前調用,也就是在window.onload()以前
hook.init();

關於插件 我的以爲就是一種 全局擴展:

http://www.jb51.net/article/60419.htm   jquery 插件編寫

我更有興趣的是vue,react,webpack,node 中的插件的編寫.

相關文章
相關標籤/搜索