js 知識點

  • 用正則表達式驗證字符串長度時,必定要帶上 ^ 與 $。 若是咱們把 ^ 與 $ 去了,則凡是含有八位數字的字符串都會驗證經過。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,再加上任何溢出內容的尺寸

  • 各類寬度和高度:
  1. clientWidth和clientHeight 包括padding,不包括border。
  2. offsetWidth 和 offsetHeight 是用來獲得對象的大小,由自身寬高、padding、border構成。
    offsetLeft 和 offsetTop 用來獲得對象的位置,到距離自身最近的(帶有定位的)父元素的左側/頂部 的距離,若是全部父級都沒有定位則以body 爲準
  3. scrollHeight和scrollWidth 對象內部實際內容的高度/寬度,包括padding,不包括border;
    scrollTop和scrollLeft 被捲去部分的 頂部/左側 到可視區域 頂部/左側 的距離
  • 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。

  • 問:react爲何要在componentDidMount裏作ajax等操做?
    答:
  1. 跟服務器端渲染(同構)有關係,若是在 componentWillMount 裏面獲取數據,fetch data 會執行兩次,一次在服務器端一次在客戶端。在 componentDidMount 中能夠解決這個問題;
  2. 在 componentWillMount 中 fetch data,數據必定在 render 後才能到達,若是你忘記了設置初始狀態,用戶體驗很差;
  3. react16.0 之後,componentWillMount 可能會被執行屢次;
  4. 在 componentWillMount 中捕捉請求錯誤沒法用dom元素提示。
  • 建立對象的方法,3種:
  1. 使用對象直接量
var people = {  
  name:'kobe',  
  age:'34'  
};

2.經過new建立對象

var arr = new Array();

3.經過Object.create()來建立對象

var obj = Object.create({x:1});
  • 淺拷貝:不會產生新的對象,產生一個指針指向原來的對象的地址,也叫地址拷貝或者指針拷貝
    深拷貝:產生新的對象,有本身的內存地址,複製的是內容,對副本進行修改不會影響原來的對象

  • instanceof的左值通常是一個對象,右值通常是一個構造函數,用來判斷左值是不是右值的實例。它的內部實現原理是這樣的:
    //設 L instanceof R
    //經過判斷
    L.__proto__.__proto__ ..... === R.prototype ?
    //最終返回true or false
    也就是沿着L的__proto__一直尋找到原型鏈末端,直到等於R.prototype爲止。知道了這個也就知道爲何如下這些奇怪的表達式爲何會獲得相應的值了
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物體,但看上去是平的。另外一個值 接受一個長度單位大於0的值。並且其單位不能爲百分比值。 值越大,角度出現的越遠,從而建立一個至關低的強度和很是小的3D空間變化。反之,此值越小,角度出現的越近,從而建立一個高強度的角度和一個大型3D變化。
    好比你站在10英尺和1000英尺的地方看一個10英尺的立方體。在10英尺的地方,你距離立方體是同樣的尺寸。所以視角轉變遠遠大於站在1000英尺處的,立體尺寸是你距離立方體距離的百分之一。一樣的思惟適用於perspective的 值。

  • css3開啓GPU加速:
    爲動畫DOM元素添加CSS3樣式 -webkit-transform:transition3d(0,0,0) 或 -webkit-transform:translateZ(0) ,這兩個屬性都會開啓GPU硬件加速模式。
    TIPS:經過 -webkit-transform:transition3d/translateZ 開啓GPU硬件加速以後,有些時候可能會致使瀏覽器頻繁閃爍或抖動,能夠嘗試如下辦法解決之:
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
  • js判斷是對象仍是數組:
    1.對象的constructor屬性
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';
}
  • js判斷是對象:
    (聲明一個對象:var obj = {};,下面引用)
    1.typeof方法
typeof obj === 'object'

2.instanceof方法

obj instanceof Object

3.對象的constructor屬性

obj.constructor === Object

4.對象的Object.prototype.toString()方法(推薦)

Object.prototype.toString.call(obj) === '[object Object]'
  • js判斷是數組:
    (聲明一個數組:var arr = [];,下面引用)
    1.instanceof方法
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)
  • 繼承的6種方法:
  1. call,apply=
  2. 原型繼承,分爲2種:子原型指向父實例,子原型經過空對象作中介間接指向父原型
  3. 構造函數+原型
  4. 對象拷貝
  5. Object.create方法(推薦)相關例子:http://runjs.cn/detail/t3mdmyp8
  6. ES6裏的繼承
  • 模塊化、組件化 的理解:
    組件化和模塊化的價值都在於分治;
    模塊化,按照其功能作拆分;
    組件化,組件化就是基於可重用的目的,將一個大的軟件系統按照分離關注點的形式,拆分紅多個獨立的組件,以減小耦合。

  • 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等

  • 函數式編程 ======  
    "函數式編程"是一種"編程範式"(programming paradigm),也就是如何編寫程序的方法論。
    它屬於"結構化編程"的一種,主要思想是把運算過程儘可能寫成一系列嵌套的函數調用。
    函數式編程具備五個鮮明的特色。
  1. 函數是"第一等公民"
    指的是函數與其餘數據類型同樣,處於平等地位,能夠賦值給其餘變量,也能夠做爲參數,傳入另外一個函數,或者做爲別的函數的返回值。
  2. 只用"表達式",不用"語句"
    "表達式"(expression)是一個單純的運算過程,老是有返回值;"語句"(statement)是執行某種操做,沒有返回值。函數式編程要求,只使用表達式,不使用語句。也就是說,每一步都是單純的運算,並且都有返回值。
  3. 沒有"反作用"
    函數式編程強調沒有"反作用",意味着函數要保持獨立,全部功能就是返回一個新的值,沒有其餘行爲,尤爲是不得修改外部變量的值。
  4. 不修改狀態
    函數式編程只是返回新的值,不修改系統變量。
  5. 引用透明
    引用透明(Referential transparency),指的是函數的運行不依賴於外部變量或"狀態",只依賴於輸入的參數,任什麼時候候只要參數相同,引用函數所獲得的返回值老是相同的。
  • 函數式編程好處====
  1. 代碼簡潔,開發快速
  2. 接近天然語言,易於理解
  3. 更方便的代碼管理
  4. 易於"併發編程"
  5. 代碼的熱升級
  • Javascript規定,每個構造函數都有一個prototype屬性,指向另外一個對象。這個對象的全部屬性和方法,都會被構造函數的實例繼承。
    這意味着,咱們能夠把那些不變的屬性和方法,直接定義在prototype對象上。
    isPrototypeOf()方法用來判斷,某個proptotype對象和某個實例之間的關係。
    每一個實例對象都有一個hasOwnProperty()方法,用來判斷某一個屬性究竟是本地屬性,仍是繼承自prototype對象的屬性。
    in運算符能夠用來判斷,某個實例是否含有某個屬性,無論是否是本地屬性。
    in運算符還能夠用來遍歷某個對象的全部屬性。
    任何一個prototype對象都有一個constructor屬性,指向它的構造函數。每個實例也有一個constructor屬性,默認調用prototype對象的constructor屬性。

  • html5新特性:
  1. 標籤:
    新增:header,footer,nav,article,audio,video
    刪除:pre,frame,iframe
  2. canvas,svg,webGL
  3. WEB 存儲:localStorage,sessionStorage
  4. 地理定位:location
  5. 應用緩存:manifest
  6. web workers,web socket
  7. 服務器發送事件
  • 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語法
parseInt(string, radix)
參數 描述
string 必需;要被解析的字符串。
radix 可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。
  • JS嚴格模式:
  1. 全局變量必須顯式聲明。
  2. 靜態綁定 (1)禁止使用with語句 (2)創設eval做用域
  3. 增長的安全措施 (1)禁止this關鍵字指向全局對象 (2)禁止在函數內部遍歷調用棧
  4. 禁止刪除變量 只有configurable設置爲true的對象屬性,才能被刪除。
  5. 顯示報錯
  6. 重名錯誤 1)對象不能有重名的屬性 (2)函數不能有重名的參數
  7. 禁止八進制表示法
  8. arguments對象的限制 (1)不容許對arguments賦值 (2)arguments再也不追蹤參數的變化 (3)禁止使用arguments.callee
  9. 函數必須聲明在頂層
  10. 不能使用保留字:implements, interface, let, package, private, protected, public, static, yield。
  • 瀏覽器緩存原理:
    一篇比較好的介紹文章: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。

  • 閉包========
  1. 在函數外部天然沒法讀取函數內的局部變量。
  2. "鏈式做用域"結構(chain scope):子對象會一級一級地向上尋找全部父對象的變量。因此,父對象的全部變量,對子對象都是可見的。
  3. 閉包就是可以讀取其餘函數內部變量的函數,能夠把閉包簡單理解成「定義在一個函數內部的函數」。f2函數,就是閉包。
function f1(){
    var n=999;
    function f2(){
        alert(n); // 999
    }
}
  1. 閉包的最大用處有兩個:一個是能夠讀取函數內部的變量,另外一個就是讓這些變量的值始終保持在內存中。
  2. 使用閉包的注意點:閉包會在父函數外部,改變父函數內部變量的值;不要濫用閉包,消耗內存;
  3. 清空閉包保存在內存中的變量,方法是:在退出函數以前,將不使用的局部變量所有刪除。
  • 做用域========1.function劃分;2.預解析;3.同名覆蓋。
  1. Javascript的變量的scope是根據方法塊來劃分的(也就是說以function的一對大括號{ }來劃分)。切記,是function塊,而for、while、if塊並非做用域的劃分標準。
  2. Javascript在執行前會對整個腳本文件的聲明部分作完整解析(包括局部變量),從而肯定好變量的做用域。
  3. 當全局變量跟局部變量重名時,局部變量的scope會覆蓋掉全局變量的scope;當離開局部變量的scope後,又重回到全局變量的scope;而當全局變量趕上局部變量時,怎樣使用全局變量呢?用window.[globalVariableName]。
  • 僞數組 定義:
  1. 具備length屬性
  2. 按索引方式存儲數據
  3. 不具備數組的push,pop等方法
  • 僞數組轉換爲數組:
    [].slice.call(obj,0); 或 Array.prototype.slice.call(obj,0);

  • jQuery爲開發插件提拱了兩個方法,分別是:
  1. $.extend(object); 用來擴展jQuery對象自己。
  2. $.fn.extend(object); 用來開發jQuery插件,擴展jQuery實例; jQuery.fn = jQuery.prototype;是對jQuery.prototype的擴展,會對每個jQuery實例有效。
    區別:
    jQuery.extend() 的調用並不會把方法擴展到對象的實例上,引用它的方法也須要經過jQuery類來實現,如jQuery.init();
    而 jQuery.fn.extend()的調用把方法擴展到了對象的prototype上,因此實例化一個jQuery對象的時候,它就具備了這些方法。
  • 通常狀況下有哪些地方會有緩存處理?
    dns緩存,cdn緩存,瀏覽器緩存,服務器緩存

  • 經常使用函數:
    split:將字符串分割成數組
    join:將數組合成字符串
    slice:返回子數組
    splice:數組中添加、刪除元素

  • 會改變數組的方法是:添加和刪除4個,reverse,sort,splice
    其餘方法都不會改變數組。

  • 何時使用 jQuery.attr() ,何時使用 jQuery.prop() ?
  1. 添加屬性名稱該屬性就會生效應該使用prop(); 好比:checked,selected
  2. 是有true,false兩個屬性使用prop();
  3. 其餘則使用attr();
  • 阻止瀏覽器的默認行爲:
    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 引擎。

  • sass與less:
    他們是動態的樣式語言,是CSS預處理器,CSS上的一種抽象層。
    區別:
  1. 變量符不同,Sass是$,而less是@;
  2. Sass支持條件語句,可使用if{}else{},for{}循環等等。而Less不支持;
  3. Sass是基於Ruby的,是在服務端處理的,而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器
  • 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 。

  • 原型,原型鏈=======
  1. 原型對象也是普通的對象,是對象一個自帶隱式的 proto 屬性,原型也可能有本身的原型;
    若是一個原型對象的原型不爲 null 的話,就能組成原型鏈。
  2. 原型鏈是由一些用來繼承和共享屬性的對象組成的(有限的)對象鏈。
  • 事件的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分鐘。

  • 經過對象的key來得到value,要使用 obj['key'] 的形式。
var obj = { 1:'111', aaa:'aaabbb' }

好比:obj['1'], obj['aaa']

相關文章
相關標籤/搜索