导图社区 前端后端
- 473
- 28
- 4
- 举报
前端后端
前后端框架知识以及工具，我将不断学习和更新
编辑于2020-02-13 11:25:34
- 相似推荐
- 大纲
前端后端

前端

前端的属性
内联声音
内联的声音 1.当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。 2.如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。 我们最好的建议是只在用户希望听到内联声音的地方包含它们。希望听到内联声音我们最好的建议是只在用户希望听到内联声音的地方包含它们。 一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。
内联视频
关于内联视频的一段注释 当视频被包含在网页中时，它被称为内联视频。 如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。 同时请注意，用户可能已经关闭了浏览器中的内联视频选项。 我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。
前端项目组织
src类型分组

html文件目录
common公共文件目录
page1.html
module1子目录

组件文件目录
service文件目录
model文件目录
css文件目录
JavaScript文件目录
less文件目录
image图片分组
data文件分组
类型分组缺点
不能很简单快捷的知道某个页面或某个功能块有哪些文件； 创建、更新、删除页面会变得很低效，因为需要到不同文件类别目录去找文件； 开发效率不高，并且很容易疲劳，因为编辑一个页面的时候需要在编辑器的文件导航中展开各个文件，导航就会非常长。
src模块分组

单页面

前端项目的组织

文件的命名
命名的原则
方便理解
使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义
方便查找
当我们在文件夹中使用?按名称排例?的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作
索引文件命名原则
index.htm index.html index.asp index.aspx index.jsp index.php
各子页命名的原则
统一用翻译的英文命名
index
product
newslist
aboutus
统一用拼音命名
注意：不要英语拼音混用
常见子页面
关于我们 \ aboutus.html
信息反馈 \ feedback.html
产 品 \ product.html
新闻列表 \news.html
发展历史 \history.html©
联系我们 \linkus.html
图片的命名规则
图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。 例如：广告、标志、菜单、按钮等等。 1.banner_sohu.gif banner_sina.gif 放置在页面顶部的广告、装饰图案等长方形的图片取名： banner menu_aboutus.gif menu_job.gif 2.在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu title_news.gif 3.不带链接表示标题的图片我们取名： title logo_police.gif logo_national.gif 4.标志性的图片取名为： logo pic_people.jpg 5.装饰用的照片我们取名： pic 6.在页面上位置不固定并且带有链接的小图片我们取名为 button
脚本文件和动态文件命名规则
使用脚本功能的英文小写缩写命名
实际模块
例如：广告条的javascript文件名为 ad.js 弹出窗口的javascript文件名为 pop.js
共用模块
Js文件命名: 英文命名, 后缀.js. 共用common.js,basic.js
外部资源
Jquery.min.js
Jquery.validate.js
Jquery.date.js
动态语言文件命名原则:见名知意
1.动态语言文件命名原则:见名知意 以性质_描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。 范例：register_form.aspx register_post.aspx topic_lock.aspx 2.不同模块之间，可以使用不同的前缀来进行区分
文件存放位置规范
文件夹 说明
flash 存放flash文件
images 存放图片文件
inc 存放include文件
library 存放DW库文件
media 存放多媒体文件
script 存放javascript脚本
css 存放css文件
网站页面位置存放
客户端
web
网站根目录
服务器端
admin
JavaScript文件
1.JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，程序应独立保存在后缀名为1.JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，的文件中。应尽量减少在1.JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，中的1.JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，代码， 原因：因为存在与HTML中的JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。因为存在与原因：因为存在与HTML中的JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。中的原因：因为存在与HTML中的JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。代码会明显增加文件大小，且不能对其进行缓存和压缩。 2.代码位置： filename.js或JavaScript的代码应尽量放到body的后面。或filename.js或JavaScript的代码应尽量放到body的后面。的代码应尽量放到filename.js或JavaScript的代码应尽量放到body的后面。的后面。 原因：这样可以减少因为载入脚本而造成其他页面内容载入也被延迟的问题。
css文件
外部样式表通常存储在 CSS 文件中
前端框架
前端框架
2019年的前端
你以为网页还是HTML构成，可早已进化到以Emmet简写展开，1码10行（甚至更多）的境界。 你以为网页不过是CSS呈现，高手已经在基于sass和less进行编程化样式编译。 你以为网站多用ps做图展示，前沿的逐浪CMS已经早早的引入svg矢量画图技术。 你以为网站图标无非是一个JPG，而基于Webfont的字库技术大大推进了展现领域。 你所熟悉的网页结构，已被React、AngulaJS等新web技术使传统网页开发面貌大大提升。 以及基于Git、PowerApp、PWA、混合现实、AR、MR技术，正是：一日千里，始于基石。
MVVM框架
VM层调度层层调度层 M层页面单独数据层页面单独数据 
Angular：Google出品，名气大，但是很难用；
Backbone.js：入门非常困难，因为自身API太多；
Ember：一个大而全的框架，想写个Hello world都很困难
react框架
react属性

vue.mmap
Bootstrap3
使用 Bootstrap Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。 Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机 
bootstrap功能
移动设备优先：自移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。起，框架包含了贯穿于整个库的移动设备优先的样式。
bootstrap属性
文件结构
预编译的 Bootstrap
 如上图所示， 可以看到已编译的 CSS 和 JS（bootstrap.*）， 以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。 同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
Bootstrap 源代码
 less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。 dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。 docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
bootstrap包含使用HTML 5 文档类型（Doctype）

Bootstrap 3 的设计目标是移动设备优先
内容 决定什么是最重要的。 布局 优先设计更小的宽度。 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。 渐进增强 随着屏幕大小的增加而添加元素。
Bootstrap4 与 Bootstrap3
Bootstrap4 是 Bootstrap 的最新版本， 与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 同时 Bootstrap.min.css 的体积减少了40%以上。 Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持， 现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。 如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。
bootstrap组成
<meta name移动设备优先
因为现在越来越多的用户使用移动设备。 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放， 需要在网页的 head 之中添加 viewport meta 标签 width=device-width, initial-scale=1.0" 
device-width
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
user-scalable=no
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
initial-scale=1.0
确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
maximum-scale=1.0 与 user-scalable=no
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。 这样禁用缩放功能后，用户只能滚动屏幕， 就能让您的网站看上去更像原生应用的感觉。
Bootstrap 网格系统
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。  Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，预定义类它包含了用于简单的布局选项的预定义类， 也包含了用于生成更多语义布局的功能强大的混合类。混合类也包含了用于生成更多语义布局的功能强大的混合类。
Bootstrap 网格系统工作原理
1.行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 2.使用行来创建列的水平组。 3.内容应该放置在列内，且唯有列可以是行的直接子元素。 4.预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 5.列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。 6.网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
Bootstrap 网格的基本结构

col-md-* 元素列宽设置
其中 md 表示中等， 星号表示一个数字，指定了元素应该占多少列宽， md 一般用来设置中等尺寸宽度的诸如笔记本电脑屏幕上的布局； xs 和 md 不同，xs 是指屏幕较小的设备，比如手机屏幕之类；
.col-md-offset-*偏移列
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。 这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。 左外边距这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。 在下面的实例中， 我们有 ..， 我们将使用 .col-md-offset-3 class 来居中这个 div。  
.col-md-push-* 和 .col-md-pull-*列排序
Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。 您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，内置网格列的顺序您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序， 其中 * 范围是从 1 到 11。 在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。 我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序  
嵌套列
为了在内容中嵌套默认的网格，请添加一个新的 .row， 并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。 被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。 在下面的实例中，布局有两个列，第二列被分为两行四个盒子。  
bootstrap4网络系统
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
bootstrapCSS
Bootstrap 自带以下特性：自带以下特性： 全局的全局的 CSS 设置、设置、 定义基本的定义基本的 HTML 元素样式、元素样式、 可扩展的可扩展的 class，， 以及一个先进的网格系统。这将在以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。部分详细讲解。
媒体查询表

1.@media 媒体查询语句
 用来创建 Bootstrap 网格系统中的关键的分界点阈值。
2.Bootstrap响应实时工具
 响应式实用工具目前只适用于块和表切换。 这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本
每种媒体查询的变式
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
浏览器控制打印内容

.visible-print-block
.visible-print-inline
.visible-print-inline-block 隐藏 可见
.hidden-print 可见 隐藏
颜bootstrap色
.has-success:代表一个状态，输入框，字体变为绿色
.has-warning:黄色
.has-error:红色
bootstrap位置
浮动
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.clearfix 清除浮动
.center-block 设置元素为 display:block 并居中显示
.show 强制元素显示
.hidden强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
bootstrap背景
.bg-primary 表格单元格使用了 "bg-primary" 类

.bg-success 表格单元格使用了 "bg-success" 类

.bg-info 表格单元格使用了 "bg-info" 类

.bg-warning 表格单元格使用了 "bg-warning" 类

.bg-danger 表格单元格使用了 "bg-danger" 类

bootstrap文本p

span标题
<span class="h1">标题一</span>
标题一 用内联标签显示出h1的效果，用class命名就可以实现 标题一
.small class标题小些
小一点 小标题（small标签） 小标题在大标题后字体变浅，并小于大标题 标题一小标题
lead引导文本

.text-left .text-center .text-right：文本的左中右对齐。
text-danger 这个 class 用来显著提醒（红色）；
.text-lowercase、.text-uppercase、.text-capitalize:文本的大小写，设置英文首字母大写。
text-primary 这个 class 用来设置文字格式为主要显示的格式（一般为蓝色）；

.text-muted "text-muted" 类的文本样式

.text-success "text-success" 类的文本样式

.text-info "text-info" 类的文本样式

.text-hide 将页面元素所包含的文本内容替换为背景图
特殊文本
<abbr>
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

<blockquote>
.blockquote-reverse设定引用右对齐
 
添加 <footer> 用于标明引用来源

来源的名称可以包裹进 <cite>标签中
pre代码
 变量赋值: x = ab + y变量赋值 变量赋值: x = ab + y 按键提示： CTRL + P按键提示： 按键提示： CTRL + P 多行代码多行代码 多行代码带有滚动条多行代码带有滚动条 电脑程序输出: Sample output电脑程序输出 电脑程序输出: Sample output 同一行代码片段: span, div同一行代码片段 同一行代码片段: span, div
.pre-scrollable 使 <pre> 元素可滚动
，代码块区域最大高度为，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条一旦超出这个高度，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条就会在，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条轴出现滚动条  
</textarea>

rows
bootstrap内容
bootstrap表单
.input-lg:输入框变得大一些 .input-sm:输入框变得小一些 .placeholder：框内灰色提示语 .form-control:（边框变圆滑）设置基本的样式， 适用于select，textare等多个标签。 
.form-control:（边框变圆滑）设置基本的样式，
.form-inline:设置组件水平排列
//form表单下的组件进行水平排列。表单下的组件进行水平排列。 
可能需要手动设置宽度
在 Bootstrap 中， 输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。 在内联表单，我们将这些元素的宽度设置为 width: auto;， 因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。 对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。 还有一些辅助技术提供label标签的替代方案， 比如 aria-label、aria-labelledby 或 title 属性。 如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性， 如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
form-horizontal水平布局的表单
role="form"
div
.has-warning、.has-error .has-success校验状态
 
fieldset
.form-group
所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列 .form-group:代表一个区域块，每个区域块之间默认间隔15px.代表一个区域块，每个区域块之间默认间隔.form-group:代表一个区域块，每个区域块之间默认间隔15px. 
disabled禁用 <fieldset> 中包含的所有控件。
跨浏览器兼容性 虽然 Bootstrap 会将这些样式应用到所有浏览器上，Internet Explorer 11 及以下浏览器中的 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 。  标签的链接功能不受影响 标签的链接功能不受影响 如果表单中还包含 元素，这些元素将只被赋予 pointer-events: none 属性 尤其是关于锚点元素的子章节中）所描述的那样，该 CSS 属性尚不规范， 并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总没有得到全面支持， 并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。
表单控件
disabled禁用状态
 
input

.form-control焦点状态

.input-lg:输入框变得大一些
.input-sm:输入框变得小一些
input-group-addon：放置额外的内容及图标
readonly 只读状态
 为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。 处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。输入框颜色更浅处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
aria-describedby帮助Help text

span
.help-block块级帮助文本

Select
选择框
使用 multiple="multiple" 允许用户选择多个选项
 
Checkbox/Radio
和单选框复选框
.radio-inline一行
控制它们显示在同一行上。  
.checkbox-inline一行显示
Textarea
rows行

p
.form-control-static静态控件
 
label
class="sr-only"//lable标签不显示

control-label:可控制的label，可以被改变的
bootstrap表格
支持的一些表格元素 表格标题行的容器元素（ 表格主体中的表格行的容器元素（ 或 ）。 默认的表格单元格。 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 内使用。 关于表格存储内容的描述或总结。
.table 为任意 <table> 添加基本样式 (只有横向分隔线)

.table-bordered:边框表格

.table-striped:条纹状表格

.table-hover:悬停变色，鼠标停留所在行，有高亮效果

.table-condensed:紧凑风格

.table-responsive
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<tr>, <th> 和 <td> 类

.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作
bootstrap按钮
您可以在 、 或 元素上使用按钮 class。 但是建议您在 元素上使用按钮 class，避免跨浏览器的不一致性问题。
按钮效果
 
.btn:底色灰色边框变柔和
.btn-default:默认效果简洁大方，白色
.btn-success：成功，绿色
.btn-primary：重要的，深蓝
.btn-info：信息，浅蓝
.btn-warning:报错，黄的
.btn-danger:有问题，红的
.btn-link:将按钮改成链接形式
按钮大小
 
.btn-lg、btn-sm:改变按钮大小
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮，会横跨父元素的全部宽度。
btn-group btn-group-justified自适应大小的按钮组

按钮状态
 
按钮元素 添加 .active class 来显示它是激活的。
锚元素 添加 .active class 到 <a> 按钮来显示它是激活的。
禁用状态
 
.disabled="disables":默认不可操作
按钮标签
 
按钮组
.btn-group-lg|sm|xs 来控制按钮组的大小

.btn-group-vertical垂直方向的按钮可以通过

.btn-group-justified 类来设置自适应大小的按钮组。

btn dropdown-toggle内嵌下拉菜单的按钮组
 
bootstrap列表
无序列表
.list-unstyled移除默认的列表样式
列表项中左对齐列表项中左对齐 ( 和 中)。 .list-inline 将所有列表项放置同一行和列表项中左对齐 ( 和 中)。 .list-inline 将所有列表项放置同一行中列表项中左对齐 ( 和 中)。 .list-inline 将所有列表项放置同一行。列表项中左对齐 ( 和 中)。 .list-inline 将所有列表项放置同一行将所有列表项放置同一行 这个类仅适用于直接子列表项这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 把所有的列表项放在同一行中
分页
http://www.imooc.com">1 2
pagination:在父元素中添加表示分页
pager：放置在翻页区域
previous：把链接向左对齐
next:把链接向右对齐
eg:分页符
导航
以带有一个class名 nav的无序列表组成。 nav-tabs:代表可切换的导航。 nav-pills:代表胶囊导航。 nav-justified：使导航垂直。 spring //默认选中 struts2 hibernate
nav-tabs:代表可切换的导航。
nav-pills:代表胶囊导航。
nav-justified：使导航垂直。
定义列表
.dl-horizontal该类设置了浮动和偏移，
应用于应用于 元素和 元素中，具体实现可以查看实例元素和应用于 元素和 元素中，具体实现可以查看实例元素中，具体实现可以查看实例 dl-horizontal 可以让 内的短语及其描述排在一行。开始是像 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。  
bootstrap图片-形状
 
.img-rounded:圆角
.img-circle:圆形
.img-thumbnail：带有边框的圆角图形
img-responsive图片宽度自动适配页面宽度；
图片的宽度就能自动适配你页面的宽度； 
.Font Awesome 图标
使用 Font Awesome 图标需要添加以下链接到 HTML 头部
<i class="fa fa-thumbs-up"></i>//大拇指
<i class="fa fa-info-circle"></i>//感叹号
<i class="fa fa-trash"></i>//垃圾桶
<i class="fa fa-paper-plane"></i>//纸飞机
bootstrap其他
.show 强制元素显示 .hidden强制元素隐藏 .sr-only 除了屏幕阅读器外，其他设备上隐藏元素 .sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.close 显示关闭按钮
.caret 显示下拉式功能
bootstrap组件
Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解
字体图标(Glyphicons)
https://www.runoob.com/bootstrap/bootstrap-glyphicons.html  太多 在网上查找把
button 按钮组
.btn-group 可以创建按钮组：
 
.btn-toolbar一般获得更复杂的组件。
 
btn-group dropup按钮上拉菜单

btn-group-vertical垂直的按钮组
 
btn-group-*按钮组组格式
 
两个button分割按钮
 
一个button btn-group+dropdown-menu按钮下拉菜单
 
label标签
 
.label label-default 默认的灰色标签
.label label-primary "primary" 类型的蓝色标签
.label label-success "success" 类型的绿色标签
.label label-info "info" 类型的浅蓝色标签
.label label-warning "warning" 类型的黄色标签
.label label-danger "danger" 类型的红色标签
Badges徽章
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。  
progress表示进度条
.progress-bar-striped:使进度条颜色渐变
progress-bar:进度
 
progress-bar progress-bar-success交替的进度条
  
progress progress-striped条纹的进度条
 
progress progress-striped active动画的进度条
 
堆叠的进度条
 把多个进度条放在相同的 .progress 中即可实现堆叠 
网页内容结构
导航
nav导航元素
.nav-tabs表格导航或标签
 1
nav-pills 胶囊式的导航菜单
 
nav-pills nav-stacked垂直的胶囊式导航菜单
 
nav nav-pills nav-justified两端对齐的导航
 让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠 
disabled禁用链接
 
.nav-tabs class 改为 .nav-pills带有下拉菜单的胶囊

.dropdown-menu下拉菜单
 
navbar导航栏

navbar-default默认的导航栏
 
navbar-header标题

navbar-brand看起来更大一号

role="navigation"，有助于增加可访问性
.collapse、.navbar-collapse响应式的导航栏
 您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 中。 折叠起来的导航栏实际上是 一个带有 class .navbar-toggle 及 两个 data- 元素的按钮。 第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么， 第二个是 data-target，指示要切换到哪一个元素。 三个带有 class .icon-bar 的 创建所谓的汉堡按钮。 这些会切换为 .nav-collapse 中的元素。为了实现以上这些功能 
.navbar-form 导航栏中的表单
 
navbar-btn 导航栏中的按钮
  不要在 .navbar-nav 内的 元素上使用 .navbar-btn，因为它不是标准的 button class。
navbar-text导航栏中的文本
 请使用 class .navbar-text。这通常与 标签一起使用，确保适当的前导和颜色 
glyphicon glyphicon-* 结合图标的导航链接
 
.navbar-left 组件对齐方式
 
.navbar-fixed-top固定到顶部
 默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。 通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或 者您可以让它成为随着页面一起滚动的静态导航栏。一起滚动的静态导航栏。
.navbar-fixed-bottom固定到底部

.navbar-static-top class静态的顶部
该 class 不要求向 添加内边距（padding）  
.navbar-inverse 反色的导航栏
 
Breadcrumbs面包屑导航
 
Pagination分页

.pager 一个简单的分页链接，链接居中对齐。
 
.previous .pager 中上一页的按钮样式，左对齐
 
.next .pager 中下一页的按钮样式，右对齐
.pagination 分页链接
.pagination-lg更大尺寸的分页链接

.pagination-sm更小尺寸的分页链接
.disabled 禁用链接
.disabled, .active 您可以自定义链接， 通过使用 .disabled 来定义不可点击的链接， 通过使用 .active 来指示当前的页面。  
.active当前访问页面链接样式
Page Header页面标题
 
Jumbotron超大屏幕
  创建一个带有 class .jumbotron. 的容器 。 除了更大的 ，字体粗细 font-weight 被减为 200。
Well内容凹陷显示

well-lg尺寸大小
 
panel:面板
 
panel-heading标题容器
.panel-title预定义样式的标题
 
panel-body:代表面板的内容

panel-footer:代表面板的注脚
 
带语境色彩的面板
 
panel-primary、
panel-success、
panel-info、
panel-warning、
panel-danger
.table带表格的面板

带列表组的面板
 
Alerts信息提示框
  .alert-success、 .alert-info、 .alert-warning、 .alert-danger
可取消的警告 .alert-dismissable。

警告（Alerts）中的链接.alert-link

列表
Dropdowns下拉菜单

.dropup 指定向上弹出的下拉菜单
.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里

.dropdown-menu 创建下拉菜单

.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线
按钮下拉菜单
thumbnail缩略图
  在图像周围添加带有 class .thumbnail 的 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
Media Object多媒体对象
 
media-left
input-group:输入控件组
$ 
input-group-lg、input-group-sm）来改变输入框组的大小
 
input-group-addon选框和单选插件的表单
 
.input-group-btn按钮插件
 
input-group-btn class 下拉菜单的按钮 中包裹按钮和下拉菜单即可

分割的下拉菜单按钮

bootstrapHTML
<small>，被选中的字体会变小。

<s>无用文本

<u>文本添加下划线

<br> 可以保留需要的样式。

JavaScript 插件
Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。包含了十几个自定义的Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。插件。您可以直接包含所有的插件，也可以逐个包含这些插件。 这将在这将在 Bootstrap 插件部分详细讲解。插件部分详细讲解。 插件的传送 属性接口都有 data-》》》 插件的启动方式： data-toggle data-offset data-target
模态框（Modal
 通过 data 属性： 在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"， data-target="#identifier" href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。 
data 属性
backdrop boolean 或 string 'static' 默认值：truedata-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 keyboard boolean 默认值：truedata-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 show boolean 默认值：truedata-show 当初始化时显示模态框。 remote path 默认值：false data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： backdrop 背景 keyboard 关闭模态框 show boolean 显示模态框 remote path 加载url内容
backdrop 背景
keyboard 关闭模态框
show boolean 显示模态框
remote path 加载url内容
事件
show.bs.modal 在调用 show 方法后触发。 shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 hide.bs.modal 当调用 hide 实例方法时触发。 hidden.bs.modal 当模态框完全对用户隐藏时触发 
show.bs.modal 在调用 show 方法后触发。
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
hide.bs.modal 当调用 hide 实例方法时触发。
hidden.bs.modal 当模态框完全对用户隐藏时触发
方法

.modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
$('#identifier').modal({keyboard: false
.modal('toggle') 手动切换模态框。
$('#identifier').modal('toggle')
.modal('show') 手动打开模态框。
$('#identifier').modal('show')
.modal('hide') 手动隐藏模态框。
$('#identifier').modal('hide')
过渡效果（Transition
如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js
下拉菜单（Dropdown）
 响应式菜单就是 在点击相同的按钮时会有不同的效果 事件 
滚动监听（Scrollspy
 
data-offset选项

.scrollspy('refresh')更新DOM
 当通过 JavaScript 调用 scrollspy 方法时， 您需要调用 .refresh 方法来更新 DOM。 这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。
事件activate.bs.scrollspy被滚动监听激活

标签页（Tab)
 
tab-content 标签包裹

tab-pane fade淡入淡出效果

.in 类第一个标签页
.$().tab：该方法可以激活标签页元素和内容容器

事件

show.bs.tab标签页显示之前
该事件在标签页显示时触发，但是必须在新标签页被显示之前。被显示之前该事件在标签页显示时触发，但是必须在新标签页被显示之前。 分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。激活的标签页分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。前一个激活的标签页分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 
shown.bs.tab标签页显示之后
该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。已经显示之后该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。 分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。激活的标签页分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。前一个激活的标签页分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 
提示工具（Tooltip
bootstrap的less组件
bootstrap.less 这是主要的 Less 文件。该文件中导入了一些其他的 less 文件。该文件中没有任何代码。 forms.less 这个 Less 文件包含了表单布局、输入框类型的样式。 mixins.less 这个 Less 文件让 CSS 代码可重复使用。 patterns.less 这个 Less 文件包含了重复的用户界面元素的 CSS 代码，不会被位于 scaffolding Less 文件中的基本样式覆盖。 reset.less 这 Less 文件包含了 CSS 重置。这是 Eric Meyer 的 CSS 重置的一个更新。 一些 HTML 元素比如 dfn、samp 等的重置被免除。 scaffolding.less 这个 Less 文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。 tables.less 这个 Less 文件包含了创建表格的样式。 type.less 这个 Less 文件下可找到排版相关的样式。标题、段落、列表、代码等的样式位于这个文件里边 variables.less 这个 Less 文件包含了要定制 Bootstrap 外观和感观的变量。
bootstrap.less 这是主要的 Less 文件。该文件中导入了一些其他的 less 文件。该文件中没有任何代码。
forms.less 这个 Less 文件包含了表单布局、输入框类型的样式。
mixins.less 这个 Less 文件让 CSS 代码可重复使用。
patterns.less 这个 Less 文件包含了重复的用户界面元素的 CSS 代码，
不会被位于不会被位于 scaffolding Less 文件中的基本样式覆盖。文件中的基本样式覆盖。
reset.less 这 Less 文件包含了 CSS 重置。这是 Eric Meyer 的 CSS 重置的一个更新。
一些一些 HTML 元素比如 dfn、samp 等的重置被免除。元素比如一些 HTML 元素比如 dfn、samp 等的重置被免除。、一些 HTML 元素比如 dfn、samp 等的重置被免除。等的重置被免除。
scaffolding.less 这个 Less 文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。
tables.less 这个 Less 文件包含了创建表格的样式。
type.less 这个 Less 文件下可找到排版相关的样式。标题、段落、列表、代码等的样式位于这个文件里边
variables.less 这个 Less 文件包含了要定制 Bootstrap 外观和感观的变量。
bootstrap使用
Staticfile CDN 推荐
 https://www.runoob.com/bootstrap/bootstrap-environment-setup.html
bootstrap的下载地址

编辑器插件
Bootstrap3 Autocomplete一般是对类名进行自动补全。
Bootstrap 3 Snippets
Less框架
最终的目的 就是赋值
less的组成
导入（Importing）
 
reference 它使用一个LESS文件作为参考，不会输出它。
inline 它使您能够将CSS复制到输出而不进行处理。
less 它会将导入的文件视为常规LESS文件，尽管可能是文件扩展名。
css 它会将导入的文件视为常规CSS文件，尽管可能是文件扩展名。
once 它将只导入一次文件。
multiple 它会多次导入文件。
optional 即使找不到要导入的文件，它仍会继续编译
注释（Comments）

规则集detached-ruleset
类似结构组： 规则集包含一个普通的规则集，如属性，嵌套规则集，变量声明，mixins等 并包含到其他结构中，其中规则集的所有属性都将被复制到该结构。  
混合（mixin）
混合 就是预定义  混合（混合（mixin）和变量的定义不必在引用之前事先定义）和变量的定义不必在引用之前事先定义
变量和混合在调用者作用域可见
 由变量和混合组成的混合可以在调用者的作用域中使用，并且是可见的
对混合（mixins）进行分组

对混合 (minins) 进行嵌套
  外层作用域可见
Mixin Guards
条件预编译  
逻辑运算符

类型检查函数
  
默认函数将mixin与其他混合匹配
 
CSS Guards
Less 混合参数

less混合返回值
 
变量
深色的紫色是多个对象 浅色的紫色是单个对象
作用域（Scope）
首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
转义（Escaping）
等同与转义字符 字符串常量  
&父选择器
 
父选择器的运算
 
选择器预留到继承（父）选择器
在选择器排序更改时，将选择器预留到继承（父）选择器很有用  
命名空间和访问器--访问属性

映射（Maps）--访问属性
等同于对象的/地址操作 
运算（Operations）
 1.算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准 2.如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
执行
条件逻辑赋值
嵌套（Nesting）
并且模仿了 HTML 的组织结构。 嵌套就是 
@规则嵌套和冒泡
就是if  
循环
 
合并merge
Comma它增加了属性值到最后
 
Space它添加属性值与空格
 
Less 选择器在一个选择器中扩展其他选择器样式
 
函数
calc() 特例

其它函数
1 color 它是一个代表颜色的字符串。 2 image - size 它用于从文件检查图像的维度。 3 image - width 它检查文件中图像的宽度。 4 image-height 它检查图像从文件的高度。 5 convert 数字从一个单位转换为另一个单位。 6 data - uri 数据uri是统一资源标识符(URI)模式，其在网页中嵌入资源。 7 default 默认函数仅在保护条件内可用且与任何其他混合程序不匹配时才返回true。 8 unit 默认函数仅在保护条件内可用且与任何其他mixin不匹配时才返回true 9 get - unit get-unit函数返回其中存在参数的单位，其数字和单位。 10svg - gradient svg-gradient是一种颜色到另一种颜色的转换。 它可以向同一元素添加许多颜色。
1 color 它是一个代表颜色的字符串。
2 image - size 它用于从文件检查图像的维度。
3 image - width 它检查文件中图像的宽度。
4 image-height 它检查图像从文件的高度。
5 convert 数字从一个单位转换为另一个单位。
6 data - uri 数据uri是统一资源标识符(URI)模式，其在网页中嵌入资源。
7 default 默认函数仅在保护条件内可用且与任何其他混合程序不匹配时才返回true。
8 unit 默认函数仅在保护条件内可用且与任何其他mixin不匹配时才返回true
9 get - unit get-unit函数返回其中存在参数的单位，其数字和单位。
10svg - gradient svg-gradient是一种颜色到另一种颜色的转换。
它可以向同一元素添加许多颜色。
Less 字符串函数

Escape对符号进行编码
它通过对特殊字符使用URL编码来对字符串或信息进行编码。 您无法编码一些字符，例如，， / ，？ ， @ ，＆amp; ， + ，〜，！ ， $ ，\'和 您可以编码的一些字符，例如 \\ ，#， > ^ ，(，)， {，} ，: >，＆gt; ，，] ， [和 = 。 
e不带引号字符串
它是一个字符串函数，它使用string作为参数，并返回不带引号的信息。 它是一个CSS转义，它使用〜“一些内容"转义的值和数字作为参数。 
% format格式化为字符串
此函数格式化一个字符串。  
replace替换字符串中的文本
replace 它用于替换字符串中的文本。 它使用一些参数： string :它搜索字符串并替换。 pattern :它搜索正则表达式模式。 replacement :它替换与模式匹配的字符串。 flags :这些是可选的正则表达式标志。 
Less 列表函数
Length 它将以逗号或空格分隔的值列表作为参数。 Extract 它将返回列表中指定位置的值。
Length(@var) 它将以逗号或空格分隔的值列表作为参数。
 
Extract(@var,2) 它将返回列表中指定位置的值。
 
Less 数学函数
。
ceil 它将数字向上舍入为下一个最大整数

floor 它将数字向下取整为下一个最小整数
min 它指定一个或多个参数的最小值

max它指定一个或多个参数的最大值

percentage 它将浮点数转换为百分比字符串

round 它舍入浮点数

sqrt 它返回一个数字的平方根。

abs 它提供了数字的绝对值

sin 它返回数字上的弧度。

asin 它指定返回-pi / 2和pi / 2之间的值的数字的反正弦(反正弦)。

cos它返回指定值的余弦值，并在没有单位的数字上确定弧度

acos它指定返回0和pi之间的值的数字的反余弦(反余弦)。

tan它指定数字的正切。

atan 它指定指定数字的反正切(反正切)。

pi它返回pi值。

pow它指定第一个参数的值增加到第二个参数的权力

mod它返回相对于第二个参数的第一个参数的模数。 它还处理负点和浮点数
Less 类型函数
isnumber它使用一个值作为参数，并返回 true ，如果它是一个数字或 false isstring它使用一个值作为参数，并返回 true ，如果它是一个字符串或 false iscolor它使用一个值作为参数，并返回 true (如果值是颜色)或 false (如果不是)。 iskeyword它使用一个值作为参数，并返回 true (如果值是关键字)或 false (如果不是)。 isurl 它使用一个值作为参数，并返回 true (如果值为url)或 false (如果值不为)。 ispixel如果值是以像素为单位的数字，或者 false ，则以值为参数返回 true 。 isem它采用一个值作为参数，并返回 true ，如果值是em值或 false (如果值不是) ispercentage它采用一个值作为参数，如果值不是百分比，则返回 true ，如果值为百分比，或返回false 。 isunit如果值是指定单位中作为参数提供的数字，则返回 true ，如果值不是指定单位中的数字，则返回 false isruleset它将一个值作为参数，并返回 true ，如果值为规则集或 false
isnumber它使用一个值作为参数，并返回 true ，如果它是一个数字或 false
isstring它使用一个值作为参数，并返回 true ，如果它是一个字符串或 false
iscolor它使用一个值作为参数，并返回 true (如果值是颜色)或 false (如果不是)。
iskeyword它使用一个值作为参数，并返回 true (如果值是关键字)或 false (如果不是)。
isurl 它使用一个值作为参数，并返回 true (如果值为url)或 false (如果值不为)。
ispixel如果值是以像素为单位的数字，或者 false ，则以值为参数返回 true 。
isem它采用一个值作为参数，并返回 true ，如果值是em值或 false (如果值不是)
ispercentage它采用一个值作为参数，如果值不是百分比，则返回 true ，如果值为百分比，或返回false 。
isunit如果值是指定单位中作为参数提供的数字，则返回 true ，如果值不是指定单位中的数字，则返回 false
isruleset它将一个值作为参数，并返回 true ，如果值为规则集或 false
less的属性
Less的使用
npm install -g less
命令行编译
$ lessc styles.less
$ lessc styles.less输出编译之后的 CSS 代码到 stdout $ lessc styles.less输出编译之后的 CSS 代码到 stdout $ lessc styles.less > styles.css 编译输出到文件编译输出到文件 --clean-css 启用 Clean CSS 进行压缩 lessc -x stylesheet.less stylesheet.css 输出压缩过的 CSS
在代码中调用 Less 编译器

手动调用分析器（paser）和编译器
Less 插件
插件列表
Autoprefixer 它用于在从LESS转换后向CSS添加前缀。 CSScomb 它有助于改进样式表的维护。 clean-css 它缩小LESS的CSS输出。 CSSWring 它压缩或缩小LESS的CSS输出。 css-flip 它用于从左到右(LTR)或从右到左(RTL)生成CSS。 functions 在LESS本身中写入LESS的函数。 glob 使用glob表达式，可以导入多个文件。 group-css-media-queries b> 它有能力做更少的后处理。 inline-urls 自动将网址转换为数据uri。 npm-import 它有能力从npm包导入较少。 pleeease 它用于后处理Less。 rtl LESS从ltr(从左到右)反转到rtl(从右到左)。
命令行安装插件npm install less-plugin-clean-css
npm install less-plugin-clean-css
使用安装的插件lessc --plugin=path_to_plugin=options
lessc --plugin=path_to_plugin=options
在代码中使用插件

在浏览器中

框架/库 Importers
Bootstrap Bootstrap LESS代码在自定义LESS代码之前导入。 2 Bower Resolve LESS文件是从Bower软件包导入的。 3 Cardinal CSS for less.js 在定制LESS代码之前，导入Cardinal的LESS代码。 4 Flexbox Grid flexboxgrid导入。 5 Flexible Grid System 它进口柔性网格系统。 6 Ionic 它进口离子骨架。 7 Lesshat 它进口Lesshat mixins。 8 Skeleton 它导入少骨骼代码。
编辑器相关插件

JQuery
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。
JQuery的功能
HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
JQuery的属性
jquery的版本
有两个版本的 jQuery 可供下载： Production version - 用于实际的网站中，已被精简和压缩。 Development version - 用于测试和开发（未压缩，是可读的代码）
jquery的文件管理
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护， 那么请把您的 jQuery 函数放到独立的 .js 文件中。 
jquery的语法
1.jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。 2.juery的语法并不严格
juery的链
 书写格式 
链的功能
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
JQuery的组成
juery的语法
 
css属性操作

jquery选择
jQuery 中所有选择器都以美元符号开头：$()。 选择多个元素进行操作
$("p")元素选择器

$("#button)id选择器

$(".class")类选择器

css返回css属性

css设置css属性

设置多个css属性

css的尺寸操作

width和height元素高度

innerwidth和innerheight内边距高度

outwidth和outerheight边框方法

hide show隐藏显示

hide show语法
$(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 1.第一个参数  2.第二个参数 第二个参数是一个字符串，表示过渡使用哪种缓动函数。 （译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件） 3.第三个参数 
.toggle显示的切换

语法
语法: $(selector).toggle(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
fade淡入淡出
.fadein淡入已隐藏的元素

fadeout淡出可见元素

fadetoggle切换淡入和淡出效果

fadeto渐变为给定的不透明读

slide滑动元素
slidedown向下滑动元素

slideup向上滑动元素

slidetoggle向上向下滑动之间切换

animate创建自定义动画
 下面的例子演示 animate() 方法的简单应用。它把 元素往右边移动了 250 像素：
callback回调函数
 
使用多种属性

使用相对值

使用预定义值show/hide

使用队列功能
这意味着如果您在彼此之后编写多个 animate() 调用， jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用逐一运行jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用 animate 调用 
css全部属性操作的规则
可以用 animate() 方法来操作所有 CSS 属性吗？ 是的，几乎可以！不过，需要记住一件重要的事情： 当使用 animate() 时， 必须使用 Camel 标记法书写所有的属性名，所有的属性名必须使用 Camel 标记法书写所有的属性名， 比如， 必须使用 paddingLeft 而不是 padding-left， 使用 marginRight 而不是 margin-right，等等。 同时，色彩动画并不包含在核心 jQuery 库中。
生成颜色动画要下载颜色插件
stop停止动画
 可选的 stopAll 参数规定是否应该清除动画队列。 stopAll 参数可选的 stopAll 参数规定是否应该清除动画队列。 默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。goToEnd 参数可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 默认地，stop() 会清除在被选元素上指定的当前动画。 
class属性修改
addclass添加class属性

添加为多个类

removeclass删除class属性

toggleclass添加删除class属性切换

juery的html操作
捕获
text 返回元素文本内容
text() - 设置或返回所选元素的文本内容  
html 返回元素的文本+标记
html() - 设置或返回所选元素的内容（包括 HTML 标记  
val 返回输入字段的值
 
attr() 返回参数的属性值

设置
text html val 的回调函数实现设置
上面的三个 jQuery 方法：text()、html() 以及 val()， 同样拥有回调函数。回调函数有两个参数： 1.被选元素列表中当前元素的下标， 2.以及原始（旧的）值。 然后以函数新值返回您希望使用的字符串。   
attr()设置属性

设置多个属性

回调函数
jQuery 方法 attr()，也提供回调函数。 回调函数有两个参数： arg1.被选元素列表中当前元素的下标， arg2.以及原始（旧的）值。 return：然后以函数新值返回您希望使用的字符串。 下面的例子演示带有回调函数的 attr() 方法： 
添加元素
 步骤1：我们创建若干个新元素。 这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。 步骤2：然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
append元素结尾插入内容

prepend元素开头插入内容

affer/before被选元素前后插入内容
  
删除元素
remove删除所选元素

empty删除所选元素的子元素

remove对被删除元素进行过滤

jquery的遍历
遍历祖先
parent直接父元素

parents所有祖先元素

功能用来搜素

parentsuntil两个元素之间的所有祖先元素

遍历后代
children所有直接子元素

参数搜索

find所有后代元素
 
遍历同胞
siblings所有同胞元素
 参数：筛选 
next下一个同胞元素

nextALL所有跟随的同胞元素

nextUtill来那个参数之间的所有同胞元素

prev上一个同胞元素
jQuery prev(), prevAll() & prevUntil() 方法 prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已： 它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）
preall所有排前的同胞元素
过滤
first被选元素的首个元素

last被选元素的最后一个元素

eq带有指定索引号的元素

filter带有标准的筛选

not不匹配这个标准的元素

juery的AJAX操作
load加载数据 放入被选元素
 
callback回调函数参数
 
$.get()方法从服务器上请求数据

callback回调函数参数
$.get() 的 第一个参数是我们希望请求的 URL（"demo_test.php"）。 URL（"demo_test.php"）。 第二个参数是回调函数。回调函数。 第一个回调参数存有被请求页面的内容， 第二个回调参数存有请求的状态。
$.post方法请求想服务器递交数据

callback回调函数
$.post() 的 第一个参数是我们希望请求的 URL ("demo_test_post.php")。 希望请求的 URL (第一个参数是我们希望请求的 URL ("demo_test_post.php")。 然后我们连同请求（name 和 url）一起发送数据。 demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。 第三个参数是回调函数。第一个回调参数存有被请求页面的内容，三个参数是回调函数第三个参数是回调函数。第一个回调参数存有被请求页面的内容， 第二个参数存有请求的状态。存有请求的状态第二个参数存有请求的状态。 提示： 这个 PHP 文件 ("demo_test_post.php") 类似这样：
jquery的事件

常见的DOM事件

$documnet.ready文档完全加载后执行

docunment ready
 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
(function(){})简洁写法

click点击按钮时

dblclick()双击元素时

1.mousedown鼠标指针移动到元素上方按下

2.focus元素获得焦点

3.mouseup在元素上方松开按钮

4.blur元素失去焦点

1.hover光标悬停事件
 hover()方法用于模拟光标悬停事件。 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
2.mouseenter()鼠标指针穿过元素

3.mouseleave鼠标指针离开元素

JQuery的使用
jquery的安装
网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法： 从 jquery.com 下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
jquery的引入

jquery的CDN使用
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。 Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。 如果你的站点用户是国内的， 建议使用百度、又拍云、新浪等国内CDN地址， 你站点用户是国外的可以使用谷歌和微软。 注：本站实例均采用菜鸟教程 CDN 库。 查询可使用菜鸟教程
staticfile

百度

又拍云

新浪

查看juery的使用版本

juery和vue的区别
1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作 2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。 可以简单的理解为Vue帮我们做了dom操作，做了dom操作， 我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，对象的绑定我们以后用Vue就需要修改对象的值和做好元素和对象的绑定， 这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，单向数据绑定， 如果JS对象的值也跟随着dom元素的值的变化而变化就叫做双向数据绑定双向数据绑定
vue

juery

Web APP
META/LINK相关：
AJAX异步方法
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX的功能
运用XHTML+CSS来表达资讯；资讯； 运用JavaScript操作DOM（Document Object Model）来执行动态效果；动态效果； 运用XML和XSLT操作资料;操作资料; 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；异步资料交换； 注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。
根本功能
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX的工作原理

ajax的起源
Google Suggest 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
同步异步的概念
 
异步的javascript
AJAX = 异步 JavaScript 和 XML。 JavaScript/DOM (信息显示/交互)
XML (作为转换数据的格式)
callback
onSuccess onFailure onUninitialized onLoading onLoaded onInteractive onComplete onException
XMLHttpRequest 对象
XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
xmlhttprequest功能
(异步的与服务器交换数据)异步的与服务器交换数据) XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下， 对网页的某部分进行更新。
xmlhttprequest方法

xmlhttprequest属性
 
readyState 存xmlhttprequest的状态
每当 readyState 改变时，就会触发 onreadystatechange 事件 
4请求完成

responeseText字符串响应数据

responsexml的xml格式的响应数据

status 状态
 1xx:信息响应类，表示接收到请求并且继续处理 2xx:处理成功响应类，表示动作被成功接收、理解和接受 3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 5xx:服务端错误，服务器不能正确执行一个正确的请求
1xx:信息响应类，表示接收到请求并且继续处理
100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本
2xx:处理成功响应类，表示动作被成功接收、理解和接受
200——交易成功 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到，但返回信息为空 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的GET请求
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到 301——删除请求数据 搬家啦 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET，但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码，现行版本中不再使用 307——申明请求的资源临时性删除
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
400——错误请求，如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖，请求资源不可访问 407——类似401，用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求 409——对当前资源状态，请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错 413——请求的资源大于服务器允许的大小 414——请求的资源URL长于服务器允许的长度 415——请求资源不支持请求项目格式 416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 合起来
5xx:服务端错误，服务器不能正确执行一个正确的请求
500——服务器产生内部错误 501——服务器不支持请求的函数 502——服务器暂时不可用，有时是为了防止发生系统过载 503——服务器过载或暂停维修 504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 505——服务器不支持或拒绝支请求头中指定的HTTP版本
1.open规定请求内容

gei请求

get非缓存

gei发送信息

post请求

get和post的选择
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求： 1.无法使用缓存文件（更新服务器上的文件或数据库） 2.向服务器发送大量数据（POST 没有数据量限制） 3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
异步true和false的选择
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true： xmlhttp.open("GET","ajax_test.html",true); AJAX 出现之前，这可能会引起应用程序挂起或停止。 通过 AJAX，JavaScript 无需等待服务器的响应，而是： 在等待服务器响应时执行其他脚本 当响应就绪后对响应进行处理
2.setrequestheader添加http头
 
3.send发送请求到服务器

4.async=false同步 不编写onreadystatechange执行函数
Async = false 如需使用 async=false，请将 open() 方法中的第三个参数改为 false： xmlhttp.open("GET","test1.txt",false); 我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。 请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。 注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可： 
5.async=true异步.onreadystatechange的执行函数

loaXMLDoc(url,function)多个ajax任务的标准回调函数
回调函数是一种以参数形式传递给另一个函数的函数。 功能： 如果您的网站上存在多个 AJAX 任务， 那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。 该函数调用应该包含包含 URL URL 以及发生 onreadystatechange 事件时执行的任务（onreadystatechange 事件时执行的任务（每次调用可能不尽相同）： 
创建对象

现代浏览器的创建

老版本浏览器的创建

Ajax解决浏览器缓存问题
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在URL后面加上一个随机数： "fresh=" + Math.random()。
在URL后面加上时间搓："nowtime=" + new Date().getTime()。
如果是使用jQuery
直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录
前端的工具
webpack打包机器
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 
webpack的属性
webpack和Grunt Gulp的区别
Gulp/Grunt是一种能够优化前端的开发流程的工具 而WebPack是一种模块化的解决方案， 不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具
webpack的工作原理
1.把你的项目当做一个整体，通过一个给定的主文件（如：index.js）， 2.Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们， 3.最后打包为一个（或多个）浏览器可识别的JavaScript文件。  
webpack 会按照webpack.config.js 去构建 bundle.js
webpack和node的关系
webpack本身是node的一个组件 node编程还编写有很多的模块， 这也模块在npm上发布，并且通过npm安装可以安装在 node安装文件夹下的 node_module文件假之下，模块通过require命令可以引入。 一个项目会依赖于很多的模块； require负责直接的使用这些模块， webpack负责把这些模块打成bundles。
webpack的使用
webpack的安装
Webpack可以使用npm安装， 1.新建一个空的练习文件夹（此处命名为webpack sample project）， 2.在终端中转到该文件夹后执行下述指令就可以完成安装。 
本地安装----引入项目作为组件
1. 将安装包放在 ./node_modules 下（运行npm时所在的目录）将安装包放在1. 将安装包放在 ./node_modules 下（运行npm时所在的目录）下（运行1. 将安装包放在 ./node_modules 下（运行npm时所在的目录）时所在的目录） 2. 可以通过 require() 来引入本地安装的包可以通过2. 可以通过 require() 来引入本地安装的包来引入本地安装的包 调用方式 本地安装后可以直接通过require()的方式引入项目中node_modules目录下的模块，如下示例，本地安装后直接在webpack.config.js中require('gulp')。
全局安装----提供系统命令行扩充功能
1. 将安装包放在 /usr/local 下将安装包放在1. 将安装包放在 /usr/local 下下 2. 可以直接在命令行里使用可以直接在命令行里使用 全局安装后可以供命令行(command line)使用，用户可以在命令行中直接运行该组件包支持的命令。
全局安装还要本地安装
保留模块的版本信息可用于下载指定的版本号显得特别重要。下载指定的版本号保留模块的版本信息可用于下载指定的版本号显得特别重要。 本地安装可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖， 这些优点是全局安装难以做到的。
webpack命令的简化
webpack-dev-server 开发服务
我们可以使用 webpack-dev-server 开发服务， 这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器， 1.并且会以监听模式自动运行 webpack，以监听模式1.并且会以监听模式自动运行 webpack， 2.在浏览器打开 http://localhost:8080/ http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，浏览项目中的页面http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出， 3.并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。自动刷新页面3.并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
cnpm install webpack-dev-server -g
运行webpack-dev-server --progress --colors

常见的命令们
所有的命令都是在一定的区域空间内执行的
webpack 供开发构建
webpack -p 供生产构建一次
webpack --watch – 连续的增量构建/监听模式
如果不想每次修改模块后都重新编译，那么可以启动监听模式。 开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译， 所以监听模式的整体速度是很快的。 webpack --progress --colors --watch
webpack -d – 包括源地图
webpack --colors – 让内部更好看
webpack --progress --colors通过参数让编译的输出内容带有进度和颜色
webpack创建vue项目
 webpack的使用理解： 1.npm安装什么 2.编译一下 3.webpack。config.js文件中对应的目录就多什么；
npm init生成package.json文件

nom install webpack --save-dev

3.项目中创建webpack.config.js

导入模块
最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。
entry通道

多个入口文件
  
入口功能
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。内部依赖图的开始入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
默认entry
默认情况下，其值为./src/index.js
入口的工作模式
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，
output输出路径
 该输出属性告诉的WebPack哪里发出束它创建以及如何命名这些文件。 它默认 ./dist/main.js为主输出文件和 ./dist任何其他生成文件的文件夹
bundles创建的文件
bundles output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，
devServer:简单服务器

module:模块
rules

test和use
嘿webpack编译器， 当你遇到解析为require()/ importstatement语句中'.txt'文件的路径时， 在将它添加到bundle之前使用它raw-loader来转换它。” 识别出应该被loader转化的文件， 使用test属性 转换这些文件，使他们添加到依赖图中，最终添加到bundle中，使用use属性
loader加载器
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换 常用loader 1.css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们 2.style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中 3.file-loader或者url-loader加载器 4.url-loader字体的加载 5.vue-loader 组件vue的加载
plugins插件

内置插件安装cnpm install webpack --save-dev
BannerPlugin 插件
用于在文件头部输出一些注释信息。 
生产环境process.env
生产环境  意思时说项目现在运行在开发环境中，在部署到正式环境下时，要确保它是处于production的模式。需要将代码打包部署到生产环境时需要进行如下配置 
只想局部刷新热部署HotModuleReplacementPlugin
如果我们修改app.vue文件中的msg的参数，可以看到页面会自动刷新。但是此时是页面全局刷新的，如果我们只想局部刷新即只刷新修改的部分 
需先创建 index.html 和 main.js 文件

使用webpack 命令编译
 有了这个配置之后，再打包文件 只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项， 
引入vue

引入babel

HtmlWebpackPlugin 引入插件

webpack-dev-server安装web服务器
 
npm包管理工具
npm伴随着node的安装二安装
npm功能
允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
npm安装包的位置

npm的淘宝镜像
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: 、安装 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用 cnpm 命令来安装模块了： $ cnpm install [name]
npm的使用
测试是否成功安装
同样可以通过输入“npm -v”来测试是否成功安装。命令如下，出现版本提示表示安装成功： $ npm -v 2.3.0
npm install npm -g升级
linux： $ sudo npm install npm -g / usr / local / bin / npm - > /usr/local/lib/node_modules/npm/bin/npm-cli.js npm@2.14.2 / usr / local / lib / node_modules / npm windows  
npm list grunt查看版本号

npm选择版本

npm list -g查看安装信息

npm uninstall卸载模块

npm update 模块

npm search 搜索模块

npm init创建模块

npm publish发布模块

npm root -g查看全局安装目录

npm安装node模块

安装的分类

8087错误解决

安装node web框架模块表达

npm install --save-dev本地安装
本地安装 1.将安装包放在./node_modules下（运行npm命令时所在的目录）， 如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modules目录。 npm install gulp 或 npm install gulp --save-dev等， 其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段--save-dev其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段 包安装在指定项目的node_modules文件夹下。指定项目包安装在指定项目的node_modules文件夹下。
npm install 全局安装

本地安装和全局安装的区别
 本地安装 是给项目加载用的 在项目对应的目录下进行本地安装 npm install 全局安装 是给我们作为命令行用的 本地安装让： 模块的加载更快， 版本梳理更清晰。 但是浪费空间
chrome的开发者工具

开发工具的功能
1.可以调试css的书写， 打开以后快速刷新：右键+刷新
开发工具的属性
开发工具的组成

1.设备模式（device toolbar）

show media queries媒体查询
媒体查询 媒体查询是自适应网页设计的基本部分。要查看媒体查询检查器， 1.请在三圆点菜单中点击 Show Media queries。 DevTools会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形  
颜色的含义

设定不同模式
通过该视图控件，你可以设定下面两种模式：两种模式： 1.自适应。 使视口可以通过任意一侧的大手柄随意调整大小 2.特定设备。 将视口锁定为特定设备确切的视口大小，并模拟特定设备特性
show sensors配置传感器

show network选择网络设备

2.element元素

element元素的功能
使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面DOM使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面CSS使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面
搜索html文本元素的功能

选择对应的html元素，则会指示到特定区域
element面板的组成
左侧栏HTML
右侧栏CSS

style编辑样式
可以实现右侧index的跳转
style框格的顺序
显示的顺序： 越往上优先级越高 越往下优先级越低
element.style
在 "element.style" 部分会显示在页面标记中 通过样式属性设置的相关属性。样式属性通过样式属性设置的相关属性。相关属性通过样式属性设置的相关属性。 优先级最高的css样式 你选择的那个元素的优先级样式 那些是内联样式。内联样式。 它们来自style =“”属性，或者来自设置element.style.someProperty的Javascript代码。
style添加样式
 这些都可以在浏览器中临时编写，就会临时的显现在页面中；  inspector stylesheet都是可以显现在临时source中的  
.hov选定元素状态
 这几个都是可以
.cls给元素添加css类
增加css类
添加、启用和停用 CSS 类 步骤1.点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作： 1.启用或停用当前元素关联的类 2.向元素添加新类 
+添加新的规则类
功能：临时调试 添加这个元素本身的属性 
Matched CSS Rules节点选择器
下一个部分是 ”Matched CSS Rules“，这里会显示匹配相应节点的选择器， 1.他们的属性和 2.值， 3.甚至是其源文件名， 4.以及读取该样式的行号。 选择器匹配的节点将会被设置为黑色，其他的将会显示成灰色。为黑色选择器匹配的节点将会被设置为黑色，其他的将会显示成灰色。灰色。 这么做最大的好处就是在于我们在阅读时可以更好的区分选择器筛选出来的东西。
text-shadow声明的快捷方式
Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式
compute左侧选中的盒子模型参数

element元素面板的使用
使用 Color Picker 修改颜色
 
步骤1 找到css声明
请在 Styles 窗格中查找一个定义颜色的 CSS 声明（例如 color: blue）。
步骤2：找到css声明值旁方框
声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker
步骤3：修改颜色
 
时时的修改项目HTML和DOM节点
  
编辑内容
修改元素类型
edit as html

增添删除拷贝节点
 右键进行拷贝
改变css属性会立刻生效
在一个子面板中改变任何 CSS 属性，比如一个元素的边界和尺寸，将会将会立刻生效并且在主显示窗口中显示。 
快速调整CSS数值及颜色图形动画

向样式规则添加背景色或颜色
 将鼠标悬停到此图标上可以调出添加 text-shadow、 box-shadow、 color 和 background-color 声明的快捷方式。
动画的调试
 
3.console控制台
 也就是交互式的命令行使用工具 
console功能
JavaScript 控制台为开发者提供了测试 Web 页面和应用程序两个主要功能,其中包括： 1.在开发过程中记录诊断信息。诊断信息1.在开发过程中记录诊断信息。 2.一个可与文档和工具交互的 shell 提示符。 shell 提示符2.一个可与文档和工具交互的 shell 提示符。 
console 控制台对象
JavaScript 原生中默认是没有 Console 对象, 这是宿主对象（也就是游览器）提供的内置对象。 宿主对象（也就是游览器这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同
console的使用
console的JavaScript交互式编程
shift+回车 不会换行
输入函数可以之后直接使用

console查看程序中打印的log日志

console返还元素

$() css选择器匹配的元素
返回与指定的返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()选择器相匹配的第一个元素，等同于返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
$$() css选择器匹配元素的数组
返回与指定的返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()选择器相匹配的所有元素的数组，等同于返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
$x()返回与指定的XPath相匹配的所有元素的数组
console中访问节点
 这些都是在在控制台中的运行命令
使用document.queryselectedall
 类似于命令行模式 x选择我们想要访问的元素
使用$0快速访问元素
 选定然后 输入$0
拷贝--》js path

4.source源码面板

resource功能
资源面板允许你监视页面中加载的资源。它可以让你使用 HTML5 的本地存储，数据库，缓存，appcache，等。监视页面中加载的资源资源面板允许你监视页面中加载的资源。它可以让你使用 HTML5 的本地存储，数据库，缓存，appcache，等。
source的快捷键
ctrl+l 跳转到指定行
跳转到指定行号 开发者工具同时也可以在编辑器中直接跳转到指定行号。要启动行号输入框， 只需要选中你要查找的文件，然后使用下面的快捷键来启动： Ctrl + L (Windows) Cmd + L (Mac OS X) Ctrl + G (Linux) 
nav导航到选定文件
要导航到你选中的文件，进入源面板。然后你就可以使用下面的快捷键来打开一个 对应函数/特定选择器的一个选择框： Ctrl + Shitf + O (Windows,Linux) Cmd + Shitf + O (Mac OS X)
find搜索

搜索的原则
支持驼峰匹配法
注意:在所有的对话中，我们均提供驼峰匹配。比如：打开FooBarScript.js，你可以只写 FBaSc，这样可以节省时间
ctrl+o搜索所有脚本
Ctrl + o (windows,Linux) Cmd + o (Mac OS X) 
ctrl+f 在当前文件搜索
Ctrl + F (Windows,Linux) Cmd + F (Mac OS X) 2.一旦已经输入了一个关键字到搜索框中， （1）点击回车会调转到第一个匹配的结果。 继续点击回车将会在结果中进行跳转， （2）或者你也可以点击搜索框旁边的 up 和 down 箭头按钮来进行跳转。 
Ctrl + Shift + F在所有文件搜文字
如果你希望在所有加载的文件中搜索特定的文字，你可以用下面的快捷键来加载搜索框界面： Ctrl + Shift + F (Windows,Linux) Cmd + Opt + F (Mac OS X)
查找方式
1.正则表达式  2.敏感大小写的搜索方式2.敏感大小写的搜索方式。
replace替换
开发者工具支持当前文件中定位文字，此外也同样支持用新的值来替换替换单个或者所有文字。选中 “Relpace” 将会出现第二个输入区域来填写用于替换的文本。 
source的代码修改
代码的执行原理
修改脚本文件
对于脚本的更改只会在评估时间执行，评估时间对于脚本的更改只会在评估时间执行， 也就是说对代码的修改不是在页面加载后进行的话，将不会产生效果。页面加载后也就是说对代码的修改不是在页面加载后进行的话，将不会产生效果。 修改后的代码会在下一个阶段执行， 比如鼠标滑过监听或者点击事件的回调更改后可以快速进行
实时编辑
开发工具支持实时编辑脚本和样式，不需要重新加载页面就可以看到效果。这对于测试设计的更改，原生 JavaScript 函数或者代码块很有帮助。
element视图中相应脚本的链接（例：\）

Scources 子面板中选择脚本的文件名

保存修改的内容

步骤1 选择文件
或者是在 ”Element->Style panle“(for SASS/CSS）中点击文件名称（例如：style.css）。
步骤2 右键save as
 接下来，右键点击文件名或者直接点击文本编辑器内任意位置，然后选择"Save As"。 这将弹出一个允许你保存的菜单。
步骤3 之后再次递交的修改
 在同样的菜单中保存的或者是使用 Ctrl/Cmd + S 快捷键）都会保存到同一个位置中。
Local modifications查看修改历史记录
开发工具同样维护了所有对本地文件做出的历史修改。 如果你已经编辑了一段脚本或者样式表并且使用了开发工具进行保存，你可以在 Sources 右键一个文件名（或者在 source 区域）然后选择 ”Local modifications“ 来查看历史记录。 
修改历史面板显示
一个本地修改面板将会显示： 1.不同的更改 2.更改文件的时间 3.被修改文件所在的域名
source增强代码的可读性{}
可以点击下方的花括号{}来增强可读性，所有的断点都会列出右侧的断点区。   
5.network网络性能

检索页面

6.性能面板Performance
7.内存面板（Memory）
8.应用面板（Application）
9.安全面板（Security）
10.主菜单（Customize and control DevTools）
audit审计
要进一步的了解该功能，我们推荐使用 pagespeed 。
audit功能
1.审计面板可以像加载页面时那样分析一个页面。 2.然后提供关于减少页面加载时间的建议和优化，以此提高感知（和真实）的响应。关于减少页面加载时间的建议和优化2.然后提供关于减少页面加载时间的建议和优化，以此提高感知（和真实）的响应。
timeline时间轴

timeline功能
在加载和使用你的网页应用程序或网页时，时间轴面板给你关于时间开销的完整概述。 包括从加载资源到解析 JavaScript， 以及计算方式在内的所有事件， 都会重新绘制在一个时间表中。
profile配置面板

profile功能
JavaScript 和 CSS 的性能 1.配置面板允许您为网络应用程序或页面配置执行时间和内存使用量。配置执行时间1.配置面板允许您为网络应用程序或页面配置执行时间和内存使用量。内存使用量1.配置面板允许您为网络应用程序或页面配置执行时间和内存使用量。 这些有助于你理解资源的消耗，以帮助你优化你的代码。提供的分析器有：
分析器
CPU 分析器 会显示你页面上的 JavaScript 函数的执行时间 堆内存分配器 显示页面的 JavaScript 对象和 DOM 节点。 JavaScript 配置文件 会显示脚本的执行时间。
开发工具的使用
常用快捷键
 打开命令行工具
打开开发工具
有一些快捷键也可以用来打开开发工具： Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I)。 Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打开开发者工具同时集中焦点于控制台。集中焦点于控制台Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打开开发者工具同时集中焦点于控制台。 Ctrl + Shift + C (或在 Mac 上使用 Cmd + Shift + C) 在审查模式下打开开发者工具或是在开发者工具已经打开的情况下开启查阅选项。开启查阅选项 在审查模式下打开开发者工具或是在开发者工具已经打开的情况下开启查阅选项。 
常用的开发者工具命令行
 ctrl +shift+p
切换开发工具窗口

元素选择工具

使用多个插入符进行多选择编辑

断点调试的问题
1.按照次于，逐步缩小范围 2.按照顺序 ，逐步排除原理图各个模块 3.先排除最简单操作的模块 ，再操作最复杂操作的模块 element中是快速的直接设置DOM断点 console命令交互负责 结合断点进行输出，输出现象 source面板负责设置多种断点 (包括DOM断点)
断点调试的流程
步骤1，步骤1，设置断点 (设置在出问题的代码之后) 步骤2：步骤2：在console中利用之前浏览器执行过的函数变量， 编写交互式的console代码，执行，直到得到正确的计算变量结果 步骤3：步骤3：将编写成功的代码复制替换到原来的文本内容中 
element设DOM断点
设置 JavaScript 断点并可深入理解代码的最优化策略。  
属性修改时打断点
 
节点删除时打断点
Subtree modifications子树修改时打断点
Subtree modifications  执行原理： 那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。设置方式如下图
console断点

1.console.log和alert()打印运行的信息调试
2.JavaScript断点调试debugger

通过鼠标可也看到source中变量的值

通过左下角的跳过函数进入函数等工具
 
3.运行时变量值查看，修改源代码临时保存调试
souce断点调试的功能

source设置普通断点进行调试方法

XHR Breakpoints设置的字符串匹配时
 1.当XHR生命周期状态发生改变或者 2.XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时， 则断点就会有触发。
DOM 元素的值发生改版时断点
Event Listener Breakpoints事件监听断点
 在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件，勾选你要监听的事件， 在指定的事件执行时，断点就会有触发。
vuetool调试工具
(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN)安装地址
vue cli 创建项目工具

bootstrap和JQUERY和DOM
事件处理

前端网页模板
前端模块化
分成独立的模块有利于重用（复用性）和维护（版本迭代）， 这样会引来模块之间相互依赖的问题，所以有了commonJS规范，AMD，CMD规范等等， 以及用于js打包（编译等处理）的工具webpack
Commonjs规范
开始于服务器端的模块化，同步定义的模块化， 每个模块都是一个单独的作用域， 模块输出，modules.exports， 模块加载require()引入模块
AMD规范异步模块定义
中文名异步模块定义的意思。
前端组成.mmap
前端开发的方法
开发文档的约束
5.判断IE的方法
5.判断IE的方法判断5.判断IE的方法的方法 条件判断格式 条件判断格式条件版本条件判断格式那么显示条件判断格式 不等于 不等于[if !IE 8] //除了IE8都可以显示 除了不等于[if !IE 8] //除了IE8都可以显示都可以显示 小于小于 [if lt IE 5.5] //如果IE浏览器版本小于5.5的显示 如果小于 [if lt IE 5.5] //如果IE浏览器版本小于5.5的显示浏览器版本小于小于 [if lt IE 5.5] //如果IE浏览器版本小于5.5的显示的显示 大于 大于[if gt IE 5] //如果IE浏览器版本大于5的显示如果大于[if gt IE 5] //如果IE浏览器版本大于5的显示浏览器版本大于大于[if gt IE 5] //如果IE浏览器版本大于5的显示的显示 小于或者等于 小于或者等于[if lte IE 6] //如果IE浏览器版本小于6的显示 如果小于或者等于[if lte IE 6] //如果IE浏览器版本小于6的显示浏览器版本小于小于或者等于[if lte IE 6] //如果IE浏览器版本小于6的显示的显示 大于或等于 大于或等于[if gte IE 7] //如果IE浏览器版本小于7的显示 //如果大于或等于[if gte IE 7] //如果IE浏览器版本小于7的显示浏览器版本小于大于或等于[if gte IE 7] //如果IE浏览器版本小于7的显示的显示 大于和小于之间 大于和小于之间[if (gt IE 5)&(lt IE 7)] //如果IE浏览器版本大于IE5小于7的显示 如果大于和小于之间[if (gt IE 5)&(lt IE 7)] //如果IE浏览器版本大于IE5小于7的显示浏览器版本大于大于和小于之间[if (gt IE 5)&(lt IE 7)] //如果IE浏览器版本大于IE5小于7的显示小于大于和小于之间[if (gt IE 5)&(lt IE 7)] //如果IE浏览器版本大于IE5小于7的显示的显示 或 或[if (IE 6)|(IE 7)] //如果是IE6或者IE7显示 //如果是或[if (IE 6)|(IE 7)] //如果是IE6或者IE7显示或者或[if (IE 6)|(IE 7)] //如果是IE6或者IE7显示显示 仅 仅
仿制别人的app
1.利用开发者工具中看到 别人网页中使用的库 1.script的标签中 2.lib的文件夹中 2.搜索相关文档 进行阅读.
前端性能优化
降低请求量：降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。 加快请求速度加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。 缓存：缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。 渲染：渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。
网站的性能如何
检测页面加载时间一般有两种方式， 一种是被动去测：被动去测一种是被动去测： 就是在被检测的页面置入脚本或探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析， 另一种主动监测的方式，主动监测另一种主动监测的方式， 即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数据并分析， 在检测的精准度上，专业的第三方工具效果更佳，比如说性能极客
图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
滚动优化
在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。 如果事件中涉及到大量的 位置计算、 DOM 操作、 元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧 特性 防抖动：防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。 节流函数：只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。 rAF：16.7ms 触发一次 handler，降低了可控性，但是提升了性能和精确度。
滚动事件中绑定回调应用场景
图片的懒加载、下滑自动加载数据、侧边浮动导航栏
1.防抖（Debouncing）
大概功能就是如果 500ms 内没有连续触发两次 scroll 事件， 那么才会触发我们真正想在 scroll 事件中触发的函数。 // 简单的防抖动函数 function debounce(func, wait, immediate) { // 定时器变量 var timeout; return function() { // 每次触发 scroll handler 时先清除定时器 clearTimeout(timeout); // 指定 xx ms 后触发真正想进行的操作 handler timeout = setTimeout(func, wait); }; }; // 实际想绑定在 scroll 事件上的 handler function realFunc(){ console.log("Success"); } // 采用了防抖动 window.addEventListener('scroll',debounce(realFunc,500)); // 没采用防抖动 window.addEventListener('scroll',realFunc);
更好的封装防抖函数
 // 防抖动函数 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; var myEfficientFn = debounce(function() { // 滚动中的真正的操作 }, 250); // 绑定监听 window.addEventListener('resize', myEfficientFn);
防抖函数的问题
譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。 又或者下滑时候的数据的 ajax 请求加载也是同理。 需要及时的加载
2.节流（Throttling）
节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。 与防抖相比，节流函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler 
3.rAF原生方法requeAnimationFrame
使用 rAF（requestAnimationFrame）触发滚动事件  
4.简化 scroll 内的操作
 避免在scroll 事件中修改样式属性 / 将样式操作从 scroll 事件中剥离 输入事件处理函数，比如 scroll / touch 事件的处理， 都会在 requestAnimationFrame 之前被调用执行。 因此，如果你在 scroll 事件的处理函数中做了修改样式属性的操作，那么这些操作会被浏览器暂存起来。然后在调用 requestAnimationFrame 的时候，如果你在一开始做了读取样式属性的操作，那么这将会导致触发浏览器的强制同步布局。
滑动过程中尝试使用 pointer-events: none 禁止鼠标事件
Web 应用架构

WEB标准
web标准的功能
Web 标准的好处 1、让Web的发展前景更广阔 2、内容能被更广泛的设备访问 3、更容易被搜寻引擎搜索 4、降低网站流量费用 5、使网站更易于维护 6、提高页面浏览速度
web标准的组成

结构标准
样式标准
行为标准
Client - 客户端
一般指浏览器，浏览器可以通过一般指浏览器，浏览器可以通过 HTTP 协议向服务器请求数据。协议向服务器请求数据。
前端的运行原理
万维网常被称为Web Web 信息存储于被称为网页的文档中 网页是存储于被称为 Web 服务器的计算机上 读取网页的计算机称为 Web 客户端 Web 客户端通过称为浏览器的程序来查看网页 主要的浏览器有 Internet Explorer 和 Mozilla Firefox
1.输入网址和请求地址
2.寻找缓存
缓存的查找记录为：浏览器缓存缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，》系统缓存缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，》路由器缓存， 缓存中没有则查找系统的hosts文件中是否有记录，
2.网页缓存的原理
1）浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存， 是则直接从缓存读取资源，不会发请求到服务器。 2）如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified和etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源 3）如果前面两者都没有命中，直接从服务器加载资源  
1.强缓存
强缓存通过Expires和Cache-Control两种响应头实现  Cache-Control: no-cache不会缓存数据到本地的说法是错误的，详情《HTTP权威指南》P182 0ae591a1-f6fa-4236-8588-9d9e300f8ca7 Cache-Control: no-store才是真正的不缓存数据到本地 Cache-Control: public可以被所有用户缓存（多用户共享），包括终端和CDN等中间代理服务器 Cache-Control: private只能被终端浏览器缓存（而且是私有缓存），不允许中继缓存服务器进行缓存
2.协商缓存

检测缓存顺序
Cache-Control —— 请求服务器之前
Expires —— 请求服务器之前
发送If-None-Match (Etag) —— 请求服务器
If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒) 存在功能： 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET； If-Modified-Since能检查到的粒度是s级的， etag更加精确，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)； 某些服务器不能精确的得到文件的最后修改时间。最后修改时间某些服务器不能精确的得到文件的最后修改时间。
发送If-Modified-Since (Last-Modified) —— 请求服务器
If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)
几种状态码的区别
200：强缓Expires/Cache-Control存失效时，返回新的资源文件 200(from cache): 强缓Expires/Cache-Control两者都存在，未过期，Cache-Control优先Expires时，浏览器从本地获取资源成功 304(Not Modified )：协商缓存Last-modified/Etag没有过期时，服务端返回状态码304 现在的200(from cache) 已经变成了 from disk cache(磁盘缓存) from memory cache(内存缓存)两种 打开chrome控制台看一下网络请求就知道了 
缓存的选择
大致的顺序 Cache-Control —— 请求服务器之前 Expires —— 请求服务器之前 If-None-Match (Etag) —— 请求服务器 If-Modified-Since (Last-Modified) —— 请求服务器 1.协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义 1.大部分web服务器都默认开启协商缓存， 而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】 但是下面的场景需要注意： 分布式系统里多台机器间文件的Last-Modified必须保持一致，以免负载均衡到不同机器导致比对失败； 分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样）；
2.寻找host文件
3.DNS服务器
如果没有则查询DNS服务器，得到服务器的ip地址后，
4.构造http请求
浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据， 并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，
会话机制

会话组成

Cookie在客户端保存session ID
1.获取登录后的页面 2.服务器通过cookie判断程序是否为爬虫 Cookie 的作用就是用于解决 "如何记录客户端的用户信息":如何记录客户端的用户信息Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 1.当用户访问 web 页面时，他的名字可以记录在 cookie 中。 2.在用户下一次访问该页面时，服务器可以在 cookie 中读取用户访问记录。
cookie应用场景
补充说明一下cookie的作用：应用场景 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。 如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
cookie防范XSS攻击
XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击， 需要在HTTP头部配上，set-cookie： httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。 secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。 结果应该是这样的：Set-Cookie=..
session在服务端保存客户信息
我们需要有状态，比如上面的咖啡店例子， 再比如购物车机制， 在某个页面把某物品放入购物车，当访问在其它页面时，依然可见该购物车中的物品 ，这就需要会话(session)这样一种保存上下文信息的机制， session是针对每一个用户的， 通过session id来区分不同的用户
浏览器的同源政策
浏览器的同源政策规定，两个网址只要域名相同和端口相同，就可以共享cookie不要求协议相同，也就是说，http://example.com设置的cookie，可以被https://example.com读取
cookie和session区别
session 记录单 cookie 会员卡 session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话） cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下 使用权衡：使用权衡：session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE。
大小比较
4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie session占用服务器性能 没有上线
位置比较
1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
安全比较
2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。
cookie和storage的使用
从安全性来说，因为每次http请求都回携带cookie信息，这样子浪费了带宽， 所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多， 但是用户识别用户登陆来说，cookie还是比storage好用， 其他情况下可以用storage， localstorage可以用来在页面传递参数， sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数， 
大小比较
cookie数据还有路径（path）的概念， 可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右） 同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。 storage有5m左右
传递比较
Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大
有效时间比较
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，窗口关闭前sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持， localStorage： 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据； 始终有效localStorage： 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据； cookie 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域比较
作用域不同 sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面； localStorage：在所有同源窗口都是共享的； cookie：也是在所有同源窗口中共享的
cookie有哪些字段可以设置
name字段为一个cookie的名称。 value字段为一个cookie的值。  domain字段为可以访问此cookie的域名。 非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。 顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。 二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。 顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。 path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。 expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。 Size字段 此cookie大小。 http字段 cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。 secure 字段 设置是否只能通过https来传递此条cookie
会话生存期
开始：客户端(通常是浏览器)--发送第一个请求-->服务器，彼此成功建立连接 结束：关闭客户端(通常是浏览器)或者会话超时
会话超时
http协议中，客户机不再活跃时没有明确的终止信号.所 以借助超时来标识规定时间内不活跃的客户机，当不活跃时间超过规定时间时，自动结束会话，这样有助于节省资源。举个例子，当你登录一个网站，但是有事情， 离开电脑，老半天没进行网页浏览等与服务器交互的操作，当你回来时，点击某个超链接，它自动提示你要重新登录。这就是个典型的例子 长期不交互操作
会话过程
1、客户端-----发送请求----->服务器
指示客户端保存session id,如下图，客户端首次向服务器发起请求时，客户端首次向服务器指示客户端保存session id,如下图，客户端首次向服务器发起请求时， 可看到，客户端收到的请求头包含Set-Cookie 
2、服务器检查请求是否含有session id
情形一：请求中含有session id
根据session id检索对应的会话信息， 如果检索不到如果检索不到(会话信息因超时被删除)， 则创建用于保存会话信息的文件或某种数据结构变量， 并生成与文件或数据结构变量关联的session id 注：请求中含有session id，说明服务器已经为客户端保存过会话信息；保存过会话信息注：请求中含有session id，说明服务器已经为客户端保存过会话信息；
情形二：请求中不含session id
创建用于保存会话信息的文件或某种数据结构变量， 并生成与文件或数据结构变量关联的session id
3.把session id以响应报文的方式发送给客户端
如果客户端的请求中不含session id，那么服务器还会给出指令， set cookie 。
3.再次发起访问其它或相同页面请求时，会自动发送cookie中保存的session id

RESTFUL
用URL定位资源，用HTTP描述操作
服务器主机
4.解析用户请求并作出响应
5.将HTML JS CSS发送到用户浏览器
服务器脚本
服务器端脚本 服务器端脚本是对服务器行为的编程。这被称为服务器端脚本或服务器脚本。 客户端脚本是对浏览器行为的编程。（请参阅 JavaScript 初级教程）
服务器脚本的功能
改变 添加 1.动态地向 web 页面编辑、改变或添加任何的内容 2.对由 HTML 表单提交的用户请求或数据进行响应 3.访问数据或数据库，并向浏览器返回结果 4.为不同的用户定制页面 5.提高网页安全性，使您的网页代码不会通过浏览器被查看到 重要事项：由于脚本在服务器上执行，因此浏览器在不支持脚本的情况下就可以显示服务器端的文件！
服务器脚本的运行原理
1.当浏览器请求某个 HTML 文件时，服务器会返回此文件， 2.但是假如此文件含有服务器端的脚本， 那么在此 HTML 文件作为纯 HTML 被返回浏览器之前，首先会执行 HTML 文件中的脚本。执行那么在此 HTML 文件作为纯 HTML 被返回浏览器之前，首先会执行 HTML 文件中的脚本。
会话机制
0.JavaScript 来实现一些视觉变化的效果

1.浏览器利用html构建DOM树
浏览器可通过一个请求来读取某个服务器上的一张网页 请求是一个包含页面地址的标准 HTTP 请求 页面地址类似这样：http://www.someone.com/page.htm 浏览器根据这个html来构建DOM树， 在dom树的构建过程中如果遇到JS脚本和外部JS连接， 则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，下载相应的代码则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞， 这就是为什么推荐JS代码应该放在html代码的后面，
异步加载js的方法
defer：defer：只支持IE如果您的脚本不会改变文档的内容，可将 defer 属性加入到 asyncasync，HTML5属性仅适用于外部脚本，并且如果在IE中，同时存在defer和async，那么defer的优先级比较高，脚本将在页面完成时执行。 创建script标签，插入到DOM中
2.浏览器构建CSSOM树
之后根据外部央视，内部央视，内联样式构建一个CSS对象模型树CSSOM树， 构建完成后和DOM树合并为渲染树，
1.style
2.布局lagout
3.合并为渲染树
这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，
4..浏览器渲染页面
之后进行布局，布局主要是确定各个元素的位置和尺寸， 之后是渲染页面， 因为html文件中会含有图片，视频，音频等资源，在 解析DOM的过程中，遇到这些都会进行并行下载， 浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，每个域浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，并行下载数量浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，
Paint：绘制
Paint：绘制，本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等， 也就是一个 DOM 元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。
Composite：渲染层合并，
Composite：渲染层合并，由上一步可知，对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。
渲染引擎
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同 
Trident内核
（1）Trident(IE内核) 国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。 代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。 Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。
Gecko(firefox)
（2）Gecko(firefox) Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
webkit(Safari)
（3） webkit(Safari) Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。 代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，
Chromium/Bink(chrome)
（4） Chromium/Bink(chrome) 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 大部分国产浏览器最新版都采用Blink内核。
Presto(Opera)
（5） Presto(Opera) Presto 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
浏览器内核
渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。  最开始渲染引擎和 JS 引擎并没有区分的很明确， 后来 JS 引擎越来越独立， 内核就倾向于只指渲染引擎。渲染引擎内核就倾向于只指渲染引擎。 有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。
JS引擎
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
回流
回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，几何大小和位置回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的， 回流可以理解为渲染树需要重新进行计算，渲染树需要重新进行计算回流可以理解为渲染树需要重新进行计算， 一般最好触发元素的重构，避免元素的回流； 比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了， 
移动端浏览器
目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等， 其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit， Android 4.4 之前的 Android 系统浏览器内核是 WebKit， Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink， Windows Phone 8 系统浏览器内核是 Trident
插件HTML助手
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。 辅助程序可用于播放音频和视频（以及其他）。 辅助程序是使用 标签来加载的。
插件的功能
使用辅助程序播放视频和音频的一个优势是， 1.您能够允许用户来控制部分或全部播放设置。 大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。音量设置大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。播放功能大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
浏览器的工作原理
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容： 
多媒体格式
多媒体元素（比如视频和音频）存储于媒体文件中。 确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时， 1.它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件， 2.而 .css 扩展名指示样式表。 3.图片格式则通过 .gif 或 .jpg 来识别。 多媒体元素元素也拥有带有不同扩展名的文件格式， 比如 .swf、.wmv、.mp3 以及 .mp4。
视频格式

声音格式

声音格式的使用
WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。 MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。
重构重排重绘
浏览器的重构指的是改变每个元素外观时所触发的浏览器行为， 比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。颜色，背景比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。 重构不会引发页面的重新布局，不一定伴随着回流，重新布局重构不会引发页面的重新布局，不一定伴随着回流，伴随着回流重构不会引发页面的重新布局，不一定伴随着回流，
引起重排重绘的原因
1.添加或者删除可见的DOM元素， 2.元素尺寸位置的改变 3.浏览器页面初始化， 4.浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排， 元素删减 尺寸变化 窗口大小改变 顺序： 重拍-》重绘 
减少重绘重排的方法
不在布局信息改变时做DOM查询， 使用csstext,className一次性改变属性 使用fragment 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素 csstext classname一次性形成cssom树 该百年属性 必须重拍的元素必须重拍的元素：脱离文本流
浏览器浏览器兼容性
什么是浏览器兼容问题？ 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况
不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。和问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。差异较大。 碰到频率碰到频率:100% 解决方案：解决方案：CSS里 *{margin:0;padding:0;}里解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。文件开头都会用通配符备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。来设置各个标签的内外补丁是备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。。
float+margin问题
问题症状问题症状: 常见症状是常见症状是IE6中后面的一块被顶到下一行中后面的一块被顶到下一行 块属性标签块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大后，又有横行的块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大情况下，在块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大显示块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大比设置的大 碰到频率：碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）（稍微复杂点的页面都会碰到，碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）布局最常见的浏览器兼容问题） 解决方案：在解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性的标签样式控制中加入解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性将其转化为行内属性 备注：我们最常用的就是div+CSS布局了，而备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。就是一个典型的块属性标签，横向布局的时候我们通常都是用备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。实现的，横向的间距设置如果用备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。实现，这就是一个必然会碰到的兼容性问题。
设置高度问题
问题症状：问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度、问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度和遨游里这个标签的高度不受控制，超出自己设置的高度 碰到频率：碰到频率：60% 解决方案：给超出高度的标签设置解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。或者设置行高解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。小于你设置的高度。 设置较小高度标签（一般小于设置较小高度标签（一般小于10px），）， 备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
元素水平居中问题
1. FF: margin:0 auto; IE: 父级{ text-align:center; }
const定义问题
说明: Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解决方法：统一使用var关键字来定义常量.
模态和非模态窗口问题
说明: IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口; Firefox下则不能. 解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。 如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
float的延续性
说明： 在在i.e.浏览器中，如果使用float设置元素浮动对齐。浏览器中，如果使用在i.e.浏览器中，如果使用float设置元素浮动对齐。设置元素浮动对齐。 如果不关闭浮动，将会对后面的元素标签延续浮动。 解决方法：在设置解决方法：在设置float的元素后面加上clear:both，关闭浮动。的元素后面加上解决方法：在设置float的元素后面加上clear:both，关闭浮动。，关闭浮动。
1. event.srcElement问题
问题说明： I.E.下，even对象有srcElement属性，但是没有target属性； Firefox下，even对象有target属性，但是没有srcElement属性。 解决方法：使用 var obj=event.target||window.event.srcElement;
2.parentElement问题
firefox与I.E.的父元素(parentElement)的区别 IE：obj.parentElement firefox：obj.parentNode 解决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.
前端架构模式
一个大型的软件没有架构是没有办法开发的，
3.MVVM双向数据绑定
 双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。 Angular 和 Ember 都采用这种模式。
MVP
 MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。 1. 各部分之间的通信，都是双向的。 2. View 与 Model 不发生联系，都通过 Presenter 传递。 3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
MVP的应用
Android开发
1.MVC
 视图（View）：用户界面。 控制器（Controller）：业务逻辑 模型（Model）：数据保存
View 接受指令

controller接受指令

MVC缺点：
不适合小型，中等规模的应用程序，不适合小型，中等规模的应用程序，花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。 视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。图与控制器间过于紧密连接，视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。 视图对模型数据的低效率访问视图对模型数据的低效率访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。
MVC应用
java（struts2）和C#（ASP.NET）服务端应用中 AngularJS
MVVM与MVC最大的区别就是
它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。非常的神奇~ 这里我们拿典型的MVVM模式的代表，Vue，来举例
web攻击
CSRF; 跨站请求伪造
CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，用户的身份CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求， Cross-Site Request Forgery 比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站， 这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了， 比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库， 防御方式的话：使用验证码，检查https头部的refer，使用token
XSS：跨站脚本攻击
XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，当渲染DOM树的过程成发生了不在预期内执行的JS代码时，大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。 Cross-site scripting 比如获取cookie，或者其他用户身份信息， 可以分为存储型和反射型， 存储型存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击， 反射型反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中， 防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤 对输入(和URL参数)进行过滤，对输出进行编码。也就是对提交的所有内容进行过滤，对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面的内容进行html编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的XSS攻击。
web开发架构
CS架构需要每个客户端逐个升级桌面App BS架构 客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web页面，并把Web页面展示给用户即可。
Web开发阶段
静态Web页面：由文本编辑器直接编辑并生成静态的HTML页面，如果要修改Web页面的内容，就需要再次编辑HTML源文件，早期的互联网Web页面就是静态的； CGI：由于静态Web页面无法与用户交互，比如用户填写了一个注册表单，静态Web页面就无法处理。要处理用户发送的动态数据，出现了Common Gateway Interface，简称CGI，用C/C++编写。 ASP/JSP/PHP：由于Web应用特点是修改频繁，用C/C++这样的低级语言非常不适合Web开发，而脚本语言由于开发效率高，与HTML结合紧密，因此，迅速取代了CGI模式。ASP是微软推出的用VBScript脚本编程的Web开发技术，而JSP用Java来编写脚本，PHP本身则是开源的脚本语言。 MVC：为了解决直接用脚本语言嵌入HTML导致的可维护性差的问题，Web应用也引入了Model-View-Controller的模式，来简化Web开发。ASP发展为ASP.Net，JSP和PHP也有一大堆MVC框架。
静态Web页面
Common Gateway Interface
ASP/JSP/PHP：
JavaScript在浏览器中操作HTML
直接用JavaScript操作DOM节点
1998 AJAX
2006 jQuery和DOM横空出世，以简洁的AP
MVC模式，需要服务器端配合，
2008工业时代
伴随着信息时代、大数据时代的到来，jQuery 在大量的数据操作中的弊端体现出来了，它在对 DOM 进行大量的操作中，会导致页面的加载缓慢等问题，这时，有些前端开发人员逐渐觉得力不从心了…… 2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。 2009 年 AngularJS 诞生、Node诞生。 2011 年 React 诞生。 2014 年 Vue.js 诞生。
Node 是前端的第二次飞跃
MVVM 模式
如今， 后端负责数据，前端负责其余工作越发明显化。 它们之间的通讯，只需要后端暴露 RESTful 接口， 前端通过 Ajax，以 HTTP 协议与后端通信即可  
Vue、React、Angular
Vue 与 小程序
Server - 服务端
一般指一般指 Web 服务器，可以接收客户端请求，并向客户端发送响应数据服务器，可以接收客户端请求，并向客户端发送响应数据
web服务器
Apache、Nginx、IIS
服务器的功能
，Web服务器的基本功能就是提供Web信息浏览服务。 它只需支持HTTP协议、HTML文档格式及URL，与客户端的网络浏览器配合。
web服务起的选择
硬件支出 如果要运行“真正”的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。 软件支出 请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。 人工费 不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
租用ISP
24 小时支持 确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。 每日备份 确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。 流量 研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。 带宽或内容限制 研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。 E-mail 功能 请确保 ISP 支持您需要的 e-mail 功能。 数据库访问 如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。 在您选取一家 ISP 之前，请务必阅读 W3School 的 Web 主机教程。
Business - 业务层
通过通过 Web 服务器处理应用程序，如与数据库交互，逻辑运算，调用外部程序等服务器处理应用程序，如与数据库交互，逻辑运算，调用外部程序等
Data - 数据层
，一般由数据库组成。
数据库
数据库功能
数据库的属性
数据库分类
这些数据库包括 SQL Server、 Oracle、 MySQL、 Sybase 以及 Access 等等。
数据库组成
数据库操控
SQL
SQL 是一门 ANSI 的标准计算机语言，用来访问和操作数据库系统。
SQL的功能
1.SQL 是用于访问和处理数据库的标准的计算机语言。访问1.SQL 是用于访问和处理数据库的标准的计算机语言。处理数据库1.SQL 是用于访问和处理数据库的标准的计算机语言。 2.SQL 语句用于取回和更新数据库中的数据。 3。SQL 可与数据库程序协同工作，比如 MS Access、DB2、Informix、MS SQL Server、Oracle、Sybase 以及其他数据库系统。
SQL的属性
不同版本
不幸地是，存在着很多不同版本的 SQL 语言，但是为了与 ANSI 标准相兼容，它们必须以相似的方式共同地来支持一些主要的关键词（比如 SELECT、UPDATE、DELETE、INSERT、WHERE 等等）。
SQL的组成
关键词
SQL数据库表
 一个数据库通常包含一个或多个表。 每个表由一个名字标识（例如“客户”或者“订单”）。 表包含带有数据的记录（行）。
SQL数据操控语言DML

SQL查询程序

SQL数据库定义语言
SQL 的数据定义语言部分使我们有能力 1.创建或删除表格。 2.我们也可以定义索引（键）， 3.规定表之间的链接， 4.以及施加表间的约束。 
后端
node平台
简单的说 Node.js 就是运行在服务端的 JavaScript。 - JavaScript 运行时 - 既不是语言，也不是框架，它是一个平台
node的功能
1.然后你想创建自己的服务，那么Node.js是一个非常好的选择。创建自己的服务1.然后你想创建自己的服务，那么Node.js是一个非常好的选择。 node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。 2.当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择高性能的服务2.当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择 3.执行js文件
创建服务器
创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等 HTTP 服务器。
接受请求响应请求
接收请求与响应请求 服务器很容易创建，客户端可以使用浏览器或终端发送 HTTP 请求，服务器接收请求后返回响应数据。
node的属性
- 没有 BOM、DOM
- EcmaScript 基本的 JavaScript 语言部分
- 在 Node 中为 JavaScript 提供了一些服务器级别的 API
在 Node 中没有全局作用域的概念
js的缺陷
avaScript是单线程执行，根本不能进行同步IO操作，所以，JavaScript的这一“缺陷”导致了它只能使用异步IO
Node.js开发Web服务器端，有几个显著的优势
一是后端语言也是JavaScript，以前掌握了前端JavaScript的开发人员，现在可以同时编写后端代码； 二是前后端统一使用JavaScript，就没有切换语言的障碍了； 三是速度快，非常快！这得益于Node.js天生是异步的。 JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举天生的事件驱动机制加JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举高性能引擎，使编写高性能JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举服务轻而易举
RESTful API开发风格
REST通常基于使用HTTP，URI，和XML（标准通用标记语言下的一个子集）以及HTML（标准通用标记语言下的一个应用）这些现有的广泛流行的协议和标准。 REST 通常使用 JSON 数据格式。
HTTP 方法
以下为 REST 基本架构的四个方法： GET - 用于获取数据。 PUT - 用于更新或添加数据。 DELETE - 用于删除数据。 POST - 用于添加数据。
Web service应用程序
Web service是一个平台独立的，低耦合的，自包含的、基于可编程的web的应用程序
JXcore 是一个支持多线程的 Node.js 发行版本
node的工作原理
node模式
命令行模式

REPL(交互式解释器

执行以下任务
读取 - 读取用户输入，解析输入了Javascript 数据结构并存储在内存中。 执行 - 执行输入的数据结构 打印 - 输出结果 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出。
启动 Node 的终端
 这时我们就可以在 > 后输入简单的表达式，并按下回车键来计算结果。
node的程序执行
1.Node.js不断执行响应事件的JavaScript函数，直到没有任何响应事件的函数可以执行时， 2.Node.js就退出了
执行异步操作的函数将回调函数作为最后一个参数
 以上程序中 fs.readFile() 是异步函数用于读取文件。 如果在读取文件过程中发生错误，错误 err 对象就会输出错误信息。 如果没发生错误，readFile 跳过 err 对象的输出，文件内容就通过回调函数输出 
回调函数接收错误对象作为第一个参数
Node.js 框架
Express.js
Express 框架核心特性：
可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。
Koa.js
Egg.js
Nest.js
Midway.js
Meteor.js
node模块系统
- 模块完全是封闭的 - 外部无法访问内部 - 内部也无法访问外部  把函数greet作为模块的输出暴露出去，这样其他模块就可以使用greet函数了
模块的功能
模块作用域固然带来了一些好处，可以加载执行多个文件，可以完全避免变量命名冲突污染的问题 但是某些情况下，模块与模块是需要进行通信的
模块的工作原理
全局变量
“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
Node.js 函数
匿名函数
node的对象
global全局对象

process对象
它代表当前Node.js进程  Node.js进程本身的事件就由process对象来处理1
process.nextTick()

代码结构
 1
'use strict';
使用严格模式 很麻烦。我们可以给Nodejs传递一个参数，让Node直接为所有js文件开启严格模式 node --use_strict calc.js 后续代码，如无特殊说明，我们都会直接给Node传递--use_strict参数来开启严格模式
引入 events 模块
创建 eventEmitter 对象
绑定事件及事件的处理程序
触发事件
如果只写模块名：var greet = require('hello');
 遇到这个错误，你要检查： 模块名是否写对了； 模块文件是否存在； 相对路径是否写对了
在一个模块中输出变量
方法一：对module.exports赋值：

方法二：直接使用exports：

node核心模块
这些模块在浏览器环境中是无法被执行的，因为它们的底层代码是用C/C++在Node.js运行环境中实现的。 一个 Node.js 文件就是一个模块
require 方法来加载
所有核心模块在使用的时候都必须手动的先使用 require 方法来加载，然后才可以使用，例如： - var fs = require('fs') 
require原理

模块系统编写

exports 接口对象提供模块接口
在每个模块中，都提供了一个对象：exports 一个模块想要对外暴露变量（函数也是变量）， 可以用module.exports = variable;，一个模块要引用其他模块暴露的变量， 用var ref = require('module_name');就拿到了引用模块的变量。
判断JavaScript执行环境

- fs 文件操作模块
包括 fs、net、 http 在内的，只要是支持事件响应的核心模块都是 EventEmitter 的子类。
异步和同步
- http 网络服务构建模块
 
HTTP / HTTPS / HTTP2
 
querystring 模块
url模块
parse获取GET请求内容

获取 URL 的参数
获取 POST 请求内容
恶意的POST请求会大大消耗服务器的资源，所以 node.js 默认是不会解析请求体的，当你需要的时候，需要手动来做。
Event事件
EventEmitter对象事件触发监听
r 的核心就是事件触发与事件监听器功能的封装 
属性
on 和 emit
on 函数用于绑定事件函数，emit 属性用于触发一个事件
方法
addListener(event, listener)为指定事件添加一个监听器到监听器数组的尾部。
on(event, listener)为指定事件注册一个监听器，接受一个字符串 event 和一个回调函数。
3 once(event, listener)为指定事件注册一个单次监听器，即 监听器最多只会触发一次，触发后立刻解除该监听器。
4 removeListener(event, listener)移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。
5 removeAllListeners([event])移除所有事件的所有监听器， 如果指定事件，则移除指定事件的所有监听器。
6 setMaxListeners(n) EventEmitters 如果你添加的监听器超过 10 个就会输出警告信息。 setMaxListeners 函数用于提高监听器的默认限制的数量。
7 listeners(event)返回指定事件的监听器数组。
8 emit(event, [arg1], [arg2], [...])按监听器的顺序执行执行每个监听器，如果事件有注册监听返回 true，否则返回 false。
类方法
listenerCount(emitter, event)返回指定事件的监听器数量。
事件
newListener该事件在添加新监听器时被触发。
removeListener删除一个监听器
error 事件
error 事件 EventEmitter 定义了一个特殊的事件 error，它包含了错误的语义，我们在遇到 异常的时候通常会触发 error 事件。 当 error 被触发时，EventEmitter 规定如果没有响 应的监听器，Node.js 会把它当作异常，退出程序并输出错误信息。 我们一般要为会触发 error 事件的对象设置监听器，避免遇到错误后整个程序崩溃 
使用
继承 EventEmitter
，具有某个实体功能的对象实现事件符合语义， 事件的监听和发生应该是一个对象的方法。 其次 JavaScript 的对象机制是基于原型的，支持 部分多重继承，继承 EventEmitter 不会打乱对象原有的继承关系
Stream流
request 对象就是一个 Stream，还有stdout（标准输出）。
四种流类型：
Readable - 可读操作。
Writable - 可写操作。
Duplex - 可读可写操作.
Transform - 操作被写入数据，然后读出结果。
常用的事件
data - 当有数据可读时触发。
end - 没有更多的数据可读时触发。
error - 在接收和写入过程中发生错误时触发。
finish - 所有数据已被写入到底层系统时触发。
从流中读取数据
写入流
Buffer缓冲区
在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js 处理二进制数据，每当需要在 Node.js 中处理I/O操作中移动的数据时，就有可能使用 Buffer 库。处理二进制数据，每在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js 处理二进制数据，每当需要在 Node.js 中处理I/O操作中移动的数据时，就有可能使用 Buffer 库。 原始数据存储在 Buffer 类的实例中。一个 Buffer 类似于一个整数数组，但它对应于 V8 堆内存之外的一块原始内存
Buffer对象

创建 Buffer 类
Buffer.alloc(size[, fill[, encoding]])： 返回一个指定大小的 Buffer 实例，如果没有设置 fill，则默认填满 0 Buffer.allocUnsafe(size)： 返回一个指定大小的 Buffer 实例，但是它不会被初始化，所以它可能包含敏感的数据 Buffer.allocUnsafeSlow(size) Buffer.from(array)： 返回一个被 array 的值初始化的新的 Buffer 实例（传入的 array 的元素只能是数字，不然就会自动被 0 覆盖） Buffer.from(arrayBuffer[, byteOffset[, length]])： 返回一个新建的与给定的 ArrayBuffer 共享同一内存的 Buffer。 Buffer.from(buffer)： 复制传入的 Buffer 实例的数据，并返回一个新的 Buffer 实例 Buffer.from(string[, encoding])： 返回一个被 string 的值初始化的新的 Buffer 实例 
写入缓冲区buf.write(string[, offset[, length]][, encoding])
参数 string - 写入缓冲区的字符串。 offset - 缓冲区开始写入的索引值，默认为 0 。 length - 写入的字节数，默认为 buffer.length encoding - 使用的编码。默认为 'utf8' 。 返回值 返回实际写入的大小。如果 buffer 空间不足， 则只会写入部分字符串。
从缓冲区读取数据buf.toString([encoding[, start[, end]]])
  参数 参数描述如下： encoding - 使用的编码。默认为 'utf8' 。 start - 指定开始读取的索引位置，默认为 0。 end - 结束位置，默认为缓冲区的末尾。 返回值 解码缓冲区数据并使用指定的编码返回字符串
将 Buffer 转换为 JSON 对象buf.toJSON()
 
缓冲区合并Buffer.concat(list[, totalLength])

缓冲区比较buf.compare(otherBuffer);
 参数 参数描述如下： otherBuffer - 与 buf 对象比较的另外一个 Buffer 对象。 返回值 返回一个数字，表示 buf 在 otherBuffer 之前，之后或相同。
拷贝缓冲区buf.copy(targetBuffer[, targetStart[, sourceStart[, sourceEnd]]])
 
缓冲区裁剪buf.slice([start[, end]])

缓冲区长度buf.length

node.js 目前支持的字符编码
ascii - 仅支持 7 位 ASCII 数据。如果设置去掉高位的话，这种编码是非常快的。 utf8 - 多字节编码的 Unicode 字符。许多网页和其他文档格式都使用 UTF-8 。 utf16le - 2 或 4 个字节，小字节序编码的 Unicode 字符。支持代理对（U+10000 至 U+10FFFF）。 ucs2 - utf16le 的别名。 base64 - Base64 编码。 latin1 - 一种把 Buffer 编码成一字节编码的字符串的方式。 binary - latin1 的别名。 hex - 将每个字节编码为两个十六进制字符。
Crypto加密
util常用函数的集合
util.inherits对象间原型继承的函数
util.inherits(constructor, superConstructor) 是一个实现对象间原型继承的函数
util.inspect将任意对象转换 为字符串的
util.inspect(object,[showHidden],[depth],[colors]) 是一个将任意对象转换 为字符串的方法，通常用于调试和错误输出。它至少接受一个参数 object，即要转换的对象。
util.isArray(object)如果给定的参数 "object" 是一个数组返回true，否则返回false

util.isRegExp(object)如果给定的参数 "object" 是一个正则表达式返回true，否则返回false

util.isDate(object)

util.isError(object)

Web 模块
child_process 多进程模块
child_process.exec 使用子进程执行命令，缓存子进程的输出
并将子进程的输出以回调函数参数的形式返回。
child_process.spawn 使用指定的命令行参数创建新进程
child_process.fork 是 spawn() 方法的特殊形式，用于创建进程
工具模块
- os 操作系统信息模块
- path 路径处理模块
Domain 模块简化异步代码的异常处理，可以捕捉处理try catch无法捕捉的。
DNS 模块用于解析域名。
Net网络
用于底层的网络通信。提供了服务端和客户端的的操作。
Timer定时器
node的使用
Node.js 进阶
Memory 内存管理
V8 虚拟机
I/O 模型
EventLoop 事件轮询
Threads&Process 线程和进程
Testing 测试
Schedule 定时任务
Template 模版引擎
Cache 缓存
性能调优
node常用命令
打开应用
- notepad 打开记事本
- mspaint 打开画图
- calc 打开计算机
- write 写字板
- sysdm.cpl 打开环境变量设置窗口
常用命令
- md 创建目录
- rmdir(rd) 删除目录，目录内没有文档。
- echo on a.txt 创建空文件
- del 删除文件
- rm 文件名 删除文件
- cat 文件名 查看文件内容
- cat > 文件名 向文件中写上内容。
nvm常用的命令
- nvm list 查看当前安装的Node.js所有版本
- nvm install 版本号 安装指定版本的Node.js
- nvm uninstall 版本号 卸载指定版本的Node.js
- nvm use 版本号 选择指定版本的Node.js
REPL(交互式解释器)
使用下划线(_)获取上一个表达式的运算结果
ctrl + c - 退出当前终端。
ctrl + c 按下两次 - 退出 Node REPL。
ctrl + d - 退出 Node REPL.
向上/向下 键 - 查看输入的历史命令
tab 键 - 列出当前命令
.help - 列出使用命令
.break - 退出多行表达式
.clear - 退出多行表达式
.save filename - 保存当前的 Node REPL 会话到指定文件
.load filename - 载入当前 Node REPL 会话的文件内容
node编程
异步编程
Node.js 回调函数
我们可以一边读取文件，一边执行其他命令 在文件读取完成后，我们将文件内容作为回调函数的参数返回。这样在执行代码时就没有阻塞或等待文件 I/O 操作。 这就大大提高了 Node.js 的性能，可以处理大量的并发请求。 
阻塞代码实例

非阻塞代码实例

切换到工作目录
1.在文件夹中 使用git bash 直接进入工作目录 2.shift+右键 在此处打开powershell命令工具
javascript的执行
步骤1：创建一个js文件 步骤2：进入到对应的工作文件，在node的命令行中进行执行 步骤3：显示出js文件的执行结果；  必须要以js为结尾
sublime和js的调试使用
 、 粘贴以下内容 {"cmd": ["node", "$file"],"selector": "source.js"} 并保存为Node.sublime-build，保存位置：Data\Packages\User文件夹。 4. 在 Tools >“编译系统” 里选择刚刚创建好的“ Node”，就可以调试了。 5. 选择你写好js的文件后，按下Ctrl + B按钮，即可看到结果。
面试题
click在ios上有300ms延迟
(1)粗暴型，禁用缩放 (2)利用FastClick，其原理是： 检测到touchend事件后，立刻出发模拟click事件，并且把浏览器300毫秒之后真正出发的事件给阻断掉