zhuhuiwen Front-end Dev Engineer

js面向对象第六天

2016-12-02
JavaScript

12/2/2016 8:26:16 AM

  1. 递归画图、不好跟断点
  2. 闭包、变量常驻内存
  3. 闭包原理
    1. 词法
    2. 内可访问外
    3. 返回一个内部函数带着变量
  4. for循环中注册点击事件
    1. 给div添加自定义属性
      1. 缺点—-所有人都可以修改
    2. 给闭包
      1. 只能自己访问—-只能自己修改
  5. for循环中setTimeout
    1. 等所有的主逻辑执行完成之后，才去执行setTimeout里面的—-最后还是全局的i
    2. 使用闭包处理，每次存自己的j
  6. 斐波那契
    1. 存在的问题
      1. 里面存在大量的重复计算
    2. 解决办法
      1. 先定义一个数组
        1. var arr = []；
      2. function fib(){}
      3. 当要获取斐波那契数字的时候，先数组中去拿
      4. 如果有，直接返回
      5. 如果没有，就去计算(递归计算的逻辑)
      6. 将计算出来的值，存入数组，一遍喜爱使用
      7. 将计算出来的值返回

缓存cache

  1. 缓存处理
    1. 就是将数据进行临时的存储，以提高访问效率
  2. 浏览器缓存
    1. 一般情况下，会将一些不经常变化的静态资源，在浏览端进行存储，用户在首次请求的时候，会去服务器进行请求，完毕之后，在浏览器中进行存储
    2. 用户在下次访问的时候，就不会再去服务器进行请求资源了，而是直接从缓存中进行加载，这样就会极大的提升页面加载的速度
  3. 如何优化网页的访问速度(网站访问速度优化措施)
    1. 使用缓存
    2. js css 进行压缩
    3. 图片压缩
    4. 精灵图(减少对服务器的请求次数)
    5. cdn—content delivery network 内容分发网络—也是缓存的一种
      1. 免费的资源jq 和 bootstrap等，直接使用
      2. 海南，北京
        1. 百度的时候，在海南先去访问北京，进行存到海南的，下次的时候进行去海南的
    6. 硬件缓存
      1. 计算机中的内存，也是缓存的一种
      2. cpu 、一级缓存/二级缓存…
    7. 缓存型数据库
      1. 硬盘型数据库(关系型数据库)
        1. MSSQL MYSQL Oracle
        2. 稳定、安全
      2. 内存型数据库()非关系型
        1. Redis MongoDB
        2. 用在高并发网站
        3. 内存断电丢失
    8. 懒加载….
      1. jq插件 12/2/2016 9:44:19 AM
  4. jq缓存实现分析
    1. 数组做缓存
      1. 数组的键
    2. 对象
      1. 对象做缓存，键更灵活，可以使用自定义的字符串(就有了意义)
  5. 选择器需要用到缓存
  6. 类型缓存
  7. 动画缓存
  8. 封装一个缓存容器出来
    1. 行为
      1. 获取值的行为
      2. 设置值的行为
      3. 有个
    2. 主意
      1. 对象没有length属性，所以判断对象中存储了多少个数据，无从下手
    3. 缓存，一半要有数量的限制
      1. 超出这个限制之后，新的数据坑定要存进去
      2. 但是最早添加的进去的数据，要被删掉
    4. keyList
      1. 由于对象没有length属性，数组有
      2. 对象中添加数据，先后顺序，无法确定，但是数据有先后顺序
      3. 使用数组和这个对象配合起来，做长度限制这个事件
      4. 每当队形中存入一个键值对的时候
      5. 就给数组中存入这个简，对象中的兼职对就和数组中的键一一对应
      6. 数组中兼的顺序，就能标识对象中的兼职对应的顺序了
    5. 做判断
      1. 如果超出了长度限制，就要把对象中的兼职对删掉
      2. delete cache[]
    6. 在电脑内存可以的范围内 12/2/2016 10:29:58 AM

问题

  1. hash

    jq源码分析

  2. 设置可以直接通过函数当成一个对象进行存储—这个
  3. 加个空格，默认加的，免得和源冲突
  4. cache
    1. 长度限度
    2. 新增一个数组，协同工作
    3. 用数组，新增数据的时候，加一个key；和对象一一对应
    4. 限制可以限制的条件，数组的长度
  5. 优化后的代码
    1. get和set合并一个方法
    2. return function
  6. jq源码
    1. 没有用了存储的对象，使用函数来当对象
    2. 加一个空格，处理好源码的冲突
    3. 设置数据
    4. 获取数据，操作对象的方式去操作的

这个的用处

  1. 将斐波那契数组的缓存替换成刚才封装的
  2. 作用
    1. 获取
    2. 设置
  3. 将分析好的缓存应用在斐波那契数列
    1. 作用
      1. 创建一个缓存相当于arr的作用
      2. 之前是arr只能存0 1 2 下标
      3. 现在缓存容器还可以使用无序的键值对
  4. 例子
    1. 获取元素
  5. 写框架
  6. 获取元素
  7. 解决斐波那契性能问题
    1. 递归
    2. 闭包
    3. 缓存
  8. 将一个点扯出一个知识体系

自调用函数

  1. 概念
    1. 立即执行函数表达式IIFE imediatly invoked function expression
    2. 代码
      1. (function(){})();
      2. 左边的加括号了，就是函数表达式
    3. 代码
      1. 语句和表达式的区别
        1. ;
        2. = 右边
  2. 概念
    1. 函数声明
    2. function func(){}
    3. 函数表达式
      1. var num = function(){};
  3. 小技巧
      • function(){}();//做了解 12/2/2016 11:34:38 AM 12/2/2016 2:25:08 PM

        复习

  4. cdn
    1. 用户第一次进行去真的服务器访问 存到离自己近的服务器
    2. 后面直接到最近的服务器进行访问
  5. cache作用
    1. 使用范围
      1. 写框架
      2. 写组件的时候
  6. 自调用(立即执行)
    1. 让系统认为是一个函数表达式可以进行调用

沙箱模式

  1. 沙盘
    1. 显示生活中的沙盘是用来模拟显示世界
  2. 360沙箱模式
    1. 创建一个和外界隔离的，封闭的环境，如果程序有问题，那么这个不正常的东西不会影响外界外界
  3. 软件
    1. cydia 应用市场
    2. ios中的
  4. JS
    1. 创建一个隔离的安全的环境 5. 1。 保证洒向内部所有内容的安全性，不被外界访问到
  5. 用处
    1. 在写框架，写组件的时候，都会使用沙箱模式
  6. sublime
    1. format插件
  7. jq
    1. 直接写在(function(){})()匿名函数
  8. 结果
    1. 声明所有需要的变量
    2. 主要的逻辑代码
    3. 如果需要给外界就通过window对象暴露接口
      1. window.jq = window.$ = Jquery
    4. 在进行代码压缩(删除不必要的空格，换行，将变量名替换为单个字母的形式)的时候
      1. 由于内置对象是系统自带的，所以这些内置对象的名称不可能被压缩—window不能被压缩
      2. (function(window){var window = window;})(window)
        1. 自己通过实参进行给形参，这样就可以实现功能，也可以被压缩了

为什么要把window通过实参给沙箱

  1. 解释一

    1. 由于内置对象是系统自带的，所以这些内置对象的名称不可能被压缩—window不能被压缩
      1. (function(window){var window = window;})(window)
        1. 自己通过实参进行给形参，这样就可以实现功能，也可以被压缩了
  2. 第二个解释
    1. 实现给的目的，外面不能访问里面的，里面的也不要去访问外面的！！！
  3. puzzle
  4. 用处
    1. 框架
    2. 组件
      1. layer.layui.com
      2. sentsin
  5. www.yinwang.org

函数的四种调用模式

  1. 模式
    1. 函数调用模式
      1. 语法: 函数名()
      2. function test(){}
      3. test()
        1. 函数调用模式中，this指向window对象
    2. 方法调用模式
      1. 语法
        1. 对象.方法()
        2. var obj = {sayH:function(){}}
        3. obj.sayHello()
        4. 特点
          1. 方法调用模式中的this指向调用该方法的对象
    3. 构造函数调用
      1. 语法
        1. new 函数名()
        2. function Person(){}
      2. 特点
        1. 构造函数中的this指向new关键字创建的对象(这样说)
    4. 上下文调用模式

2.创建对象的模式 1. 工厂模式 1. factory 2. 代码结构

	function factory(name,age){
		
	}
  1. 构造函数
    1. 构造函数调用模式
    2. this指向new创建出来的对象
  2. 寄生模式
    1. 语法
    2. 代码结构
    3. 调用模式:构造函数调用模式
    4. 作用—–是干嘛的

上下文调用模式

  1. 左值和右值
    1. lva rvalue
      1. lva
      2. 左值
      3. 右值
      4. 在js中哪些不可以做左值
        1. func()
        2. this
        3. 常量
    2. 左值
      1. 可以卸载等号左边，可以被赋值的值，就是左值
    3. 右值
      1. 可以用来为其他变量赋值的值，就是右值
  2. 特点
    1. 在前三种调用模式中，this的值都是固定的，不可以修改的！！！
    2. 但是在上下文调用模式中，this是可以被修改的
  3. 上下文调用模式
    1. 上下文:
      1. 指的就是函数的调用环境(this的指向)
      2. 能够更改上下文的调用模式
  4. 两种方式
    1. call
      1. 语法
        1. 函数名.call(对象,arg1,arg2，argn)
      2. 功能
        1. 调用该函数
        2. 将函数内部的this指向第一个参数传过来的对象
        3. 将第二个以及后面的参数，作为实参传递给要调用的这个函数
        4. 代码结构
      3. 用法
  5. apply
    1. 语法
      1. 函数名.apply(对象,数组)
    2. 功能
      1. 调用该函数
      2. 将this指向第一个参数
      3. 将第二个参数的数组，成一个一个的元素，一次作为函数的实参 — 面试
    3. 实例 function test(a,b,c){}
  6. call和apply的不同点
    1. 传递参数的方式不同
      1. call
        1. 把每个实参都指定了
      2. apply
        1. 使用了数组
    2. 使用环境
      1. call 是使用在参数个数确定的情况！！！
      2. apply 是使用在参数个数不确定的情况下！！！
  7. 注意事项
    1. call和apply的第一个参数如果为null或者undefiend，那么this指向window
      1. test.call(null,1，2，3)
      2. test.call(undefiend,1,2，3)
    2. call和apply的第一个参数如果为值类型的数据，那么会将这个值类型的数据，转换成对应的引用类型的数据，然后再将this指向这个引用类型的数据
  8. ….
  9. —讲这个—是为了解释 函数调用的几种方式

ca所有的ll和apply的引用场景

  1. 让用户在页面上为call方法设置参数
    1. 获取文本框
    2. 把所有参数用逗号隔开
    3. 直接转换成数组
    4. 使用apply

上下文调用模式的练习

  1. 伪数组
    1. 具有数组的特点，也可以遍历，但是不能使用数组的方法
  2. 如何将一个伪数组转换成一个真数组
  3. 求数组中的最大值
    1. Math.max()
      1. 不能传数组
    2. apply
    3. 实际应用
      1. Math.max.apply(null,arr)
        1. Math.max中的计算逻辑并没有用到this指针
        2. 相当于如下的代码
          1. Math.max([arr[0]…..arr[length-1]])
        3. 工作中可以用

          借用构造函数继承

  4. 混入式
  5. 原型
  6. 经典继承
  7. 借用构造函数继承
    1. 每次新创建的时候都是新开辟的空间
    2. 所以不影响

12/2/2016 7:15:47 PM

复习

js第六天

  1. 缓存
    2. cache
    3. 将数据进行临时的存储，以提高访问效率
  2. jq的缓存实现分析 12/2/2016 7:36:05 PM 12/2/2016 8:16:03 PM
  3. js decodeURI
  4. encode 转换
  5. 参数

http://www.mmm.com?cate 前端路由——

问题

  1. ajax里面代码太多
    1. 解决
      1. 将succes进行封装，分别调用 12/2/2016 7:37:59 PM

hasownpropoty

Similar Posts

上一篇 js面向对象第五天

下一篇 js面向对象第七天

Comments

Content