JavaScript杂记(三)

阅读刘同学的博客有感,笔记如下:

  • 非常有用的本地图片预览,使用了HTML5 FileReader

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function previewFile() {
    var preview = document.querySelector('img');
    var file = document.querySelector('input[type=file]').files[0];
    var reader = new FileReader();

    reader.onloadend = function () {
    preview.src = reader.result;
    }

    if (file) {
    reader.readAsDataURL(file);
    } else {
    preview.src = "";
    }
    }

    浏览器支持情况:
    Firefox (Gecko) 3.6(1.9.2)+
    Chrome 7+
    Internet Explorer* 10+
    Opera*
    Safari
    *IE9有一个File API Lab,Opera从11.10开始部分支持该API.

  • 对象原型继承,我的看法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 更改了创建方式
    Object.prototype.create = function(){
    var F = function(){};
    F.prototype = this;
    return F;
    }
    // 可以直接从所有Object进行继承,不需要使用Object.create的方式传入
    var stooge = {
    "first-name":"liu",
    "last-name":"yangzuo"
    }
    var another1_stooge = stooge.create();
    another1_stooge["first-name"] = "zhang";
    stooge["first-name"]; // "liu"
    another2_stooge["first-name"]; // "zhang"

    这与对象的深拷贝是不同的,深拷贝知识将属性和方法进行复制,并不更改原型链:

    1
    2
    3
    4
    5
    6
    7
    8
    Object.prototype.clone = function(){

    var o = this.constructor === Array ? [] : {};
    for(var e in this){
    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
    }
    return o;
    }
  • 关于事件冒泡与事件捕获

    一般浏览级事件传播默认是事件冒泡,我们可以设置事件传播的方式是冒泡方式,还是捕获方式。上面所讲的addEventListener函数的第三个参数就是选择事件传播的方式,传入true事件传播方式为事件捕获,传入false事件传播方式为事件冒泡。

    另附:jQuery中return false,e.preventDefault(),e.stopPropagation()的区别

  • 怎么让一个div元素保持适中水平,竖直居中?,上面的方法只能用来解决定宽定高的容器居中问题,其实使用Table配合

    1
    text-align:center;verticle-align:middle;

    效果更佳。

  • jQuery对象转化DOM对象,仅需将jQuery对象当作数组即可,新技能get。

  • 好玩的JavaScript(二)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var SideBar = (function Module(){
    var SideBar = {
    num : 1,
    animation : function(){
    function f(){
    console.log(this == window);
    }
    console.log(this == SideBar);
    f();
    }
    }
    return SideBar;
    }());
    console.log(SideBar.num); // 1
    SideBar.animation(); // true -> this === Sidebar
    // true -> this === window

    注意,倒数第二行的Sidebar是闭包中的Sidebar,而不是立即函数前的Sidebar。这涉及到JavaScript中的this

    如果嵌套函数作为函数调用,其this值不是全局对象(非严格模式)就是undefined(严格模式)

  • 近来发现JavaScript不是唯一拥有闭包特性的语言。PHP和Python等也有……(囧)

通篇略读完,受益匪浅。