面試題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'))
})