前端UI(布局)框架
- bootstrap
- Amaze UI
BootStrap 全局css样式
栅格系统
-
container 容器
- 超小屏幕 手机 vw <768px 宽度 100%
- 小屏幕 平板 768px <= vw < 992px 宽度 750px
- 中等屏幕 992<= vw < 1200 宽度 970px
- 大屏幕 1200 <= vw 宽度 1170px
-
行 和 列
<div class="row">
<div class="col-md-2"></div>
</div> -
列的类名
- col-xs-* 超小屏幕
- col-sm-* 小屏幕
- col-md-* 中等屏幕
- col-lg-* 大屏幕
-
列偏移
- col-xs-offset-*
- col-sm-offset-*
- col-md-offset-*
- col-lg-offset-*
-
列排序
col-*-push-*
col-*-pull-*
ECMA6
ECMA
- 欧洲计算机标准协会
ECMAScript
- JavaScript的标准语法
ECMAScript 版本
- ECMA3
- ECMA5
- ECMA6
ECMA2015 / ECMA2016 / ECMA2017
ES6 常用语法
let关键字
-
语法
let 变量名 = 值;
let声明的变量 存在块状作用域 / 可以替代闭包的一些应用
let声明的变量 不存在变量提升
let变量不能重复声明
全局变量跟顶层对象 不再挂钩 (为了兼容,var变量仍然挂钩)
const关键字
- 定义常量
- 常量一旦定义不能更改值,更不能重复声明
- 常量同样有 全局作用域/函数作用域/块作用域 (同let变量)
- 全局常量与顶层对象不挂钩
对象的简写
属性简写
-
方法的简写
{
fn(){
}
}
变量的解构赋值
数组的结构
- 保证等号两遍 数组形式统一
- 如果有变量没有对应的值 会赋值 undefiend
对象的结构
let {bar:bar, foo:foo} = {bar:值, foo:值}
let {bar, foo} = {bar:值, foo:值}
特殊对象的结构
事件应用
- 交换两个变量值
- 提取json的变量
- 定义函数(方法) 选项的默认值
- 提取模块中的方法
扩展运算符 ...
- 把类数组对象或者遍历对象(map, set) 转换为 纯数组
for .. of 遍历
- 可以遍历纯属组 类数组 (map, set)
箭头函
-
语法
()=>{}
一般作为回调函数
箭头函数中的this 是 父作用域中的 this
箭头函数不可以作为构造函
箭头函数中不能用arguments
函数的参数问题
- 参数可以设置 默认值
- arguments的代替方案
模板字符串
- 定界符 `` 里面可以换行
- 模板字符串 内使用变量 ${变量名}
HTTP
请求
- 客户端向服务器发起的
- 请求方式 GET POST
- 请求的是文件
- 请求数据包包含请求头和请求体
响应
- 服务器给客户端叫做响应
- 响应的数据包 响应头和响应体
GET 和 POST的区别
- 请求头 get方式没有 请求体
静态文件 动态文件
- 静态文件: html css js 图片 字体文件 视频 等等 都是静态文件
- 动态文件: php/jsp/asp.net/node.js