JavascriptDom编程艺术学习笔记三

最新推荐文章于 2020-05-28 21:47:05 发布

LeapMotion1

最新推荐文章于 2020-05-28 21:47:05 发布

阅读量348

点赞数

分类专栏： Javascript JS编程艺术读书笔记文章标签： javascript 函数编程性能优化 html

本文链接：https://blog.csdn.net/LeapMotion1/article/details/78722348

版权

Javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JS编程艺术读书笔记

5 篇文章 0 订阅

订阅专栏

本篇文章要实现以下几个功能点：

1.平稳退化：在没有JS的情况下也能正常工作
2.分离JS和HTML
3.向后兼容性：新老版本的浏览器都适用
4.性能优化

1. 平稳退化功能
要保证JS代码适用于各个版本、各种类型的浏览器，甚至在禁用JS代码的时候，依然能正常运行。

2.”javascript:”伪协议
这是一种非标准化的协议，能让我们通过一个链接来调用JS函数。
“真”协议用来在因特网上的计算机之间传输数据包，如HTTP协议、FTP协议等。

<a href="javascript:popUp('http://www.baidu.com/');">Examples</a>

但是这种做法强烈不推荐！！！

3.在某些浏览器里，“#”链接指向当前文档的开头。

4.搜索引擎中的爬虫程序无法理解JS代码，所以如果网页不能平稳退化，那你的网站排名会受很大影响。
遵循“平稳退化”的思想，上面的代码可以改为下面的样式：

<a href="http://www.baidu.com/" onclick="popUp(this.href);return false;">Examples</a>

上面这种实现方法，在禁用JS时，链接也是可以打开的，只是这个链接在功能上打了点折扣。

5.分离JS
写JS文件时的一条原则：如果想用JavaScript给某个网页添加一些行为，就不应该让JS代码对这个网页的结构有任何依赖。

对象检测
绑定事件到某个元素节点element.event=action

<a href="images/book_img1.jpg" title="Fireworks" onclick="showpic(this);return false;">Fireworks</a>

//下面这种实现方法和上述方法，实现的效果相同
//去除超链接中的onclick方法
<a href="images/book_img1.jpg" title="Fireworks">Fireworks</a>

//用getElementById()等方法把事件绑定到某个特定元素上
var links = document.getElementsByTagName('a');
for( var i=0; i<links.length; i++) {
    if(links[i].getAttribute('class') == 'popup') {
        links[i].onclick = function() {
            showpic(this);
            return false;   //阻止超链接的默认行为
        }
    }
}

6.对象检测
不推荐使用浏览器嗅探方法，推荐使用对象检测法。

//检测当前浏览器是否提供某个方法，不提供，则直接退出该函数
if(!getElementById) {  
  return false;
}

7.共享onload事件

//仅加载一个函数
window.onload = firstFunction;

//加载多个函数
window.onload = function() {
    fistFunction();
    secFunction();
}

//当代码越来越复杂时，该方法简单有效
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}
addLoadEvent(fistFunction);
addLoadEvent(secFunction);
addLoadEvent(thirdFunction);

8.其他注意事项
对showpic()方法中，涉及的对象进行检测

//图片的id属性是否存在
if (!document.getElementById('placeholder')) {
    return false;
}

即便文字节点不存在，也不影响图片的显示：添加一个对象检测就好啦！

//获取description元素节点
if (document.getElementById('description')) {
    var description = document.getElementById('description');
    //设置description元素节点内包含的文本节点为超链接的title
    var text = whichpic.getAttribute('title');
    description.childNodes[0].nodeValue = text;
}

当超链接title属性不存在时，该怎么办呢？

if (document.getElementById('description')) {
    var description = document.getElementById('description');
    //检测title属性是否存在，不存在则设为空字符串
    if (whichpic.getAttribute('title')) {
        var text = whichpic.getAttribute('title');
    } else {
        var text = '';
    }
    description.childNodes[0].nodeValue = text;
}

9.CSS-DOM

可以通过js对DOM进行操作，比如a:hover等伪类方法，可以用onmouseover()方法代替。
因为绝大多数的现代浏览器，虽然对CSS伪类的支持很不完整，但对DOM却都有良好的支持。

不论何时，如果你可以发现对某个函数进行抽象，都应该马上去做。

10.性能优化方法

1.尽量减少访问DOM
2.尽量减少文档中的标记数量
3.有多个.js文件时，合并到一个脚本文件中
4.对.js文件的加载放在文档末尾，</body>前面。
因为位于<head>块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才加载。

5.利用工具，压缩脚本。如JSMin, YUI Compressor, Closure Compiler, Webpack等。

LeapMotion1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavascriptDom编程艺术学习笔记三

本篇文章要实现以下几个功能点： 1.平稳退化：在没有JS的情况下也能正常工作 2.分离JS和HTML 3.向后兼容性：新老版本的浏览器都适用 4.性能优化1. 平稳退化功能要保证JS代码适用于各个版本、各种类型的浏览器，甚至在禁用JS代码的时候，依然能正常运行。2.”javascript:”伪协议这是一种非标准化的协议，能让我们通过一个链接来调用JS函数。 “真
复制链接

扫一扫