用正則表達式驗證字符串長度時,必定要帶上 ^ 與 $。 若是咱們把 ^ 與 $ 去了,則凡是含有八位數字的字符串都會驗證經過。javascript
js中 target 與 currentTarget 的區別:
一、target發生在事件流的目標階段,而currentTarget發生在事件流的整個階段(捕獲、目標和冒泡階段)
二、只有當事件流處於目標階段的時候才相同
三、而當事件流處於捕獲和冒泡階段時,target指向被點擊的對象,而currentTarget指向當前事件活動的對象,一般是事件的祖元素。css
js裏面的異步,計時器、xhr等纔會產生。html
js的繼承
6種:
Objct.create方法;(推薦)
call,apply;
原型繼承(子原型指向父實例,子原型利用空對象間接指向父原型);
構造函數+原型;
對象拷貝;
es6中的繼承。vue
如何避免全局變量污染
只建立一個全局命名空間
使用閉包
使用當即執行函數html5
( function(){…} )()
( function (){…} () )
在js中將函數聲明轉換爲函數表達式,只須要在函數聲明前面加上 +,-,=,~ 或 ! 等運算符或者()包起來,寫法均可以,還有apply、call、void,好比: +function(a){ console.log(a); //firebug輸出123456,使用+運算符 }(123456);
(function(){ alert("run!") }).call();
(function(){ alert("run!") }).apply();
void (function(){ alert("run!") })();
es6 let和var的區別
let必須先定義再使用
let不能重複定義
let是塊級做用域,var是函數做用域java
函數做用域鏈是針對函數的
原型鏈是針對對象的構造函數的react
gulp如何建立一個命令
gulp.task()jquery
深拷貝、淺拷貝
淺拷貝:不會產生新的對象,產生一個指針指向原來的對象的地址,也叫地址拷貝或者指針拷貝
深拷貝:產生新的對象,有本身的內存地址,複製的是內容,對副本進行修改不會影響原來的對象css3
css盒模型
content,padding,border,margin
box-sizinges6
gulp在打包中的做用
文件合併,文件壓縮
打版本號
編譯處理css、js
監控資源,自動刷新
js閉包
函數內部的函數,能訪問函數的變量
異步編程:
回調函數
事件驅動模式(觀察者模式)
generator yield
promise
async await
原型鏈繼承
proto
數組的操做:
push、pull、unshift、shift
slice、splice
join,concat
reverse、sort
every、some
forEach、map、filter
跨域請求
jsonp
CORS
h5的window.postMessage
Access-Control-Allow-Origin
document.domain跨子域
window.name
flash方法
在服務器上設置代理頁面
js 數據類型和判斷方法
數據類型 | 種類 |
---|---|
數據類型7種(5+1+1) | number、string、boolean、undefined、null、object、 symbol(ES6) |
typeof 返回數據類型(7種) | number、string、boolean、undefined、 object、function、symbol(ES6) |
判斷方法 | typeof、instanceOf、constructor、Object.prototype.toString.call()(推薦) |
html5本地存儲
localStorage:沒有時間限制的數據存儲,除非被強制清理(1. ui界面點擊刪除;2.程序刪除)
sessionStorage:針對一個 session 的數據存儲
CSS優化
壓縮、合併;
使用複合語法;
提取共用css;
避免 !important;
使用字體圖標;
減小低效代碼
css精靈;
雙向綁定知識:
Angular 使用雙向綁定,Vue 也支持雙向綁定,不過默認爲單向綁定
Vue的數據雙向綁定,和angular 類似
Vue的組件化、數據流,和React類似
Vue2.0 也有虛擬dom和服務端渲染
MVVM流的Angular和Vue,都是經過相似模板的語法,描述界面狀態與數據的綁定關係,而後經過內部轉換,把這個結構創建起來,當界面發生變化的時候,按照配置規則去更新相應的數據,而後,再根據配置好的規則去,從數據更新界面狀態。
雙向綁定的實現,主要分爲三個流派
Angular使用的是,在指定的事件觸發時,進行髒值檢查
Vue使用的是Object.defineProperty的Getter/Setter
React 則是在髒刷新的的基礎上,增長了虛擬dom樹與實際dom樹改變的刷新機制。
實現數據綁定的作法有大體以下幾種:
發佈者-訂閱者模式(backbone.js)
在指定的事件觸發時,進行髒值檢查(angular.js)
數據劫持(vue.js)
vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式,經過Object.defineProperty()來劫持各個屬性的setter,getter,在數據變更時發佈消息給訂閱者,觸發相應的監聽回調。
Vue.js 不使用 Virtual DOM 而是使用真實 DOM 做爲模板,數據綁定到真實節點。Vue.js 的應用環境必須提供 DOM。
js數組去重
將數組的每個元素存成對象的key,可去掉重複
flexbox佈局
display:flex;
flex:1;
justify-content:center;
align-items:center;
jquery addclass原理
給元素添加一個或多個類,若是添加多個類名時,須要在類名之間用空格隔開。
事件流
捕獲、目標階段、冒泡
z-index的相關的東西
css 清除浮動方式
結尾處加空div標籤clear:both;
結尾處加br標籤clear:both
父級div設置高度;
父級div定義:after僞元素;(推薦使用)
父級div定義overflow:hidden;
父級div定義overflow:auto;
父級div也一塊兒浮動;
父級div定義display:table;
清除浮動通常有兩種思路:
1、利用clear屬性,清除浮動
2、使父容器造成BFC
BFC(Block Formatting Context)有三個特性:
阻止垂直外邊距(margin-top、margin-bottom)摺疊
不會重疊浮動元素
能夠包含浮動
如何造成BFC:
(1)float值不爲none,能夠是left,right或both
(2)overflow爲hidden或auto或scroll
(3)display爲inline-block或table-cell或table-caption
(4)position爲absolute或fixed
計算各類寬度和高度:
client 包含padding,不包含border
offset 包含padding和border
scoll 包含padding,再加上任何溢出內容的尺寸
css樣式優先級計算規則:
4個等級的定義以下:
第一等:內聯樣式,如: style=」」,權值爲1000。
第二等:ID選擇器,如:#content,權值爲100。
第三等:類,僞類和屬性選擇器,如.content,權值爲10。
第四等:元素選擇器和僞元素選擇器,如div p,權值爲1。
各類樣式選擇:
行內樣式: style=""
ID選擇器:id=""
類選擇器:class=""
僞類::active :focus :hover :link :visited :first-child :lang
屬性選擇器:[title='xx']
標籤選擇器:p 或 div 等元素標籤
僞元素::first-letter :first-line :before :after
後代選擇器:h1 em
子元素選擇器:p > a
相鄰兄弟選擇器: li + p
問:display:table 和 display:table-cell 必須一塊兒用嗎?
答:能夠不一塊兒用。
若是你不給display: table-cell的父親或祖先節點設置display: table,瀏覽器會建立匿名的table-row框和table塊框/table內聯框出來
應用css table佈局的時候也分狀況。
若是你須要對display: table-cell設置百分比高度(或)寬度時,就須要組合使用display:table。
設置px寬度時,能夠不使用display:table。
var people = { name:'kobe', age:'34' };
2.經過new建立對象
var arr = new Array();
3.經過Object.create()來建立對象
var obj = Object.create({x:1});
淺拷貝:不會產生新的對象,產生一個指針指向原來的對象的地址,也叫地址拷貝或者指針拷貝
深拷貝:產生新的對象,有本身的內存地址,複製的是內容,對副本進行修改不會影響原來的對象
Function instanceof Object // true Object instanceof Function // true Function instanceof Function //true Object instanceof Object // true Number instanceof Number //false
React組件間傳值:
1.父組件傳遞給子組件:props
2.子組件傳遞給父組件:回調函數(推薦),自定義事件機制
3.父組件跨級傳遞給子組件:1)context (推薦);2)props層層傳遞
4.沒有關係的組件傳遞:自定義事件機制
perspective:none |
perspective屬性包括兩個屬性:none和具備單位的長度值。其中perspective屬性的默認值爲none,表示無限的角度來看3D物體,但看上去是平的。另外一個值
好比你站在10英尺和1000英尺的地方看一個10英尺的立方體。在10英尺的地方,你距離立方體是同樣的尺寸。所以視角轉變遠遠大於站在1000英尺處的,立體尺寸是你距離立方體距離的百分之一。一樣的思惟適用於perspective的
-webkit-backface-visibility:hidden; -webkit-perspective:1000;
obj.constructor === Object arr.constructor === Array
2.對象的Object.prototype.toString()方法(推薦)
Object.prototype.toString.call(obj) === '[object Object]' Object.prototype.toString.call(arr) === '[object Array]'
3.使用typeof加length屬性
數組有length屬性,object沒有
if(typeof o == 'object'){ if( typeof o.length == 'number' ){ return 'Array'; }else{ return 'Object'; } }
4.使用instanceof
instanceof判斷後,數組既是數組類型,也是對象類型;對象只是對象類型。
利用instanceof判斷數據類型時,應該先判斷array,再判斷object。
if(o instanceof Array){ return 'Array' }else if( o instanceof Object ){ return 'Object'; }
typeof obj === 'object'
2.instanceof方法
obj instanceof Object
3.對象的constructor屬性
obj.constructor === Object
4.對象的Object.prototype.toString()方法(推薦)
Object.prototype.toString.call(obj) === '[object Object]'
arr instanceof Object && arr instanceof Array
2.對象的constructor屬性
arr.constructor === Array
3.對象的Object.prototype.toString()方法 (推薦)
Object.prototype.toString.call(arr) === '[object Array]'
4.es6的Array.isArray()方法
Array.isArray(arr)
模塊化、組件化 的理解:
組件化和模塊化的價值都在於分治;
模塊化,按照其功能作拆分;
組件化,組件化就是基於可重用的目的,將一個大的軟件系統按照分離關注點的形式,拆分紅多個獨立的組件,以減小耦合。
css3新特性:
邊框:border-radius、box-shadow、border-image
背景:background-size、background-origin、background-clip
文本效果:text-overflow、text-shadow、word-wrap、text-emphasis等
字體:@font-face
transform 的 2d轉換(5種):
translate() 移動
rotate() 旋轉
scale() 縮放
skew() 傾斜
matrix() 以上轉換都是應用matrix()方法實現的
transform 的 3d轉換(4種):
translate3d() 移動
rotate3d() 旋轉
scale3d() 縮放
matrix3d() 以上轉換都是應用matrix()方法實現的
過渡transtion:
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
一塊內容,多列 顯示:
column-count
column-gap
column-rule
用戶界面
resize
box-sizing
outline-offset
通常地,過渡transition的觸發有三種方式,分別是僞類觸發、媒體查詢觸發和javascript觸發。其中經常使用僞類觸發包括:hover、:focus、:active等
Javascript規定,每個構造函數都有一個prototype屬性,指向另外一個對象。這個對象的全部屬性和方法,都會被構造函數的實例繼承。
這意味着,咱們能夠把那些不變的屬性和方法,直接定義在prototype對象上。
isPrototypeOf()方法用來判斷,某個proptotype對象和某個實例之間的關係。
每一個實例對象都有一個hasOwnProperty()方法,用來判斷某一個屬性究竟是本地屬性,仍是繼承自prototype對象的屬性。
in運算符能夠用來判斷,某個實例是否含有某個屬性,無論是否是本地屬性。
in運算符還能夠用來遍歷某個對象的全部屬性。
任何一個prototype對象都有一個constructor屬性,指向它的構造函數。每個實例也有一個constructor屬性,默認調用prototype對象的constructor屬性。
js代碼是一段一段執行的(以<script>
標籤來分割),執行每一段前,都有「預編譯」和「執行」兩個階段;
預編譯階段:
聲明全部var變量(初始爲undefined),解析定義式函數語句。
css3 animation動畫幾種方式?
log表示對數。
若是a^n = b(a>0,且a≠1),那麼數n叫作以a爲底b的對數,記作n=log(a)b,【a是下標】。
其中,a叫作「底數」,b叫作「真數」。 可理解爲:底數^對數 = 真數。
舉例:2^3=8,則3=log(2)8。
map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組自己。
語句:["1", "2", "3"].map(parseInt);
依次執行:parseInt(1,0,[1,2,3])、parseInt(2,1,[1,2,3])、parseInt(3,2,[1,2,3])。parseInt須要2個參數,實際執行:parseInt(1,0)、parseInt(2,1)、parseInt(3,2),依次返回:1,NaN,NaN。
parseInt("3", 2) 的第二個參數是界於 2-36 之間的,之因此返回 NaN 是由於 字符串 "3" 裏面沒有合法的二進制數,因此 NaN。
若是函數只須要一個參數,就是將數組的每一個值傳給函數。
parseInt(string, radix)
參數 | 描述 |
---|---|
string | 必需;要被解析的字符串。 |
radix | 可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。 |
瀏覽器緩存原理:
一篇比較好的介紹文章:http://www.cnblogs.com/vajoy/p/5341664.html
一. If-None-Match (Etag) 和 If-Modified-Since (Last-Modified) :
對應以下所示:
返回頭(Response Headers) | 對應 | 請求頭(Request Headers) |
---|---|---|
etag | 對應 | if-none-match |
last-modified | 對應 | if-modified-since |
304,表明 NOT MODIFIED,他發生在這樣的一種狀態下:服務器正確接收到了一個帶條件(Conditional Validation)的 GET,若是這個條件是真的就會返回 30四、不然就會返回 200。
換個角度來講,若是瀏覽器接收到的 response 的狀態碼是 304,就表明這個資源在客戶端中的緩存依然是有效的,即在上次拿到資源到當前這段時間以內服務器端並無對這個資源作修改。
etag 與 last-modified是服務器在接收到帶條件的GET 請求以後塞到 response 的 header 裏面。
若是本地有相關資源的緩存,而且在緩存的時候響應頭裏面有 etag 或者 last-modified 的狀況,這個時候去請求服務器的時候就會是帶有條件的 GET 請求(Conditional Validation)。
在請求頭裏面可能會有兩個字段: if-none-match、 if-modified-since,其中 if-none-match 的值是服務器上次返回該資源時響應頭裏面 etag 的值,if-modified-since 的值是服務器上次返回該資源時響應頭裏面 last-modified 裏的值。
緊接着服務器端就會接收到這個帶有條件的 request,而後會根據這兩個值去判斷緩存的資源是不是最新的。
若是沒問題,即資源是最新的狀況下就會返回 304,body 爲空;不是的話就會返回 200,即目前瀏覽器端的資源不是最新的,body 裏面就是資源體,而後客戶端就會用最新返回的資源覆蓋掉以前的資源。
發送這種帶條件的請求的必要條件是 資源在瀏覽器端有緩存,而且在緩存的時候服務器端的reponse 裏面有 etag 或者 last-modified。若是這個條件不知足,發送的請求就是沒有條件的(unconditionally)。
若是 Last-Modified 和 ETag 同時被使用,則要求它們的驗證都必須經過纔會返回304,若其中某個驗證沒經過,則服務器會按常規返回資源實體及200狀態碼。
若是同時有 etag 和 last-modified 存在,在發送請求的時候會一次性的發送給服務器,沒有優先級,服務器會比較這兩個信息(在具體實現上,大多數作法針對這種狀況只會比對 etag)。
服務器在輸出上,若是輸出了 etag 就沒有必要再輸出 last-modified(實際上大多數狀況都會輸出)。
二. Cache-Control 和 Expires :
在 response 裏面 Cache-Control 和 Expires,都用來指定過時時間;若是同時存在,Cache-Control 優先級大於 Expires 。
在這段時間內,不去請求服務器。
例子以下:
cache-control:max-age=96247433 expires:Thu, 03 Jan 2019 04:24:16 GMT
實際上瀏覽器輸入 url 以後敲下回車就是先看本地 cache-control、expires 的狀況,刷新(F5)就是忽略本地 cache-control、expires 的狀況,帶上條件 If-None-Match、If-Modified-Since,強制刷新(Ctrl + F5)就是不帶條件的訪問。
在 Windows 系統中,瀏覽器的刷新快捷鍵都是 F5,強制刷新是 Ctrl+F5,而在 Mac 系統下瀏覽器的刷新快捷鍵變成了 command+R,Chrome 中的強制刷新快捷鍵爲 command+shift+R。
function f1(){ var n=999; function f2(){ alert(n); // 999 } }
僞數組轉換爲數組:
[].slice.call(obj,0); 或 Array.prototype.slice.call(obj,0);
通常狀況下有哪些地方會有緩存處理?
dns緩存,cdn緩存,瀏覽器緩存,服務器緩存
經常使用函數:
split:將字符串分割成數組
join:將數組合成字符串
slice:返回子數組
splice:數組中添加、刪除元素
會改變數組的方法是:添加和刪除4個,reverse,sort,splice
其餘方法都不會改變數組。
阻止瀏覽器的默認行爲:
window.event ? window.event.returnValue = false : e.preventDefault();
中止事件冒泡:
window.event ? window.event.cancelBubble = true : e.stopPropagation();
原生JavaScript中,return false;只阻止默認行爲,不阻止冒泡;jQuery中的return false;既阻止默認行爲,又阻止冒泡。
隱式轉換爲false的狀況(6種):
undefined、null、false、''、NaN、0
Dom tree,css tree,render tree,layout,painting,[reflow重排,repaint重繪]
正則表達式 構造函數:var reg=new RegExp(「xxx」);
正則表達式 字面量:var reg=//
js的運行主要分兩個階段:js的預解析和運行,預解析階段全部的變量聲明和函數定義都會提早,可是變量的賦值不會提早。
頁面性能優化======
壓縮
合併
減小http請求數
減小dom數量
減小dom操做
使用緩存
瀏覽器內核:
Blink:新版chrome
Webkit:Safari、舊版chrome
Gecko:Firefox
Trident:舊版IE
EdgeHTML:IE10及之後使用
Presto:舊版opera
瀏覽器內核又能夠分紅兩部分:渲染引擎和 JS 引擎。
jsonp原理:建立script標籤,src是一個腳本,腳本的內容是一個函數調用。事先在頁面定義好回調函數。
ajax====
優勢:異步調用,局部刷新;
缺點:1.對搜索引擎支持不友好;2.不安全,暴露了交互參數;3.不支持瀏覽器back按鈕;
當即執行函數,匿名函數============
this指向:
全局的this → 指向的是Window
函數中的this → 指向函數所在的對象
對象中的this → 指向自己
function f1(){ console.log(this); } var obj = new f1(); // 此時,this是函數f1; f1已是一個對象 f1(); // 此時,this是window對象
保存變量========
保存基本類型的變量,變量是按值訪問的,由於咱們操做的是變量實際保存的值。
保存引用類型的變量,變量是按引用訪問的,咱們操做的是變量值所引用(指向)的對象。
在函數內部修改了引用類型值的參數,該參數值的原始引用保持不變。
var str = 'hello'; function test() { console.log(str); // 輸出:undefined. 下一行聲明瞭變量,預解析時聲明提早;只聲明,沒賦值,因此是undefined var str = 'world'; // 變量同名,函數內,局部變量覆蓋全局變量;爲何會覆蓋全局變量,由於js的鏈式做用域 console.log(str); // 輸出:world } test(); console.log(str); // 輸出:hello. 不在函數內,是訪問全局變量.
js中的數字都是用IEEE 754 標準的雙精度浮點數表示。
單豎槓「|」運算就是轉換爲2進制以後相加獲得的結果。
new操做符具體幹了什麼?
一、建立一個空對象,而且 this 變量引用該對象,同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用,而且最後隱式的返回 this 。
事件的3個階段:
捕獲階段、目標階段、冒泡階段
捕獲:window -> document -> html -> body -> div
冒泡:div -> body -> html -> document -> window
ele.addEventListener('click',function(){},false);
第三個參數,默認false。true是捕獲,false是冒泡。
阻止冒泡:
在W3c中,使用stopPropagation()方法
在IE下設置cancelBubble = true;
阻止事件的默認行爲:
在W3C中,使用preventDefault()方法;
在IE下設置window.event.returnValue = false;
es6新特性========
關鍵字:let與const
箭頭操做符
模塊
類
模板字符串
默認參數、剩餘參數
Map,Set 和 WeakMap,WeakSet
Math,Number,String,Object 的新方法
promise、generator
h5新特性========
移動端 作的項目、功能======
開發、上線流程=====
js發佈到發佈服務器上,用戶訪問cdn來拉取,默認緩存5分鐘;
架構=========
實現先後端分離。
用戶終端=》cdn=》負載均衡=》web服務層=》業務層=》後端接口
cdn=====
js代碼推到發佈機上,用戶訪問的時候拉取;緩存5分鐘。
var obj = { 1:'111', aaa:'aaabbb' }
好比:obj['1'], obj['aaa']