zoukankan      html  css  js  c++  java
  • javascript 点点滴滴02章 script元素的认知

    hello world:

      这一章的主要内容是 学习对 script 元素的 主要功能 和 使用 

      script 元素 是我们用来 载入javascript 脚本代码的 主要方式,是浏览器厂商为了 统一脚本代码的嵌入 而 创造的元素。我来看看 script元素 有哪些功能和属性吧。

      html 规范 为script元素 定义了6大属性:

      1. scr 属性(可选)  这个属性主要目的是 通过src 指定外部脚本文件的文件地址,从而把外部文件里的脚本代码嵌入到html页面当中来。如果用了src指定外部脚本文件地址 那么这个 script元素的内嵌脚本代码将被忽略。建议使用外部文件的方式加载脚本。

      2. type属性(可选) 这个属性的作用是 指定script文件代码的类型 就是(MIME)类型。一般内嵌代码的script元素 会要求写上 type 属性 ,如果不写 默认type属性的值 就是text/javascript 也是为了统一。

      3. async属性 (可选) 异步脚本,只有当为 外部文件加载的时候 才有用 ,目的是告诉浏览器 立即下载此脚本,并解析执行,而不会妨碍 页面其他资源的加载 和 页面的渲染。用了 这个属性的 script 元素 一定会在 页面的load事件 之前触发,而且不会保证 浏览器 会 按照页面的script元素 出现的顺序 而执行代码。加上这个属性后的script元素的脚本代码,最好不要有修改dom的操作,不然可能会出大问题。

      4.defer属性 (可选) 延时脚本,只有当为 外部文件加载的时候 才有用,目的是告诉浏览器 立即下载次脚本,但是延时执行,加了此属性的script元素 会等到页面全部加载和显示完成以后 才会执行此script嵌入的脚本代码,如果多个script元素都运用了 此属性的  那么浏览器一般会按照 运用了defer属性的script元素在页面出现的顺序 而解析和执行 脚本文件的代码,但是 世事无绝对,所以一个页面 最好只有一个defer属性的script元素 不管是内嵌 还是外链 。

      5.charset 属性(可选) 是指定当前脚本文件代码的 字符集编码。目前已无用了。

      6.language属性 (可选) 是指当前脚本的语言,目前也已经 无用了。

      当页面中有多个script 元素的时候并且script元素 没有defer,async属性时 浏览器会 按照script元素 出现的位置 一个解析执行完毕以后 ,开始解析执行第二个 以此类推。。。

      script 元素是一个 具有阻塞功能的元素 不管是内嵌还是外链 当浏览器在 下载和解析并执行一个script元素内的脚本代码时 会停止页面 其他资源的下载和页面的渲染,所以我们的做法是 通常把script元素的脚本代码放在 </body>标签之前 内容之后。即使加上了defer,async属性 也最好放在这个位置。

      外部js文件 的后缀并不是 必须的 所以我们可以用 jsp php来嵌套 让服务器端 动态生成js文件 但是一定要服务器端 返回正确的MIME类型。

      script 元素的 src属性 是一个神奇的属性,可以用来加载不同域的 文件内容 叫做跨域 其实跨域并不是 script的专长 而是src属性的 技能,就像img元素 一样 img元素的src属性 和 script元素的src是一样的 都具有跨域访问和下载资源的技能。

      但是这也为 网页带来了一定的安全隐患 如果要用 src属性来跨域 那么要么其他域是我们自己掌控的 要么是我们信任的,否则会出大问题。

      还有种情况就是 在script代码内嵌脚本代码的时候 在xhtml中和html中 使用脚本代码的解析规则是不一样的 。如果是内嵌脚本代码 那么在xhtml中 一定要把 所有特殊字符 转换成为 实体的字符。不然会报错误 。但是如果是 外部链接 那么xhtml和html的解析规则就是一样的 不用做转换。

      详细看看 script内嵌和外链的好处:

      使用外链脚本文件的好处 就是:

      1. 可维护性:开发人员 做到了 行为和结构分离,集中编写脚本 ,更容易维护。

      2. 缓存:用外部链接的方式 可以通过 指定缓存链接来缓存 我们指定的 文件。(适用于离线开发),减少请求量,加快网页的加载速度。

      3.用了外部链接以后 html 和 xhtml对 外部脚本代码的解析规则就是一样的了 不用再做 hack和 字符转换。

      最后是 如果浏览器不支持 脚本 那么 就用<noscript>请开启脚本的使用!!!</noscript>

      如果浏览器支持脚本 那么这段html元素就不会出现在用户的眼前。

      好了 今天就学习到这里吧。明天继续,加油。

      

  • 相关阅读:
    安装一个Linux 罗晓杜
    基本正则表达 罗晓杜
    安装MySQL 罗晓杜
    复选框返回选中项ID到后台
    软件工程的理解
    作业一:计科131邵楠
    javascript中函数和方法的区别
    Javascript动画系列之 —— lightbox实现(一)
    如何让自己的javascript代码具有可维护性?
    javascript动画系列 —— 切换图片(原生)
  • 原文地址:https://www.cnblogs.com/hfdj/p/7499283.html
Copyright © 2011-2022 走看看