您所在的位置:小祥子 » 编程 » JavaScript » 正文

Javascript学习笔记(一)

时间:2015-06-26 编辑:雪语流觞-爱 来源:本站整理

Javascript的书写方法及执行流程

  1. <script>标签

      <script></script>是书写Javascript最为简单的方法(实际的开发中基本不使用),在这种情况下<script>标签被分析之后就会立即执行Javascript。需要    注意的是,这样将无法操作<script>标签之后的DOM元素。原因就是:分析<script>标签之后就立即执行。这时候<script>标签之后的DOM元素还未构造,因此就   无法取得位于其后的DOM元素。

      解决方法:在body的结束标签前才书写<script>标签(注意:尽量避免对body操作)如果希望对body进行操作,可以通过onload和DOMContentLoaded    方式来执行,他们的执行流程允许对body操作。

  2.外部读取Javascript文件

         例如:<script src=”http://example.com/JS/sample.js”></script>

   该文件会在<script>标签分析之后马上读取,一旦读取完成,就将执行文件内的Javascript,<script>标签有两个属性:defer和async。指定defer属性,可以使该    <script>标签的处理推迟至其他所有的<script>标签之后。指定async属性,以异步方式读取外部文件,并在读取完成后依次执行。

        好处:①浏览器可以缓存Javascript文件,如果Javvascript文件的内容变化不频繁,只需下载一次之后将其缓存至本地,避免下次的读取,直接提高运行速度;②团队          分工更加明确

  3. Onload

      ①直接写在HTML中 <body onload=”alert(“haha”)”>

      ②写在外部文件中 window.onload = function() { alert(“haha”); }

      在onload事件处理程序中书写Javascript代码,能够在页面读取完成后再对其执行。因为在执行时已经完成对整个页面的读取,所以可以对所有的DOM元素进    行操作。由于在读取了整个页面之后才读取Javascript,所以当页面存在大量图片是,会导致Javascript的加载速度非常慢,影响用户体验,所以在页面存在大量图     片,不建议使用这种方法

   4. DOMContentLoaded

             对于onload方法,执行Javascript时可能需要一定的等待时间,这可以使用DOMContentLoaded解决(IE8之前的浏览器不支持)。DOMContentLoaded是    在完成HTML解析后发生的事件。将事件侦听器设置为对该事件进行监听,就可以减少不必要的等待时间

    例如: document.addEventListener(‘DOMContentLoaded’,function(){alert(“haha”);},false);

  5. 动态载入

      在生成script元素过程中动态加载Javascript文件

      例如:

        Var script = document.createElement(‘script’);

        Script.src = ‘other-javascript.js’;

        Document.getElementByTagName(‘head’)[0].appendChild(script);

            这种方法执行Javascript时,Javascript文件在加载过程中不会阻断其他的操作,这是一个较大的优点。若直接在页面中写script,则在加载文件时会阻断CSS    文件的加载。

  参考文件:JavaScript编程全解 图灵程序设计丛书

    2015-06-26 19:31:20

关键词:学习 笔记