1.文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。
2.新特性 绘画 本地存储localStorage 事件监听
移除
纯表现的元素
默认字体,不设置字体,以此渲染
字体标签
水平居中
下划线
大字体
中横线
文本等宽
框架集
3.Session storage 存储对象存储一个会话的数据。当用户关闭浏览器窗口时,数据将被删除。
4.轻量级的sqllite数据库。可以在客户端本地存储数据,用于在断开网络连接的情况下读取本地缓存cookies,LocalStores可以将数据长期保存在客户端,直至人工清除为止,
5.XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
6. 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。
7.CSS 选择符:
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
可继承的样式:
1.font-size
2.font-family
3.color
4.text-indent
不可继承的样式:
1.border
2.padding
3.margin
4.width
5.height
优先级算法:
1.优先级就近原则,同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例:
p:first-of-type 选择属于其父元素的首个 元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
8.盒子模型 margin border padding content
9.typeof 返回一个值的数据类型
10.writing-mode unicode-bidi direction
11.行内元素 span a i b strong
块级元素 div p h1-h6 ul dl ol table form
空元素 br hr input img link meta
12.alt属性的实质是通过文字来代替图片的内容,而title属性的实质是对图片的描述或者注释。
13.var全局变量 let const 块级变量 其次 var可以变量提升 而 let const 不可以 const 必须赋值 且只能声明一次
14.布局合理 没有多余代码即可
15.id权重100 class权重10 元素伪元素1 @impornt 10000 *为0
16.border-radius圆角 border-image边框图像 box-shadow阴影
background-clip 规定背景的绘制区域.
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。
动画@keyframes 规则
Number、String、Boolean、Null、undefined、symbol
函数调用指向window
方法调用指向绑定对象身上
工厂方式 构造函数方式 原型模式 混合的构造函数原型方式(推荐) 动态原型方式
闭包是就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量的是这个内部函数的一部分。
funciton A(){
var a = 1
return funciton B(){
console.log(a)
}
}
1.使用闭包可以访问函数中的变量。
2.可以使变量长期保存在内存中,生命周期比较长。
闭包不能滥用 否则会导致内存泄漏 影响网页的性能 闭包使用完了后,要立即释放资源,将引用变量指向null。
undefined 定义了变量但是没有赋值
not defined 没有定义 忽然冒出来
splice
arr.splice(0,arr.length)
length赋值为0
arr.length = 0
赋值为[]
var arr = [1,2,3,4,5]
arr = []
操作数组方法
arr.push() 从后面添加元素,返回值为添加完后的数组的长度
arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素
arr.shift() 从前面删除元素,只能删除一个 返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组 返回值为连接后的新数组
str.split() 将字符串转化为数组
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值start到索引值end的数组,不包含end索引的值,返回值是切出来的数组
arr.forEach(callback) 遍历数组,无return 即使有return,也不会返回任何值
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。
arr.filter(callback) 过滤数组,返回一个满足要求的数组
arr.every(callback) 依据判断条件,数组的元素是否全满足,若满足则返回ture
arr.some() 依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture
arr.reduce(callback, initialValue) 迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值
arr.indexOf() 查找某个元素的索引值,若有重复的,则返回第一个查到的索引值若不存在,则返回 -1
arr.lastIndexOf() 和arr.indexOf()的功能一样,不同的是从后往前查找
Array.from() 将伪数组变成数组,就是只要有length的就可以转成数组。 ---es6
Array.of() 将一组值转换成数组,类似于声明数组 ---es6
1.document.write()
2.Element.innerHTML
3.document.createElement()
浅拷贝引用地址不变
深拷贝引用地址改变新数组 深拷贝方法 递归 json对象 通过object.assign拷贝
text() 方法方法设置或返回被选元素的文本内容
html() 方法返回或设置被选元素的内容 (inner HTML),包括标签。
value()方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
== 两边值类型不同的时候,要先进行类型转换,再比较。
=== 不做类型转换,类型不同的一定不等。
值类型:Number、String、Boolean、Null、undefined、symbol
引用类型:对象(Object)、数组(Array)、函数(Function)
页面呈现出清晰的结构
有利于seo
方便其他设备解析
便于团队开发和维护
1. CDN缓存更方便。
2. 突破浏览器并发限制。
3. Cookieless, 节省带宽,尤其是上行带宽 一般比下行要慢。
当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。
单例模式
工厂模式
适配模式
外观模式
promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱。
pending就是未决,resolve可以理解为成功,reject可以理解为拒绝。
箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。
箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域,谁定义的函数,this指向谁
id class * (div span)div后面的span标签
event.stopPropagation
get请求数据 请求数据会体现在url后面 会被缓存 有长度限制
post 提交数据 提交的数据可以在请求体中查看 刷新会被重复提交 post相比较安全
中间层
无状态协议对于事物处理没有记忆能力,也就是说,当客户端第一次像服务器发送http请求完成之后,再一次像服务器发送http请求,服务器并不知道该客户端是一个老用户
解决办法是携带Cookie,Cookie相当于是一个通行证,当客户端第一次像服务端发送http请求时,服务端向客户端返回一个cookie,当客户端再次发送http请求时携带该cookie,于是服务端便知道该客户端是一个老用户了
请求方式
get
post
$.ajax()返回其创建的 XMLHttpRequest 对象
通过 HTTP GET 请求载入 JSON 数据。
参数类型
json格式
json字符串格式
标准参数模式
状态码
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
ajax主要针对mvc使用
axios 更符合现在mvvm潮流 支持 Promise API 提供了一些并发请求的接口 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据
fetch 兼容不太好
一种是按路径加载,一种是查找 node_modules 文件夹。
1、中间件就是一种功能的封装方式,就是封装在程序中处理http请求的功能,
2、中间件是在管道中执行
3、中间件有一个next()函数,如果不调用next函数,请求就在这个中间件中终止了,
4、中间件和路由处理器的参数中都有回调函数,这个函数有2,3,4个参数
如果有两个参数就是req和res;
如果有三个参数就是req,res和next
如果有四个参数就是err,req,res,next
5、如果不调用next ,管道就会终止,不会再有处理器做后续响应,应该向客户端发送一个响应
6、如果调用了next,不应该发送响应到客户端,如果发送了,则后面发送的响应都会被忽略
7、中间件的第一个参数可以是路径,如果忽略则全部都匹配
浏览器同源策略问题
解决方法
nodejs中间件代理跨域
jsonp代理
nginx代理跨域
1) http方法
PUT 、DELETE、OPTIONS、PATCH、TRACT、CONNECT
2) 包含CORS头部字段以外的其他字段
Content-Language 、DPR、Downlink、Save-Data、Viewport-Width、Width
3) Content-Type
application/x-www-form-urlencoded、multipart/form-data、text/plain
fs模块就是文件系统模块,负责读写文件 fs同时提供了同步异步的方法
path模块 :用于处理文件路径。
until模块 :弥补js功能不足,新增API。
events模块 events 模块只提供了一个对象: events.EventEmitter。
http模块
jade是一款高性能、简洁易懂的模板引擎。可通过jade来编写html文件。
Express是一个nodejs的web开源框架,用于快速的搭建web项目。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
npm i axios
进行get post请求
通过向axios传递的相关配置来创建请求axios(config)
配置默认值default
执行多个并发
拦截器
封装
引入使用
配置代理
在config文件夹下的index.js文件中的proxyTable字段中
get post delete put
Axios 提供了一个 CancelToken的函数,这是一个构造函数,该函数的作用就是用来取消接口请求的。
async异步+await同步
exports只能使用语法来向外暴露内部变量
module.exports既可以通过语法,也可以直接赋值一个对象。
一个异步请求套着一个异步请求,一个异步请求依赖于另一个的执行结果,使用回调的方式相互嵌套。
不利于代码维护
promise语法出现就是为了解决回调地狱问题的
允许将回调函数的嵌套,改成链式调用。
事件委托就是子元素的事件委托给父级来执行
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
封装好组件
引入组件地址
用axios请求
router-link router-view设置组件渲染的部分
v-if v-show v-else v-on v-moudel v-text v-html v-for v-bind
转换成json字符串 传入
可以 用逗号隔开
提高渲染性能 key属性可以避免数据混乱出现
v-show 通过display:none 来根据条件是否隐藏
v-if 通过条件判断 不符合直接销毁节点 代价大
经常使用用v-show 偶尔使用 用v-if
v-clock 防止页面加载时出现 vuejs 的变量名
v-pre 跳过这个元素和它的子元素的编译过程
v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
Object.defineProperty -> Proxy
element-ui使用:rules prop设置需要验证的字段名
Diff算法有三大策略:
Tree Diff 是对树每一层进行遍历,找出不同
Component Diff 是数据层面的差异比较
Element Diff 首先进行第一层比较,第一层都是R,不发生变化;然后进入第二层Component Diff,发现A组件没有,则删除A及其子组件B、C;最后比较第三层,创建A及其子组件B、C。当节点处于同一层级时,Diff提供三种DOM操作:删除、移动、插入。
具有缓存 计算属性有get set 当数据变化是 对应的数据进行计算
watch没有缓存数据执行异步 或者开销比较大的时候使用watch 监听机制+事件监听
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
filters |
beforemount还没有生成到html页面
mounted 已经渲染到html页面
父传子props 子传$emit $on 兄弟传值eventbus
.stop
Vue.config.keyCodes.名称 = 按键值
v-module this指向
v-bind
focus
全局组件无法访问局部组件
匿名插槽 命名插槽 作用域插槽
async 需要等await调用返回才开始
`` ${}
是页面跳转 通过path配置 router-view router-link 相当于一个a标签
结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window),轻松实现路由组件的懒加载。
path里面设置:需要的字段名
声明式 页面嵌套子路由不跳转页面
编程式路由 会刷新页面 可以通过 go回退
hash hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。害怕刷新
nginx
try_files $uri $uri/ /index.html;
重定向到主页面
$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
$router对象是全局路由的实例,是router构造方法的实例。
二级菜单 tab标签页
1. state:vuex的基本数据,用来存储变量
2. geeter:从基本数据(state)派生的数据,相当于state的计算属性
3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
能够在vuex中集中管理共享的数据,易于开发和后期维护
能够高效的实现组件直接得数据共享,提高开发效率
储存在vuex中的数据都是响应式的,能够实现数据与页面的同步
1. state:vuex的基本数据,用来存储变量
2. geeter:从基本数据(state)派生的数据,相当于state的计算属性
3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
mutation 专注于修改State,理论上是修改State的唯一途径。同步提交
action 业务代码、异步请求mutation。
将vuex中的数据直接保存到浏览器缓存中
在页面刷新的时候再次请求远程数据,使之动态更新vuex数据
将store拆成模块
团队人数多的时候 既保证store了完整的状态树,又避免了相互之间的state冲突
Vue的脚手架工具 搭建好目录
好像有个simple和完整版的
使用http-proxy-middleware
下载依赖glob
修改build下的文件
修改config下的文件
在src目录下添加pages文件夹
打包
router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn
有用过做城市宅基地面积用到 遇到的坑就是样式修改 因为数据是mock的 所以 柱状图宽度又比较粗 修改样式比较麻烦 最后找到对应的数组 去修改的width宽度
submit按钮属性为disabled,然后当后台请求成功移除这个属性
点击的时候加一个class属性,然后js判定是否有这个class,如果有的话不再重复提交,
生产构建:
1.合并(css module会为每一个module创建一个style节点,把所有的style合并为一个css文件)
2.抽取(把合并后的css文件从js中抽取出来)
3.压缩(js、css要压缩)
4.调试(开启soureMap,便于线上调试)
发布部署:
1.提交(前端提交到git库)
2.部署(服务端拉取前端打包后存放在git的代码部署,如果采用了阿里云等云部署工具也可前端完成)
3.开启gzip压缩(nginx配置)
4.更新CDN(手动或自动更新)
格式化代码
移除 console
vue项目打包之开发环境和部署环境
vue项目减小打包的体积
路由懒加载
服务器文件压缩
去除不必要的插件
提取第三方库
代码压缩
代码分割
设置缓存
使用良好的结构
不要使布局超载
不要使用图像来表示文本
检查cookie使用情况
不要包含不必要的 JavaScript 代码,尽可能将其外部化
尽可能避免使用表格
删除任何不必要的元素
按需加载 JavaScript 文件
优化 CSS 文件
(1) 合并JS、CSS文件 (2) 合并图片css sprite (3) 使用 Image maps (4) data嵌入图片:如base64 (5) 使用CDN,减少http请求头 Web安全
函数防抖是:当你频繁触发后,n秒内只执行一次
函数节流是:在固定的时间内触发事件,每隔n秒触发一次
应用场景
防抖
search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器
节流
鼠标不断点击触发,mousedown(单位时间内只触发一次)
window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用节流来让其在一定时间内触发一次
git stash 栈
放弃本地修改
撤销分支
强行冲掉之前的分支
删除分支