页首HTML 代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Jay Skript and the Domsters</title>

    <script type="text/javascript" src="scrpits"></script>

    <link rel="stylesheet" type="text/css" href="styles\basic.css">

</head>

<body>

    <header>

    <img src="data:image/head.jpg" />

    <nav>

        <ul>

            <li><a href="index.html" class= "hear">Home</a></li>

            <li><a href="about.html">About</a></li>

            <li><a href="photos.html">Photos</a></li>

            <li><a href="live.html">Live</a></li>

            <li><a href="contact.html">Contact</a></li>

        </ul>

            </nav>

        </header>

        <article>

            <p id = "info">

                欢迎来到首页

            </p>

        </article>

    <script type="text/javascript" src="scripts\global.js"></script>

</body>

</html>

JS代码

function addLoadEvent(fun)

{

    var oldload = window.onload;

    if(typeof window.onload != "function")

    {

        window.onload = fun;

    }

    else

    {

        window.onload = function()

        {

            oldload();

            fun();

        }

    }

}

function insertAfter(neweleMent , targeElement)

{

    var parent = targeElement.parent;

    if(neweleMent === parent.lastElement)

    {

        parent.appendChild(neweleMent);

    }

    else

    {

        insertAfter(neweleMent, targeElement.nextSibling);

    }

}

function addClass(element, value)

{

    if(!element.className)

    {

        element.className = value;

    }

    else

    {

         var newClassName = element.className;

         newClassName += "";

         newClassName += value;

         element.className = newClassName;

    }

}

function highlightPage()

{

    if(!document.getElementsByTagName) return false;

    if(!document.getElementById) return false;

    var header = document.getElementsByTagName('header');

    if(!header)  return false;

    var nav = header[0].getElementsByTagName('nav');

    if(!nav) return false;

    var link = nav[0].getElementsByTagName('a');

    var links;

    for(var i =0 ; i< link.length; i++)

    {

        links = link[i].getAttribute("href");

        if(window.location.href.indexOf(links) !== -1)

        {

            link[i].className = "hear";

        }

        else

        {

            link[i].className = ""

        }

    }

}

function showSection(id)

{

     return function()

     {

         var artickle = document.getElementsByTagName('section');

        for(var i =0 ; i< artickle.length; i++)

        {

            if(artickle[i].id !== id)

            {

                artickle[i].style.display = "none";

            }

            else

            {

                artickle[i].style.display = "block";

            }

        }

    };

}

function findId()

{

    var element = document.getElementsByTagName('article');

    var element_a = element[0].getElementsByTagName('a');

    for(var i = 0 ; i<element_a.length; i++)

    {

        var sectionId = element_a[i].href.split("#")[1];

        if(!document.getElementById(sectionId)) continue;

        document.getElementById(sectionId).style.display = "none";

        element_a[i].onclick =

            showSection(sectionId);

    }

}

addLoadEvent(highlightPage);

addLoadEvent(findId);

在本例中， 始终遵循如下几个要素来设计实现工程：

一. 平稳退化：

平稳退化是指当浏览器禁止使用JS的时候， 那么网站还应该能够正常实现， 只不过在性能上有所折扣。可以通过如下手段来实现平稳退化：

a.结构和样式分离：

使用CSS技术将网站的设计和结构分离， 能够更专注于样式。同时，可以确保平稳退化， 不具备CSS的网页仍然可以呈现基本结构。

b.渐进增强：

用一些额外的信息层去包裹原始数据。使用标记良好的HTML标签。

二， 向后兼容

主要是能让以前版本的浏览器能够支持新的JS特性。 方法如下：

a.对象检测：

在JS里面万物结尾对象， 那么我们就可以用 if(!object)  return false; 来检验是浏览器是否支持。

b. 浏览器嗅探技术

由于历史原因， 以及越来越复杂的浏览器， 这种方法逐渐被取代了。

三.性能考虑

提高性能的几种方法：

a.尽量减少访问DOM和尽量减少标记

过多的不必要的元素会增加DOM树的规模，增加遍历DOM树以查找特性元素的时间。比较好的处理办法是将查找结果存储起来，已被以后使用。

b.合并和放置脚本

将多个脚本合并到一个脚本中， 减少请求数量，这个是性能优化时首先考虑的。

同时， <script> 标签应该放在文档的末尾，</body>之前。 这样就可以让页面变得更快。

c .压缩脚本

使用专门的工具进行压缩。

以上。

《JavaScript Dom编程艺术》用例总结的更多相关文章

  1. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  4. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  5. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  6. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  7. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  8. 《JavaScript DOM 编程艺术》

    前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...

  9. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  10. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

随机推荐

  1. VS2010无法断点调试解决办法

    今天我的VS2010忽然出现设置断点的时候,无法进行调试.现象:每次在设置断点调试的时候都会出现卡机,然后VS弹出如下图所示的状况: 解决办法: 依次点击:“工具-->扩展管理器”然后找到.Ne ...

  2. jq里attr和prop的区别

    jquery中attr和prop的区别   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答 ...

  3. ajax + php + Controller 控制所有后台函数调用

    转载请注明出处:http://www.cnblogs.com/ghypnus/p/4645873.html 好久没有来这边发布代码了 总共分成3大部分来完成php的ajax调用逻辑,以下是大致的结构 ...

  4. zabbix之3触发器/action及模板

    1.触发器: {server_name:item_name.func.operator.condition} 一旦condition(条件)触发,则item状态改变 触发器之间可以存在依赖关系,即it ...

  5. 远程访问TeamTalk的Mysql数据库被拒解决方法

    1.A Database Error Occurred 问题如图: 蓝狐给的解答是: 这是访问mysql出错了.解决办法参考:http://www.bkjia.com/jingyan/512248.h ...

  6. C语言--关键字 typedef

    一.typedef 1.基本使用 1> typedef 在基本数据类型中的使用 typedef int MyInt; // 相当于给 int 起了一个别名 typedef MyInt MyInt ...

  7. 1005 Jugs

    辗转相减,新手入门题.两个容量的灌水题,无所谓最优解. #include<stdio.h> int main(){ int A,B,T,sA,sB; ){ sA=sB=; ){ ){ pr ...

  8. Fragment与Activity相互传递数据:

    Activity向Fragment传递数据:在Activity中创建Bundle数据包,并调用Fragment的setArguments(Bundle bundle)方法即可将Bundle数据包传给F ...

  9. 《编程珠玑》第二章 aha算法

    A题:给定一个最多包含40亿个随机排列的32位整数的顺序文件,找出一个不在文件中的32位整数. 1.在文件中至少存在这样一个数? 2.如果有足够的内存,如何处理? 3.如果内存不足,仅可以用文件来进行 ...

  10. C++ 线程的创建，挂起，唤醒，终止

    例子: 线程代码: DWORD __stdcall ThreadProc(LPVOID lpParameter) { CMultiThreadDlg * pdlg = (CMultiThreadDlg ...