JavaScript高级编程随笔

Posted 2020-10-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高级编程随笔相关的知识，希望对你有一定的参考价值。

前言：

本人之前在博客园写过一遍关于MVC基础的一个小文章，由于当时各种原因没能继续坚持写下去，最近本人在学习javascript，想用自己的方式整理出来，主要是为了加深自己的印象，我还是一个前端的小学生，希望各位前端的前辈多指点。我会吧每一章节学到的看到的整理到我的博客园里，虽然这本书前面讲的很基础，我也会坚持发表文章。好了废话说到这里开始进入正题。

Content：

本人现在准备要看的第一本书是《JavaScript高级编程》[第三版]，这是一本比较经典的JS书籍，即使前面几章比较简单基础。

这本书一共25章，下面我简单罗列一下这本书的目录。

1-10章

《JavaScript简介、在html中使用JavaScript、基本概念、变量-作用域-和内存问题、引用类型、面向对象的程序设计、函数表达式、BOM、客户端检测、DOM》

11-20章

《DOM扩展、DOM2和DOM3、事件、表单脚本、使用Canvas、HTML5脚本编程、错误处理与调试、JavaScript和XML、E4X、JSON》

21-25章

《Ajax与Comet、高级技巧、离线应用与客户端存储、最佳实践、新兴API》

以上就是本书的所有章节。好了在这里我就不多介绍第一章JavaScript简介了，有兴趣的朋友可以查看相关资料。

下面我从第二章《在HTML中使用JavaScript》开始整理。

1.《Script元素》

一、在HTML4.01为<Script>定义了6个元素，分别为以下几种

　　1.async：可选，表示立即下载脚本，但不妨碍页面其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

　　2.charset：可选，表示通过src属性制定代码的字符集。大多数浏览器会忽略它的值，不建议使用。

　　3.defer:可选，表示脚本可以延迟到文档完全被解析和限制之后在执行。只对外部脚本文件有效。IE7以下脚本支持,(不建议使用，如果JS文件较大，会影响页面的加载度)。

　　4.language：已废弃。原来用于编写代码的脚本语言，大多数浏览器都会忽略language属性，所以建议不使用。

　　5.src：可选。表示包含要执行的外部文件。

　　6.type:可选。可以看成language的替代属性，表示编写代码使用脚本语言内容类型，也成MIME类型。<script type="text/javascript"></script> type类型不是必须的，如果不填写默认type=“text/javascript”

二、在使用<Script>元素的方式有两种：

　　1.直接在页面嵌入JS

　　　　如：<script type="text/javascript"> function XX (){........} </script>

　　　　注： JS代码是从上之下依次解释的，用一个例子来说：<script type="text/javascript"> function XX (){........} </script>，解释器会解释一个函数，然后保存到自己的环境中。再解释对<script>元素所有代码之前，页面其余的内容都不会被浏览器加载或显示。

　　　　在使用<script>嵌入代码时，代码内容不要在任何地方出现</Script>，当浏览器解析JS代码时遇到字符串</Script>就代表结束的JS代码段。比如：function XX(){ alert("</script>") }这是严重错误的。但如果你真的想这么做，可以通过转译简写：alert("<\ /Script>")

　　2.包含外部的JS文件

　　　　如：<script src="...../xxx.js"></srcipt>

　　　　注：上面的例子是一个加载xxx.js外部文件,完整的例子，<script type="text/javascript" src="xxx.js"></script>与嵌入的js代码一样，在加载或者处理时，页面的处理也会暂停。如果是XHEML文档可以忽略</Script> 如：<script type="text/javascript" src="xxx.js"/>，但是不能在HTML文档中使用，因为浏览器不能正确解析，(尤其是IE)。

　　三、注意，外部的js文件都是带有.JS文件后缀名的，但这个不是必须的，以为浏览器不会检查后缀，这样一来使用其他服务器语言就可以动态生成JS，如果不使用后缀，就要确保服务器正确返回MIME类型(建议大家按照常规使用后缀)。

　　　　另外 src属性还可以访问外部域 <script src="http://../../../XX.js"> 这样一来外部的js也会被正常解析，但是要各位注意，访问外部域是有风险的，如果有恶意程序员是可以替换文件代码的。(如果这样访问建议官网)。

　　　　无论如何包含代码，只要不存在defer和async属性，浏览器都会按照顺序执行，换句话说就是第一个<script></script>执行完毕才会执行地二个<script></script>

　　四、标签位置，<scripr>标签是放在<head>标签内部的，这样一来就意味着要等在所有的js加载完毕后在呈现页面，如果加载过多会影响速度，因为浏览器遇到<Body>标签才会解析内容，所以建议放在<body>后面如：简例 <html> <head> <title>XXXX</title></head><body> ..................<script></script></body></html>

　　　　或者使用延迟脚本，<script defer="defer" src="XXX.js"></script> HTML5实现会忽略defer，IE4--IE7还是支持的，(执行顺序会改变)IE8及以后完全按照HTML5的规范，所以建议延迟脚本放在页面的最底部是最佳的。

　　　　异步脚本：async：只适用于外部脚本，告诉浏览器立即下载，不按照顺序，简例<script async src="XX.js"></script> 目的是为了告诉不让页面等待2个脚本下载和执行，建议不要在异步脚本加载期间修改DOM

　　五、在XHTML中用法

　　　　XHTML要比HTML语法严格得多，比如

　　　　<scripr> function com (a,b){ if(a>b)alert("XXXX") } </script> 在XHTML里 > 会被认为是一个新的标签，在HTML是有效的，

　　　　避免XHTML a>b这种语法错误，可以采用 a &lt b 这种会让代码不好理解，还可以用CData片段 <scripr> <![CData[........]]></script> CData片段支持任何符号，但是有的浏览器不兼容XHTML 怎么办呢？吧CData片段判断注释掉就可以了这种方式支持各种浏览器

不推荐使用的语法：因为有些浏览器不支持js 最经典的就是Mosaic，所以要加上HTML注释来忽略JS脚本 <script></script> 这种方法不是不推荐的现在的浏览器基本支持js 。

　　六、嵌入外部代码与外部文件

　　　　虽然在HTML里了一写JS，但建议使用外部文件，原因：可维护，可缓存(两个页面使用相同的JS文件，那么这个文件就只加载一次)，适应未来(无需担心XHTML或HTML)在外部文件里语法是互通的。

　　七、文档模式， IE分为混杂模式和标准模式，默认混杂模式（不推荐与其他浏览器差异较大）基本没有一致性可言。

　　八、<noscript> 当加载js失败 1、浏览器不支持脚本 2.浏览器支持脚本，但脚本被禁用都会呈现<noscript>

　　　　　例子<noscript>加载脚本失败。。。</noscript>

　总结

　　　　这一章讲的主要是JS如何引用，和相关的属性，以及简单介绍了在页面可直接嵌入JS，和一些规范，和各浏览器解析属性问题。

收尾

在这里本人重申一下，这些相关信息是关于书本的，本人只是采用本书重要的知识，并整理出来，也是为了加深自己的阅读印象。

　　　　　　　　　　　　　　　　　　　　　　先关书籍来之《JavaScript高级编程》[第三版]

就像前面说的，也希望各位前端前辈，多指点。也希望能给别人带来小知识点，本人会不断更新博客。多谢大家支持。