关于jQuery的getScript()实现动态js加载,原理,实现过程是怎么样的?

来源:互联网 发布:2016年二胎出生数据 编辑:程序博客网 时间:2024/05/18 05:25

关于jQuery的getScript()实现动态js加载,原理,实现过程是怎么样的?

先抛开getScript,先搞清楚一个事情:

有一个html页面,有一个onclick事件testA,testA在test.js中。

function testA{

 alert("hello");

}


test.js引入写在html的head中,在发起http url请求后,在客户端即f12的html页面被加载的时候,js就被加载到内存中了(即执行test.js中的代码,将testA这个变量写入到内存中,即将test.js程序代码读入到内存中,函数也是变量。注意是执行test.js代码,而不是执行testA函数,执行testA函数,是在html中出发onclick事件触发testA才去执行的。),而不是在JavaScript方法(如testA)在html页面被触发时去js文件中读取testA里面的代码然后执行。

如果理解了这个,getScript函数,就很好理解了,一旦执行了getScript函数,就将test.js写入客户端即浏览器端的pc机器的内存了,根本不用纠结为什么test.js没有放入head中,即跟一般的js引入的方式不一样,为什么在html触发onclick事件之后就能主动去test.js中去执行testA函数呢?(因为根本不是去test.js中执行的,而是直接去内存中读取testA函数的代码并执行。也就是说f12中看到的head中的<script>标签其实已经没有什么用了,浏览器也根本没有将js文件加载到本地磁盘的某个地方即文件夹下,而是将js代码加载到了内存中。)


既然js被加载到了内存中,那么什么时候腾出内存呢?肯定不会一直占用内存吧。答案是:有JavaScript有垃圾回收机制,这个交给浏览器。



一直我以为,我一直以为js不用加载到内存中,执行的时候直接去js文件中执行testA方法就行了,看来大错特错。


还有一个问题,如果在head中,test1.js在test2.js上面,都有testA方法,那么是执行test1.js中的,还是test2.js中的?

答案: 当然是后面覆盖前面,重新定义了变量。即执行test2.js中的方法。(我亲测了,是这样的)




===总结:

1任何语言,编译型(c、java等)、解释型(如JavaScript等),都需要加载到内存中,包括解释型(如JavaScript,虽然是解释型,但是一样要将代码先加载如内存中,然后再根据html触发后去对应js函数去执行相关代码)。


2js对比java中的class文件的加载到内存的过程,区别。

class什么时候用到,什么时候加载到虚拟机,再读入内存中,而不是j2ee的web项目发布成功后,就将所有class加载都内存中。

而js文件,是在html页面被加载的过程中一下子全部加载到内存(动态加载如jQuery的getScript是需要的时候再加载到内存中,但是一样要加载到内存中),反正也没多大,也就几兆而已。


3载入js的时候,会将js的代码家载入内存,其实是在内存中创建js文件中的各个对象(包括函数,因为函数也是一个变量,这也解释了,如果两个js中都有一个相同的函数testA,那么后面加载的testA会将之前的testA在内存中覆盖掉,即创建一个新的变量testA)。





阅读全文
0 0
原创粉丝点击