經常使用前端知識積累

時間  2019-12-11
標籤 經常 使用 前端 知識 積累 简体版
原文   原文鏈接

j1、s規範：javascript

1.css

不要在代碼中留大段註釋掉的代碼

2.html

適當地換行

適當的添加註釋，但不要瘋狂的添加註釋

3.前端

將相似行爲、命名的代碼歸類在一塊兒

在不破壞語義性的狀況下，'能省則省'

// bad
arr.map(a => {
  return add(a)
})
setTimeout(() => {
  doSomething()
}, 1000)
// good
arr.map(add)
setTimeout(doSomething, 1000)

　　

// bad
const a = (v) => {
  return v + 1
}
// good
const a = v => v + 1
// bad
const b = (v, i) => {
  return {
    v,
    i
  }
}
// good
const b = (v, i) => ({v, i})
// bad
const c = () => {
  return (dispatch) => {
    // doSomething
  }
}
// good
const c = () => dispatch => {
  // doSomething
}

　　4.java

合理使用各類表達式

// bad
if (cb) {
  cb()
}
// good
cb && cb()
// bad
if (a) {
  return b
} else {
  return c
}
// good
return a ? b : c
// bad
if (a) {
  c = a
} else {
  c = 'default'
}
// good
c = a || 'default'

　　5.web

鏈式調用寫法

// bad
fetch(url).then(res => {
  return res.json()
}).then(() => {
  // doSomething
}).catch(e => {
})
// good
fetch(url)
  .then(res => {
    return res.json()
  })
  .then(() => {
    // doSomething
  })
  .catch(e => {
  })

　二.概念理解chrome

閉包的理解

使用閉包主要是爲了設計私有的方法和變量。 優勢是能夠避免全局變量的污染， 缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露編程

 

Cookie

第一：每一個特定的域名下最多生成20個cookiejson

  1. IE6或更低版本最多20個cookie跨域

  2. IE7和以後的版本最後能夠有50個cookie。

  3. Firefox最多50個cookie

  4. chrome和Safari沒有作硬性限制

第二：cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節

優勢:極高的擴展性和可用性

  1. 經過良好的編程，控制保存在cookie中的session對象的大小。

  2. 經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。

  3. 只在cookie中存放不敏感數據，即便被盜也不會有重大損失。

  4. 控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點:

  1. Cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

  2. 安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

  3. 有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

     

瀏覽器本地存儲

sessionStorage

本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。 所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲

localStorage

用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的

web storage和cookie的區別

Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用 cookie須要前端開發者本身封裝setCookie，getCookie

 

link 和@import 的區別是

  1. link屬於HTML標籤，而@import是CSS提供的;

  2. 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

  3. import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

  4. link方式的樣式的權重 高於@import的權重.

     

box-sizing屬性

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box

  • content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

  • border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

     

BFC規範的理解

級格式化上下文，是CSS中的一個渲染機制，BFC就至關於一個盒子，內部的元素與外界的元素互不干擾。它不會影響外部的佈局，外部的佈局也不會影響到它.

建立BFC

  • float的值不是none

  • position 的值不是static或者relative

  • display的值是inline-block,table-cell,flex,table-caption或者inline-flex

  • overflow的值不是visible

BFC的特性

  • 內部的BOX會在垂直方向上一個接一個的放置

  • 於同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。

  • 每一個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即便浮動元素也是如此

  • BFC的區域不會與float的元素區域重疊

  • 計算BFC的高度時，浮動子元素也參與計算

  • BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然

BFC在佈局中的應用

要阻止margin重疊，只要將倆個元素別放在一個BFC中便可

使得父元素包含子元素，常見的方式是爲父元素設置overflow：hidden或者浮動父元素。根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題

與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性能夠做爲多欄佈局的一種實現方式. 特色在於左右倆欄的寬度固定，中間欄能夠根據瀏覽器寬度自適應

 

null和undefined的區別

undefined

undefined是一個表示"無"的原始值，轉爲數值時爲NaN

  • 變量被聲明瞭，但沒有賦值時，就等於undefined

  • 調用函數時，應該提供的參數沒有提供，該參數等於undefined

  • 對象沒有賦值的屬性，該屬性的值爲undefined

  • 函數沒有返回值時，默認返回undefined

null

null是一個表示"無"的對象，轉爲數值時爲0

  • 做爲函數的參數，表示該函數的參數不是對象

  • 做爲對象原型鏈的終點

     

documen.write和 innerHTML的區別

document.write只能重繪整個頁面 innerHTML能夠重繪頁面的一部分

 

HTML5的離線存儲

原理

HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現

使用

  • 在文檔的 html 標籤設置 manifest 屬性，如 manifest="/offline.appcache"

  • 在項目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache

  • 在 web 服務器配置正確的 MIME-type，即 text/cache-manifest

     

css各類居中

水平居中

  1. .parent{

  2.    text-align: center;

  3. }

  4. .child{

  5.    display: inline-block;

  6. }

  1. .child{

  2.    display:table;

  3.    margin: 0 auto;

  4. }

  1. .parent{

  2.    position:relative;

  3. }

  4. .child{

  5.    position:absolute;

  6.    left:50%;

  7.    transform: translateX(-50%);

  8. }

垂直居中

  • table-cell配合vertical-align

  1. .parent{

  2.    display: table-cell;

  3.    vertical-align:middle;

  4. }

absolute配合tranform

  1. .parent{

  2.    position:relative;

  3. }

  4. .child{

  5.    position:absolute;

  6.    top: 50%;

  7.    transform: translateY(-50%);

  8. }

水平+垂直居中

  • inline-block配合text-align加上table-cell配合vertical-align

  1. .parent{

  2.    display: table-cell;

  3.    vertical-align:middle;

  4.    text-align:center;

  5. }

  6. .child{

  7.    display: inline-block;

  8. }

  1. .parent{

  2.    position: relative;

  3. }

  4. .child{

  5.    position: absolute;

  6.    left: 50%;

  7.    top: 50%;

  8.    transform: translate(-50%,-50%);

  9. }

全能的flex

  1. .parent{

  2.    display: flex;

  3.    justify-content: center;

  4. }

  1. .parent{

  2.    display: flex;

  3.    align-items: center;

  4. }

  1. .parent{

  2.    display: flex;

  3.    justify-content: center;

  4.    align-items: center;

  5. }

  6.  

 

 

　

1.js的基本數據類型：數字，字符串，布爾，數組，對象，null,undefined

2.js對象設置屬性的兩種方式：

　　var person = {};

　　person.name = 'sss';//只能取對象自身的屬性

　　person[age] ;//age能夠是變量

 　  var nameA = 'name';

　　var nameB = 'name111';

　　console.log(person[nameA]);//sss

　　console.log(person[nameB]);//undefined

//刪除屬性

　　delete o.name;

　　delete o[age];

//檢測屬性 

// 1 in 運算符

var o ={};

o.name = 'xxx';

console.log( 'name' in o) ;//true

console.log( name in o) ;//false

//2 hasOwnProperty()

console.log(o.hasOwnProperty('name')) ; // true

 = 賦值== 判斷值相等 === 對類型和值進行判斷

//3.屬性遍歷 枚舉

// for in 

var o = {x:1,y:2,z:3};

for(a in o){

console.log(a);// x  y  z

console.log(o[a]); //1 2 3  

}

var arr =[{x:1},{y:2},{z:3}];

for ( a in arr){

console.log(a);// 0 1 2 輸出的是index

console.log(arr[a]);// {x:1}  {y:2}   {z:3}

}

//同步

for(var a =0;a<arr.length;a++){

console.log(arr[a]) ;

}

//異步 若是變量是從其餘接口來，在循環中使用，建議用for 循環

$.each(arr,function(index,item)){

console.log(item);

}

 

//序列化

var o2 = {x:1,y:2,z:3};

console.log(JSON.stringify(o2));//{"x":1,"y":2,"z":3}

console.log(typeof(JSON.stringify(o2));//string

var str = JSON.stringify(o2);

console.log(JSON.parse(str));//{x: 1, y: 2, z: 3}

//深拷貝和淺拷貝 深拷貝就至關於雙胞胎，各自互不影響。淺拷貝至關於人和影子，引用關係，互相影響

var o3 = {x:1,y:2,z:3};

var p =o3; 

4 this 關鍵字 表明函數的擁有者 

1.函數中引用 2.對象調用 3.構造函數調用 4.this指向

call(this,name,age)和apply(this,[]) 在一個對象中調用另外一個對象

var a = '111';

function test(){

　　return this.a;

};

var o = {};

o.a = 1;

o.b = test;

console.log(o.b.call()); //111

console.log(o.b.call(o)); //1 

console.log(o.b.apply()); //111

console.log(o.b.apply(o)); //1 

//繼承

Function.apply(obj,args)方法能接收兩個參數 obj：這個對象將代替Function類裏this對象 args：這個是數組，它將做爲參數傳給Function（args-->arguments）

Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：這個對象將代替Function類裏this對象 params：這個是一個參數列表

//構造函數 this指向這個實例化新對象

function Fun(name,age){

　　this.name = name;

　　this,age = age;

};

var fun = new Fun('lili',22);

var fun2 = new Fun('qq',23);

console.log(fun2.name);//qq

 

var number = 1;

var obj = { 

　　number : 2,

　　showNumber:function(){

　　　　this.number = 3;

　　　　(function(){

　　　　　　console.log(this.number); //1 閉包函數自調函數，函數自執行，this是指向window.this

　　　　})();

　　　　console.log(this.number);// 3 對象中this指向對象

　　}

};

obj.showNumber();

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程