zoukankan      html  css  js  c++  java
  • javascript(3、4)module模式、立执行函数(Evernote)

    基本特征:
    • 模块化
    • 封装变量和function,不与全局的namaspasce接触,松耦合
    • 只暴露public
       
    1.var blogModule = (function (my) {

    // 添加一些功能

    return my;
    } (blogModule || {})); ----判断是否有存在blogmodule,不存在则直接复制为{};

    2.var blogModule = (function (my) {
    var oldAddPhotoMethod = my.AddPhoto;

    my.AddPhoto = function () {
    // 重载方法,依然可通过oldAddPhotoMethod调用旧的方法
    };

    return my;
    } (blogModule));
     

    通过这种方式,我们达到了重载的目的,当然如果你想在继续在内部使用原有的属性,你可以调用oldAddPhotoMethod来用

    3.用闭包保存状态

    理解:闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态。

    // 这个代码是错误的,因为变量i从来就没背locked住
    // 相反,当循环执行以后,我们在点击的时候i才获得数值
    // 因为这个时候i才真正获得值
    // 所以说无论点击那个连接,最终显示的都是I am link #10(如果有10个a元素的话)

    var elems = document.getElementsByTagName('a');

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

    elems[i].addEventListener('click', function (e) {
    e.preventDefault();
    alert('I am link #' + i);
    }, 'false');

    }

    // 这个是可以用的,因为他在自执行函数表达式闭包内部
    // i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10)
    // 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了
    // 所以当点击连接的时候,结果是正确的

    var elems = document.getElementsByTagName('a');

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

    (function (lockedInIndex) {

    elems[i].addEventListener('click', function (e) {
    e.preventDefault();
    alert('I am link #' + lockedInIndex);
    }, 'false');

    })(i);

    }

    // 你也可以像下面这样应用,在处理函数那里使用自执行函数表达式
    // 而不是在addEventListener外部
    // 但是相对来说,上面的代码更具可读性

    var elems = document.getElementsByTagName('a');

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

    elems[i].addEventListener(
    'click', (function (lockedInIndex) {
    
     return function (e) {
    
    
     e.preventDefault();
    
    
     alert('I am link #' + lockedInIndex);
    

    };
    })(i), 'false');

    }





    4.模拟c++中的类!!!// 创建一个立即调用的匿名函数表达式
    // return一个变量,其中这个变量里包含你要暴露的东西
    // 返回的这个变量将赋值给counter,而不是外面声明的function自身

    var counter = (function () {
    var i = 0;

    return {
    get: function () {
    return i;
    },
    set: function (val) {
    i = val;
    },
    increment: function () {
    return i++;
    }
    };
    } ());

    // counter是一个带有多个属性的对象,上面的代码对于属性的体现其实是方法

    counter.get(); // 0
    counter.set(3);
    counter.increment(); // 4
    counter.increment(); // 5

    counter.i; // undefined 因为i不是返回对象的属性i; // 引用错误: i 没有定义(因为i只存在于闭包)
                                                                                                                         2015年1月                    
  • 相关阅读:
    mongo的常用操作——增删改查
    配置我的sublime
    mongo概念
    mongo命令
    mongo安装与配置
    node搭建http基本套路
    模块的导出入
    vue数据绑定原理
    webpack打包速度优化
    工作中的优化之数字键盘优化
  • 原文地址:https://www.cnblogs.com/songjum/p/5272238.html
Copyright © 2011-2022 走看看