美文网首页
JavaScript之引入方式

JavaScript之引入方式

作者: 繁华落殇 | 来源:发表于2017-09-09 22:46 被阅读0次


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文件可控制多个页面,从整站来讲,减少代码数量,提高加载速度,便于维护。

相关文章

  • JavaScript

    JavaScript的引入方式 内部引入方式 外部引入方式 JavaScript的组成: ECMAScript:J...

  • JavaScript之引入方式

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

  • JavaScript

    javascript引入方式 定时器

  • JS 语法

    预热: ** javascript引入方式:** a、在head或者body中,引入script标签 alert(...

  • JavaScript的变量,引入,值类型、运算符

    JavaScript的引入方式: 页面引入:JavaScript不同于css 他可以在页面的任意地方嵌入代码块 外...

  • 【JavaScript的引入方式】

    标签内联 在标签内书写,与要引入的JavaScript进行绑定。 (所有的内联书写调用函数时必须加上括号) 内部书...

  • Vue快速入门(一)

    引入Vuecdn方式 本地文件加载方式 实例化Vue对象在script标签中或者引入JavaScript文件实例化...

  • JavaScript在HTML中的使用

    1.JavaScript引入方式-------嵌入式 嵌入式就是使用 标签包裹JavaScript代码,直接编写到...

  • JavaScript入门(一)

    初识JavaScript JS的组成: ECMAScript:主要规定了js的组成、引入方式、命名规范、输出方式、...

  • Javascript基础学习之基本语法(一)

    Javascript脚本的引入方式有两种: 第一种方式:是Javascript代码直接嵌入到网页的任何地方,不过通...

网友评论

      本文标题:JavaScript之引入方式

      本文链接:https://www.haomeiwen.com/subject/nuymrxtx.html