数组去重
- // 方法 1:es6
- let arr = [1, 2, 3, 2, 1, 3];
- let newArr=Array.from(new Set(arr))
- console.log(newArr)//(3) [1, 2, 3]
- // 方法 2 使用 filter 过滤函数去重.
- var arr = [1, 2, 3, 1, 2, 3];
- var newArr=arr.filter((v, i, arr) => arr.indexOf(v) === i)
- console.log(newArr)//(3) [1, 2, 3]
- // 方法 3: 遍历数组法.
- function unique(array) {
- var n = []; // 一个新的临时数组
- // 遍历当前数组
- for (var i = 0; i <array.length; i++) {
- if (n.indexOf(array[i]) == -1)
- n.push(array[i]);
- // 如果当前数组的第 i 已经保存进了临时数组, 那么跳过,
- // 否则把当前项 push 到临时数组里面
- }
- return n;
- }
- console.log(unique([1, 2, 3, 1, 2, 3]))//(3) [1, 2, 3]
网页从输入网址到渲染完成经历了哪些过程
域名解析
发起 TCP 的 3 次握手
建立 TCP 连接后发起 http 请求
服务器端响应 http 请求, 浏览器得到 html 代码
浏览器解析 HTML 代码, 并请求 HTML 代码中的资源
浏览器对页面进行渲染呈现给用户
MVVM 和 MVC 的区别
MVC 和 MVVM 的区别其实并不大. 都是一种设计思想.
主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel.
MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低, 加载速度变慢, 影响用户体验. 当和 Model 频繁发生变化, 开发者需要主动更新到 View.
ViewModel, 是把 MVC 里的 controller 的数据加载, 加工功能分离出来
vue 数据双向绑定原理
vue 实现数据双向绑定主要是: 采用数据劫持结合发布者 - 订阅者模式的方式, 通过 Object.defineProperty() 来劫持各个属性的 setter,getter, 在数据变动时发布消息给订阅者, 触发相应监听回调. 当把一个普通 JavaScript 对象传给 Vue 实例来作为它的 data 选项时, Vue 将遍历它的属性, 用 Object.defineProperty() 将它们转为 getter/setter, 在属性被访问和修改时通知变化.
说说对原型链的理解
原型链: 用于查找引用类型的属性, 查找属性会沿着原型链依次进行, 如果找到该属性会停止搜索并做相应的操作, 否则将会沿着原型链依次查找直到结尾.
原型: 所有的函数都有一个特殊的属性 prototype(原型),prototype 属性是一个指针, 指向的是一个对象 (原型对象), 原型对象中的方法和属性都可以被函数的实例所共享. 所谓的函数实例是指以函数作为构造函数创建的对象, 这些对象实例都可以共享构造函数的原型的方法.
闭包概念
闭包就是能够读取其他函数内部变量的函数. 由于在 JavaScript 语言中, 只有函数内部的子函数才能读取局部变量, 因此可以把闭包简单理解成 "定义在一个函数内部的函数". 所以, 在本质上, 闭包就是将函数内部和函数外部连接起来的一座桥梁.
call 和 apply 区别
接收的第一个参数都是要修改的 this 指向的对象, 接收的第二个参数不同, call( ) 方法接受的是若干个参数的列表, apply( ) 方法接受的是一个包含多个参数的数组
减少页面加载时间的方法
1. 文件拼合, 减少 http 请求.
2. 文件压缩: 将需要传输的内容压缩后传输到客户端再解压
3. 使用 CDN
4. 使用缓存, 避免重复加载同意文件
5.CSS 文件放置在 head,JS 放置在文档尾部
vue 的生命周期有哪些
总共分为 8 个阶段创建前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 后
beforeCreate: 可以在这加个 loading 事件
created: 实例已经完成以下的配置: 数据观测, 属性和方法的运算, watch/event 事件回调
beforeMount: 在挂载开始之前被调用: 相关的 render 函数首次被调用
mounted: 此周期 dom 已经渲染完成
beforeUpdate: 数据更新时调用, 发生在虚拟 DOM 重新渲染和打补丁之前. 你可以在这个钩子中进一步第更改状态, 这不会触发附加的重渲染过程
updated: 当这个钩子被调用时, 组件 DOM 已经更新, 避免在此期间更改状态
- beforeDestroy
- destroyed
盒模型
标准: margin,border,padding,content, 元素的宽度 width=content 的宽度
IE:margin,border,padding,content, 元素的宽度 width=border + padding + content
BFC(块格式化上下文)
特性:
1.BFC 是一个独立的容器, 容器内子元素不会影响容器外的元素. 反之亦如此.
2. 在同一个 BFC 中, 两个相邻的块级盒子的垂直外边距会发生重叠.
3.BFC 区域不会和 float box 发生重叠.
4.BFC 能够识别并包含浮动元素, 当计算其区域的高度时, 浮动元素也可以参与计算了.
5. 盒子从顶端开始垂直地一个接一个地排列, 盒子之间垂直的间距是由 margin 决定的.
创建 BFC
1. 根元素或包含根元素的元素
2. 浮动元素 float = left | right 或 inherit(≠ none)
3. 绝对定位元素 position = absolute 或 fixed
4.display = inline-block | flex | inline-flex | table-cell 或 table-caption
5.overflow = hidden | auto 或 scroll (≠ visible)
为什么 rem 方式下的根字号要设置成 62.5%, 有没有更精准的方法
因为设了 62.5% 后就有 1rem = 10px, 便于用 rem 来指定元素的尺寸, 这样响应式的时候可以直接改变 font-size 而无需计算其他各种样式中出现的尺寸了. 用 rem 定义尺寸的另一个好处是更能适应缩放 / 浏览器设置字体尺寸等情况 (因为 rem 相对于字体大小, 会同步改变).
vue 父子组件传值
父传子
父组件代码:
- // 子组件 HTML
- <Son :m="msg"><Son/>
- // 父组件 data
- data(){
- return {
- msg:"我是父组件要传递的值"
- }
- }
子组件代码:
- <span>{{m}}<span/>
- // 子组件接收 m
- props:{
- m:String
- }
子传父
子组件代码:
- //HTML
- <input v-model="sonData" @change="setData"/>
- //JS
- data() {
- return {
- sonData:"子组件要传递的值"
- };
- },
- methods: {
- // 子传父
- setData(){
- this.$emit("msg",this.sonData)
- }
- }
父组件代码:
- //HTML
- <Son @msg="getData"/>
- //JS
- data(){
- return{
- sonData:'',
- }
- },
- methods:{
- getData(data){
- this.sonData=data
- },
- }
vue-router 动态路由
在 router 目录下的 index.JS 文件中, 对 path 属性加上 /:id.
使用 router 对象的 params.id.
vue-router 有哪几种导航钩子
1. 全局导航钩子: router.beforeEach(to,from,next), 作用: 跳转前进行判断拦截.
2. 组件内的钩子;
3. 单独路由独享组件
来源: http://www.jianshu.com/p/a1fdbd2c0bc7