响应式布局的理解

响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕下显示不同的内容,一般把屏幕分成四种,超小屏(手机)768px以下的,小屏幕设备(ipad等)768px-992px,中屏设备,一般指的是就是电脑,992px-1200px,宽屏设备1200px以上的,最简单的方式是通过rem或者百分比实现的,最重要的是要加一个视口,因为移动端的视口是一个固定的值,通常是980px,所以需要设置视口让宽度等于设备的真实宽度

对懒加载的理解

懒加载是对那种数据量比较大,图片比较多的网站所应用的优化网站速度的一种方式,一般我们使用都是用一个基于jQuery的lazyload插件

数组的方法

splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

splice(index,要删除的数量,要添加的元素);

事件的三要素

事件源        谁触发的事件事件名称      触发了什么事件事件处理程序  触发以后要做什么

事件的三个阶段

捕获目标冒泡

为什么可以实现事件代理

GET和POST的区别

get请求一般是从服务器请求数据,post请求一般是向服务器发送数据;

get请求数据保存在url地址栏,然后通过地址将数据发送到服务器,这种方式发送数据较小,而且安全性差,优点是比较高效;

post请求是将数据放在请求体中发送给服务器,优点是较安全,发送数据量比较大,可以传输文件,缺点是比较低效,

服务端开发的本质

请求处理响应

H5C3的新特性

H5文件声明不需要指定版本

H5增加了很多新的语义化的标签,比如head,nav,main,footer等,让代码的可读性更高,

H5增加了很多表单的新属性,如multiple,placeholder,required等等,还有一些输入类型email,number,tel,url等等

新增canvas画布,

媒体元素video audio

本地存储localstorage sessionstorage等等

C3主要添加了颜色rgba,hsla,盒模型,2D/3D转换,动画等等

项目分为哪几个阶段

需求调研,需求分析

原型设计

编码

测试

上线

正则表达式

关系型数据库与非关系型数据库存储结构的区别

*1. 数据库服务的区别

​ *非关系型相当于终端窗口

​ *关系型相当于一个Excel软件

*2.一个数据库服务下可以有多个数据库

​ *在关系型中数据库相当于一个excel文件

​ *在非关系型中数据库相当于一个JSON文件

​ *一个数据库中可以有多个集合

​ *在关系型中表现为一个一个的表格

​ *在非关系型中表现为json对象中的数组

​ *一个集合中可以有很多行数据

​ *在关系型中表现为行

​ *在非关系型中表现为json对象数组中的对象

项目中遇到的问题

1.逻辑顺序有错误,删除功能的时候删除和渲染的顺序发生错误

什么是闭包

用过得库

moment,jquery,zepto,echarts,vue框架,基于vue的mint-ui(移动端),element(PC端)

父子组件通讯

将父组件的值传递到子组件:

在父组件中要加载子组件的模板标签内部设置一个自定义属性,属性名='属性值'

然后再子组件中用props进行声明props:['属性名'],这样就可以在子组件中得到这个值了

将子组件的值传递到父组件:

通过v-on监听自定义事件的方式,将子组件的值传递到父组件

使用$on(eventName)监听事件

使用$emit(eventName)触发事件

首先在父组件挂载子组件的标签内部用v-on:'自定义事件名称'='事件执行函数'的方式绑定一个自定义事件,然后在methods里边定义事件执行函数,父组件部分完成

子组件部分通过this.$emit('自定义事件名称',需要传递的值)

非父子组件通讯

当数据量小,需要传值的结构较简单的时候可以用一个公共的vue对象,一般叫bus来传递,

首先是创建一个公共的js文件,内部创建一个名为bus的vue对象,将此对象导出,然后再需要传值的两个文件分别引入这个对象,

接收方:通过bus.$on('自定义事件',事件处理函数)的方式接收数据

发送方:通过bus.$emit('自定义事件名称',需要传递的值)的方式发送数据

当数据量大,需要多个组件进行通讯的时候要用到Vuex

生命周期钩子应用场景

版本控制工具git常用命令

git init 初始化git仓库

git status 查看文件的状态

git add . 添加文件到暂存区

git commit -m '提交日志' 将文件从暂存区提交到仓库区,并生成版本号

git config --global user.email '' 配置用户信息

git config --global user.name ''

git log 查看提交日志

git reset --hard 版本号 版本退回

git branch 分支名 创建分支

git checkout 分支名 切换分支

git checkout -b 分支名 创建并切换分支

git branch 查看分支

git merge 分支名 合并分支到当前分支

git branch -d 分支名 删除分支

git push origin master/分支名 提交代码到网上

CMD AMD 模块化规范

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

CMD 推崇依赖就近，AMD 推崇依赖前置,依赖必须一开始就写好.

AMD 的 API 默认是一个当多个用,有全局和局部之分,CMD没有全局与局部之分,是根据模块的组件来加载,API简单纯粹.

谈一下面向对象,面向对象的三个属性

封装,继承,多态

webpack开发环境的配置

constHtmlWebpackPlugin=require('html-webpack-plugin');//这个插件的作用是根据模板自动生成index文件

//导出配置对象

exportdefault{

entry:'入口文件路径',

//开发环境不需要配置出口文件

module:{

//配置规则

rules:[

{

test:/\.vue$/,//需要匹配的文件规则

use:[

{loader:"vue-loader"}//依赖于什么loader

]

},

{

test:/\.css$/,//需要打包支持的文件

use:[

{loader:"style-loader"},

{loader:"css-loader"}

]

},

{

test:/\.(ttf|png|svg|gif|jpg)$/,//需要打包支持的文件

use:[

{loader:"url-loader"}

]

}

]

},

plugins:[//需要用到的插件

newHtmlWebpackPlugin({

template:'template.html',//根据哪个模板

filename:'index.html'//要生成的文件

})

]

}

​

webpack打包工具的使用

1.创建一个生产阶段的webpack配置文件

2.在开发阶段的配置文件的基础上添加针对性的代码

3.可以在package.json文件中的scripts下配置快捷指令"build":"webpack --progress --config webpack.config.prod.js"在终端中通过npm run build执行这个命令

4.//打包之前，删除dist目录,安装npm i clean-webpack-plugin --save--dev代码如下:

varCleanWebpackPlugin=require('clean-webpack-plugin');

plugins: [

//打包之前，删除dist目录，写在其它插件前面

newCleanWebpackPlugin('dist')

]

5.添加es6--->es5的配置信息: 安装包:npm i babel-loader babel-core babel-preset-env --save--dev在当前根目录下创建一个babel配置文件.babelrc,写预设代码{"presets": ["env"]},然后在webpack.config.prod.js中对js进行转换

6.对bundle.js和index.js进行压缩:参考文档:https://cn.vuejs.org/v2/guide/deployment.html

在webpack.config.prod.js中配置插件信息:

压缩bundle.js:

varwebpack=require('webpack');

plugins: [

newwebpack.DefinePlugin({

'process.env': {

NODE_ENV:'"production"'//将环境设置为生产环境

}

}),

newwebpack.optimize.UglifyJsPlugin({

// 对bundle.js进行压缩配置

compress: {

warnings:false//去掉警告信息

},

comments:false//去掉版权等注释

})

]

压缩index.html:

plugins: [

newHtmlWebpackPlugin({

template:'template.html',//模板

filename:'index.html',//生成的文件

minify:{

collapseWhitespace:true,//压缩空格

removeComments:true,//去除注释

minifyJS:true,//压缩js

minifyCSS:true//压缩css

}

})

]

7.对bundle.js进行优化

第三方包,图片,第三方样式都会造成bundle.js过大

抽离图片,在原先url-loader的基础上添加参数,代码如下:

{

test:/\.(ttf|png|gif|svg)$/,

use: [

{

/*

limit：

表示的是一个阀值,如果当前我们资源中的图片大小

4kb就从bundle.js中剥离出来，如果小于4kb打包进bundle.js,4kb只是我这设置的一个值,实际开发过程中要根据业务来

name:抽离出来的图片，放在哪个文件夹下，用什么文件名称命名

[name]代表你原始的文件名称

[hash:5] 避免图片换了之后，浏览器还加在原先的图片,解决缓存的问题

[ext] 图片本身的拓展名

*/

loader:"url-loader?limit=4000&name=images/[name]-[hash:5].[ext]"

}

]

}

抽离第三方包代码,

entry: {//入口

//属性名称，是最终生成好的js文件名称，值是我们安装时候的第三方包的名称

mintUi:['mint-ui'],

moment:['moment'],

quanjiatong:['vue','vue-router','vuex'],

vueResource:['vue-resource'],

vuePreview:['vue-preview'],

axios:['axios'],

bundle:'./src/main.js'//别忘记自己写的源代码

},

output: {//出口

path:path.join(__dirname,'dist'),

filename:'js/[name].js'

},

plugins: [

//抽离第三方包的，这里不要写bundle.js

newwebpack.optimize.CommonsChunkPlugin({

name: ['mintUi','moment','quanjiatong','vueResource','vuePreview','axios'],

// filename: "vendor.js"

// (给 chunk 一个不同的名字)

minChunks:Infinity,

// (随着 entry chunk 越来越多，

// 这个配置保证没其它的模块会打包进 vendor chunk)

}),

]

抽离第三方样式,安装插件npm install --save-dev extract-text-webpack-plugin代码如下:

constExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={

module: {

rules: [

{

test:/\.css$/,

use:ExtractTextPlugin.extract({

fallback:"style-loader",

use:"css-loader"

})

}

]

},

plugins: [

newExtractTextPlugin("styles.css"),

]

}

8.vue路由懒加载优化

参考文档:https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

如果您使用的是 Babel，你将需要添加syntax-dynamic-import插件npm install --save-dev babel-plugin-syntax-dynamic-import，才能使 Babel 可以正确地解析语法。

第一步:把原先引入路由组件的方式改成const Foo = () => import('./Foo.vue')这种样式

第二步: 在.babelrc的配置文件里配置代码

{

"plugins": ["syntax-dynamic-import"]

}

对跨域的理解

浏览器存在同源策略,相同协议,相同域名,相同端口,只有同源的网站可以互相访问,虽然提高了安全性,但也会带来一些限制,

跨域就是访问不同源的网站,主要方法:

1.JSONP,通过script标签的src属性,

2.CORS,就是服务器实现cors接口,就可以跨域通信了,现在浏览器ie10+都是支持的(access-controll-allow-origin)

3.服务器反向代理,通过同源的服务器去请求其他服务器的信息再发给客户端.

url发现到返回发生了什么

1、DNS 域名解析2、建立 TCP 连接（三次握手）3、将用户输入的地址封装成 HTTP Request 请求报文 发送到服务器4、后台服务器接收到用户HTTP Request 请求报文5、后台服务器处理用户请求信息6、后台服务器将相应结果封装到 HTTP Response 响应报文中 发送给客户端7、用户浏览器接收到响应后开始渲染html、css，解析和执行 JavaScript 代码

浏览器的兼容问题

网站的性能优化

1.利用http的缓存机制,当用户发送请求的时候,先检查本地缓存,获取最后的修改时间,通过： If-Modified-Since， 发送Request给Web服务器。然后服务器将自身存储的文档的Last-Modified与请求头中的If-Modified-Since作比较,然后判断是否更新,如果是一样或者最后修改时间在缓存时间之前,Web服务器将发送304 Not Modified给浏览器客户端， 告诉客户端直接使用缓存里的版本。

2.使用预加载和懒加载,

懒加载是延迟加载,当用户浏览到相应的位置的时候再去加载图片,懒加载实现方法

​ 1.设置计时器延时加载setTimeOut()或者setinterval来实现

​ 2.设置判断条件,当满足某一条件的时候加载

​ 3.可视区加载,当浏览的相应位置的时候再去加载

预加载是提前加载,将加载图片保存在本地缓存,当用户浏览的时候从本地缓存读取

预加载一种是通过css设置背景图片位置到页面范围以外,当网页加载的同时图片一块加载,但是会增加网页加载时间,可以通过js使用回调函数的方式,先创建一个图片对象new Image(),将要加载的图片地址保存到图片对象的src属性中,然后通过回调函数的方式在window.onload事件,即网页加载的时候通过回调函数的方式将图片路径保存到图片对象中,实现异步加载

3.减少http请求,采用Base64的编码方式将图片直接嵌入到网页中,或者将多个小图标做成一张精灵图从而实现减少http请求

4.减少DNS查询次数,通过增加TTL(Time-To-Live)的值延长DNS服务器上的缓存时间来提高加载速度.

5.简化代码,使用模块化,在合适的时机加载合适的模块,多使用回调函数进行异步加载.

cookie,session,localstorage,sessionstorage之间的异同

cookie储存量小,只有4kb左右,储存在浏览器端,始终在同源的http请求中携带,因为cookie保存在本地,所以不太安全,适合保存一些不太重要的信息标识等,重要信息储存在session中,session是储存在服务器端的,相较而言更加安全;

localstorage,sessionstorage是H5新增的,都是储存在浏览器端的,sessionstorage大小有5M左右,生命周期在浏览器窗口被关闭就失效了,并且作用域只在当前浏览器窗口的同源网站生效,localstorage的大小能有20M左右,生命周期是只要不手动删除就会一直存在,并且可以在不同浏览器窗口的同源网站互相访问;

MVC和MVVM

MVC:

M层model,数据层,负责处理数据,

V层view,视口层,负责展示页面

C层controller,控制层.负责协调M层和C层,处理数据,将M层的数据渲染到V层,展示给用户

MVVM:

M层

VM层view-model

V层

MD5,对称加密,非对称加密

md5密码加密【不可以解密】

md5、sha1、sha256、sha512

上面这些叫做哈希算法，抽取特征值，经过hash的计算，都能得到定长（比如md5算出来是32位），算出来的202cb962ac59075b964b07152d234b70是不可逆的

​

应用场景:适合做密码加密，密码可以加盐

aes 对称加密算法【可以解密】

加密和解密都是用的同一把钥匙

应用场景:支付

参考:https://www.npmjs.com/package/aes256

rsa 非对称加密算法【可以解密】

加密和解密用的不是同一把钥匙

公钥&私钥

就像鸳鸯，你用私钥加密的数据，必须要有对应的公钥解密

你用公钥加密，必须使用对应的私钥解密

注意：

公钥&私钥必须成对使用

私钥解密 ---> 对应公钥解密

公钥加密 ---> 对应私钥解密

​

应用场景:支付

axios

fetch

fetch(url).then(res=>res.json()).then(data=>console.log(data)).catch(e){}

浏览器的重绘和重排

谈重排首先要了解浏览器渲染页面的过程,首先浏览器会先从磁盘或者网络读取html,然后通过设置的编码格式将其转换为相应的字符串,然后将字符串令牌化,就是生成这种类型的字符串,然后在将他们转换成对象,对象里边有他们的规则和属性,最后根据这些对象之间的关系构建一个dom树,在构建dom树的时候,当解析到head部分link标签引入一个css样式文件的时候,浏览器会预测需要这个资源去渲染页面,就会先去根据路径请求这个文件,然后会进行跟构建dom树相似的操作去构建一个cssom树,所有文件加载完成之后会从dom树的根节点开始遍历每个可见的对象,为每个可见对象匹配对应的cssom规则,生成有内容和样式的可见节点,这就形成了渲染树,但是这时候还没有计算他在视口设备上的位置和大小尺寸,这时候就要进行布局,也就是重排,这时候又会从根节点开始遍历每个节点然后计算每个节点的位置信息等等,布局完成之后就会渲染到页面中

处理 HTML 标记，构建 DOM 树

处理 CSS 标记，构建 CSSOM 树

将 DOM 树和 CSSOM 树融合成渲染树

根据渲染树进行布局，计算每个节点的几何信息

在屏幕上绘制各个节点

当dom元素的几何属性发生变化,dom结构发生变化,获取某些属性的时候(offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)),这时候原先的节点就会失效,浏览器就会根据新的规则重新生成页面,这时候就会触发重排,重排一定会触发重绘,此外浏览器窗口发生大小发生改变也会触发重排.

重绘重排都会付出高昂的性能代价,

所以我们要尽可能的减少重排次数和重排的影响范围

1.js改变dom元素的样式属性的时候,尽量将多次操作合并为一次,就是设置一个公共的类名,直接通过添加删除类名的方式操作多个样式属性

2.将需要多次重排的元素进行absolute和fixed定位,脱离标准流,这时候他的变化就不会影响到其他元素.

3.在内存中多次操作节点再将它添加到文档中去,例如异步获取表格数据渲染页面,先将获取的数据在内存中构建成完整的HTML片段在添加到文档中,而不是一行一行的循环渲染

4.如果对一个元素要进行复杂操作,可以先用display:none将其隐藏,等操作完成之后再显示出来,这样就只会在显示与隐藏的时候触发2次重排,

5.在经常获取那些会触发重排的属性的时候,可以将他们缓存到变量中.

继承,深拷贝与浅拷贝

​

vue组件的递归

vue怎么自定义一个指令

// 注册一个全局自定义指令 `v-focus`

Vue.directive('focus', {

// 当被绑定的元素插入到 DOM 中时……

inserted:function(el) {

// 聚焦元素

el.focus()

}

})

//如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {

focus: {

// 指令的定义

inserted:function(el) {

el.focus()

}

}

}

vue-cli脚手架的使用或者自己搭配环境

ajax的封装

jQuery拓展extend的使用

$.extend(object1, object2);合并多个对象,将后边的对象的内容合并到第一个对象里,重复的属性会覆盖前边对象的属性,但是多出的属性不会被继承(浅拷贝)

$.extend(true, object1, object2);合并多个对象,将后边的对象的内容合并到第一个对象里,重复的属性会覆盖前边对象的属性,并且多出的属性会被继承(深拷贝)

代码栗子如下:

varobject1={

apple:0,

banana: {

weight:52,

price:100

},

cherry:97

};

varobject2={

banana: {

price:200

},

durian:100

};

​

//默认情况浅拷贝

$.extend(object1,object2);

//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

//object2的banner覆盖了object1的banner，但是weight属性未被继承

//深拷贝

// $.extend(true, object1, object2);

//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

//object2的banner覆盖了object1的banner，但是weight属性也被继承了呦

​

call,apply,bind的区别

call,apply都是改变函数的执行上下文,第一个的参数是要指向的那个对象,第二个参数是要传递的数据,call的参数要一个一个传,apply的参数是一个数组,将要传的值放到数组中,

bind()是es5中的方法，他也是用来实现上下文绑定，bind()和call与apply不同。bind是新创建一个函数，然后把它的上下文绑定到bind()括号中的参数上，然后将它返回。

所以，bind后函数不会执行，而只是返回一个改变了上下文的函数副本，而call和apply是直接执行函数。

如何让一个不定宽高的盒子水平垂直居中(兼容所以浏览器)

.box1{

height:100px;

background-color:blue;

display:table-cell;

text-align:center;

vertical-align:middle;

}

.box2{

background-color:red;

display:inline-block;

vertical-align:middle;

}

​

.box1{

position:relative;

height:100px;

background-color:blue;

}

.box2{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background-color:red;

}

watch 与computed的区别

​

export 与export default

vue双向绑定原理

我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view

大致思路： 首先Vue会使用documentfragment劫持根元素里包含的所有节点，这些节点不仅包括标签元素，还包括文本，甚至换行的回车。然后Vue会把data中所有的数据，用defindProperty()变成Vue的访问器属性，这样每次修改这些数据的时候，就会触发相应属性的get，set方法。接下来编译处理劫持到的dom节点，遍历所有节点，根据nodeType来判断节点类型，根据节点本身的属性（是否有v-model等属性）或者文本节点的内容（是否符合{{文本插值}}的格式）来判断节点是否需要编译。对v-model，绑定事件当输入的时候，改变Vue中的数据。对文本节点，将他作为一个观察者watcher放入观察者列表，当Vue数据改变的时候，会有一个主题对象，对列表中的观察者们发布改变的消息，观察者们再更新自己，改变节点中的显示，从而达到双向绑定的目的。

vue+webpack项目搭建

1.首先搭建项目基本结构

src文件夹:项目源代码所在的文件夹

main.js 项目打包入口的文件

App.vue 项目启动之后用户看到的第一个组件

package.json 项目描述文件,通过npm init配置

webpack.config.dev.js ： 开发阶段的webpack的配置文件

2.编写基本配置代码

1.在app.vue中写项目启动所要呈现的内容,写在template之间

2.在main.js中引入App.vue

使用vue框架把App.vue作为项目启动后用户看到的第一个组件

安装vue:cnpmivue--save

引入VueimportVuefrom'vue'

创建根实例，在根实例中，让我们的框架第一个显示App.vue,代码如下:

newVue({

el:'#app',

render:h=>h(App)//function(createElement){return createElement(App)}

})

3、在webpack.config.dev.js中配置打包的指令

entry:'main.js路径'//入口

module:{rules:[{test:/\.vue$/,use:[{loader:'vue-loader'}]}]}

loader:

安装vue-loader对我们.vue结尾的文件打包

安装方式：cnpmivue-loadervue-template-compilercss-loaderstyle-loader--save-dev

4、使用`html-webpack-plugin`，来根据参照文件(template.html)，生成一个index.html

4.1、先写好template中的内容，里面要写上id=app的div

4.2、安装:cnpmihtml-webpack-pluginwebpackwebpack-dev-server--save-dev，

//在webpack.config.dev.js中写好代码

varhtmlWebpackPlugin=require('html-webpack-plugin');//不能用import导入

plugins:[

newhtmlWebpackPlugin({

template:'template.html',//依赖的模板文件

filename:'index.html'//要生成的文件

})

]

参考:https://github.com/jantimon/html-webpack-plugin

5、使用webpack-dev-server打包

在我们项目的根目录下，运行下面的代码:

webpack-dev-server--progress--configwebpack.config.dev.js--open--port6008--hot

可以在package.json中设置快捷代码:

"scripts":{"dev":"webpack-dev-server --progress --config webpack.config.dev.js --open --port 6008 --hot"}//通过npm run dev指令调用

解释:

--progress查看打包进度

--configxxx.js指定打包的配置文件

--open打开默认浏览器

--port6008指定打开的端口，如果不指定，默认是8080

--hot启动热重载，告诉vue-loader可以进行热重载了

注意：

开发阶段，我们生成的index.html及bundle.js都发布到`webpack-dev-server`这个服务器上面去了，我们在项目里面是看不到生成的实实在在的这些文件的

3.配置路由

1.一般编写移动端的页面时会用到基于vue的mint-ui的一个组件库

安装:cnpmimint-ui--save/-S

在main.js中集成到项目中

importMintUIfrom'mint-ui';

import'mint-ui/lib/style.css';

Vue.use(MintUI);

2.配置路由

2.1安装vue-router:npmivue-router-S

2.2集成到项目中:

importvueRouterfrom'vue-router'

Vue.use(vueRouter);//这时候vue对象的原型里就有了$router,$route两个方法

2.3将需要使用路由加载的vue组件文件引入

importhomefrom'./components/home/home.vue'

2.4创建路由的实例对象,并将组件与路由路径进行绑定

constrouter=newvueRouter({

routes:[

{path:'/',redirect:'/home'},//路由重定向,将默认跟组件重新定向指向首页模块

{path'/home',component:home}//将home组件与/home这个路由路径绑定

]

})

2.5将路由的实例对象router注入到vue的根实例中newVue({router})

3.将文件根据路由路径绑定的组件加载到相应的位置

//路由出口,所有路由加载的组件都从这里显示到页面

4.实现页面的跳转,即加载不同的组件

新闻咨询

//将需要点击跳转的部分用router-link标签包裹,to属性内写的是要跳转的路由地址(声明式导航)

4.获取数据信息

1.用vue-resource发送网络请求获取数据

1.1安装:npmivue-resource-S

1.2集成到项目中

importvueResourcefrom'vue-resource'

Vue.use(vueResource);//vue原型对象中会多出$http的对象(vue-resource对象)

1.3使用方法

this.$http.get(url).then(res=>{console.log(res)})

this.$http.post(url,{要传递的数据(对象)}).then(res=>{console.log(res)})

//注意:因为vue-resource已经不再更新,所以推荐用axios发送网络请求

2.用axios发送网络请求

1.1安装:npmiaxios-S

1.2集成到项目中

importaxiosfrom'axios'

Vue.prototype.$axios=axios;//vue原型对象中会多出$axios的对象,及他的方法

1.3使用方法

this.$axios.get(url).then(res=>{console.log(res)})

this.$axios.post(url,{要传递的数据(对象)}).then(res=>{console.log(res)})//json类型

this.$axios.post(url,'content='+content).then(res=>{console.log(res)})//键值对类型

​

写一个监听事件兼容所以浏览器

functionaddEvent(obj,type,handle){

try{//chrome,firefox,opera,safari,ie9版本

obj.addEventListener(type,handle,false);

}catch(e){//ie8以下

obj.attachEvent('on'+type,handle);

}catch(e){//早起浏览器

obj['on'+type]=handle;

}

}

怎么从服务器主动推送数据给浏览器

webpack主要用处和好处有哪些

cookie都有哪些参数, 怎么判断两个cookie是同一个

对组件化的理解

localstorage都有哪些应用场景

1.用于储存搜索框的历史记录

2.用于储存购物车的历史记录

3.

input和textarea有什么区别

HTTP状态码知道哪些？

100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息200  OK  正常返回信息201  Created  请求成功并且服务器创建了新的资源202  Accepted  服务器已接受请求，但尚未处理301  Moved Permanently  请求的网页已永久移动到新位置。302 Found  临时性重定向。303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。304  Not Modified  自从上次请求后，请求的网页未修改过。400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401 Unauthorized  请求未授权。403 Forbidden  禁止访问。404 Not Found  找不到如何与 URI 相匹配的资源。500 Internal Server Error  最常见的服务器端错误。503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

js去重

以下是展示三种方法：

Array.prototype.unique1 = function() {

var n = []; //一个新的临时数组

for(var i = 0; i < this.length; i++) //遍历当前数组

{

//如果当前数组的第i已经保存进了临时数组，那么跳过，

//否则把当前项push到临时数组里面

if(n.indexOf(this[i]) == -1) n.push(this[i]);

}

return n;

}

​

Array.prototype.unique2 = function() {

var n = {},

r = []; //n为hash表，r为临时数组

for(var i = 0; i < this.length; i++) //遍历当前数组

{

if(!n[this[i]]) //如果hash表中没有当前项

{

n[this[i]] = true; //存入hash表

r.push(this[i]); //把当前数组的当前项push到临时数组里面

}

}

return r;

}

​

Array.prototype.unique3 = function() {

var n = [this[0]]; //结果数组

for(var i = 1; i < this.length; i++) //从第二项开始遍历

{

//如果当前数组的第i项在当前数组中第一次出现的位置不是i，

//那么表示第i项是重复的，忽略掉。否则存入结果数组

if(this.indexOf(this[i]) == i) n.push(this[i]);

}

return n;

}

js操作获取和设置cookie

//创建cookie

function setCookie(name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

if (expires instanceof Date) {

cookieText += '; expires=' + expires;

}

if (path) {

cookieText += '; expires=' + expires;

}

if (domain) {

cookieText += '; domain=' + domain;

}

if (secure) {

cookieText += '; secure';

}

document.cookie = cookieText;

}

​

//获取cookie

function getCookie(name) {

var cookieName = encodeURIComponent(name) + '=';

var cookieStart = document.cookie.indexOf(cookieName);

var cookieValue = null;

if (cookieStart > -1) {

var cookieEnd = document.cookie.indexOf(';', cookieStart);

if (cookieEnd == -1) {

cookieEnd = document.cookie.length;

}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

}

return cookieValue;

}

​

//删除cookie

function unsetCookie(name) {

document.cookie = name + "= ; expires=" + new Date(0);

}

requireJS简单介绍

​