第五单元js面向对象-ZhiMap思维导图

第五单元js面向对象
进入思维导图模式
- 继承组件封装
  - 将方法写在原型里与将方法写在构造函数里有什么不同
    1.把方法写在原型中比写在构造函数中消耗的内存更小，因为在内存中一个类的原型只有一个,而写在类中的方法，实例化的时候会在每个实例中再复制一份，所以消耗的内存更高
    所以没有特殊原因，我们一般把属性写到类中，而方法写到原型中
    2、构造函数中定义的属性和方法要比原型中定义的属性和方法的优先级高，如果都定义了同名称的属性和方法，构造函数中的将会覆盖原型中的
- json对象数据应用
  - json数据渲染-dom法
    1.找最外层dom对象: oUl
    2.遍历数据
    3.创建内层元素 var oLi=obj.createElement('li')
    4.追加到父元素里 oUl.appendChild(oLi);
    5.拼接字符串 oLi.innerHTML='
  - 二级联动
    1.渲染省数据: option动态追加:
    options.innerHTML = "请选择"; 增加一个索引
    创建元素,追加元素
    2.省改变,市数据渲染
    取省索引-注意要把省索引与市索引一一对应上
- 全屏滚动
  - 鼠标滚轮事件 onmousewheel-应用场景:跟鼠标滚轮有关系-全屏滚动等场景
    onscroll 滚动条事件 -应用场景-电商网站折叠楼层,回到顶部,懒加载,瀑布流等
- cookie
  - cookie介绍：
    Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。
    例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息？
  - cookie用法:
    其它浏览器打开,文件要放在服务器，火狐中可直接打开
    cookie(可在火狐中打开,也能直接读取cookie):
    离不开wamp：
    必须要有域名，才能用cookie
    域名：一个域名值能有一个cookie
    cookie不能"跨域"
    "跨域"==两个域名的cookie不能共享
    做什么？
    保存信息
    用在哪?
    自动登录，记住用户信息（用户名，密码，地址)
    大小: 4k左右 4*1024英文 2*1024中文
    为什么小？
    出现的早
    cookie在哪？
    浏览器的缓存文件，在用户的电脑上
    安全：别存隐私
    cookie里面可以有很多条字符：
    expires 过期(3天后过期,1小时后,几年)
    session 会话结束（浏览器关闭cookie消失）
- 同步,异步,自执行函数,闭包,回调
  - 自执行函数
    特点：
    1.省个函数名
    2.里面的变量也是局部变量
    3.形成了封闭的空间,主要是用于隔离作用域。除了局部作用域避免污染，广告，第三方统计需求这种，也是需要自执行的
  - 用法:
    1.自执行函数 (函数)()
    (function (){
    alert('a');
    })();
    2.第二种写法(function(){}()) -推荐用这种
    (function(){
    alert('b');
    }());
    3. 函数有名字也可以:
    (function show(){
    alert('c');
    }());
- 链式运动
  - 链式运动:一个物体运动完，下一个运动开始
- 面向对象编程（OOP）的特点：
  - 抽象：抓住核心问题
    　　封装：只能通过对象来访问方法
    　　继承：从已有的对象下继承出新的对象
    　　多态：多对象的不同形态,目的是灵活的复用
- this指向
  - This指向问题
    1.this是一个对象，函数外的this都指向window，
    2.函数内的this，他的指向跟函数调用有关，看函数前面有没有.,有点就指向.前面的对象，没有就指向window。
    3.定时器的this永远是window，自执行函数里的this是window。
    4.构造函数里的this和原型上的this都指向实例对象
    改变this指向的方法

第五单元js面向对象

​继承组件封装

json对象数据应用

​json数据渲染-dom法 1.找最外层dom对象: oUl 2.遍历数据 3.创建内层元素 var oLi=obj.createElement('li') 4.追加到父元素里 oUl.appendChild(oLi); 5.拼接字符串 oLi.innerHTML='

​二级联动1.渲染省数据: option动态追加:options.innerHTML = "请选择"; 增加一个索引创建元素,追加元素2.省改变,市数据渲染 取省索引-注意要把省索引与市索引一一对应上

​全屏滚动

​鼠标滚轮事件 onmousewheel-应用场景:跟鼠标滚轮有关系-全屏滚动等场景 onscroll 滚动条事件 -应用场景-电商网站折叠楼层,回到顶部,懒加载,瀑布流等

cookie

同步,异步,自执行函数,闭包,回调

​自执行函数特点：1.省个函数名2.里面的变量也是局部变量3.形成了封闭的空间,主要是用于隔离作用域。除了局部作用域避免污染，广告，第三方统计需求这种，也是需要自执行的

​用法: 1.自执行函数 (函数)() (function (){ alert('a'); })(); 2.第二种写法(function(){}()) -推荐用这种 (function(){ alert('b'); }()); 3. 函数有名字也可以:(function show(){ alert('c'); }());

​链式运动

​链式运动:一个物体运动完，下一个运动开始

面向对象编程（OOP）的特点：

抽象：抓住核心问题 封装：只能通过对象来访问方法 继承：从已有的对象下继承出新的对象 多态：多对象的不同形态,目的是灵活的复用

​this指向

继承组件封装

json数据渲染-dom法
1.找最外层dom对象: oUl
2.遍历数据
3.创建内层元素 var oLi=obj.createElement('li')
4.追加到父元素里 oUl.appendChild(oLi);
5.拼接字符串 oLi.innerHTML='

二级联动
1.渲染省数据: option动态追加:
options.innerHTML = "请选择"; 增加一个索引
创建元素,追加元素
2.省改变,市数据渲染
取省索引-注意要把省索引与市索引一一对应上

全屏滚动

鼠标滚轮事件 onmousewheel-应用场景:跟鼠标滚轮有关系-全屏滚动等场景
onscroll 滚动条事件 -应用场景-电商网站折叠楼层,回到顶部,懒加载,瀑布流等

自执行函数
特点：
1.省个函数名
2.里面的变量也是局部变量
3.形成了封闭的空间,主要是用于隔离作用域。除了局部作用域避免污染，广告，第三方统计需求这种，也是需要自执行的

用法:
1.自执行函数 (函数)()
(function (){
alert('a');
})();
2.第二种写法(function(){}()) -推荐用这种
(function(){
alert('b');
}());
3. 函数有名字也可以:
(function show(){
alert('c');
}());

链式运动

链式运动:一个物体运动完，下一个运动开始

抽象：抓住核心问题
　　封装：只能通过对象来访问方法
　　继承：从已有的对象下继承出新的对象
　　多态：多对象的不同形态,目的是灵活的复用

this指向