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')) })