关于 ES6
- Promise
- 三种状态：pending | fullfilled | rejected
- 方法：p.then()、[p1, p2].all()、p.catch()
// catch 与 then 的区别, 如果不用 catch 的话，则then第二个函数会被调用，有了catch，错误被捕获,catch 返回一个promise,之后还可以接 then
var p1 = new Promise(function(resolve, reject) {
// resolve('Success');
// throw 'oh, no!';
JSON.parse("kkkklklk")
});
p1.catch(function(e) {
console.log(e);
}).then(function(){
console.log('after a catch the chain is restored');
}, function () {
console.log('Not fired due to the catch');
});
// 需要调用成功函数或者扔出一个错误，then的回调才会被调用
var p1 = new Promise(function(resolve, reject) {
// resolve('Success');
// JSON.parse("kkkklklk")
// reject()
throw 'oh, no!';
});
- Async
es7 特性
function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function add2(x) {
var a = await resolveAfter2Seconds(20);
var b = await resolveAfter2Seconds(30);
console.log(a, b)
return x + a + b;
}
add2(10).then(v => {
console.log(v); // prints 60 after 4 seconds.
});
- Generator
function* helloWorldGenerator() {
yield 'hello'
yield 'world'
return 'ending'
}
var hw = helloWorldGenerator()
console.log(hw.next()) // {value:hello, done:false}
console.log(hw.next()) // {value:world, done:false}
console.log(hw.next()) // {value:ending, done:true}
- 其他常用
关于 React
-
优点
- 申明式。状态可以预测，易于理解和调试的
- 基于组件，组件可以初始化自己的状态，也可以将数据传递出去，
- 写一次到处用，只代表 V层，不对其余部分作假设，适用于各种类型框架，如 MVC, MVVM 等
- 虚拟DOM, 最小化重绘，减少不必要的DOM操作
-
缺点
- 只代表 V层， 需结合其他
- 单向数据流
关于 Redux
“发生什么，导致什么改变, 变得清晰可预测"
- 只有一个store, 便于预测管理全部状态
- 改变state的唯一方式是触发一个action
- action, 描述了发生什么及传递信息
- reducer将action和state结合，并采用纯函数的方式，返回新的state
关于 Webpack
- 做什么: Javascript 应用程序打包器，递归创建依赖图，打包成少量bundle，由浏览器加载
- 如何配置：主要包括入口，出口，Loader（打包钱转换，test, use）, Plugins(完成loader做不了的事情，高度可配置，内置插件和第三方插件)
- 关于缓存
关于 immutable
- 为什么用: 提供强大的API，一旦生成，不会改变，可以放心操作对象，新生成的state, 只是改变了该节点及其父节点，相对深度复制要节约内存
关于 HTTP
输入浏览器地址，浏览器查找IP地址(DNS查找，浏览器缓存，系统缓存，路由缓存），向服务器发送一个HTTP请求
- 发起请求整个过程
- 三次握手建立TCP连接："你能听到我说话吗”，“我能，你能吗”，“我也能，我开始发送数据了”
- 浏览器发送请求命令：方法 + 路径 + 协议
- 发送头部信息，user-agent, host等，最后一个空行代表请求头发送完毕，post请求最后会继续提交请求体
- 服务器响应 协议版本号 状态码数字和字符
- 服务器发送应答头信息，自己的及被请求的，最后一个空行表示头信息发送结束
- 服务器发送数据，以头信息所描述的格式发送
- 关闭 TCP 连接
解决跨域
- Ajax 请求不同源跨域
- jsonp
通过向网页中添加<script>， script元素请求的脚本，直接作为代码运行，服务器收到请求后会将数据作为回调函数的参数，只要定义了该回调函数就会运行
- jsonp
function todo(data){
console.log('The author is: '+ data.name);
}
var script = document.createElement('script');
script.src = 'http://www.jianshu.com/author?callback=todo';
document.body.appendChild(script);
todo({"name": "fewjq"});
- CORS
- WebSocket 不受同源策略限制， 只需要服务器支持
原型继承
优化性能
css3 过渡、动画、变换
transition
transition: property duration timing-function delay
animation
animation: name duration timing-function delay
animation-name: 可以指定多个用逗号隔开
iteration-count(n, infinite)
animation-direction: normal, alternate
animation-play-state: playing | paused
@keyframs name {
to {
font-size: x-large
}
}
transform
transform：translate, scale(n), rotate(ndeg), skew(ndeg), matrix
transform-origin: % | 长度值 | x(left center right) y(top center bottom)
Canvas 与 Svg 不同处
Canvas 基于像素位图，及时模式，基于Canvas标签， 而SVG基于矢量，保留模式，基于xml元素
闭包
闭包由函数及创建该函数的环境构成
允许将函数与其所操作的环境关联起来
盒模型
box-sizing: content-box | padding-box | border-box
- content-box：默认，宽不包含padding 和 border
- padding-box: 宽包含padding 不包含 border
- border-box: 宽包含 border, padding
DOM 操作
通过css选择器选择元素
querySelector(<selector>)：返回匹配选择器的第一个元素
querySelectorAll(<selector>): 返回匹配的所有元素
媒体查询
- 媒体类型
- all
- screen
- speech
- 媒体属性
- width/height orientation
@media 媒体类型1， 媒体类型2 操作符 媒体属性
- width/height orientation
<meta name="viewport" content="width=device-width, initial-scale=1">
标准模式和混杂模式
DOCTYPE， 申明文档类型(document.doctype), 默认开启混杂模式
混杂模式(backCompat)会让IE的行为与IE5相同，不同浏览器在这种模式下差异很大
标准模式(css1Compat), 让IE行为更接近规范
接近标准模式，很多特性符合标准，也有混杂的地方
<!DOCTYPE html> h5 中定义标准类型
HTML 与 XHTML 区别
- xhtml ,可扩展的超文本语言，必须被正确标记且格式良好，必须被正确地嵌套、关闭、必须小写，必须有根元素
- xml 结构化存储及传输信息，焦点是数据的内容
link 与 <script> 位置
一般 link 放在前面，<script>放在后面
由于文本解析自上而下，如果 link 放在后面，那先出现的是html结构，没有样式；如果 script 放在前面，一方面js里有对元素的引用，会导致报错，另一方面，加载执行时间长，会导致页面空白。
BFC
BFC 形成：float 元素，position:absolute 元素，display属性table-cell,table-caption,inline-block,flex,or inline-flex 以下之一，及overflow 属性不为 visible 元素，会建一个新的块级上下文
同一个BFC中元素，左端对齐，触碰容器的左端，上下垂直排列，margin 叠加
作用：
- 消除 margin 叠加，使其位于不同的 BFC中
- 容纳浮动元素，使容器拥有高度
- 阻止文本环绕
清除浮动
- 使用空标签，clear: both,
- 对父元素，overflow: hidden, zoom:1
- 使用伪元素：::after {display: block, cntent:'.',height:0, clear: both, }
网友评论