JavaScript 图片库改进实践

平稳退化

假如用户禁用了js,也可以使用,只是少了一些功能,这叫做平稳退化

我们要做的就是把JS和HTML分离,我们将把onclick事件写在JS代码中

<ul id="imageGallery">
    <li> <a href="./alice.png" title="Alice">Alice~</a></li>
    <li> <a href="./cat.png" title="a cat from ff">Cat</a></li>
    <li> <a href="./grey.jpg" title="grey~grey~">grey~</a></li>
</ul>

JS匿名函数和闭包

匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数。

我的理解:可以把匿名函数看成某个对象的地址,把小括号看成将对象实例化的操作。

var a=function(x, y){
        return (x + y);
    }(2, 3);
    alert(a);
//输出5

闭包就是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕

<script>function a() {
    var num=0;
    return function () {
        num++;
        return num;
    };
}
var b=a();
alert(b());
alert(b());
alert(b());
</script>

上面的代码中内层的函数可以访问外层函数中的num,结果输出1,2,3

闭包里作用域返回的局部变量资源不会被立刻销毁回收,所以可能会占用更 多的内存。过度使用闭包会导致性能下降,建议在非常有必要的时候才使用闭包。


function prepareGallery() {
        if(!document.getElementById || !document.getElementsByTagName) return false;
        var gallery=document.getElementById("imageGallery");
        var links=gallery.getElementsByTagName('a');
        for(var i=0;i<links.length;i++){
            links[i].onclick=function () { showpic(this);
            return false;
            }
        }
    }
window.onload=prepareGallery;

将以上代码添加至js中,实现JS和HTML的分离。

平时将函数和onload绑定,可以这样写

window.onload=function(){
func1();
func2();
}

function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload =func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

CSS

将JS和HTML分离开来还有另外一个好处,那就是方便写CSS

#imageGallery li{
    display: inline;
}

HTML-DOM

document.getElementByTagName(“form”)=document.forms

element.getAttribute(‘src’) =element.src

效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注