vue
vuex 的状态
state--存放项目中需要多组件共享的状态
mutations---更改state里状态的方法
getters---就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。
actions---它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
modules---就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。
Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action – mutation – state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据改变过程，使code debug更加方便。
vue原理
1、劫持所有属性，watcher监听，属性有变化，更新view
2、解析指令，watcher监听，数据变化，更新view
Vue 修饰符.prevent
.stop
.prevent
.capture
.self
.once
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
Vue如何实现双向数据绑定
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有属性遍历
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
};
function defineReactive(data, key, val) {
observe(val); // 监听子属性
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
return val;
},
set: function(newVal) {
val = newVal;
}
});
}
react跟Vue区别
状态管理vs对象属性
Jsx vs 模板
单向流，双向数据绑定
Vue keepalive
created钩子中就能缓存
meta 添加keepalive
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
对应钩子
actived，deactived
Vue钩子，生命周期
beforeCreate,created,beforemount,mount,beforeupdate,update,beforeDestory,destory
el为实例挂载元素
vue 动态组件
:is
<component v-bind:is="currentView"></component>
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
render可直接渲染dom
虚拟Dom,创建就一个包含元素信息的对象，都通过对象属性，子节点信息来创建真实dom
sel 选择器
data 绑定的数据
children 子节点数组
text 当前text节点内容
elm 对真实dom element的引用
key
Html渲染过程
Sass
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
promise 用来传递异步操作
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
requestanimationframe
http
请求头
Host,
User-Agent,
Content-Type,
Content-Length,
Connection
Content-type 定义网络文件以及网页的编码，决定浏览器将用什么格式，什么编码读取文件
Cache-Control 请求和响应遵循的缓存机制
[1] no-cache ---- 不要读取缓存中的文件，要求向WEB服务器重新请求
[1] no-store ---- 请求和响应都禁止被缓存
[2] max-age： ---- 表示当访问此网页后的max-age秒内再次访问不会去服务器请求，其功能与Expires类似，只是Expires是根据某个特定日期值做比较。一但缓存者自身的时间不准确.则结果可能就是错误的，而max-age,显然无此问题.。Max-age的优先级也是高于Expires的
1. 解析HTML
2. 构建DOM树
3. DOM树与CSS样式进行附着构造呈现树
4. 布局
5. 绘制
回流（reflow）和repaint（重绘）
reflow:
浏览某个节点属性变化，引起周围布局变化
repaint:
回流引入重绘
amd和cmd区别
CMD 推崇依赖就近
AMD 推崇依赖前置
原型和原型链
在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。
对象和对象之间也有关系，对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
Hsahchange
Jsonp跨域
事件捕获和事件冒泡
Html
Sass
Css3
Promise
Flex布局
Wersocket
去除所有空格:
str = str.replace(/\s+/g,"");
Call.apply
Math.floor. 向下取整
Math.ceil. 向上取整
Math.round 四舍五入
Arr.splice(index.deleteindex.item)
两者作用一致，都是把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法
Object.assign
深拷贝
JSON.parse(JSON.stringify(a))
jquery$.extend(false/true,{})默认浅拷贝，深拷贝true
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i];
// 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
if(prop === obj) {
continue;
}
if (typeof prop === 'object') {
obj[i] = (prop.constructor === Array) ? [] : {};
deepClone(prop, obj[i]);
} else {
obj[i] = prop;
}
}
return obj;
}
es6去重
new Set([1,2,1,2])
foreach map 区别
foreach不能，同时foreach不能break
map可以将返回值存储起来，同时map不能break
url输入流程
域名找到对应的ip
ip与服务器三次握手建立连接
浏览器与服务器进行通信
Webpack 工作原理
模块化
依赖管理：方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块。
合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS可以减少、优化代码的体积。
各路插件：babel把ES6+转译成ES5-，eslint可以检查编译期的错误……
let const 区别
let 申明后可以改变 cost 不可以改变
let 是块作用域声明
const let 不存在变量提升
箭头函数
不可以使用arguments
不可以用generator
不可以用当构造函数
This指向外部函数
new Fun() 所做的事情
1、创建一个空对象{}
2、继承构造函数中proptotype的对象属性
3、空对象赋值给构造函数的this对象
4、执行实例化
注：如果构造函数return 出来的是对象，则实例化后的是这个返回的对象。
否则，返回是空对象
Object.create(obj)
以某个实例对象作为模版，创建一个新的事例
例如：
var obj={
sex:'女'
}
var obj1=Object.create(obj)
obj1.sex='男'
console.log(obj1.sex)
console.log(obj.sex)
jquery
移动端兼容
Ios点击延迟
输入框number
点击穿透
音频视频无法自动播放
Fixed缺陷
Co模块
function co(generator) {
return function(fn) {
var gen = generator();
function next(err, result) {
if(err){
return fn(err);
}
var step = gen.next(result);
if (!step.done) {
step.value(next);
} else {
fn(null, step.value);
}
}
next();
}
}
网友评论