面试题1

HTML

HTML5新增了哪些内容或API，使用过哪些

• 内容：新增的表单元素；新增的语义化标签；input类型；表单元素的属性；
• API：拖拽；地理定位；离线存储；websocket

input和textarea的区别

• input：只能是单行；
• textarae：能够是多行

用一个div模拟textarea的实现

<div cintenteditabel="true"></div>

 

移动设备忽略将页面中的数字识别为电话号码的方法 — 2017.06.10补充

<meta content="telephone=no" name="format-detection">
//format-detection:表示格式检测

 

CSS

CSS3用过哪些新特性

• 圆角；背景；线性渐变；径向渐变；阴影

BFC、IFC

• BFC：块级格式上下文。 
  
  • 布局规则： 
    
    • 内部的box会在垂直方向，一个接一个的布置；
    • BFC就是页面上一个独立的容器区域。不会影响外部的元素；
    • box垂直方向的距离游margin决定，属于同一个BFC中的两个box会发生margin的重叠
  • 会产生BFC的元素： 
    
    • 浮动元素
    • 绝对定位和固定定位
    • display为inline-block；table-cell等行内块级元素
• IFC：行级格式化上下文 
  
  • 布局规则： 
    
    • Box会一个一个的水平排放
    • 竖屏的margin,padding,boder有效，垂直的没有效果

对栅格的理解

• 栅格系统是如今比较流行的系统，也算是bootstrap的核心，他给人的第一个感受就是整洁简单。
• 首先它是包含在一个类名为container的容器中，以后下层是一个类名为row的容器，表示行，下边是一个类名为cli-md-xx的容器，表示占据几行，共有12行，也至关因而单元格，这样一个简单的栅格系统就出来了
• 还有一个列偏移，狮子啊一个类名为col-md-offset-xx的容器中，表示向右偏移几列

（水平）居中有哪些实现方式

//第一种
div{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

 

//第二种
 div{
     width:100px;
     height:100px;
     background: navy;
     position: absolute;
     margin:auto;
     top:0;
     left:0;
     bottom:0;
     right:0;
}

//第三种
div{
    width:100px;
    height:100px;
    background: navy;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

 

 

1像素边框问题

• 将div的宽高设置为200%，而后用transform：scale（0.5，0.5）缩小

JavaScript

事件委托

• 把一个事件交给当前元素的父级或document，经过e.target来肯定要操做的元素，只绑定一次解决这一类型的的全部事件

实现extend函数


function extend(obj1,obj2){
    for(var attr in obj1){
        obj2[attr]=obj1[attr]
    }
}

 

为何会有跨域的问题以及解决方式

• 当两个url的协议的协议，端口，域名有一个不一样就属于跨域，经常使用的跨域方式有： 
  
  • jsonp
  • CORS

jsonp原理、postMessage原理

• jsonp：就是在页面中动态建立script元素，引入一个js文件，文件加载成功后执行url中的指定的函数，并将咱们须要的json数据做为参数传递进去
• postMessage：是HTML5引进的新特性，能够用它来向其余的window对象发送信息，不管是同源仍是非同源；调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，若是不想限定域，可使用通配符 * 。

动画：setTimeout什么时候执行，requestAnimationFrame的优势

• 用js实现动画，通常使用setTimeout和setInterval。css3出来就能够用css3来实现动画
• setTimeout表示在一点时间内执行某一个动做，执行且执行一次
• setInterval表示每过一段时间就执行一次，执行屡次
• requestAnimationFrame的优势 
  
  • requestAnimationFrame 会把每一帧中的全部DOM操做集中起来，在一次重绘或回流中就完成，而且重绘或回流的时间间隔牢牢跟随浏览器的刷新频率，通常来讲，这个频率为每秒60帧。
  • 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这固然就意味着更少的的cpu，gpu和内存使用量。
  • requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout

ES6新增了哪些特性，使用过哪些，也有当场看代码说输出结果的

其实我以为经常使用的也就这几个

• let：能够隐式建立做用域
• const：建立常量通常用来
• 箭头函数：解决了this的问题，在这里this指向当前元素的父级做用域
• 函数中：能够在参数中传递默认值

promise的实现原理

• promise是一个一部的编程方案，从语法上来说，他是一个对象，能够获取异步操做的信息
• 特色： 
  
  • 对象的状态不受外界的影响，有三个状态：pending(进行中)，resolved(已经完成)，rejected(失败了)
• 基本用法 
  
  • promise是一个构造函数，用来生成实例
  • resolve：异步操做成功，将异步操做的结果做为参数传递出去
  • reject：异步操做失败，将报出的错误做为参数传递出去

var promise=new Promise(function(resolve.reject){
    if(//操做成功){
        resolve(valve)
    }else{
        reject(error)
    }
})

 

• 实例生成后，使用then指定resolved状态和rejectes状态的回调函数
• then方法有两个参数，参数一是成功后执行的回掉函数，第二个是失败后执行的回掉函数

var p1=new Promise(function(resolve,reject){
    setTimeout(()=>resolve(new Array(3)),3000)
}).then(()=>console.log('成功')，()=>console.log('失败'))

 

• promise实例生成后会当即执行，而后是同步的方法，最后是then方法

实现gulp的功能

//html文件的操做
var gulp=require('gulp');
var $=require('gulp-load-plugins')();
gulp.task('html',function(){
    gulp.src('./app/*.html')
    //压缩html文件
    .pipe($.minifyHtml)
    .pipe(gulp.dest('./build'))
})

//js文件操做
var gulp=require('gulp');
//这里要执行
var $=require(gulp-load-plugins)();
gulp.task('js',function(){
//获取源文件
gulp.src('./app/js/*.js')
//把ES6编译为ES5
.pipe($.babel({presetd:['es2015']}))
//合并成一个js文件
.pipe($.concat('all.js'))
//写到指定文件夹中
.pipe(gulp.dest('./build/js'))
//对文件进行压缩
.pipe($.uglify())
//对压缩后的文件重命名，不然会覆盖
.pipe($.rename('all.min.js'))
//再保存一份到build文件夹下
.pipe(gulp.dest('./build/js'))
})

//css文件的操做
var gulp=require('gulp');
var $=require('gulp-load-plugins')();
gulp.task('css',function(){
//读取源文件
gulp.src('./app.css/*.css')
//将less编译为css
.pipe($.less())
//合并成一个css文件
.pipe($.concat('all.css'))
//拷贝到指定的文件夹中
.pipe(gulp.dest('./build/css'))
//压缩css
.pipe($.cleanCss())
//重命名
.pipe($.rename(function(file){
//这在函数中的做用是之后改动文件名的时候不须要改变min的名字
file.basename+='.min'
}))
//在写入文件中
.pipe(gulp.dest('./build/css'))
})