我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺!

起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.

在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定了一个事件回调函数 doCheck().

当鼠标点击这个元素的时候,触发了事件,马上执行事件绑定函数并回.

再后来是接触到jquery 的时候,大量的

$("#id").click(function(){
alert('点击事件');
});

这种jquery的语法写的越来越多似乎已经习惯了,但是你是都留意过前面的选择器只是选择过滤dom节点,接着的click就是一个事件注册,而里面的 function(){} 其实是一个参数,事件绑定函数的参数,这里面就要求你熟悉javascript的语法了.

function在javascript中是一个对象,对象就可以指世界的万事万物,所以对象可以包含很多属性,方法等.

既然是对象,那就可以当做一个参数去传递,这种函数叫做 高阶函数.

而且这种函数没有定义名称对不对,当然你可以一个名称,然后把名称传过来也是一样的,但是没有意义,因为这里的函数对象其实是一个形参,所以我们习惯的不给这种函数起名字,这就是常说的匿名函数.

接着上面的$("#id").click 说起,当点击事件被触发时,就要执行事件绑定函数.和上面直接在dom上给定onclick方法是一样的效果.

假设浏览器里有多个线程去操作脚本的话,你能想象到他的乱吗? 线程一正要去修改元素A的value值,结果没想到线程二已经把元素A从dom树删除节点,这时线程一只好操作失败报错.这样的情况是不糟透了,要么浏览器无维护多个线程数据的一致性,要么前端工程师自己去维护,所以......浏览器只有一个线程去操作dom,这样省去了很多不必要的麻烦.

setTimeout(function(){
alert('弹出');
},300);

while(true){
	........
}

你觉得 300毫秒后 alert('弹出') 还有戏吗?

没有了,永远没有戏了,等待300毫秒只是骗取你的感情的.因为浏览器是单线程模式执行脚本.

一旦线程处于死循环模式下去执行 while 语句,你的setTimeout 再也不会起任何作用了.

进而我们走入了 node.js 世界,它完全保留了javascript在浏览器的特性,单线程异步回调,也正是因为这个特点它才是它,假如node.js 是一门同步语言,就算所有的npm包都是 c++ 扩展的(速度够快吧)再快你也比不过c语言处理速度是不是,那么node.js可能还没有出世就已经被php鄙视了.

正是因为它的异步回调IO,更能提高他的效率,让我想起以前学校的一种快餐店和学校食堂的对比情况:

食堂是所有学生拿着盘子在窗口排成一字型队,打饭的妹妹一个一个盛好了,挨个端上饭走了.这是同步处理结果.

学校快餐店也是学生排队点餐,但是点完餐拿上你的呼叫器就可以离开找位置去了.这样单位时间内服务员可以为很多人提供服务,而且点好餐的同学可以找位置做自己其他事情,而不用傻傻地站到窗口等饭,直到你的饭出来的那一刹那,服务器会根据单号按下编码,这时你桌上的呼叫器会响起,你去取餐就好了.这是异步处理.那个呼叫器响起就是触发事件.

单线程可以减少多线程之间状态切换引起的资源浪费和维护困难,当然也有专门的第三方包来支持多核多线程的情景,你可以自己权衡.

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细解读react-navigation的导航使用

在javascript中详细解读Function函数（详细教程）

使用AngularJS2与D3.js集成如何实现自定义可视化