基礎知識點 1.水平垂直居中 子絕父相,子盒子設置絕對定位,設置top:50%;left:50%,margin-top:-50%;margin-left:-50%; 子絕父相,子盒子設置絕對定位,設置 left & top & right & bottom為0;margin: auto; 伸縮盒子, ...
基礎知識點 1.水平垂直居中
- 子絕父相,子盒子設置絕對定位,設置top:50%;left:50%,margin-top:-50%;margin-left:-50%;
- 子絕父相,子盒子設置絕對定位,設置 left & top & right & bottom為0;margin: auto;
- 伸縮盒子,父元素設置flex;justify-content: center;align-items: center;
- 利用transform屬性,需要設置子絕父相,設置top:50%;left:50%;transform:translate(-50%, -50%);
- 中間盒子設置寬度100%,左右margin,留出左右盒子的位置
- 左右盒子在通過定位至左右
- 標簽樣式在不同的瀏覽器各自的margin 和padding差異較大, 解決方案:css里 *{margin:0;padding:0;}
- 當在a標簽中嵌套img標簽時,在某些瀏覽器中img會有藍色邊框;解決方案:給img添加border:0;或者是border:none;
- 圖片預設有間;隙解決方案:1)給img標簽添加左浮動float:left;2)給img標簽添加display:block。
1.父級div定義height
2.結尾處家空div標簽clear:both
3.父級div定義 偽類:after和zoom
4.父級div定義 overflow:hidden 5.前端優化技巧
- 壓縮css,js,圖片
2.減少http請求次數,合併css,js 合併圖片(雪碧圖)
3.使用CDN
4.減少dom元素數量
5.圖片懶載入
6.靜態資源另外用無cookie得功能變數名稱
7.減少dom的訪問(緩存dom)
8.巧用事件委托
9.樣式表置頂,腳本置低
更改this指向的三個方法
1.call( )方法調用一個函數,其具有一個指定的this值
fn.call(改變其this指向, [指定的參數] ) 如果指定了null或者undefired,則內部this指向window
應用場景:①借用構造函數
②借用其他對象的方法
2.apply( )方法調用一個函數,其具有一個指定的this值,作為一個數組提供的參數
fn.apply(var1, var2) 應用:把數組展開
應用場景:把數組展開,傳遞給調用的方法
3.bind 不會調用函數,會返回一個新的函數
應用場景:①改變定時器內部的this,②改變事件處理函數的this
7、json字元串轉化方法 JSON.parse(str); //由JSON字元串轉換為JSON對象 JSON.stringify(obj); //將JSON對象轉化為JSON字元 進階知識點 1、設置分頁符1 function farmat(mun) { 2 if (mun === null) return; 3 var m = parseInt(mun).toString(); 4 var len = m.length; 5 if (len <= 3) return m; 6 var n = len % 3; 7 if (n > 0) { 8 return m.slice(0,n)+","+m.slice(n,len).match(/\d{3}/g).join(",") 9 } else { 10 return m.slice(n,len).match(/\d{3}/g).join(",") 11 } 12 } 13 var a =farmat(1000000) 14 console.log(a);2、只能輸入數字和小數點
1 function clearNoNum(obj){ 2 obj.value = obj.value.replace(/[^\d.]/g,""); //清除“數字”和“.”以外的字元 3 obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一個. 清除多餘的 4 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 5 obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能輸入兩個小數 6 if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已經過濾,此處控制的是如果沒有小數點,首位不能為類似於 01、02的金額 7 obj.value= parseFloat(obj.value); 8 } 9 }4、統計每一個字元串出現的次數
1 //字元串 2 var strs = "asdasdadd"; 3 function getmaxstr(str){ 4 if(str.length == 1){return str;} 5 var newarr = []; 6 for(var i = 0 ; ss= str.length, i<ss; i++ ){ 7 if(!newarr[str.charAt(i)]){ 8 newarr[str.charAt(i)] = 1; 9 }else{ 10 newarr[str.charAt(i)] +=1; 11 } 12 } 13 console.log(newarr); 14 var maxkey=''; 15 var maxvalue=1;//設定一個值 16 for(var k in newarr){ 17 if(newarr[k]> maxvalue){//根據這個值做判讀 將數組中的每個元素 與這個值做比較! 如果大於他,那麼將住宿 18 maxvalue = newarr[k];//出現的次數 19 maxkey = k;//次數最多的 字母 20 } 21 } 22 console.log(maxkey); 23 return maxkey; 24 } 25 getmaxstr(strs);
1 //數組 2 var arr =["a","b","c","c","c","d"]; 3 Array.prototype.diaohuan=function(arr){ 4 var newarr=[]; 5 for(var i = 0; i<this.length; i++){ 6 if(!newarr[this[i]] ){ 7 newarr[this[i]] = 1; 8 }else{ 9 newarr[this[i]] +=1; 10 } 11 } 12 console.log(newarr); 13 var maxkey = 1; 14 var maxvalue =""; 15 for (var k in newarr){ 16 if(newarr[k] > 1){ 17 maxvalue =newarr[k]; 18 maxkey = k; 19 } 20 } 21 return maxkey; 22 console.log(maxvalue); 23 } 24 alert(arr.diaohuan());
高難度知識點
怎樣引入一個第三方的包?
require與import的區別:
遵循規範:
require 是 AMD規範引入方式
import是es6的一個語法標準,如果要相容瀏覽器的話必須轉化成es5的語法
調用時間:
require是運行時調用,所以require理論上可以運用在代碼的任何地方
import是編譯時調用,所以必須放在文件開頭
本質:
require是賦值過程,其實require的結果就是對象、數字、字元串、函數等,再把require的
結果賦值給某個變數
import是解構過程,但是目前所有的引擎都還沒有實現import,我們在node中使用babel支持
ES6,也僅僅是將ES6轉碼為ES5再執行,import語法會被轉碼為require
在那調用第三方支付介面?為什麼?
前端調介面和後端調介面各有什麼區別,優勢與特點 一般支付介面都是由後端和支付單位聯繫調取的,前端調介面容易被劫持,不安全.