58前端笔试

声明：不保证答案一定正确，只是自己理解以及参考别的资料整理出来的，若有误，请各位指正，还是学习阶段的小白同学。多谢捧场！
问答题
1. MVC、MVP、MVVM名词解释
三者都为软件架构，设计模式

MVC：model-view-controller，分为三个部分：model——模型，数据保存功能；view——视图，用户界面；controller——控制器，负责业务逻辑。
通信方式：view将指令传送给controller，controller完成业务逻辑后要求model改变状态，model将新的数据发送到view，用户得到反馈。都是单向的。
接受用户指令的互动模式有两种：一种是通过view接受指令，传给controller；另一种是controller直接接受指令。
实例：Backbone

MVP：将controller改为presenter
通信方式改为了双向，同时view和model之间不通信，都通过presenter传递。

MVVM：将controller改为viewmodel，通信方式与MVP相比，view可向viewmodel单向传递。采用双向绑定，model和viewmodel的交互是双向的，因此视图数据的变化会同时修改数据源，反之亦然。
实例：angularJS

2 .ES6之模版字符串的用法

在js中，输出模版字符串通常需要很多双引号和加号+拼接而成，十分不方便。在ES6中提供了模版字符串，用“反引号标识，${}将变量扩起来

3.用flex布局实现水平垂直居中

<script>
  .item{
    display:flex;
    justify-content:center;
    align-item:center;
  }
</script>
---------------------
<div class="item">
  水平垂直居中 
</div>

4.写出匹配以131-139开头的十一位手机号码

／^13[1-9]/d(8)$／

5.http和https的默认端口号

http 协议常用端口号：80/8080/3128/8081/9080，默认端口号为80／tcp
https默认端口号为443/tcp443/udp

6.css3的box-sizing属性值和说明

content-box：元素的内容宽高=width/height，不包括padding和border，它们在width和height之外绘制
border-box：元素的宽高=content+padding+border，就是设定的width和height已经包括内容区、padding和border，那么内容的宽高=width/height-2padding-2border
inherit：从父元素继承box-sizing属性的值

7.css样式隐藏元素的方法

（1）display：none：元素不可见，同时也不占用空间，对布局没影响，但是不利于seo，会产生重绘和回流
（2）visibility：hidden：元素不可见但仍占据空间，对布局有影响，利于seo优化，但是该属性会继承，其子酸元素也会不见。只会导致浏览器重绘。
（3）position：absolute；top:-9999px;left:-9999px;:相当于将元素移出可视区，但是写法比较死板，不易修改
（4）opacity：0 :将元素透明度设为0，只是从视觉上隐藏元素，而本身仍占据空间并对网页的布局影响，响应用户交互。
（5）clip-path：polygon（0px 0px，0px 0px，0px 0px，0px 0px）：（第一次见）
（6）设置盒模型的height／width为0➕overflow：hidden

8.列举移动端开发中适配各种屏幕尺寸的解决方案

响应式布局：页面元素的位置随着屏幕尺寸的变化而变化，通常用百分比来定位，而在设计上需要预留一些可被压缩的空间。
Cover布局：跟background-size：over属性一样，保持页面的宽高比，选取宽高中的较小者占满屏幕，超出的内容被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。
Contain布局：跟background-size：contain属性一样，保持页面宽高比，取宽高中的较大者占满屏幕，不足的用背景填充。但是需要背景为单色或者是可平铺的背景。
样式缩放：用px为单位按视觉进行开发，通过计算屏幕与网页的宽高比，用transform：scale来对网页进行全局缩放。但是有动画的话会降低页面性能。
Rem缩放：跟样式缩放类似，只是用rem单位开发，计算改变html的font-size对页面进行缩放。比较流行的font-size=62.5%
meta标签：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
css3媒体查询：

9.console.log('10'+1);//101
console.log('10'-1);//9
字符串+任何仍为字符串

10.{
var t='teacher';
var s='student';}
console.log(t);//teacher
console.log(s);//报错，因为let定义的变量是块级的
11.function switchcase(value){
switch(value){
case '0':
console.log('case 0');
case '1':
console.log('case 1');
break;
case 'undefined':
console.log('undefined');
break;
default:
console.log('default');
}
}
switchcase(0)//default;
switchcase('0')//case 0 case 1;
switchcase();//undefined

11.var s={
s:'student',
getS:function(){
console.log(this.s);
}};
var t={
s:'teacher',};
var getS=s.getS;
var getS1=getS.bind(s);
s.getS();//student
s.getS.apply(t);//teacher
getS();//undefined
getS1.call(t);//student
编程题
1.用js实现随机打乱数组并保持其中任一一个元素的位置不变
2.用js实现一个比较app版本号的函数，比如1.1.0，1.10，1.2.3
3.用js为用户生成一个至少包含一个大写字母、一个小写字母、一个特殊符号和一个数字的初始化密码