通过正则把文本里的链接加上a标签

1
2
3
4
5
6
7
8
9
10

//javascript 正则替换
var sHtml ="http://www.huhangfei.com/";
//替换http://开头链接
if (sHtml.toLowerCase().indexOf("http://") >= 0) {
      sHtml = sHtml.replace(/(^|[^<=""])(http:(\/\/|\\\\)(([\w\/\\\+\-~`@:%])+\.)+([\w\/\\\.\=\?\+\-~`@\':!%#]|(&amp;)|&)+)/g, "$1<a target=\"_blank\" href=\"$2\">$2</a>");
}
//替换 www. bbs. 等开头网址
if (sHtml.toLowerCase().indexOf("www.") >= 0 || sHtml.toLowerCase().indexOf("bbs.") >= 0) {
      sHtml = sHtml.replace(/(^|[^\/\\\w\=])((www|bbs)\.(\w)+\.([\w\/\\\.\=\?\+\-~`@\'!%#]|(&amp;))+)/g, "$1<a target=\"_blank\" href=http://$2>$2</a>");
}

1.第一次登陆的时候，前端调用后端的接口，发送用户账号和密码

2.后端收到账号和密码，验证账号和密码正确，返回前端一个token

3.前端拿到token,把token存储到localStorage和vueX中，并跳转路由页面

4.每次跳转路由就判断localStorage中有无token,没有跳转到登录页面，有就跳转到对应的页面

5.每次调用后端接口都要在请求中加入token

6.后端判断请求头中有无token，有token，就拿到token进行验证token，验证成功返回数据，验证失败返回401，没有token也返回401

7.如果前端拿到401，就清楚token并跳转到登录页面

感谢：一抹夏忧☆

1.邮箱提示问题

/*邮箱提示:比如input输入123:提示123@163.com,123@126.com,123@yeah.net,123@vip.163.com,123@vip.126.com,123@188.com,
                    输入123@时提示还是这:123@163.com,123@126.com,123@yeah.net,123@vip.163.com,123@vip.126.com,123@188.com
                    输入123@1时提示123@163.com,123@126.com,
                    输入123@16时提示123@163.com,
                    输入123@@时不提示,也就是输入两个@时不提示,
                    我用vue写的分两大步,一利用v-model,获取的内容,与邮箱后缀组成的数组遍历的内容链接成新的字符串,在页面上显示,
                    第二步是根据新组成的字符串字符串进行过滤.
                    怎么过滤不会了,
                    我想用正则,正则不知道怎么写,
                    还没有想到第二种方法,
                    你帮我看看怎么写还有其他方法吗*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

	
 		var selectedArr=[]//提示要显示的信息
 		var selected=[
	{eSuffix:'@163.com'},
	{eSuffix:'@126.com'},
	{eSuffix:'@yeah.net'},
	{eSuffix:'@vip.163.com'},
	{eSuffix:'@vip.126.com'},
	{eSuffix:'@188.com'},
]//邮箱后缀
 		
 		var eValue =this.login.el.eValue;//input输入获取的内容
 		var  flag = '';
 		
      if(eValue.indexOf("@")>0){
          flag=eValue.substring(eValue.indexOf("@")-1);//获取的输入的@开始的内容
          
          eValue=eValue.substring(0,eValue.indexOf("@"));
         
      }else{
          flag="";
          
          //首字符是@
          if(eValue.substring(0,1) == '@'){
          	eValue=eValue.substring(0,eValue.indexOf("@"));
          }
      }
       var val="";
      //将输入内容和后缀链接
     
 		for(var i=0;i<selected.length;i++){
 			val=selected[i].eSuffix;
          val=val.substring(val.indexOf("@"));
          
 			var eSuffix = {eSuffix:eValue+val}
 		
 			selectedArr.push(eSuffix)
 			
 		}
 		
 		var eArr = []//检查满足条件的内容
 		if(flag!=""){
         var reg=new RegExp(flag,"i");
         	
          for(var i=0;i<selectedArr.length;i++){
          	
              if(reg.test(selectedArr[i].eSuffix)){
              	
              	eArr.push(selectedArr[i])
              	
              	this.login.el.selTips = false;
                  
              }else{
              	 selectedArr.splice(i, 1);
                  this.login.el.selTips = true;
                 
              }
          }
          selectedArr = eArr
      }
 		
 		this.$set(this.login.el,'selected',selectedArr)
 		if(this.login.el.eValue == ''){
 			this.login.el.selTips = true;
 		}else{
 			this.login.el.selTips = false;
 		}

2.vue-swiper loop循环问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

this.$http({
        	method:'get',
        	url:'http://192.168.1.74:3000/banner',
        }).then(function(resp){                            
	        console.log(resp.data);
	        that.banners = resp.data.banners
	        
	        that.$nextTick(()=>{
	        	that.mySwiper.slideTo(0, 1000, false)
	        })
	        }).catch(resp => {
	        console.log('请求失败：'+resp.data+','+resp.statusText);
        });
        添加this.$nextTick(()=>{
        	//轮播初始化
        	that.mySwiper.slideTo(0, 1000, false)
        })
    html代码片段
    <div class="n-ban d-flag" id="index-banner">
		<div class="wrap wr" v-if="banners.length>0">
			 <div v-swiper:mySwiper="swiperOption" >
			    <div class="swiper-wrapper"  >
			      <div class="swiper-slide" v-for="banner in banners">
			        <router-link v-for = "item in bannersType"  :to="{path:item.path,query:{id:banner.encodeId}}"  v-if="item.targetType == banner.targetType && item.targetType != 3000">
			        	<img :src="banner.imageUrl">
			        </router-link>
			         <router-link   :to="banner.url"  v-else-if="item.targetType == 3000&&item.targetType == banner.targetType" >
			        	<img :src="banner.imageUrl">
			        </router-link>
			      </div>
			    </div>
   				
			    <div class="swiper-pagination"></div>
			 </div>
			 <a href="javascript:void(0);" class="swiper-button-prev"><</a>
   			 <a href="javascript:void(0);" class="swiper-button-next">></a>
		</div>
	</div>
	在轮播的父级元素添加 v-if="banners.length>0"

1.用app.json系统属性建设项目框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

{
  "pages":[
    "pages/my-music/my-music",
    "pages/for-you/for-you",
    "pages/explore/explore",
    "pages/broadcast/broadcast",
    "pages/search/search",
    "pages/index/index",
    "pages/main/main",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "AppleMusic",
    "navigationBarTextStyle":"black",
    "backgroundColor":"#ffffff"
  },
  "tabBar":{
    "color":"#929292",
    "selectedColor":"#ff2d55",
    "borderStyle":"white",
    "backgroundColor":"#ffffff",
    "list":[{
      "pagePath":"pages/my-music/my-music",
      "iconpath":"image/tabbar/1.png",
      "selectedIconPath":"image/tabbar/1-h1.png",
      "text":"我的音乐"
    },{
      "pagePath":"pages/for-you/for-you",
      "iconpath":"image/tabbar/2.png",
      "selectedIconPath":"image/tabbar/2-h1.png",
      "text":"为你推荐"
    },{
      "pagePath":"pages/explore/explore",
      "iconpath":"image/tabbar/3.png",
      "selectedIconPath":"image/tabbar/3-h1.png",
      "text":"浏览"
    },{
      "pagePath":"pages/broadcast/broadcast",
      "iconpath":"image/tabbar/4.png",
      "selectedIconPath":"image/tabbar/4-h1.png",
      "text":"广播"
    },{
      "pagePath":"pages/search/search",
      "iconpath":"image/tabbar/5.png",
      "selectedIconPath":"image/tabbar/5-h1.png",
      "text":"搜索"
    }]
  },
  "debug":true
}

2.在util.js里修改里的时间参数

1

一、JavaScript面试题

1、scope作用范围

1
2
3
4

(function(){
	var a=b=10;
})();
console.log(b);

什么会打印在控制台上？
答：
控制台上会打印出 10
因为这里两个声明变量，a是用var 声明的局部变量，而b是全局变量
没有使用 'use strict' 严格模式，在严格模式下，代码就会引发ReferenceError错误，b没有定义（b is undefined），严格模式需要明确指出才能实现全局变量。

2、创建源生’native’方法

给字符串对象定义一个repeatify功能。当传入一个整数n时，它会返回重复n次字符串的结果。例如：

1

console.log('hello'.repeatify(3))

回答：打印出hellohellohello
    实现如下

1
2
3
4
5
6
7

String.prototype.repeatify = String.prototype.repeatify || function(time){
	var str= '';
	for(var i=0;i<time;i++){
		str +=this;
	};
	return str
}

3.声明提升（Hoisting）

执行这段代码，输出的结果是什么

1
2
3
4
5
6
7
8

(function(){
	console.log(a);
	console.log(foo());
	var a = 1;
	function foo(){
		return 2
	}
})()

答：输出的是 undefined 和 2
原因是变量声明和函数声明会被提升到函数顶部，变量只有声明没有值，因此在打印时它已经存在了，所以打印出undefined

4、this在JavaScript中如何工作的

下面代码会输出什么结果

1
2
3
4
5
6
7
8
9
10
11
12
13

	var fullname = 'John Doe';
    var obj = {
       fullname: 'Colin Ihrig',
       prop: {
          fullname: 'Aurelio De Rosa',
          getFullname: function() {
             return this.fullname;
          }
       }
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test())

答：输出的是 Aurelio De Rosa 和 John Doe
原因是:在一个函数中，this的取值是看JavaScript调用方式的和定义方式，而不仅仅是定义方式。
在第一个console.log()中，getFullname()作为obj.prop的被调用对象,所以上下文指向后者，函数返回该对象的fullname,与此相反，getFullname被分配到test(),上下文指的是全局对象（window），只是因为test是被隐式设置的全局对象的属性，出于这个原因，该函数返回window的fullname

5、call()和apply()

现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。
回答：
    call()和apply()强制改变上下文的的this指向

1

console.log(test.call(obj.prop))和console.log(test.apply(obj.prop))

二、jQuery面试问题

1、jQuery库中$()是什么

$()是jQuery()的别称，乍一看比较怪异，还使jQuery代码羞涩难懂，但是等你适应了，就会爱上它的简单了。$()函数是把任何对象包裹成jQuery对象，接着你就会被允许调用jQuery里的定义的多个不同方法。你甚至传入选择器字符串与$()函数，它会返回包含所有匹配DOM元素数组的jQuery对象。

2、$(doument).ready()是什么函数，为什么要用它

ready()函数用于文档进入ready状态的时执行的代码，当DOM完全加载(例如：HTML元素加载完成时DOM树构建完成时)，jQuery允许你的代码执行。使用$(document).ready()的最大好处是解决了跨浏览器的难题。

3、JavaScript window.onload和jQuery ready()函数的区别

JavaScript window.onload事件和jQuery ready 函数的主要区别是
前者是要等到DOM被创建和图片、音频、视频加载完成以及外部资源加载完成，如果图片加载和媒体加载话费了大量的时间，用户就会感到定义在JavaScript window.onload 的上的代码在执行是有明显迟到。
jQuery ready()函数只需对DOM树加载等待，无需对图片或媒体加载等待，执行起来更快。使用jQuery ready()函数的另一个优势是可以在页面中多次使用它，浏览器会按在HTML里的顺序来执行它，相对于onload来说，只在单一的函数中执行。鉴于这个好处，jQuery ready函数比JavaScript window.onload好用。

4、$(this)和this在jQuery中的不同

$(this)返回的是jQuery对象，可以对它调用jQuery多个方法，例如text()获取文本，val()获取值等。this是JavaScript中的关键字，表示上下文的DOM元素。不能直接调用jQuery方法，需要$()包裹来执行。

1.简单描述下微信小程序文件类型

答：微信小程序有一下几种文件类型：
    一、wxml(weixin MarkUp language) 是框架设计的一套标签语言、结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己构建的一套组件。
    二、wxss(weixin style sheets)是一种样式语言，用于描述wxml的组件样式。
    三、js逻辑处理、网络请求
    四、json 小程序设置，如页面注册、页面标题及tabBar
    五、app.json 必须有这个文件、如果没有这个文件项目无法运行，因为微信小程序把这个文件作为配置文件入口，整个小程序的全局配置。包括页面注册、网络设置、以及小程序的window的背景色、配置导航条样式、配置默认标题。
    六、app.js 必须有这个文件、如果没有这个文件项目也会报错，这个文件创建一下就行啦，不需要我们现在写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
    七、app.wxss 这是个公共的样式文件。

2.你是怎么封装微信小程序的数据请求的

一、将所有的接口放到统一的js文件中并导出。
二、在app.js中创建封装请求的方法。
三、在子页面中调用封装的方法。

3.有哪些参数传值的方法

一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onLoad的param获取参数。但是data-名称不能有大小写字母和不能存放对象。
二、设置id的方法来传递值通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数值。
三、在navigtar中添加参数传值。
四、在navigateTo跳转中的参数 ，通过onload生命周期中获取数据
五、通过app实例获取数据
六、通过本地缓存的方式获取数据
七、通过表单的形式，在submit方法的参数中获取数据，注意input/texttarea等表单组件中要有name属性
八、通过getCurrentPage()方法获取当前页面或多级页面的数据

4.你使用过哪些方法，来提升微信小程序的应用速度

一、提高页面加载速度
二、用户行为预测
三、减少默认data的大小
四、组件优化方案

5.小程序和源生app那个好

小程序除了拥有公众号的低开发成本及无需下载优势。在服务请求延时与用户体验都得到较大幅度的提升，使得能够承载更复杂的服务功能以及使用户得到更好的用户体验。

6.简述微信小程序的原理

答： 微信小程序采用JavaScript 、wxml 、wxss、三种技术进行开发，从技术讲和现有的前端开发差不多，但是深入挖掘的话有不同。
JavaScript：    首先JavaScript的代码运行在微信app中的，并不是运行在浏览器中的，因此一些h5技术的应用，需要微信app提供api支持，而这限制了h5技术的应用，且其不能称为严格的h5,可称其为伪h5，同理，微信提供的api,h5不支持或支持的不是很好。
wxml: wxml是微信自己给予xml技术开发，因此开发时只能使用微信提供的标签，HTML的标签是无法使用的。
wxss: wxss具有css的大部分特性，但不是所有的都支持，哪些支持哪些不支持，并没有明确的文档。
微信的架构是数据驱动的模式，它的UI和数据是分离的，所有的页面更新都需要通过对数据的更新来实现。
小程序分为两个部分webview和appService。其中webview主要用来展示UI，appService用来处理业务逻辑，数据及接口的调用。他们在两个进程中运行，通过系统jsBridge实现通讯，UI渲染、事件处理。

7.分析下小程序的优劣

答：
优势：一、无需下载通过扫一扫和搜索就可以打开
       二、良好的用户体验，打开快
       三、开发成本比app低
       四、安卓上可以添加到桌面，与原始app差不多
       五、为用户提供良好的安全保障。小程序的发布微信有一套严格的审查流程，不能通过的小程序是不能发布到线上的。
劣势：一、限制较多，页面大小不能超过1M,不能打开超过5个层级的页面
       二、样式单一，小程序的一些组件样式是成形的，样式不能修改。如幻灯片、导航。
       三、推广面窄，不能分享朋友圈，只能分享给朋友、附近小程序推广。其中附近小程序也受微信的限制。
       四、依托于微信，无法开发后台管理功能。

8.微信小程序与h5的区别

答：
    一、运行环境的不同
        传统的HTML运行环境是浏览器，包括webview,而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的解析器，针对小程序专门做了优化，配合自己开发的语言标准，提升了小程序的性能。
    二、开发成本的不同
        只在微信中运行，不用担心浏览器的兼容性，以及生产环境中出现的不可预料的奇妙bug
    三、获取系统级权限的不同
        系统级权限都可以和微信小程序无缝衔接
    四、应用在生产环境中的运行流畅度不同
        长久以来，HTML5应用面对复杂的业务逻辑或丰富的页面交互时，它的体验总是不尽人意，需要不断的优化项目来提升用户体验，但是由于微信小程序的运行环境独立，不用长期不断的进行优化来提升用户体验。

9.怎么解决小程序的异步请求问题

    在回调函数中调用下一组件的函数：
    运营promise函数
1
2
3
4
5
6
7
8
9
10
app.js
	success:function(info){
		that.apirtnCallback(info)
	}
index.js
	onload:function(){
		app.apirtnCallback=res=>{
			console.log(res)
		}
	}

10.小程序的双向绑定和 vue哪里不一样

小程序this.data属性是不能同步到视图呢，必需是
1
2
3
this.setData({
	noBind:true
})

小程序的生命周期

onLoad   --- 页面加载，调用一次
onShow   --- 显示页面，每次打开页面都调用
onReady  --- 初次渲染，调用一次
onHide   --- 隐藏页面，当navigate To 或底部tab切换时调用
onUnload --- 卸载页面，当redirectTo 或navigateBack时调用

小程序的页面跳转

wx.navigateTo   --- 保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面（参数必须是字符串）
wx.redirectTo   --- 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面
wx.switchTab    --- 跳转到tabber页面，并关闭其他所有非tabBar页面，路径后不能带参数
wx.navigateBack --- 关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
wx.reLaunch     --- 关闭所有页面，打开到应用内的某个页面
通过navigator跳转

感谢大豆博文微信小程序的面试题

移动端前端开发与PC端比有哪些不同？

第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。 

第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

第五：  微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。

第六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。

第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。 

第八： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。

第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。

第十： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。

 第十一： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。

前端两种主流跨域方案：JSONP 与 CORS。请问使用两种方案在 a.com 向 b.com 发起跨域请求时，b.com 的服务端能否解析到跨域请求携带的 cookie。

jsonp能稳定解析到；CORS需要进行withcredentials参数配置后可以解析到，否则不能。

检查两节点，实际上，是否是相同节点：

sSameNode() 方法检查两节点是否是相同的节点。

isSameNode() 方法返回 true，如果两节点是相同的节点，否则返回 false。

提示：请使用 isEqualNode() 方法来检查两节点是否相等，但不必是相同节点。

冒泡排序 (n:比较元素的个数)

比较次数的最小值：n-1;
移动次数的最小值：0；
比较次数的最大值：n(n-1)/2;
移动次数的最大值：3n(n-1)/2;

HTTP请求中浏览器缓存机制会用到的协议头？

Etag
Cache-control
Last-Modified
Expires

HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?

1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

异步编程的方法

回调函数，这是异步编程最基本的方法。
事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
发布/订阅，上一节的"事件"，完全可以理解成"信号"。
Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。

输入同样的网站pc端和移动端的显示的页面效果不同因为什么？

手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征，实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理，实现前端或后端的特征识别和行为改变。

游戏开发的基本性能问题和解决方法

1.背景的卷曲效果优化。背景不能是无限长的图片拼接，必须有回收移出的场景的方法。
2.将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等、需要空闲时间片运算，不能和UI动画同时进行。
3.将比较大的运算解成不同的时间片，防止阻塞主UI线程。最好使用webworker.
4.注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。
5.进行预处理。将-些常用的过程预处理，
6.控制好频率。将1秒分解成多个时间片，在固定间隔时间片进行UI动画，其他时间片在后台运算。
7.通过GPU加速和css transition 将小鸟飞行动画和背景动画分离。

git命令

$ git add   把文件添加到仓库
$ git reset  把当前版本回退到上一个版本
$ git fetch <远程主机名>  将某个远程主机的更新，全部取回本地
$ git rebase  用于把一个分支的修改合并到当前分支
$ git merge 用于合并指定分支到当前分支

HTML5规范

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

HTML5规范提出的新特性?

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

对布局有影响的css属性

width、height
display
position
float
overflow
font-size
margin
padding
word-break
word-wrap
visibility

JavaScript的函数调用有哪几种方式？请举例说明，并分析其不同之处。

1.函数调用
        this指向：window
            返回值  ：由return值决定，如果没有return语句就表示没有返回值
2.方法调用
        this指向：该方法的调用者
            返回值  ：由return语句决定
3.构造函数调用
        this指向：当前构造函数创建的对象
        返回值  ：   a、没有手动添加返回值，默认返回this
                        b、return了一个基本数据类型（数字、布尔值、null、undefined），最终返回this
                        c、return了一个复杂数据类型（对象），最终返回该对象
4.上下文调用
        call和apply 是方法， 是所有函数都具有的方法。 Function.prototype
        只要函数调用call/apply 方法，那么该函数就会立即执行。
            this指向：   a、传递一个null/undefined------------------->window
                        b、传递一个数字、字符串、布尔值------->对应的基本包装类型的对象
                        c、传递一个对象------------------------------->指向该对象
        返回值  ：由return语句决定

1）说明JavaScript的原型链（prototype linkage）是如何形成的,2）利用原型链，模拟class的继承机制。

1）每声明一个构造函数，就会有一个对应的原型对象，通过构造函数的prototype属性可以访问。而每一个构造函数的实例（即通过new操作符产生的对象）内部都有一个指针指向其构造函数的原型对象。如果我们把一个构造函数的prototype属性指向另一个构造函数的实例，那么我们就可以继承该实例（或称对象）的属性和方法了。那如果另一个构造函数的原型又指向其他构造函数，那么就可以不断继承，像一条链一样，这就是所谓的原型链。
2）
function Animal() {}
    Animal.prototype.name = 'Animal'
    Animal.prototype.say= function () {
        alert(this.name)
}
function Dog() {}
Dog.prototype = new Animal()
Dog.prototype.name = 'Dog'
var dog = new Dog()
doy.say()

请举例说明前端MVVM data-binding机制的实现原理。

主要通过Object.defineProperty()方法，其set的内部属性可以起到监听作用，可以为data中每一个字段绑定一个监听器。当发现字段的值发生了改变，在set内部属性中会触发函数，去更改视图的内容。

请举例说明DOM event的传播机制和用途。

第一阶段：从window对象传导到目标节点，称为“捕获阶段”(capture phase)。
第二阶段：在目标节点上触发，称为“目标阶段”(target phase)。
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”(bubbling phase)。

ajax技术的优点

可以实现无刷新页面
用户体验好、速度快

浏览器访问页面的过程

应用层用到--HTTP协议
传输层--tcp协议    
网络层--ARP协议
控制信息的传递--ICMP
服务器后台处理--IP协议(DNS)
打开网页---HTML

px、em、rem、vh、vw的区别是什么？

px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML跟元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度
pt ：印刷业上常使用的单位，磅的意思，一般用于页面打印排版。

DOM的onload和domContentLoaded事件有什么区别？

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash

requestAnimationFrame方法是做什么用的，应用场景有哪些？

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果，节省CPU。
应用场景：游戏、动画

网站的登录态是如何保持的，一个完整的登录流程是怎样实现的？

通过cookies来保持的，cookie面面存储token，每次请求到后端服务器都会带上token。从而验证用户是否登录。 
输入用户、密码—>点击登录发送到服务端—》服务端验证密码生成token—》写入到cookies返回成功
1.客户端请求后台登录接口。
2.后台验证通过后，将用户的登录状态保存至cookie并写入客户端。
3.客户端再次登录网站，请求login接口时，后台直接从客户端获取到该用户写入cookie的登录状态。
4.通过对该状态的验证，确认用户是否需要再次登录。
5.如cookie过期，则跳转至登录页；如未过期，则直接显示为已登录状态。

css3常用的获取元素的伪类

① p:last-of-type   选择其父元素的最后的一个P元素; 
② p:last-child   选择其父元素的最后子元素(一定是P才行); 
③ p:first-of-type   选择其父元素的首个P元素; 
④ p:first-child 选择其父元素的首个子元素(一定是p才行); 
⑤ p:only-child 选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素); 
⑥ p:only-of-type 选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有); 
⑦ p:nth-child(n)   选择其父元素的第N个 刚好是p的元素; 
⑧ p:nth-last-child(n)   从最后一个子元素开始计数; 
⑨ p:nth-of-type(n) 选择其父元素的n个元素; 
⑩ p:nth-last-of-type(n)   从最后一个子元素开始计数

关于栈（stack）和堆（heap）

基本类型存放在栈(stack)中
引用类型存放在堆（heap）中
指向引用类型的地址存放在栈(stack)中

use strict 模式的目的是什么？

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译器效率，增加运行速度
为未来新版本的Javascript做好铺垫

XML和JSON区别

（1）可读性方面：基本相同，XML的可读性比较好；

（2）可扩展性方面：都具有良好的扩展性；

（3）编码难度方面：相对而言，JSON的编码比较容易；

（4）解码难度：JSON的解码难度基本为零，XML需要考虑子节点和父节点；

（5）数据体积方面：JSON相对于XML来讲，数据体积小，传递的速度比较快；

（6）数据交互方面：JSON与javascript的交互更加方便，更容易解析处理，更好的数据交互；

（7）数据描述方面：XML对数据描述性比较好；

（8）传输速度方面：JSON的速度远远快于XML。

身份正的正则表达式

isIDCard=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

在Bootstrap网格系统的工作原理

行必须放置在 .container class 内，以便获得适当的对齐和内边距
使用行来创建列的水平组
预定义的网格类可用于快速创建网格布局

默认常见端口

HTTP服务器，默认的端口号为80
HTTPS服务器，默认的端口号为443
Telnet默认端口号为23
FTP默认的端口号为21

常见的对称加密算法有

常见的对称加密算法有DES、3DES、AES、Blowfish、IDEA、RC5、RC6。

js的运行核心

javascript语言实现继承机制的核心就是 prototype ，而不是Java语言那样的类式继承。Javascript 解析引擎在读取一个Object的属性的值时，会沿着 原型链向上寻找，如果最终没有找到，则该属性值为 undefined ；
 如果最终找到该属性的值，则返回结果。与这个过程不同的是，当javascript解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值 。

cookies，sessionStorage和localStorage有什么区别，应用场景在哪里？

cookies:
    数据生命期:生成时就会被指定一个maxAge值，这就是cookies生存的周期。在这个周期内cookies有效，默认关闭浏览器失效
    存放数据大小:4k左右（因为每次http请求都会带cookies）
    与服务器的通讯:由于对服务器的请求每次都会携带HTTP请求头中，如果使用cookies保存会带来性能问题。
    易用性：cookies需要自己封装setCookies和getCookies
sessionStrorage:
    数据生命期:页面会话期间可用
    存放数据大小:一般为5M或更大
    与服务器通讯:数据不是有每个服务器请求传递的，而是只在请求时传递数据，不参与和服务器的通讯。
    易用性:可用源生接口，也可以再次封装对Object和array有更好的支持。
localStorage:
    数据生命期:除非数据清除，否一直存在
    存放数据大小:一般为5M或更大
    与服务器通讯：数据不是由每个服务器请求传递的,而是只在请求时传递数据，不参与和服务器的通讯。
    易用性:可用源生接口，也可以再次封装对Object和Array有更好的支持。
共同点：都是保存在浏览器端，和服务器端的session机制不同

JSONP的跨域原理是什么？

其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来。

常见的语义化标签

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

什么是闭包

闭包是外部函数与内部函数之间的桥梁。
优点：1.利用闭包解决块级作用域
     2.利用闭包解决递归调用问题
缺点：1.引用的变量可能发生变化
      2.this指向问题
      3.内存泄漏问题

cookie和webstrage的区别以及cookie怎么样使用？原生cookie怎么样封装

cookie和webstrage的区别:
    一、储存空间不同
        webStrage能提供5M的存储空间，cookie可以存储4k空间
    二、与服务器的交换
        1.web strage中的数据仅在本地存储，不会和服务器发生交换
        2.cookie的内容会随着请求一并发送到服务器
    三、接口
        web strage提供了很多接口，如setItem removerItem getItem clear key等方法。
        cookie需要自己封装。
        sessionStrage将数据保存在session中，浏览器关闭就没有了，localStrage数据一直保持在客户端的浏览器中，除非主动删除，否则永久保存。
    封装:
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function setCookie(name,value,d){
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+n);
	document.cookie = name + '=' + value + ';expires='+oDate;
}
function getCookie(name){
	var str = document.cookie;
	var arr = str.split(";");
	for(var i = 0; i < arr.length; i++){
		//console.log(arr[i]);
		var newArr = arr[i].split("=");
		if(newArr[0]==name){
			return newArr[1];
		}
	}
}
fuction removerCookie(name){
	setCookie(name,1,-1)
}

call和apply的区别

call和apply都是用来修改函数中的this指向问题
call方法可以传给该函数的参数分别作为自己的多个参数
apply方法可以传给该函数的参数合并成数组作为自己的一个参数
有参数是this指向第一个参数，无参数时this指向window

vue的理解

vue.js是一套构建用户界面的渐进式框架。vue采用的是自底向上的增量开发模式，核心库只关心视图层，还便于第三方项目库和现有项目的整合，另一方面当与单文组件和vue生态系统的库结合使用时，vue也能
为单页复杂的应用程序提供驱动。

vue的双向数据绑定的原理

vue双向数据绑定是通过object.defineProperty()方法实现劫持的
Object.defineProperty()方法会直接在一个对象上定义一个 新属性，或者修改一个对象的现有属性，并返回这个对象
Object.defineProperty(obj,key,options)有三个参数，
obj:修改或者定义key值的对象
key:对应obj对象里面某个已有或者要有修改的属性
options:这个参数对象里面有get,set两个函数，用来定义属性值

js的继承

1.原型链继承，通过原型将一个引用类型继承另一个引用类型的属性和方法。
2.借用构造函数继承：在子构造函数内部调用超类型构造函数，通过apply()和call()方法可以在新创建的子类对象上执行构造函数。
3.组合继承(原型+借用构造):将原型链和借用构造函数结合在一起，发挥两者之长的一种继承模式。
4.原形式继承:借助原型可以基于已有的对象创建新对象，同时还不比因此创建新的类型。
5.寄生式继承:创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后像是它真正做了所有工作一样返回对象。
6.寄生组合式继承:通过借用函数来继承属性，通过原型链的混合形式来继承方法。

react和vue有哪些不同，说说你对这两个框架的看法

相同点：都支持服务器渲染
        都有virtual DOM组件开发，通过props参数进行父子组件直接的数据传递，都是些webComponent规范
        数据驱动视图
        都支持native方案，react 的react的native和vue的weex
不同点: react严格的只针对MVC的view层，vue则是mvvm模式
          组件的写法不一样
          数据绑定不同，vue是双向数据绑定，react是单向数据绑定
          sate对象在react应用中不可变的，需要使用setsate方法更新状态，在vue中sate对象不是必须的，数据在data对象中进行管理
          virtual DOM不一样，vue会跟踪每一个组件的依赖关系，不需要渲染整个组件树，对于react来说，每次组件发生改变，都需要重新渲染全部组件，所有react需要shouldComponentUpdate这个生命周期函数来控制

什么是mvvm和mvc,有什么区别，原理

mvc是比较直观的架构模式，用户模式-》view(负责接受用户操作输入)-》controller（逻辑处理模式）-》view(将返回结果返回view)
mvvm是将数据双向绑定的模式作为核心，m->model层（数据），v->view层（视图），vm->viewmodel层（逻辑处理），而model与viewmodel是双向交互的，view与viewmodel是单向的，数据发生改进通过viewmodel改变view成

什么情况算是跨域，如何解决跨域问题

浏览器最核心，最基本的是安全功能的同源策略。限制了一个源中加载文本或脚本与其他源中的交互方式，当浏览器执行脚本时会查看是否是同源，只有同源的脚本才会执行，否则是不会执行的。
1.jsonp:原理是script标签的src属性，外联引入文件不受同源策略的限制，在页面中动态插入了script，scirpt标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，
后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去
2.document.domin:两个域名必须属于同一基础域名，并且所有的协议端口完全一致，否则无法跨域；
3.iframe、hash:父页面向子页面传输数据：将要传递的数据添加到子页面的URL的hash值上，子页面通过location.hash并添加定时器实时的动态父页面传来的数据；
子页面向父页面传输数据：利用window.name的特性，及页面重新加载当前页面的name值不变，即使换了一个页面。需要三个页面配合使用。一个应用页面，一个数据页面，一个代理文件。代理文件一般是一个没有任何内容的html页面，
需要和应用页面在同一域名下。将数据页面的窗口缓存代理页面，代理页面通过window.name获取数据页面留下的数据，应用页面再访问和它同源的代理页面获取数据，就完成跨域。
4.CORS：服务器端设置的，不需要客户端进行操作。
5.服务器跨域，服务器中转代理。
6.window.postMessage
7.webSocket

css的塌陷

本应该在父盒子内部的元素跑到了外部是塌陷
解决方法：
    1.给外部盒子设置高度
    2.给父盒子设置overflow属性
    3.父盒子最下方引入清除浮块
    4.给父盒子设置after伪元素设置从clear属性

什么是flex

flex意味‘弹性布局’，用来为盒模型提供最大的灵活性
采用flex布局的元素，称之为flex容器，简称“容器”。它的所有子元素自动称为容器的成员，称之为flex项目，简称：’项目‘。
容器默认存在两根轴，水平的主轴和垂直交叉轴。项目默认沿主轴排列。
（阮一峰的）Flex 布局教程：语法篇 {% link Flex 布局教程：语法篇  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [Flex 布局教程：语法篇] %}

vue-router 实现的步骤

1.注入vue-router (路由)
2.添加路由链接
3.添加路由占位符
4.定义路由组件
5.配置路由规则并创建路由实例
6.将路由挂载到vue实例中

首页背景图片在PC端有显示，在手机端不显示的解决方法

移动端不支持缩放
background-size:100% auto;或background-size:100% 100%;//铺满

视频video或音乐audio不能移动端自动播放

利用get请求替换监听媒体加载load

利用videoJs框架进行封装

关于Chrome下的video文件currentTime无效问题
前段时间查到的bug：记录关于Chrome下video文件设置的currentTime没有效果，这里有详细的
{% link 解释和解决方案  https://stackoverflow.com/questions/53053444/cant-seek-through-video-from-rails-active-storage-with-rails-webpacker-react-fr/53242215#53242215 [解释和解决方案] %}
其实就是，Chrome浏览器中video文件的src需要http/https才能够正确运行，否则无法正确设置currentTime，视频文件很有可能会一设置就跳到头重新播放。

P.S: 如果video文件没有下载到currentTime的时候，但是强行跳转到设置的currentTime，也无法正确运行

腾讯视频QLV格式转换成MP4格式

在做一个项目是需要视频，但是视频资料还没有出来，于是我找了一个视频，从腾讯上下载的，下载下来之后是qlv格式的，h5的viode标签不能使用，于是我在度娘上搜了一下都需要下载软件才能转换，找了几本书边学习边测试用电脑cmd，转换了视频

1.打开腾讯视频播放你想转换的视频，使其缓存完毕。

2.点击右上角的菜单选项，选择设置。

3.选择下载设置，复制缓存视频的地址在文件资源管理器中粘贴地址打开。

4.打开vodcache文件夹，按照播放时间确定哪个文件夹是你需要的视频。

5.把里面所有的TDL格式的文件复制到你所需要的地方。我的现在是E盘

6.用win+R打开运行，并输入cmd，确定。

7.输入d: 再按回车，再输入copy/b .tdl 这儿输入你想要的名称.mp4，为了简便，你也可以输入copy/b .tdl 1.mp4 ,这样会生成名称为1的mp4文件，再重命名即可（代码复制粘贴到cmd.exe即可，若手动输入，不要丢掉1之前的空格）

去D盘查看我们生成的mp4

把webp图片上的链接中的webp改成jpg或png之后回车后下载的就是jpg的图片