初学html

在上传的文件中是我初学html的一些笔记和练习


WEB前端开发工程师


必备条件:
1)能上网、会打字、懂得互联网是什么 。
2)兴趣
3)肯做练习


要学哪些东西,才能进行 WEB前端开发 的工作:
1)软件:只需要花5%的精力
浏览器(谷歌、IE浏览器、火狐浏览器、苹果浏览器……)
浏览器插件F12
用来写代码的编辑器:记事本、DW、Sublime ...
PhotoShop
2)语言:至少花95%的精力
HTML:“超”文本 标记“语言”
语言是和浏览器打交道的(沟通)


标记、标签:<html>
标签对:<html></html> <body></body>
单标签:<meta /> <img />


CSS:层叠样式表
width : 200px;
height : 200px;
border:8px solid red;


JavaScript:脚本语言(行为)
οnclick=" this.style.width = '800px'; this.style.height = '400px'; "


硬指标!


/*Css1.txt*/


一、什么是CSS?
CSS是层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML 4.0中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一




二、网页中调用CSS的方式
1、内联样式 CSS:只对本标签有效  【不建议】
<p style="color:white;background-color:gray;">
   This is an example of inline styling.
</p>


2、内嵌样式:【少使用】 在HTML中<head></head>中定义的样式可在整个文件中起作用
<style type="text/css">
  p{color:red;font-family:arial;font-size:12px;}
</style>


3、外部样式:【建议使用】在外部样式表中定义的样式存放在单独的文件中,这种存放外部样式表的文件以.css作为扩展名,例:style.css
如何与HTML文件链接在一起?
<head>
  <link rel="style sheet" href="style.css" type="text/css">
</head>


4、使用导入样式表
若要导入多个样式表,则这些样式表将按导入顺序依次重叠,后导入的样式表将覆盖前一样式表的定义
如:<style type="text/css">@import url(style1.css);</style>




三、CSS的基本语法
1、CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。
  h1     { color : orange ; }
选择器     属性      值


2、在HTML标签都可以定义一个class的类名,在CSS中class选择器根据类名来选择,前面以“.”标志
<style type="text/css">
 .red
   {
     color:red:
    }
 .size
   {
     font-size:36px;
    }


<body>
  <p class="red">这里是段落文字</p>
  <p class="size">这里是层里的文字</p>
  <p class="red size">这里也是段落文字</p>
</body>


3、每个HTML标签都可以定义一个id的属性,一个页面中,id只可以出现一次。在CSS中id选择器根据id来选择,前面以“#”标志
<style type="text/css">
  #head
   {
     color:#F00;
   }
  #main
   {
     font-size:36px;
   }
  #foot
   {
     font-family:"楷体";
   }
</style>


<body>
   <div id="head">这里是段落文字</div>
   <div id="main">这里是层里的文字</div>
   <div id="foot">这里也是段落文字</div>
</body>


4、当几个选择器的表现形式是一样的,可以共同调用一个声明部分,选择器之间用逗号分隔
<style type="text/css">
p,#head,.main{
   color:#F00;
   font-size:36px;
   font-family:"楷体";
   }
</style>


<body> 
   <p>这里是段落文字</p>
   <div id="head">这里是id标识的层里的文字</div>
   <div class="main">这里是class标识的层里的文字
</body>


5、可以利用元素的上下文关系,对元素进行样式控制
<style type="text/css">
  div p{
        color:#F00;
    }
  div p span{
        font-size:36px;
     }
  div .second{
         color:#36C;
    }
</style>


<body>
  <div>
     这里是外层div的直接内容
    <p>
     这是段落内的<span>文字</span>
    </p>
    <p class="second">
     这是第二个段落的文字
    </p>
   </div>
</body>


6、超链接伪类:
link、visited、hover、active


/*Css2.txt*/

1、页面中使用样式表的方式
(1)In-line (内联式)行内样式:是在HTML标签里直接使用style属性
<p style="color:red">text</p>


(2) Internal 内部样式:使用于整个页面,在head标签里面,style标签包围样式。


(3)外部样式:使用于在多个页面中,它是一个独立的CSS文件,公用
<link rel="stylesheet" type="text/css" href="web.css"/>


2、p { color : #ff0000; background : #ffffff ; }
(1)其中“p”我们称为“选择器”(selectors),指明要给“p”定义样式
(2)样式声明写在一对大括号“{}”中
(3)color和background称为“属性”(property),不同属性之间用分号“;”分隔
(4)"#ff0000"和"#ffffff"是属性的值(value)


3、CSS的数值单位
(1)颜色单位
命名颜色:如p{color:green;}
(2)RGB颜色:如div{color:rgb(123,35,32);}
(3)十六进制颜色:如div{color:00eeff;}


4、长度
(1)绝对单位:in(英寸),cm(厘米)
(2)相对单位:主要取决于某个参照物
(3)px(像素),em(元素的字体高度)


5、百分比
div{width:50%;}(宽度也是50%)
p{font-size:100%;}


6、通配选择符:为所有的元素定义统一的属性
*{font-size:14px;}


7、伪类:它指定的对象在文档中并不存在,指的是元素的某种状态
a.fly:hover(font-size:14px;color:red;}
a:hover span(color :red;}
a:link{text-decoration:none;color:#c00;}


8、群选择器:将同样的定义用于多个选择符选择符,以逗号的形式隔开
body,p,div{font-size:12px;}


9、后代选择符:所有div的class属性等于news,此div中p标签的字体大小都为12px;
.news p{font-size:12px;}


10、(1)font-style:规定字体样式
   normal:默认值
   italic:斜体
   oblique:倾斜
   inherit:从父元素继承字体样式


    (2)font-variant:规定字体异体
   normal:默认值
   small-caps:显示小型大写字母的字体
   inherit:从父元素继承font-variant属性的值


    (3)font-weight:规定字体粗细
   normal:默认值
   bold:定义粗体字符
   bolder:定义更粗的字符
   lighter:定义更细的字符
   100-900:400等同于normal,而700等同于bold
   inherit:从父元素继承font-weight属性的值


    (4)font-size/line-height:规定字体尺寸和行高
   normal:默认,设置合理的行间距
   number:设置数字,与当前的字体尺寸相乘来设置行间距
   length:设置固定的行间距
   %:基于当前字体尺寸的百分比行间距
   inherit:从父元素继承line-height属性的值


   xx-small:把字体的尺寸设置为不同的尺寸,从xx-small到xx-larger
   x-small
   small
   medium:默认值
   large
   x-large
   xx-large
   smaller:把font-size设置为比父元素更小的尺寸
   larger:把font-size设置为比父元素更大的尺寸
   length:把font-size设置为一个固定的值
   %:把font-size设置为基于父元素的一个百分比值
   inherit:从父元素继承字体尺寸


   (5)font-family:规定字体系列
   family-name:用于某个元素的字体族名称或类族名称的一个优先表
   generic-family:默认值。取决于浏览器
   inherit:从父元素继承字体系列


    caption:定义被标题控件(比如按钮、下拉列表)使用的字体
    icon:定义被图标标记使用的字体
    menu:定义被下拉列表使用的字体
    messag-box:定义被对话框使用的字体
    small-caption:caption字体的小型版本
    status-bar:定义被窗口状态栏使用的字体




11、机构化:<h1>标题、<i>斜体、<b>加粗、<sup>上标、<sub>下标、<br />换行、<hr />下划线。


语义化:<em>斜体、<strong>加粗,参数有:normal、blod、bolder、lighter、100-900的整数等、<addr>缩写词、<cite>引用,一般为斜体、<ins>下划线、<del>删除线、<s>删除线、<mark>背景标记、<small>字体变小为原来的85%、<big>放大。


Css属性设置样式


font-style:设置字体倾斜,可能的属性有normal、italic、oblique;
line-height:设置字体的行间距;
letter-spacing:控制字母之间的距离;
text-overflow:当文本溢出包含元素时发生的事情;可能的值有
clip  修剪文本。
ellipsis  显示省略符号来代表被修剪的文本。
string  使用给定的字符串来代表被修剪的文本。
word-spacing :控制单词间空格的距离,以空格来区分单词,中英都OK;
text-decoration :控制文本是否有下划线,可能值有
none  没有下划线 
overline  定义文本上的一条线。
line-through  定义穿过文本下的一条线。
underline  定义文本下的一条线。 
text-transform :控制英文的大小,可能的值有
capitalize  文本中的每个单词以大写字母开头。
uppercase  定义仅有大写字母。
lowercase  定义无大写字母,仅有小写字母。
text-align:控制文本的对齐方式
text-indent :控制文本首行的缩进,px或%都可;
white-space:控制文本与文档源代码的关系,可能值有
normal 默认,空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。




12、
    background-color
    background-position
    background-size
    background-repeat
    background-origin
    background-clip
    background-attachment
    background-image
    
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
inherit         规定应该从父元素继承 background 属性的设置。


13、display 属性规定元素应该生成的框的类型。
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in         此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker         CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table         此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row         此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column       此元素会作为一个单元格列显示(类似 <col>)
table-cell       此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。


visibility属性用来设置一个给定的元素是否显示(visibility="visible|hidden"),但是,虽然一个元素的visibility被设置为hidden,但是该元素仍然会占据设计的位置




14、float属性指定一个盒子(元素)是否应该浮动。
注意: 绝对定位的元素忽略float属性!
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。




一、第一讲:初识Javascript


1、javascript的组成部分
   javascript是一种专为与网页交互儿设计的脚本语言。由三部分组成:


ECMAScript  (ECMA-262定义)  提供核心语言功能
文档对象模型(DOM)
提供访问和操作网页内容的方法和接口
浏览器对象模型(BOM)提供与浏览
器交互的方法和接口




2、如何使用javascript
   对JavaScript是一种可以与HTML标记语言混合使用的脚本语言,其编写的
程序可以直接在浏览器中解释执行。
javascript是一种解释型语言(预编译、
执行) 
Javascript的国际标准是ECMAScript.
语法、类型、语句、关键字、
保留字、操作符、对象
如何使用javascript?
在HTML文档中插入脚本语言可
以使用<script>标记
<script>标记可以置于页面任意位置,一般定义在
<head>标签中
<script>标记属性!
type、src、defer、charset






二、基本概念
语法
变量
基本数据类型
控制语句等
1、认识变量(声明、规则、全局变量、局部变量)
   变量
JavaScript 是一种弱类型的脚本语言
var c = 3;即变量的声明
(变量使用之前必须加var声明,编程规范)
变量的命名规则!
1.变量命名必须
以字母或是下标符号”_”或者”$”为开头。
2.变量名长度不能超过255个
字符。
3.变量名中不允许使用空格。
4.不用使用脚本语言中保留的关键字及
保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的
语言)
全局变量
在方法外部声明的变量
方法内部,没有加var关键字声明的变

局部变量
方法内部,使用var声明的变量


2、
数据类型(基本类型、引用类型)
   ECMAScript中,数据类型也分为基本类型和引用类型两大类.
基本数据类
型:Number、Boolean、String、Undefined、Null
Number:整数和小数
(最高精度17位小数)、NaN、Infinity, -Infinity 

注意:1.除10进制外,
还可通过8进制和16进制的字面值来表示,如  070 表示56、0xA表示10.

      2.小数为浮点类型,if(a+b == 0.3) //不要做这样的测试,因为浮点
数值最高精度是17位,而是0.300000000000000004.
Undefined:表示变量声
明但未赋值.
Null:表示一个空的对象引用(也就是赋值为null)
引用类型:
Object类型 (比如对象、数组、RegExp、Date...)
Typeof 操作符
基本类型和
引用类型的值
基本类型是按照值访问的,因为可以操作保存在变量中的实际

引用类型则是按引用去访问的




3、
运算符、表达式、控制语句
   (1)、算符与表达式: 加减乘除、递增(++)、递减(--)、求余(%)


变量的自动转换


===    等同符:不会发生类型的自动转化


==      等值符:会发生类型自动转化、自动匹配


在程序中还经常使用到扩展赋值运算符,如:+=,-=,*=,/=,%=等
   


   (2)、基本上ECMAScript的控制语句和java一致
if语句  if(条件)…
else if(条件)...else
switch 语句:switch (expression) 
{case const1:语句块1... default:...}
for (初始化部分;条件部分;更新
部分){    语句块…  }
while(条件) {    语句块…  }
do{    语句块…  }
while(条件)
break语句是结束当前的循环,并把程序的控制权交给循环的下
一条语句
这里是结束循环,循环到此为止
continue语句是结束当前
的某一次循环,但是并没有跳出整个的循环。       这里是结束一次循环,
整个循环还在进行 (label . with)






三、引用类型
数组


数组
ECMA5新特性


Object类型型应用


模拟高级语言对象(java 容器模拟)


数组的技巧(经典数组操作技巧)


其他引用类型(单体类型)


四、函数
1、了解函数的基本概念
  Function类型,即函数的类型。
一个典型的JavaScript函数定义如下:


function 函数名称(参数表)


{
函数执行部分:
}


注意:参数列表直接写形参名即可,不用写var!
return语句:return返回函
数的返回值并结束函数运行 
函数也可以看做数据来进行传递






2、函数的定义方式
   三种定义函数的方式:
function语句形式
                       
函数直接量形式


                       通过Function构造函数形式定义函数




3、函数的参数
   函数的参数:arguments对象
   callee函数(回调函数属性)




4、this
   this对象是在运行时基于函数的执行环境绑定的。在全局函数中,
this等于window,而当函数被作为某个对象的方法调用时,this等于那个
对象。
也就是说this关键字总是指代调用者。




5、call、apply
   每一个函数都包含两个非继承而来的方法:call、apply。这俩个方法
的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对
象的值。
call、apply的用途之一就是传递参数,但事实上,它们真正强
大的地方式能够扩充函数赖以运行的作用域。
使用call()、aplly()
来扩充作用域的最大好处就是对象不需要与方法有任何耦合关系。




6、执行环境、作用域链
   执行环境(execution context)是javascript中最为重要的一个概念
。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行
为。每一个执行环境都有一个与之关联的变量对象,环境中定义的所有变
量和函数都保存在这个对象中。虽然我们的代码无法访问这个对象,但是
解析器在处理数据时会在后台执行它。
全局执行环境是最外围的一个执行
环境。根据ECMScript实现所在的宿主环境不同,表示执行环境的对象也
不一样。
每一个函数都有自己的执行环境。当执行流进一个函数时,函数
的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,
把控制权返还给之前的执行环境。当代码在一个环境中执行时,会创建变
量对象的一个作用域链(scope chain)。作用域链的用途,是保证对执
行环境有权访问的所有变量和函数的有序访问。


7、垃圾收集、块级作用域
   javascript是一门具有自动垃圾收集机制的编程语言。开发人员不必
关心内存分配和回收问题。
离开作用域的值将被自动标记为可以回收,因
此将在垃圾收集期间被删除。标记清除是目前主流的垃圾收集算法。这种
算法的思想是给当前不使用的值加上标记,然后回收其内存。
javascript
里面没有块级作用域的概念,和C、JAVA等高级语言不同。所以在使用if、
for时候要格外的小心。




8、closure
(闭包)
   闭包与函数有着紧密的关系,它是函数的代码在运行过程中的一个动
态环境,是一个运行期的、动态的概念。
所谓闭包,是指词法表示包括
不必计算的变量的函数。也就是说,该函数能够使用函数外定义的变量。


在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参
照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的
段落。这些外部执行域的非持久型变量神奇地保留他们在闭包最初定义
(或创建)时的值。






五、面向对象程序设计


    面向对象的语言有一个标志,那就是他们都有类的概念,通过类
可以创建任意多个具有相同属性和方法的对象。但是在ECMAScript中没有
类的概念,但是我们可以通过其他方式来模拟面向对象的类。
工厂模式:
工厂模式是软件工厂领域中一种广为人知的设计模式。
构造函数模式:比
如像ECMAScript中的Array、Object、Date等都是通过构造函数来创建的。
   
六、设计模式
  1、 接口:
     接口是面向对象javascript程序员的工具箱中最有用的工具之一,
那么对于javascript没有定义接口的概念,我们通过模拟高级程序语言的
方式来创建javascript中的接口。
接口的概念:提供一种以说明一个对象
应该有哪些方法的手段。
     通常建立javascript接口有三种方式:


     (1) 注释描述接口


     (2) 属性检测接口


     (3) 鸭式辩型接口


  2、单体模式
    单体(singleton)模式是javascript中最基本但又最有用的模式之
一,它可能比其他任何模式都常用。
这种模式提供了一种将代码组织为
一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一的变量进行访
问。通过确保单体对象只存在一份实例,你就可以确信自己的所有代码使
用的都是同样的全局资源。


简单单体


闭包单体


惰性单体


分支单体


3、函数的链式调用
   javascript对方法进行链式调用的能力。如果大家对jquery有一定了
解,那么很明显你一定知道这是一个什么意义。
简单链式调用。 
return this;
   
模拟jquery底层链式调用。


4、设计模式
那么javascript里面给我们提供了很多种设计模式:工厂、桥、组合、门
面、适配器、装饰者、享元、代理、观察者、命令、责任链。
   
   (1)、工厂模式
其核心就是为了生产对象,实现解耦。
那么对于javaScript而言,一个类
或对象中往往会包含别的对象,我们创建这样成员对象时,可能习惯采用
new关键字或构造函数的方式,这样会导致两个类之间产生依赖关系,所
以我们通常要需要工厂模式,创建一个工厂来管理他们的实例过程,这样
可以控制程序,使我们的程序更加的面向对象、多态化。




   (2)、桥接模式
桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的
方法。通过“桥”把彼此联系起来,同时又允许他们各自独立变化。
主要
作用表现为将抽象与其实现隔离开来,以便二者独立化。
桥接实例:
事件
监听回调机制
特权函数
桥接组织多个单元


   (3)、组合模式
组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式。
使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为。这
可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个
对象。


组合模式的好处:


1 你可以用同样的方法处理对象的集合与其中的特定子对象。


2 它可以用来把一批子对象组织成树形结构,并且使整棵树
都可以被遍历。










    (4)、门面模式
门面模式(facade)一般有两个作用:
简化类的接口
消除类与使用它的客
户代码之间的耦合。
门面模式常常是开发人员最亲密的朋友。它几乎是所
有javascript库的核心原则。
门面模式的目的是为了让开发人员用更简单
的方法调用一些相对复杂或组合的方法,主要就是简化开发的复杂性,提
供一个相对容易的API去调用内部的方法供外界去使用,这样程序员开发
会变得轻松些,编写一次组合代码后可以反复的去使用它,有助于节省时
间和精力。


    (5)、适配器模式
适配器模式可用来在现有的接口和不兼容的类之间进行适配。使用这种模
式的对象又叫做包装器(wrapper),因为他们是在用一个新的接口包装另
一个对象。借助适配器可以处理一些类与API不匹配、不能一同使用的情
况。
注意适配器和门面虽然比较类似,但是门面模式只是为了简化一个
接口,它并不是提供额外的选择,适配器则要把一个接口转换为另一个
接口,它并不会滤除某些能力,也不会简化接口。




    (6)、装饰者模式
装饰者:(decorator)是一种为对象添加新特性的技术,它并不适用创建
新子类的这种手段。装饰者模式可以用来透明的把原始对象包装在具有同
样接口的另一个对象之中。这样我们就可以为对象添加一个方法或者一些
行为,然后将方法调用传递给原始对象。






    (7)、享受模式
享元模式是一种优化模式。它最适合解决因创建大量类似对象而累及性能
的问题。这种模式在javascript中尤其有用,因为复杂的javascript代码
可能很快就会用光浏览器的所有可用内存。通过把大量独立对象转化为少
量共享对象,可用降低运行web应用程序所需的资源数量。


享元模式的基本优化


web日历的模拟,利用享元模式优化程序




    (8)、代理模式
代理模式:代理(proxy)是一个对象,它可以用来控制对一个对象的访
问。它与另外那个对象实现了同样的接口,并且会把任何方法调用传递到
那个对象。
代理模式最基本的形式是对访问进行控制。代理对象和另一个
对象(实体)实现的是同样的接口,实际上工作还是本体在做,它才是负
责执行所分派的任务的那个对象或类,代理对象所做的不外乎节制对本体
的访问,它不会添加方法或修改方法(如装饰者),也不会简化接口(如
门面元素)。它实行的接口与本体完全相同,所有对它进行的方法调用都
会被传递给本体。


    
     (9)、观察者模式
在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察
者模式是一种管理人与任务之间的关系的得力工具。这种模式的实质就是
你可以对程序中的某个对象的状态进行观察,并且在其发生改变时能够得
到通知。


观察者模式中存在两种角色:观察者和被观察者,也可以成为发布者和订
阅者。


     (10)、命令模式
命令模式是一种封装方法调用的方式。命令模式与普通的函数有所不同,
它可以用来对方法调用进行参数化处理和传送,经这样处理过的方法调用
可以在任何需要的时候执行。


命令模式可以消除调用操作的对象和实现操作的对象之间的耦合,这为
各种具体的类换来了极大的灵活性。


命令模式的结构:最简形式的命令对象是一个操作和用以调用这个操作的
对象的结合体。所有的命令对象都有一个执行操作,其用途就是调用命令
对象所绑定的操作,在大多数命令对象中,这个操作是ige名为execute
或run的方法。使用同样接口的所有命令对象都可以被同等对待,并且可
以随意互换。


命令模式使用接口:目的为了检测命令对象是否实现了相应的操作


客户、调用者、接受者:客户创建命令 ,调用这个执行命令 ,
接受者在命令执行时进行相应的操作






    (11)、责任链模式
责任链(responsibility)模式可以用来消除请求的发送者和接受者之间
的耦合。这是通过实现一个由隐式地对请求进行处理的对象组成的链而做
到的。链中的每个对象可以处理请求,也可以将其传给下一个对象。
javascript内部就是使用了这个模式来处理时间捕获和冒泡的问题。
责任
链模式中的角色:发出者、接受者
责任链模式的流程:
发送者知道链中的
第一个接受者,它向这个接受者发出请求
每一个接受者都对请求进行分析,
要么处理它,要么往下传递
每一个接受者知道的其他对象只有一个,即它
的下家对象
如果没有任何接受者处理请求,那么请求将从链上离开,不同
的实现对此有不同的反应。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值