专题1234导航

有关javascript“不要做太多假设”的一些疑问

来源:互联网
发表时间:2017/4/20 13:32:26
责任编辑:鲁晓倩
字体:
为了帮助网友解决“有关javascript“不要做太多假设”的一些疑问”相关的问题,mr007通过互联网对“有关javascript“不要做太多假设”的一些疑问”相关的解决方案进行了整理,用户详细问题包括:javascriptjsweb前端web前端本人大二狗一只,以后想要从事web相关行业的工作,目前了解了基础的css和html,正在学js(用的dom编程艺术一书),其中有一个章节提到“不要做太多的假设”,并给出了对例子,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="index.css" media="screen">
</head>
<body>
<h1>Eason's photo</h1>
<ul id="image-gallery">
    <li>
        <a href="http://tosibow.net/image/IMG_0001.JPG" title="Eason 001">Eason 001</a>
    </li>
    <li>
        <a href="http://tosibow.net/image/IMG_0002.JPG" title="Eason 002">Eason 002</a>
    </li>
    <li>
        <a href="http://tosibow.net/image/IMG_0003.JPG" title="Eason 003">Eason 003</a>
    </li>
    <li>
        <a href="http://tosibow.net/image/IMG_0004.JPG" title="Eason 004">Eason 004</a>
    </li>
</ul>
<img id="place-holder" src="http://www.xue163.com/image/IMG_0001.JPG" alt="Eason's photo">
<p id="description">Eason 001</p>
<script type="text/javascript" src="scripts/example.js"></script>
</body>
</html>


function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;           //上面这两个能够理解,如果浏览器不支持这个方法,就可以平稳退化
    if (!document.getElementById("image-gallery")) return false;  
    /*疑问1:如果浏览器通过了方法是否可用的检查,为什么还要加一个带id的检查,如果image-gallery不存在应该后面的代码自动无效了吧?*/
    var gallery = document.getElementById("image-gallery");
    var links = gallery.getElementsByTagName("a");
    for (var i = 0;i<links.length;i++) {
        links[i].onclick = function () {
            return !showPic(this);
        }
    }
}
function showPic(whichpic) {
    if (!document.getElementById("place-holder")) return false;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("place-holder");
    placeholder.setAttribute("src",source);
    /*疑问2:这一步检查到底有没有必要,本渣理解的是如果place-holder不存在,那么placeholder.setAttribute("src",source);也就无效了吧?*/
    if (document.getElementById("description")) {
        var text = whichpic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
        /*疑问3:同疑问2.*/
    }
    return true;
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}
addLoadEvent(prepareGallery);

结合百度(没有vpn英语也不好所以没用科学上网)找到了一些文字和视屏教学,我自己的主观感觉是除了方法以外,连标记的属性是否存在也要检查,是不是有点太多余了。。。所以也有了疑问,到底有没有必要检查标记的id和class是否存在。

而且在看了李毅老师的秒杀页制作,之中提到代码性能问题,说尽量少使用dom方法,但这个例子中检查用得if使用了document,然后用过检查后初始化变量又用了document,影响大么?
结合李毅老师的视频自己将showPic()做了一下改变:

function showPic(whichpic) {
    var placeholder = document.getElementById("place-holder");
    var description = document.getElementById("description");
    if (placeholder) return false;
    var source = whichpic.getAttribute("href");
    placeholder.setAttribute("src",source);
    if (description) {
        var text = whichpic.getAttribute("title");
        description.firstChild.nodeValue = text;
    }
    return true;
}

把两次操作dom的语句提到了开头定义了两个变量,这样就少访问两次。
但是我用的idea又有text变量的提示(为了可读性定义了text存储ul a的title属性值)
Local variable 'text' is redundant less... (Ctrl+F1) 
This inspection reports any instances of unnecessary JavaScript local variables, which add nothing to the comprehensibility of a function. Variables caught include local variables which are immediately returned, local variables that are immediately assigned to another variable and then not used, and local variables which always have the same value as another local variable or parameter.
Use inspection settings to have this inspection ignore variables which are immediately returned or thrown. Some coding styles suggest using such variables for clarity and ease of debugging.
但是把text移出if放在两个dom操作后面就没有这个提示了?这是为什么?

还有就是书中提到了“结构化程序设计”:
点击图片看大图mr007 www.xue163.com

如果这样改了之后 检查的if语句return就到中间去了,有问题么。。。
所以,感觉有好多问题。。。。。。也不知道这属不属于钻牛角尖。。。。。
希望有大神指点下。。。谢谢。。。,具体解决方案如下:
解决方案1:

function showPic(whichpic) {
    var placeholder = document.getElementById("place-holder");
    var description = document.getElementById("description");
    if (placeholder) return false;
    var source = whichpic.getAttribute("href");
    placeholder.setAttribute("src",source);
    if (description) {
        var text = whichpic.getAttribute("title");
        description.firstChild.nodeValue = text;
    }
    return true;
}

而且改了之后功能异常了。
解决方案2:
3个问题总结一下,其实就是一个问题。

这样写只是为了增加容错。

document.getElementById方法如果没有找到元素,会返回null。

如果没有找到,那再调用他的方法或者访问他的属性,程序就报错不会执行了。

下面的性能问题,你的方法没错,定义2个变量并赋值,这样就不用每次需要这个dom节点的时候,再去通过document.getElementById方法查找节点了,肯定有性能优势。text变量的提示你也可以无视掉,这不是什么问题,只是你这里没有对text处理而是直接赋值给了dom的属性。

至于下面的结构化,不要太在意,多个出口只要能保证你所有出口返回的结果能都是同一数据类型就无所谓。
尽量能保持一个出口那当然最好。

代码优雅只是后续的进阶,你现在初学期没必要追求这些。
解决方案3:
if (!placeholder) return false;
www.xue163.com true http://www.xue163.com/588880/39215/392158175.html report 9563 有关javascript“不要做太多假设”的一些疑问:解决方案1:function showPic(whichpic) {    var placeholder = document.getElementById("place-holder");    var description = document.getElementById("description");   ...
相关信息
最近关注
首页推荐
热门图片
最新添加资讯
24小时热门资讯
精彩资讯
精彩推荐
热点推荐
真视界
精彩图片
社区精粹
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2016 Xue163.com All Rights Reserved. mr007 版权所有
京ICP备10044368号-1 京公网安备11010802011102号