js和jQUERY第十周思维导图

* 就是子对象自动拥有父对象的属性和方法， 继承可以提高代码的复用性。* JS里的继承主要依靠是的原型链。让原型对象（每一个构造函数都有一个原型对象）的值，等于另一个类型的实例，即实现了继承；另外一个类型的原型再指向第三个类型的实例，以此类推，也就形成了一个原型链

1.原型继承

让子对象的原型指向父对象的实例，父对象的原型指向爷爷对象的实例，依次类推，就形成了原型链

function Animal(newAge){ this.age = newAge; } Animal.prototype.eat = function(){ console.log(\"Animal.eat\"); } function Person(newId){ this.id = newId; } Person.prototype = new Animal(18); Person.prototype.study = function(){ console.log(\"Person.study\"); } function Pupli(newTall){ this.tall = newTall; } Pupli.prototype = new Person(\"007\"); Pupli.prototype.play = function(){ console.log(\"Pupli.play\

2.原型链继承

1. 先定义原型继承关系，再添加子类的自定义方法或属性(原型的属性，即共享的属性和方法要在原型继承关系确立后，再定义)。 2. 利用原型链继承，给子类添加原型方法时，不可以重写prototype

function Animal(newAge){ this.age = newAge; } function Person(newId){ this.id = newId; } Person.prototype.eat = function(){ console.log(\"Person eat\"); } Person.prototype = new Animal(15); let p = new Person(\"007\"); console.log(p.id); p.eat();

缺点： 1. 被继承的类型(父类)里包括引用类型的属性的时候，它会被所有实例共享其值 2. 创建子类型的实例时，没法传参给被继承类型。

3.原型继承中的注意事项：

在传入父类传入的参数有引用元素时，则需要考虑深拷贝和浅拷贝的问题。浅拷贝：传参时值只传递了引用空间的地址深拷贝：开辟空间，且赋值

4.深拷贝浅拷贝

但是这样的继承的方式也有弊端： 1.无法继承父类原型上的属性和方法 2.单独使用这种借用的模式，所有要继承的属性和方法都要在父类型的构造函数里定义， 特别是实例共享的属性和方法也写在构造函数里，那么这样会浪费内存。所以，很少很少单独使用

组合继承: 结合前两种方式：原型链式继承和Call()/Apply()方式继承，我们就能解决前面提出的那些问题。 利用原型链继承共有的属性和方法，利用Call/Apply来初始化自己的但是和父类型同名的属性或

5.call和apply的继承

6.ES6的继承

继承

函数声明 声明的方式有函数的提升function test(ord){ alert(“亲”+ord+“！”);}

函数表达式（匿名函数)var test = function(ord){ alert(“亲”+ord+“！”);}

函数的三种定义方式

* ECMAScript 中函数实际上是功能完整的对象。即函数就是一个对象

示例一（无参）： var sayHello = new Function(\"alert(\\\"hello 哥们1111！\\\");\");

示例二（有参）： var sayHi = new Function(\"sN\

函数是功能完整的类

回忆闭包中，一旦父函数被调用一次，闭包就会新创建一个函数。 function f1(){ var n = 250; function f2(){ n++; alert(n); } return f2; } var f21 = f1();//f21就是f2 f21();//调用f2; f21();//调用f2; var f22= f1();//f22就是f2 f22();//调用f2; f22();//调用f2; 虽然f21和f22的代码一样，但是，它们是两个不同的对象，即，每个的n值不一样。

所以函数等价于类？ * 函数名作为参数和返回值： * 函数名能作为返回值，那么匿名函数也就可以作为返回值。 当我们知道函数是对象，函数名是对象名（变量名）时，函数名作为另外一个函数的参数和返回值就不难理解了。还记得当时讲数组的sort函数是，参数就是另外一个函数名。

既然定义一个函数就是创建一个函数对象。 * 那么只要执行函数定义的代码，就会创建新的函数对象

1.事件绑定的方法2.构造函数3.类中出现的方法4.普通函数

this的回顾:

* arguments对象保存函数的所有参数，虽然可以像数组一样的访问每个参数，但是，并不是标准的数组（没法使用push等函数）;

arguments对象不但保存着所有的参数，而且还有一个名叫callee的属性。Callee属性是个指针，指向了arguments对象所在的函数。Callee属性有个好处，看如下阶

乘递归的示例，即可明白function fun(n){ let c = 0; if(n==1){ return c = 1; }else{ c = arguments.callee(n-1)*n; } return c; } console.log(fun(10));如果函数名进行修改，函数体不用修改。

arguments

函数对象

没有名字的函数就是匿名函数。当某个函数，function 关键字后面没有标识符的时候，那么它就是一个匿名函数（lamda，拉姆达函数）。

如： function(){ alert(“亲，我来自无名函数”);}以前曾经写过 以下的代码： window.onload = function(){ …… }这就是把匿名函数赋给了事件属性。

* 匿名函数（anonymous）的概念：

* 写法一： 定义一个函数，把函数名赋给 onload属性function test(){ alert(\"亲1\");}

* 写法二 : 定义一个匿名函数，直接赋给 onload属性window.onload = function(){ alert(\"亲2\");}

* 写法三 ：定义一个匿名函数赋给一个变量；然后把变量赋给onload事件属性； 比写法二多了个中间变量而已var test = function(){ alert(\"亲3\");}

* 写法四： 定义一个匿名函数赋给一个变量，用变量（当作函数名）来调用函数；var test = function(){ alert(\"亲4\");}test();

匿名函数的四种写法

匿名函数的常见用法： * 函数表达式（var test = function(){}） * 事件处理函数 (window.onload = funciont(){}) * 自运行（立即执行） * 闭包里的返回值 （闭包中会讲）其实，当把匿名函数赋给一个变量时，就知道还可以用在何处（如：作为另外一个函数的参数），但不能进行运算

常见用法

匿名函数

1、已知：var test = function(){ alert(\"亲4\");}test();

2、把test()中的test等量代换就是 (function(){alert(“亲4”);})() 不要急着问它的好处，不要急着觉 得它有点多此一举，因为，还没有 学习闭包，所以，不能体现它的好处

* 什么是自运行（函数）* 自运行（函数）示例： 能够自己运行的一个函数。即，不用别人调用就能运行的函数。这是学习闭包的基础。 (function(){alert(“亲4”);})()推导一下：

* 写法一：最外面加括号(function(){ console.log(\"123\"); }()); //这是jslint推荐的写法，好处是，能提醒阅读代码的人，这段代码是一个整体。

* 写法二：最后的括号前面加括号；// (function(){// console.log(\"heihei\");// })();

* 写法三： function前面加运算符，常见的是!与void 。// !function fun(){// console.log(\"111\");// }();// void function fun(){// console.log(\"111\");// }();

* 自运行（函数）的其它写法

自运行：

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。（函数就是一个表达式） JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。* 什么是闭包：闭包是指在函数外部访问函数作用域中变量（局部变量）的函数;或者说闭包就是能够读取其他函数内部变量的函数；或者说闭包是指有权访问另一个函数作用域中的变量的函数； 由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

官方解释

闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)

通俗解释：

//全局变量 全局变量降低函数的独立性// var count = 0;// function add(){// return count++;// }// console.log(add());// console.log(add());// console.log(add());

//局部变量 函数执行外 局部变量销毁// function add(){// var count = 0;// return count++;// }// console.log(add());// console.log(add());// console.log(add());

// function add(){// var count = 0;// function plus(){// return count++;// }// return plus;// }// // var f = add();// // console.log(f());// console.log(f());// console.log(f());

//变身// function add(){// var count = 0;// return function(){// return count++;// }// }// // var f = add();// // console.log(f());// console.log(f());// console.log(f());

//继续变身// var f = (function (){// var count = 0;// return function(){// return count++;// }// }());// // console.log(f());// console.log(f());// console.log(f());

过程

记数器:

运用

闭包的作用:

* 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

* 闭包会在父函数外部改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

* 示例：局部变量的累加 看程序分析：<script type=\"text/javascript\"function outerF(){ var t=0; function innerF(){ t++;\t console.log(t); } return innerF;}var f = outerF();</script>

使用闭包的注意事项：

function outerF(){ var t=0; function innerF(){ t++;\t console.log(t); } return innerF;}var f = outerF();

* 用闭包的方式实现mult(5)(6)(7)，表示三个数的乘法（5*6*7） function fun(m){ return function(n){ return function(k){ return m*n*k; }; } } console.log(fun(5)(6)(7));

<script> let list = document.getElementsByTagName(\"li\"); for(var i=0; ilist.length; i++){ //list[i].index = i; (function fun(i){//自运行 list[i].onclick = function(){ //alert(this.index+1); alert(i); } }(i)); }</script>

示例：事件绑定

闭包

带参匿名函数

prototype属性: 对于引用类型来说，prototype保存着所有实例方法的真正所在，即所有的实例方法都是在prototype中保存着，平时，我们在使用实例方法时， 虽然用对象直接调用，但是真正的保存是在prototype中。在继承中prototype的作用更加明显 我们创建的每个函数都有一个属性是prototype（原型），这是属性是个指针，指向一个对象，该对象的用途是包含所有实例共享的属性和方法。 所有通过同一个构造函数创建的实例对象，都会共享同一个prototype。

区分原型的属性和实例的属性： 实例：用new调用构造函数创建出来的对象叫做实例。 原型属性：写在prototype后面的叫做原型属性 。 实例属性：创建出来的对象，重新给原型属性赋值后，就成为了实例属性。注意原型图： 函数(类)的属性:prototype 实例的属性:_proto_

5.函数的属性和方法

每个函数dui都有两个非继承而来的方法apply()和call()，这两个方法的用途都是用来调用函数（在特定的作用域中），实际上等于设置函数体内的this对象的值。调用函数，实际上就是调用该函数对象的call内部方法。

两者的区别： apply（）方法有两个参数，分别是运行函数的作用域，另一个是参数数组（可以是Array也可以是arguments）。 call（）方法的第一个参数和apply()的第一个参数一样，其它参数就是调用函数的参数（相当于把，apply第二个参数的每个元素单列出来）

apply()和call() 真正的用途： 把函数和对象之间进行解耦 即对象和函数之间可以没有关联

6.apply()和call()

闭包与函数对象

插件是一个独立的功能，与函数相比，他是更加完整的功能。假设将一个汽车比作项目： 函数好比汽车的螺丝，螺帽。 而插件就好比发动机，变速箱。

原生js放大镜插件：

class PopPlugin { constructor(newBox) { this.box = newBox; this.btnDiv = null; } setBoxPosition() { this.box.style.display = \"block\"; //要想获取offsetWidth display必须设置为block this.box.style.left = window.innerWidth / 2 - this.box.offsetWidth / 2 + \"px\"; this.box.style.top = window.innerHeight / 2 - this.box.offsetHeight / 2 + \"px\"; this.creatBtn(); } creatBtn() { if (this.btnDiv == null) { this.btnDiv = document.createElement(\"button\"); } //记得加定位 this.btnDiv.style.position = \"absolute\"; this.btnDiv.style.width = 50 + \"px\"; this.btnDiv.style.height = 25 + \"px\"; this.btnDiv.innerHTML = \"关闭\"; this.box.appendChild(this.btnDiv); //必须先有元素才有offsetWidth 这些东西 this.btnDiv.style.left = this.box.offsetWidth - this.btnDiv.offsetWidth + \"px\"; this.closeBox(); } closeBox(){ let that = this; this.btnDiv.onclick = function(){ that.box.style.display = \"none\"; } } }

原生js弹出层插件：

class myAjax{ constructor(newObj) { this.obj = newObj; } ajax() { //1.创建对象 通过兼容模式 let xhr; if (window.ActiveXObject) { //ie xhr = new ActiveXObject(\"Microsoft.XMLHttp\"); } else { //非ie xhr = new XMLHttpRequest(); } this.obj.type = this.obj.type.toLowerCase(); if (this.obj.type == \"get\") { let urlParam = this.obj.url; urlParam += \"?\

原生jsajax插件:

class Select { //静态 static $(str) { if (str.charAt(0) == \"#\

原生js选择器插件:

1.插件

jQuery 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。1>提供了强大的功能函数2>解决浏览器兼容性问题3>纠正错误的脚本知识4>体积小，使用灵巧(只需引入一个js文件)5>易扩展、插件丰富

jQuery的特点

* 程序员的角度：简化JavaScript和Ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。* 用户体验的角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。方便地选择页面元素(模仿CSS选择器更精确、灵活)动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)控制响应事件(动态添加响应事件)提供基本网页特效(提供已封装的网页特效方法)快速实现通信(ajax)。

jQuery的作用：

* jQuery库文件不需要安装，只需使用<script>标签引入到HTML文件中，拿到jQuery的库文件后，就跟自己写的JS文件同样的引入方式，即可，以下是几种引入方式 * a.引入本地的Jquery * b.引入cdn在线提供的库文件（稳定可靠高速）<script src=\"http://libs.baidu.com/jquery/2.0.0/jquery.js\"</script> 写第一个JQuery案例   <script type=\"“text/javascript”\" src=\"“”\"</script> <script type=\"“text/javascript”\" $(function(){ alert(“jQuery 你好!”); }); </script>

如何引入JQuery包：

* 在JQuery库中，$是JQuery的别名，$()等效于就jQuery()。即以上代码等价于：jQuery(function(){alert(“jQuery 你好!”);});$()相当于页面初始化函数，当页面加载完毕，会执行$()，即jQuery()。* $(function(){ })当页面加载完毕，会执行$()，即jQuery()。$(function(){ }) 是$(document).ready(function(){});的简写。

写法

* ready表示文档已加载完成（不包含图片等非文字媒体文件）* onload是指页面包含图片在内的所有元素都加载完成* $(document).ready(function(){})要比window.onload先执行

* $(document).ready(function(){})和window.onload 的区别

在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，即集合。也就是说，$()的返回结果都是集合，不是单个对象。 比如获取包含一个元素的jQuery包装集。 //testDiv是页面某元素的id var jQueryObject = $(“#testDiv\"); 虽然，通过id获得的是一个元素对象，但是依然以集合的方式返回，只不过，集合中只有一个元素而已。* jQuery包装集与DOM 对象的互转 * jQuery包装集转DOM对象 * DOM对象转jQuery包装集jQuery包装集是一个集合，所以我们可以通过索引器访问其中的某一个元素//testDiv是页面某元素的idvar domObject = $(“#testDiv”)[0];//testDiv是页面某元素的idvar div = document.getElementById(\"testDiv\");var domToJQueryObject = $(div);

* jQuery包装集

2.jQuery入门

* jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象，并且将对象以jQuery包装集的形式返回（就像DOM中获得页面的节点一样）“$”符号在jQuery中代表对jQuery对象的引用，返回jQuery对象如：//根据id获取jQuery包装集var jQueryObject = $(“#testDiv”);

定义

//1.ID选择器(只代表唯一一个元素) //两种写法 //a.js写法 //$(\"#box1\").css(\"backgroundColor\

1.基础选择器

//1.后代选择器 //$(\"body div\").css({backgroundColor:\"red\"}); //2.子选择器 //$(\"body>div\").css({backgroundColor:\"skyBlue\"}); //3.相邻选择器 //$(\"#box1+div\").css({backgroundColor:\"skyBlue\"}); //4.兄弟选择器 //$(\"#box1~div\").css({background:\"yellow\"});

2.层次选择器

//div带有class属性的选择器 //$(\"div[class]\").css(\"backgroundColor\

3.属性选择器

//选中偶数行 下标从0开始 //$(\"div:even\").css(\"backgroundColor\

4.伪类选择器

//contains //字符串中存在hello world的元素 //$(\"div:contains('hello world')\").css({background:\"red\

5.内容选择器

//改变不可见元素的样式 $(\"tr:hidden\").css(\"background\

6.可见性选择器

jQuery选择器

什么是遍历？jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。图示解释：

//next下一个元素 //$(\"#box2\").next().css({background:\"red\"}); //nextAll下面所有元素 //$(\"#box2\").nextAll().css({background:\"red\"}); //prev上一个元素 //$(\"#box2\").prev().css({background:\"red\"}); //prev上面所有元素 //$(\"#box2\").prev().css({background:\"red\"}); //该方法必须传参 //Dom元素的遍历 //find(\"参数\") 寻找body下的所有div 后代遍历的方法 //$(\"body\").find(\"div\").css({background:\"yellow\"}); //children body的div会被影响 //$(\"body\").children(\"div\").css({background:\"yellow\"}); //children 不传参时默认传递通配符 //$(\"body\").children().css({background:\"yellow\"});

3.jQuery遍历

//使用val()方法来读写文本内容来 //val() == value //读 console.log($(\"input\").val()); //写 $(\"input\").val(888); //使用html()方法来读写元素的内容来 //html() == innerHTML console.log($(\"p\").html());

1.文本的值与元素内容的读写 val():文本的值 html():元素的内容

//注意:$(this)的写法 $(this).css({background:\"red\"}); }); $(\"div\").mouseover(function(){ //注意:$(this)的写法 $(this).css({background:\"yellow\"}); }); $(\"div\").mouseout(function(){ //注意:$(this)的写法 $(this).css({background:\"blue\"});

2.jQuery的事件全都去除on

$(function(){ $(\"div\").click({name:\"老王\

jQuery的事件可以传自定义参数:

4.jQuery的文本与事件

//滑动 $(function() { $(\"button\").eq(0).click(function() { //第二个参数为在动画完成时执行的函数，每个元素执行一次。 $(\"div\

b.方法：slideUp，slideDown，slideToggle

$(function() { $(\"button\").eq(0).click(function() { //第二个参数为在动画完成时执行的函数，每个元素执行一次。 $(\"div\

c.淡入淡出：常用 fadeIn fadeOut fadeToggle

1.简单动画

$(\"button\").eq(0).click(function(){// $(\"#box\").animate({// width:\"500px\

2.自定义动画animate:

5.jQuery动画

*{ margin: 0; padding: 0; } ul{ width: 500px; height: 100px; background: red; position: relative; margin: 0 auto; } ul li{ list-style: none; width: 40px; height: 100px; background: yellow; float:left; border: 1px solid black; } <script src=\"js/jQuery.js\" type=\"text/javascript\" charset=\"utf-8\"</script><script> $(function(){ $(\"li\").mouseover(function(){ $(this).stop().animate({ width:240 }).siblings(\"li\").stop().animate({ width:40 }); }); });</script>

1.简单版本

*{ margin: 0; padding: 0; } ul{ width: 400px; height: 100px; background: red; position: relative; margin: 0 auto; } ul li{ list-style: none; width: 40px; height: 100px; background: yellow; float:left; border: 1px solid black; overflow: hidden; } ul li img{ width: 240px; height: 100px; background-size: 240px 100px; } <script src=\"js/jQuery.js\" type=\"text/javascript\" charset=\"utf-8\"</script><script> $(function(){ $(\"li\").mouseover(function(){ $(this).stop().animate({ width:240 }).siblings(\"li\").stop().animate({ width:40 }); }); });</script>

2.完美版

6.手风琴

插件编写及JQ入门

早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。1.cookies的大小限制在4kB，不适合大量的数据存储。2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，HTML5的web提供了两种客户端存储方式。localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

子主题

存：三种方法 let ls = localStorage; ls.setItem(\"id\

取： console.log(ls.getItem(\"id\")); console.log(ls.name); console.log(ls[\"pwd\"]);

改:与存的方式相同，key不在则创建，key在则修改value。遍历: let ls = localStorage; for(let i=0;i

1.localStorage和sessionStorage功能

* 定义：模式是在一个上下文中，对一个问题的解决方案。即模式的四要素：名字、上下文、问题和解决方案。

分类：23种设计模式： 创建型：5种 结构型：7种 行为型：11种

为什么使用设计模式：* 尽量用一种标准的方式描述设计经验* 为设计者提供一种通用的语言* 增加复用性，减少设计的多样性* 增强设计变更的灵活性* 提高设计文档的质量* 增强设计的可理解性

2.设计模式是什么

* 单例模式指的是一个类只能有一个实例，这样的类被称为单例类，或者单态类，即Singleton Class

* 单例类的特点 * 单例类只可有一个实例 * 它必须自己创立这唯一的一个实例 * 它必须给所有其它的类提供自己这一实例

单例模式的思路是：一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用 getInstance 名称）。 那么当我们调用这个方法时，如果类持有的引用不为空就返回该引用，否者就创建该类的实例，并且将实例引用赋值给该类保持的那个引用再返回。 同时将该类的构造函数定义为私有方法，避免其他函数使用该构造函数来实例化对象，只通过该类的静态方法来得到该类的唯一实例。对于 JS 来说，巨大的灵活性使得其可以有多种方式实现单例模式，使用闭包方式来模拟私有数据，按照其思路可得

var single = (function() { var unique; function getInstance() { if (unique === undefined) { unique = new Construct(); } return unique; } function Construct() { // ... 生成单例的构造函数的代码 } return { getInstance: getInstance } })();

3.单例模式:

4.代理模式

工厂模式：就是用工厂的思路，创建对象。工厂是造产品的。现在用工厂来造对象。即一个工厂可以制造很多种类型的对象，这些对象一般具有共同的父类，即相似的类。 为什么使用工厂模式? 使用一个类(通常为单体)来批量生成实例. 以下几种情景下工厂模式特别有用： 对象的构建十分复杂 需要依赖具体环境创建不同实例 处理大量具有相同属性的小对象 我们所熟悉的工厂是不是重复生产，编程中称为迭代！ 比如生产一颗螺丝钉，一个流水线就是不停的生产螺丝钉。 再如联想电脑，联想公司的笔记本生产线只负责生产笔记本，不能生产出TV吧。 但是如果有TV生产线，那么TV生产生只能生产TV，而且每天都是重复的工作。 当然笔记本生产想也是重复的。 编程中我们也想让编程跟流水线一样，想用的时候开启一下工厂就可以得到一个想要的程序！ 注意，每次得到的程序和已经得到的程序不会是同一个程序。 就好像生产出两台笔记本，肯定不是同一个笔记本！！ function Factory(color){//生产笔记本的流水线 return { \"screen\":\"this is screen\

4.工厂模式

抽象工厂模式：使用子类来决定一个变量成员应该为哪个具体的类的实例.抽象工厂抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的一种形态。抽象工厂模式是指当有多个抽象角色时，使用的一种工厂模式。抽象工厂模式可以向客户端提供一个接口，使客户端在不必指定产品的具体的情况下，创建多个产品族中的产品对象。 function AbstractFactory(){//生产5.8inch两毫米厚度钻石手机屏幕 return { \"thickness\":\"2mm\

5.抽象工厂模式

定义:观察者模式是软件设计模式的一种常见的设计模式，又称发布订阅模式。在这种模式中，并不是单纯的一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在其状态发生改变后获得通知，然后执行相应的操作。订阅者也称为观察者，而被观察的对象则被称为发布者或主题。当一个事件发生，发布者将会向所有订阅此事件的对象以事件对象的形式传递消息。比如说：前段时间世界杯，很多人都看球赛，但人精力还是有限的，经常可能会因为这样或哪样的原因错过看球赛的时间，在这种情况下很多直播网站提供了一个很贴心的服务，那就是开播提醒，当用户订阅了这个提醒，那么在某个时刻比如球赛开播前5分钟系统会给所有订阅开播提醒的用户以短信或者其他有效形式发送通知，提醒用户球赛马上开播了，这个就是观察者模式的典型应用。

要素:观察者模式最重要的两个要素是：发布者、订阅者（观察者），发布者发送消息，订阅者订阅特定消息并接受发布者发送的消息。

//观察者（订阅者） 订阅update消息 var sub1 = { update: function(what) { console.log(what+\"sub1根据消息做什么\"); } } var sub2 = { update: function(what) { console.log(what+\"sub2根据消息做什么\"); } } var sub3 = { update: function(what) { console.log(what+\"sub3根据消息做什么\"); } } //发布者 class Dep{ constructor(newSubs) { this.subs = newSubs; } //消息 information(){ for(let i=0; i

6.观察者模式

7.适配器模式

localStorage、sessionStorage与设计模式

第十周