码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 中的中间件的本质

时间:2017-07-07 21:32:27      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:init   处理   txt   innerhtml   window   article   inner   index   turn   

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

 

本质就是一个函数栈的调用,在调用的时候传如参数,类似一种钩子,也像插件,但是插件是一个功能整体的扩展.

里面还提到了pipe 这个 在函数式编程中是一个非常形象有用的比喻.

 

补充一下关于钩子:

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

如果有个全局的函数或者变量是a  就可以通过这种方式索引,注意变量和函数名相同都是可以覆盖的.

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

这里其实就是利用了javascript 的函数可以把引用存在变量中,等待一个合适的实际再调用的机制,

调用可以用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 中的插件的编写.

 

javascript 中的中间件的本质

标签:init   处理   txt   innerhtml   window   article   inner   index   turn   

原文地址:http://www.cnblogs.com/xuezizhenchengxuyuan/p/7134036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!