常用问题2(2019.07.30)

 1 http状态码(某个数字开头分别代表哪里的问题)

常用状态码:

200("OK")一切正常。实体主体中的文档(若存在的话)是某资源的表示。
400("Bad Request")客户端方面的问题。实体主题中的文档(若存在的话)是一个错误消息。希望客户端能够理解此错误消息,并改正问题。
500("Internal Server Error")服务器方面的问题。实体主体中的文档(如果存在的话)是一个错误消息。该错误消息通常无济于事,因为客户端无法修复服务器方面的问题。
301("Moved Permanently")当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外,当客户端向一个资源的旧URI发送请求时,也发送此响应代码。
404("Not Found") 和410("Gone")当客户端所请求的URI不对应于任何资源时,发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况;410用于服务器端知道客户端所请求的资源曾经存在,但现在已经不存在了的情况。
409("Conflict")当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时,发送此响应代码。

状态码系列

1xx:通知,仅在与HTTP服务器沟通时使用。
2xx :表明操作成功了
3xx:客户端需要做些额外工作才能得到所需要的资源。它们通常用于GET请求。他们通常告诉客户端需要向另一个URI发送GET请求,才能得到所需的表示。那个URI就包含在Location响应报头里。
4xx:表明客户端出现错误。不是认证信息有问题,就是表示格式或HTTP库本身有问题。客户端需要自行改正。
5xx:表明服务器端出现错误

2 事件冒泡与事件捕获,,,事件代理(事件委托)

参考:https://www.jianshu.com/p/d3e9b653fa95

事件冒泡(触发顺序从当前元素到外层父级元素):事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点;
事件捕获(触发顺序从最外层父级元素到当前元素):思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件;
‘DOM 2级事件’规定的事件流包含3个阶段,事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获为截获事件提供机会,然后是实际的目标接收事件,最后一个阶段是事件冒泡阶段,可以在这个阶段对事件做出响应。
事件委托:通过监听一个父元素,来给不同的子元素绑定事件,减少监听次数,从而提升速度。

3 节流与防抖

函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;
函数节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

函数防抖和函数节流都是防止某一时间频繁触发;函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

4 浏览器跨域请求及解决跨域的常用方法

    跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。所谓同源是指,域名,协议,端口均相同;
    浏览器的同源策略分为以下两种:
         DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的; 
         XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。
解决跨域方法:
1、JSONP(JSON with padding)核心是动态添加<script>标签来调用服务器提供的js脚本(问题:只能使用get方法,不能使用post方法;没有关于 JSONP 调用的错误处理/提示)
2、CORS策略 跨域资源共享",允许浏览器向跨源服务器,CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求;发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。为Web服务器定义了一种方式,允许网页从不同的域访问其资源
3、document.domain+iframe的设置(只有在主域相同的时候才能使用该方法)
  将两个url的domain设置为相同的域名(注:只能把document.domain设置成自身或更高一级的父域,且主域必须相同)
eg:
$(function(){
  try{
        document.domain = "example.com"; //将document.domain设置成一样
   }catch(e){
      $("#iframe").load(function(){
           variframe = $("#iframe").contentDocument.$;
            ifram.get("http://example.com/api",function(data){});
      });
   }
4、HTML5的postMessage: 一个html5所提供的一个API.--->HTML5 window.postMessage是一个安全的、基于事件的消息API。在需要发送消息的源窗口调用postMessage方法即可发送消息
5、使用window.name来进行跨域
当iframe的页面跳到其他地址时,其window.name值保持不变,并且可以支持非常长的 name 值(2MB)。
浏览器跨域iframe禁止互相调用/传值.但是调用iframe时 window.name 却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的window.name值.   所以这里我们还要准备一个和主页面http://www.a.com/main.html 相同域下的代理页面http://www.a.com/other.html ,iframe调用子页面http://www.b.com/data.html

5 this指针

如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。
可以通过call,apply,bing强行改变this的指向。

call() 调用一个对象的一个方法,用另一个对象替换当前对象,在特定的作用域中调用函数;区别在于它们的传参。call(this,num1,num2,...)分别代表函数作用域及分别参数 ;apply(this,argument) 分别代表函数作用域及参数集合;

6 变量作用域问题(变量提升)

demo and explaination

7 vue中 watch、method与computed区别,对对象的属性监听怎么写

computed:当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入,计算属性默认只有getter,可以在需要的时候自己设定setter; computed是具有缓存的,这就意味着只要计算属性的依赖没有进行相应的数据更新,那么computed会直接从缓存中获取值,多次访问都会返回之前的计算结果
如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择,watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象,如果在data中没有相应的属性的话,是不能watch的;
通常在这里面写入方法,只要调用就会重新执行一次,相应的有一些触发条件;

computed是在HTML DOM加载后马上执行的,如赋值;
methods则必须要有一定的触发条件才能执行,如点击事件;
watch用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。

监听对象的属性
eg:  watch: {
          'queryData.name': {
                handler: function() {
                    //do something
                  },
            }
      }
或者
computed: {
    getName: function() {
        return this.queryData.name
    }
} ,
watch: {
    getName(val): {
      handler: function(val) {
          //do something
      },
    }
}

8 常用排序算法(冒泡原理)与常用查找算法

排序算法:简单选择排序、堆排序、快速排序,插入排序;
冒泡排序原理(升序): 比较相邻的元素,若第一个比第二个大,就交换他们两个;对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对
查找算法:顺序查找,二分查找,插值查找

9 ajax请求(异步与同步区别,常用请求方法,get和post方法区别)

10 bootstrap中的dataTable插件(根据公司需求提问)

11浏览器强缓存与协商缓存

强缓存:当浏览器去请求某个文件的时候,服务端就在respone header里面对改文件做了缓存配置。缓存的时间、缓存类型都由服务端控制。,如果只设置了cahe-control:max-age=315360000,public  这属于强缓存,每次用户正常打开这个页面,浏览器会判断缓存是否过期,没有过期就从缓存中读取数据;
客户端请求该资源时发现其过期了,这是就会去请求服务器了,而这时候去请求服务器的这过程就可以设置协商缓存。这时候,协商缓存就是需要客户端和服务器两端进行交互的。

12http请求头有哪些

Accept :指定浏览器或其他客户端可以处理的 MIME 类型。有text/html,image/,/等几种常用类型。/*可以简单的概括为告诉服务器,客户端什么数据类型都支持
Accept-Charset :指定浏览器可以用来显示信息的字符集。例如 ISO-8859-1
Accept-Encoding :指定浏览器知道如何处理的编码类型。值 gzip 或 compress 是最常见的两种可能值
Accept-Language :指定客户端的首选语言,在这种情况下,Servlet 会产生多种语言的结果。例如,en、en-us、ru 等。
Authorization: 用于客户端在访问受密码保护的网页时识别自己的身份。
Connection 这个头信息指示客户端是否可以处理持久 HTTP 连接。持久连接允许客户端或其他浏览器通过单个请求来检索多个文件。值 Keep-Alive 意味着使用了持续连接。
Content-Length :只适用于 POST 请求,并给出 POST 数据的大小(以字节为单位)。

Cookie 这个头信息把之前发送到浏览器的 cookies 返回到服务器。

Host 这个头信息指定原始的 URL 中的主机和端口。

If-Modified-Since :表示只有当页面在指定的日期后已更改时,客户端想要的页面。如果没有新的结果可以使用,服务器会发送一个 304 代码,表示 Not Modified 头信息。 Last-Modified 与If-Modified-Since都是用来记录页面的最后修改时间。当客户端访问页面时,服务器会将页面最后修改时间通过 Last-Modified 标识由服务器发往客户端,客户端记录修改时间,再次请求本地存在的cache页面时,客户端会通过 If-Modified-Since 头将先前服务器端发过来的最后修改时间戳发送回去,服务器端通过这个时间戳判断客户端的页面是否是最新的,如果不是最新的,则返回新的内容,如果是最新的,则 返回 304 告诉客户端其本地 cache 的页面是最新的,于是客户端就可以直接从本地加载页面了,这样在网络上传输的数据就会大大减少,同时也减轻了服务器的负担

If-Unmodified-Since 是 If-Modified-Since 的对立面,它指定只有当文档早于指定日期时,操作才会成功。

Referer :指示所指向的 Web 页的 URL。例如,如果您在网页 1,点击一个链接到网页 2,当浏览器请求网页 2 时,网页 1 的 URL 就会包含在 Referer 头信息中。

User-Agent :识别发出请求的浏览器或其他客户端,并可以向不同类型的浏览器返回不同的内容。

13 java中的对象 继承

14 ES6新特性,箭头函数与普通函数的区别

let:ES6推荐使用let声明局部变量;
模板字符串:基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定,  反引号(``);
箭头函数:不需要 function 关键字来创建函数,省略 return 关键字,继承当前上下文的 this 关键字;箭头函数始终都是表达式, 全程是箭头函数表达式, 因此因此仅在表达式有效时才能使用
函数可以传参数默认值;
新增对象和数组解构 eg:const{ name, age, sex } = student;
for...of 用于遍历一个迭代器(对象中没有遍历器,不能被for..of遍历),for...in 用来遍历对象中的属性

15 web语义化

①定义:是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容
②常用语义化标签(详见demo)

语义化标签的使用

16 flex布局

flex 常用属性使用实例

17 dom 事件模型

当一个事件发生时,事件会在DOM树中进行传播。传播分为两个阶段:
i.捕获阶段 :在此阶段,事件从根结点(即document结点)开始向下传播,直到事件源所在元素。
ii.冒泡阶段 :在此阶段,事件从事件源开始向上传播,直到根结点

18 promise

Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法;“承诺将来会执行”的对象在JavaScript中称为Promise对象。

Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了;
Promise.all()  需要从两个不同的URL分别获得数据,这两个任务是可以并行执行的
Promise.race()  同时向两个URL读取信息,只需要获得先返回的结果

19 const定义变量内容可改吗,定义对象中的属性值呢?

如果const的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址没有变就行。

obj的属性内容可改,obj不可修改(array 同理)

20 vue双向绑定

双向绑定原理:主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的;可以控制一个对象属性的一些特有操作;
含义:数据变化更新视图,视图变化更新数据
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。这个方法可以使数据变得“可观测”。

实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。

21 vue组件传值

1 路由传参 :定义路由时加上参数props: true,在定义路由路径时要留有参数占位符: name;在跳转到的页面加上参数props:['name'] 此时 跳转页面可获取router中传的参数,获取方式:this. name
2、父组件向子组件传值:①父组件内设置要传的数据『data(){ id: value}』②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『< myBtn :atrid='id'></ mybtn>』③在子组件添加参数props:['atrid'],即可
3、子组件向父组件传值①在父组件中的标签上定义自定义事件,在事件内部获取参数;『@myEvent=" callback"在callback函数中接收参数』②在子组件中触发自定义事件,并传参。『this.$ emit('父组件中的自定义事件',参数)』
4、组件之间传值:①建立一个公共的通信组件( Vue),需要传值的组件里引入该通信组件;在一个中绑定一个事件this.on('eventname', this. id);在另一个组件中触发事件this.$ emit('eventname',( options)=>{})②在本地存储中添加公共数据,可以在两个页面中获取

22vue 动态生成router

动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单
1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
    使用方法
    this.$router.options.routes[0].children.push({//插入路由name:'list',
    path: 'list',
    component: resolve => require(['../template/list.vue'], resolve)//将组件用require引进来});
    this.$router.addRoutes(this.$router.options.routes);//调用a!
路由文件:
   export default new Router({
   routes: [
    {
      path: '/',
      component: index,
    },
    {
      path: '/login',
      name: 'login',
      component: login
    }
})

23html5新特性

(1)语义标签 header,footer,nav,aside,section,dialog等(详见第15条);
(2)增强型表单
  新增的表单属性 placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。 required  属性,是一个 boolean 属性。要求填写的输入域不能为空 pattern 属性,描述了一个正则表达式用于验证<input> 元素的值。 min 和 max 属性,设置元素最小值与最大值。 step 属性,为输入域规定合法的数字间隔。 height 和 width 属性,用于 image 类型的 <input> 标签的图像高度和宽度。 autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。 multiple 属性 ,是一个 boolean 属性。规定<input> 元素中可选择多个值
(3)视频和音频
  HTML5 提供了播放音频文件的标准 ,使用<audio> 元素, control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本;规定了一种通过 video 元素来包含视频的标准方法
(4)Canvas绘图 标签只是图形容器,必须使用脚本来绘制图形。
(5)Web Storage  使用HTML5可以在本地存储用户的浏览数据。
(6)WebSocket   在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

24ajax 与 axios 区别

JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。
用法:$.ajax({
    type:'POST',
    url: url,
    data: data,
    dataType: dataType,
    success:function(){},
    error:function(){}
});
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。
用法:
axios({
    method:'post',
    url:'/user/12345',
    data:{
        firstName:'Fred',
        lastName:'Flintstone'
    }
}).then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
});

ajax技术实现了网页的局部刷新,axios实现了对ajax的封装。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352