参考文档:
https://www.cnblogs.com/CBDoctor/p/3745246.html
https://www.cnblogs.com/fliu/articles/5246113.html?tdsourcetag=s_pctim_aiomsg
一、Javascript代码整体书写位置:
浏览器加载javascript有个特点,即:页面一旦打开载入之后立即就会执行(先编译后执行,”先编译后执行”本篇文章也会介绍),所以在没有window.onload()或者document.ready()事件时,若JavaScript写在了html文档之前,则JavaScript中对DOM树的操作,可能会影响DOM树的结构,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,对DOM树进行操作时还没有后面的DOM结点。所以程序也就报错了。因为浏览器在执行完javascript后才能继续加载下面的HTML内容。也就是说,浏览器下载并执行JavaScript的过程会阻塞DOM树的继续建立。
由于JavaScript通常需要操作DOM,所以,一般把JavaScript放在</body>
后引入。若需要在<head>
中引入,可以通过修改window.onload()或者document.ready()事件,强制等到DOM加载完成后再执行相关函数。
二、含有多个<script>
标签书写方式:
引入的多个.js文件,会按顺序分开执行。同样的,对于不同组的<script>
标签嵌入的JavaScript代码,也会分开执行。同一组<script>
标签包括的代码就是一个代码块。后引入的JavaScript文件可以调用先引入的JavaScript文件的资源,下面的代码块可以访问上面代码块的资源,反之则不行。
三、在<script>
标签内部书写方式
首先明确:javascript在<script>
标签中,程序是逐行被解释的,如果是语句的话,例如:
for(let i=0;i<=4;i++)
{
console.log("猪猪传奇");
}
像这种语句是可以执行的。如果是函数的话,只会被预编译,在没有调用的情况下,是不会被执行的。
预编译与执行:
1>JS加载包含预编译和执行两个阶段。 预编译阶段会对所有的var变量和function进行扫描,并将var变量初始化为undefined类型,而function则被初始化为函数值。
2>到了执行阶段,JS从上面往下面依顺序执行,遇到var变量便进行赋值(因此,在赋值之前进行调用的话会出现错误).遇到函数变量的话会从活动对象中寻找函数
(一)预编译阶段:
在预编译阶段,浏览器会对全局所有变量和函数进行预编译,即:
1>如果是变量的话,例:var a=2;
这时候,在预编译阶段,只会有:var a
,这时候,如果控制台打印console.log(a)
则会提示undefined
2>如果是函数的话,在预编译阶段,会预先被声明(具体声明细节个人觉得是将整个函数都加载进去了),即函数调用可以在函数定义之前,例:
csdn();
function csdn(){
console.log("猪猪传奇");
}
这样子也是正确的。
注意:(1)函数声明的提升优先于变量声明的提升;(2)重复的var声明会被忽略掉,但是重复的function声明会覆盖掉前面的声明。
例:(函数声明提升优先于变量声明)
<script type="text/javascript">
/*在预编译过程中func是window环境下的活动对象中的一个属性,值是一个函数,覆盖了undefined值*/
alert(func); //function func(){alert("hello!")}
var func = "this is a variable"
function func(){
alert("hello!")
}
/*在执行过程中遇到了var重新赋值为"this is a variable"*/
alert(func); //this is a variable
</script>
至于对活动对象的理解:
“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用var声明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。
例:(重复的var声明会被忽略掉,但是重复的function声明会覆盖掉前面的声明)
function csdn(){
console.log("猪猪传奇");
}
function csdn(){
console.log("小猪传奇");
}
csdn();
这时,控制台打印输出的是 –> 小猪传奇
(二)javascript执行阶段:
首先,javascript程序执行过程中是从上到下逐行地被解释的。
严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。(对于线程的概念,参考java中对线程的介绍,通俗的说,就是一个流水线,而多线程就是指多个流水线)
所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这样会引起服务器崩溃。
为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。
“同步模式”就是普通的单线程模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;
“异步模式”则完全 不同,每一个任务有一个或多个回调函数(callback { 所谓回调函数,通俗的普通的就是指,程序执行完成后,下一个执行的函数,本人最初接触是在css动画中,详情可见我的另一篇博客~JQuery动画部分函数操作汇总,在动画队列时接触了回调函数的概念 }),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结 束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
(一)同步模式:
所谓同步模式就是按照程序文档书写顺序,一行一行的向下执行,当然,即使函数声明了,没有调用函数,也没有用。
注意,这时候有一个立即执行函数的概念,例:
如果一个程序这样写:
for(var i=0;i<=3;i++)
{
setTimeout(function(){console.log(i)},0);
}
//想要实现的效果是:依次输出0、1、2、3。
//但这个时候因为:for循环是一个任务,setTimeout()又是一个任务,
//这时候setTimeout()就会加入到任务队列中去,等待for循环完全执行完毕之后,
//才进行setTimeout()这个任务,但因为这个时候,i 已经自增为4了,所以会连续输出四个4。
而解决这个问题的方法就是立即执行函数:
//将var变为let
for(let i=0; i<=3; i++){
setTimeOut(function(){
console.log(i); //输出的结果为1,2,3
},0);
}
//用自执行函数进行包裹
for(var i=0; i<=3; i++){
!function(i){
setTimeOut(function(){
console.log(i); //输出的结果为1,2,3
},0);
}(i)
}
(二)异步模式:
“异步模式”非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。
在服务器端,”异步模式”甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。
异步模式的四种方法:
(一)回调函数(异步编程的最基本的方法)
function csdn(callback){
setTimeout(function(){
callback();
},2000);
for(let i=0;i<50000;i++)
console.log("猪猪传奇");
}
function zzcq(){
console.log("小猪传奇");
}
csdn(zzcq);
采用这种方式,我们把同步操作变成了异步操作,csdn()不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。
上面的这个例子,解释一下个人理解(因为本人也是一个小白):
首先setTimeout()函数本身就是一个异步函数,并且这个方式是由同步操作转换过来的,所以setTimeout()函数应该写在for循环的上面,这样setTimeout()函数先进入线程,等待时间期间,会执行后面的for循环,时间到了之后就会执行setTimeout()函数(上面这种方法,据说没人用了已经)
当然最最普通的回调函数是这个样子的,例:
function csdn(callback){
for(let i=0;i<50000;i++)
console.log("猪猪传奇");
callback();
}
function zzcq(){
console.log("小猪传奇");
}
csdn(zzcq);
表示在csdn()执行完毕之后执行zzcq()
(二)事件调用
1>另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
还是以f1和f2为例。首先,为f1绑定一个事件(这里采用的jQuery的写法)。
f1.on('done', f2);
上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写:
function f1(){
// f1的任务代码
f1.trigger(‘done’);
}
f1.trigger('done')
表示,执行完成后,立即触发done事件,从而开始执行f2。
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以”去耦合”(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。
2>还有就是纯粹的各种JQuery事件调用函数
(详情请见我的另一篇博客~JQuery函数操作汇总事件角度)
(三)发布/订阅
我们假定,存在一个”信号中心”,某个任务执行完成,就向信号中心”发布”(publish)一个信号,其他任务可以向信号中心”订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”(publish-subscribe pattern),又称”观察者模式”(observer pattern)。
这个模式有多种实现,下面采用的是Ben Alman的Tiny Pub/Sub,这是jQuery的一个插件。
1>首先,f2向”信号中心”订阅”done”信号。
jQuery.subscribe("done", f2);//提交订阅
2>然后,f1进行如下改写:
function f1(){
// f1的任务代码
jQuery.publish("done");//发布信号
}
jQuery.publish(“done”)的意思是,f1执行完成后,向”信号中心”jQuery发布”done”信号,从而引发f2的执行。
此外,f2完成执行后,也可以取消订阅(unsubscribe)。
jQuery.unsubscribe("done", f2);
这种方法的性质与”事件监听”类似,但是明显优于后者。因为我们可以通过查看”消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
(四)Promises对象
Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。
简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:
f1().then(f2);
f1要进行如下改写(这里使用的是jQuery的实现):
function f1(){
var dfd = $.Deferred();
// f1的任务代码
dfd.resolve();
return dfd.promise;
}
这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
比如,指定多个回调函数:
f1().then(f2).then(f3);
再比如,指定发生错误时的回调函数:
f1().then(f2).fail(f3);
而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。