JavaScript基础(一)

JavaScript语言的组成

  JavaScript语言(以下简称“JS”)包含的内容可以由图1来概括:

js的组成

图 1 JavaScript语言的组成

  ECMAScriptECMA-262标准定义,规定了语言核心功能。JS实现了ECMAScript规定的核心语言功能并对在此基础上进行了扩充。
  DOM是文档对象模型,提供了一系列API可供JS来操控HTML页面元素。DOM把整个页面映射成一个具有多层节点的树结构,可以方便JS开发人员对页面节点进行增、删、查、改等一系列操作。然而DOM并不是JS私有的,JS只是实现了DOM,其他语言也可以实现DOM
  BOM是浏览器对象模型,提供了一系列API可供JS来操控Web浏览器。比如浏览器中window对象的一系列属性就可以用来控制浏览器的行为,完成像页面跳转、本地存储等操作。BOM比较突出的问题就是不同浏览器之间的兼容性问题。HTML5标准的普及有望解决这一问题。
  JS的运行环境通常可以分为客户端环境和服务端环境两种。Web浏览器是JS运行的客户端环境,Node则是当前主流的JS服务端环境。

JS注入到页面中的方式

  JS代码可以通过以下两种方式注入到HTML页面中:

  • 直接在HTML源码中嵌入JS代码

    1
    <script type="text/javascript">{JS代码块}</script>
  • 以外部文件的形式引入

    1
    <script type="text/javascript" src={JS文件url}></script>

  两种注入方式比较:在HTML源码中直接嵌入JS代码的方式使得页面结构(HTML)与页面的动作(JS)结合在一起,当需要更新JS代码时,HTML文件也需要更新,这样不利于项目代码的维护;以外部文件的形式引入JS代码文件,使得页面结构与动作分离,代码的可维护性强。于是,在实际项目开发中一般以外部文件的形式在HTML文件中引入JS代码。

页面结构的优化

  优化方向:考虑到HTML页面是按照DOM树从上到下依次加载的,并且JS代码也是顺序执行的,如果将script标签放在HTML页面的head标签中,则在加载、解析、执行完JS代码之前,浏览器不能开始加载和渲染页面内容,为了加快浏览器渲染出页面的速度,提高用户体验,可以将script标签放在body标签中的最下方;又考虑到项目的可维护性和可缓存性,优先考虑以外部文件的形式在HTML中引入JS代码