JavaScript之引入方式


JavaScript的引入方式

JavaScript文件的引入方式与CSS引入方式类似,主要也是分为三种:标签内联、内部写入、外部引入。

标签内联

顾名思义就是在HTML标签的内部书写JS的功能,此方法与CSS的标签内联书写类似,只需要为标签书写相应的JS功能即可,如下:

function show(){

alert("点击我了~");

}

内部书写

此方法针对JS的书写位置有一定的要求,因为页面的加载是从上往下进行,所以我们需要把JS代码使用script包含起来写在标签结构的下方,保证结构的加载之后,JS能够获取到结构并执行功能,如下:

var btn = document.getElementById("con");

con.onclick = function(){

alert("点击我了~");

}

往往有时候我们会希望JS能够像CSS一样写在页面的头部,但是如上把JS直接放到头部,页面就不会有JS功能,而一定写在头部就必须对JS功能块加上window.onload方法,即可把JS写在头部并让JS能够顺利执行。

外部引入

此方法需要再外部创建一个JS文件,然后书写JS功能,之后通过script标签的src属性来做文件的引入。但是需要注意一点,如果此script标签用于文件的引入,那在script标签之间就不允许存放任何内容(空格也不行)。

JavaScript的不同引入方式的优势与劣势

标签内联

优缺点:用得比较少,代码多,加载慢,不利于维护。

内部书写

优缺点:使用也比较多,加载速度快,一般用于访问量较大的网站或首页,但是整站代码较多,不利于维护。

外部引入

优缺点:使用最广泛,一个JS文件可控制多个页面,从整站来讲,减少代码数量,提高加载速度,便于维护。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,558评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,232评论 0 1
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,570评论 0 25
  • 拿着包子,我忽然明白,原来有些东西,没有就是没有,不行就是不行,没有鱼丸,没有粗面,没有马尔代夫,没有奖牌,没有张...
    后浪Jason阅读 156评论 0 1