1.使用css寫出一個三角形角標
元素寬高設定為0，通過border屬性來設定，讓其它三個方向的border顏色為透明或者和背景色保持一致，剩余一條border的顏色設定為需要的顏色，
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
2.水平垂直居中
通常只使用兩種方式定位或者flex就足夠了，
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
父級控制子集居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
3.css行內文本內容超過限制顯示…
一行內：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 例如 3行時
overflow: hidden;
4.IOS
手機容器滾動潭訓動不流暢:
overflow: auto;
-webkit-overflow-scrolling: touch;
ios audio無法自動播放、回圈播放(ios手機在使用audio或者video播放的時候，個別機型無法實作自動播放，可使用下面的代碼hack，):
// 解決ios audio無法自動播放、回圈播放的問題
var music = document.getElementById('video');
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
music.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//回圈播放
music.onended = function () {
music.load();
music.play();
}
5.自定義滾動條樣式
隱藏div滾動條：
div::-webkit-scrollbar {
display: none;
}
修改滾動條樣式：
div::-webkit-scrollbar //滾動條整體部分
div::-webkit-scrollbar-thumb //滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動潭訓是水平滾動條）
div::-webkit-scrollbar-track //滾動條的軌道
div::-webkit-scrollbar-button //滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置，
div::-webkit-scrollbar-track-piece //內層軌道，滾動條中間部分
div::-webkit-scrollbar-corner //邊角，即兩個滾動條的交匯處
div::-webkit-resizer // 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控制元件
注意: 此方案有兼容性問題，一般需要隱藏滾動條時可以用一個色塊通過定位蓋上去，或者將子級元素調大，父級元素使用overflow-hidden截掉滾動條部分，暴力且直接，
6.隱藏頁面元素
display-none; //元素不會占用空間，在頁面中不顯示，子元素也不會顯示，
opacity-0; // 元素透明度將為0，但元素仍然存在，系結的事件仍舊有效仍可觸發執行，
visibility-hidden; //元素隱藏，但元素仍舊存在，占用空間，頁面中無法觸發該元素的事件，
6.css屬性
這是一個css屬性,可以計算css的值,可以計算不同單位的差值，
div {
width: calc(25% - 20px);
}
7.Date物件
獲取當前時間毫秒值
// 方式一
Date.now(); // 1606381881650
// 方式二
new Date() - 0; // 1606381881650
// 方式三
new Date().getTime() // 1606381881650
創建Date物件的兼容性問題，
// window和安卓支持，ios和mac不支持
new Date('2020-11-26');
// window和安卓支持，ios和mac支持
new Date('2020/11/26');
8.決議get引數
通過replace方法獲取url中的引數鍵值對，可以快速決議get引數，
const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
9.決議連接url
可以通過創建a標簽，給a標簽賦值href屬性的方式，獲取到協議，pathname，origin等location物件上的屬性，
// 創建a標簽
const aEle = document.createElement('a');
// 給a標簽賦值href路徑
aEle.href = '/test.html';
// 訪問aEle中的屬性
aEle.protocol; // 獲取協議
aEle.pathname; // 獲取path
aEle.origin;
aEle.host;
aEle.search;
10.localStorage
localStorage是H5提供的永久存盤空間，一般最大可存盤5M資料，并且支持跨域隔離，他的出現極大提高了前端開發的可能性，localStorage的使用很多人都知道setItem，getItem,removeItem, 但他也可以直接以成員的方式操作，
// 存盤
localStorage.name = 'yd';
// 獲取
localStorage.name; // yd
// 洗掉
delete localStorage.name;
// 清除全部
localStorage.clear();
// 遍歷
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i); // 獲取本地存盤的Key
localStorage[key]; // 獲取本地存盤的value
}
localStorage滿了的情況下仍繼續存盤并不會覆寫其他的值，而是直接報錯(QuotaExceededError)，并且當前存盤的值也會被清空，瀏覽器支持每個域名下存盤5M資料，
11.sessionStorage
sessionStorage和localStorage的區別是，存在當前會話，很多人理解的是瀏覽器關閉，這是不對的，假設你在A頁面存盤了sessionStorage，新開選項卡將A頁面的鏈接粘貼進去打開頁面，sessionStorage也是不存在的，
所以sessionStorage存在的條件是頁面間的跳轉，A頁面存盤了sessionStorage，他要通過超鏈接或者location.href或者window.open來打開另一個同域頁面才能訪問sessionStorage，
這一點在混合開發嵌套H5的開發模式中尤為重要，如果以新開webview的方式打開頁面，很可能sessionStorage就沒有了，
12.會話cookie
cookie在設定的時候如果不設定過期時間，就表示是個會話cookie，以前我以為關閉瀏覽器會話cookie就消失了，然而…喜提bug一個，
在多數情況下windows系統或者安卓系統確實是這樣的，但是在macOS系統或者ios系統中，關閉瀏覽器并不會清除掉會話cookie，結束瀏覽器行程才行，
13.標簽模板字串
模板字串支持在前面添加一個函式，第一個引數是一個有固定內容組成的陣列，后面引數依次為傳入的變數，函式回傳值為模板字串真正展示的值，不過這個功能個人感覺沒啥用，
const tag = (params, ...args) => {
return params[0] + args[0]; // 回傳值為模板字串的真實值，
}
const str = tag`hello ${'world'}`;
14.字串常用的幾個方法
1. includes();
字串中是否包含某個字串，這個不說了，其實就是indexOf的替代方案，用起來更優雅，
2. startsWith();
字串是否為某個字串開始，我一般用它判斷url是否有http
3. endsWith();
字串是否為某個字串結尾，判斷后綴名的時候尤其有效，
4. repeat(number);
得到一個重復number次的字串，額…我也不知道什么時候有用，一般我用它造測驗資料，
5. ‘abc’.padEnd(5, ‘1’); // abc11;
用給定的字串在尾部拼接到指定長度，第一個引數為長度，第二個引數為用于拼接的值，
6. ‘abc’.padStart(5, ‘1’); // 11abc;
用給定的字串在首部拼接到指定長度第一個引數為長度，第二個引數為用于拼接的值，首部補0？
23.陣列快速去重
應該很多人都知道這個，陣列轉換成Set, 再轉換為陣列，不過這種去重方式只能去除基本資料型別組成的陣列，
const arr = [1, 2, 3, 4, 5, 6];
const arr2 = new Set(arr);
const arr3 = […arr2];
15.Object.keys, values, entries
一般我們常用Object.keys，回傳一個物件的鍵組成的陣列，其實還有Object.values，回傳物件值組成的陣列，Object.entries將物件轉成陣列，每個元素是鍵值對組成的陣列，可以使用此功能快速將物件轉為Map，
const obj = {name: 'yd', age: 18};
Object.keys(obj); // ['name', 'age'];
Object.values(obj); // ['yd', 18];
const l = Object.entries(obj); // [['name', 'yd'], ['age': 18]];
const m = new Map(l);
16.Object.getOwnPropertyDescriptors
獲取物件的描述資訊
Object.assign復制時，將物件的屬性和方法當做普通屬性來復制，并不會復制完整的描述資訊，比如this，
const p1 = {
a: 'y',
b: 'd',
get name() {
return `${this.a} ${this.b}`;
}
}
const p2 = Object.assign({}, p1);
p2.a = 'z';
p2.name; // y d; 發現并沒有修改p2.a的值，是因為this仍舊指向p1
使用Object.getOwnPropertyDescriptors獲取完整描述資訊
const description = Object.getOwnPropertyDescriptors(p1);
const p2 = Object.defineProperty({}, description);
p2.a = 'z';
p2.name; // z d
17.BigInt
JavaScript可以處理的最大數字是2的53次方 - 1，這一點我們可以在Number.MAX_SAFE_INTEGER中看到，
consoel.log(Number.MAX_SAFE_INTEGER); //9007199254740991
更大的數字則無法處理，ECMAScript2020引入BigInt資料型別來解決這個問題，通過把字母n放在末尾, 可以運算大資料，
BigInt可以使用算數運算子進行加、減、乘、除、余數及冪等運算，它可以由數字和十六進制或二進制字串構造，此外它還支持AND、OR、NOT和XOR之類的按位運算，唯一無效的位運算是零填充右移運算子，
const bigNum = 100000000000000000000000000000n;
console.log(bigNum * 2n); // 200000000000000000000000000000n
const bigInt = BigInt(1);
console.log(bigInt); // 1n;
const bigInt2 = BigInt('2222222222222222222');
console.log(bigInt2); // 2222222222222222222n;
BigInt是一個大整數，所以他不能用來存盤小數，
18.??合并空運算子
假設變數a不存在，我們希望給系統一個默認值，一般我們會使用||運算子，但是在javascript中空字串，0，false都會執行||運算子，所以ECMAScript2020引入合并空運算子解決該問題，只允許在值為null或未定義時使用默認值，
const name = '';
console.log(name || 'yd'); // yd;
console.log(name ?? 'yd'); // '';
19.?可選鏈運算子
業務代碼中經常會遇到這樣的情況，a物件有個屬性b,b也是一個物件有個屬性c,
我們需要訪問c，經常會寫成a.b.c，但是如果f不存在時，就會出錯，
const a = {
b: {
c: 123,
}
}
console.log(a.b.c); // 123;
console.log(a.f.c); // f不存在所以會報錯
ECMAScript2020定義可選鏈運算子解決該問題，通過在.之前添加一個?將鍵名變成可選
let person = {};
console.log(person?.profile?.age ?? 18); // 18
20.import
import是ECMAScript2015當中定義的一套ES Module模塊系統，語法特性絕大多數瀏覽器已經支持了，通過給script標簽添加type=module的屬性就可以使用ES Module的標準去執行javascript代碼了，
<script type="module">
console.log('this is es module');
</script>
在ES Module規范下，會采用嚴格模式(use strict)運行javascript代碼，每個ES Module都運行在單獨的作用域中，也就意味著變數間不會互相干擾，外部js檔案是通過CORS的方式請求的，所以要求我們外部的js檔案地址要支持跨域請求，也就是檔案服務器要支持CORS，我們可以在任意網站控制臺輸入下面代碼，
const script = document.createElement('script');
script.type = 'module';
script.innerHTML = `import React from 'https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js';`;
document.body.append(script);
可以發現在network中請求了https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js資源，
ES Module的script標簽會延遲腳本加載，等待網頁請求完資源之后才執行，和使用deffer的方式加載資源相同，
需要注意的是，import {} from 'xx’匯入模塊的時候，并不是物件的解構，而是import的固定語法，這一點很多人容易弄錯，
并且ECMAScript2020中import開始支持動態匯入功能，在此之前import只能寫在模塊代碼的頂部，一開始就要宣告模塊依賴的其它模塊，支持動態引入后就可以按需引入對應的模塊，這個功能我們早在SPA中就已經用到了，動態匯入回傳的是一個Promise，
a.js
const a = 123;
export { a };
b.js
import('./a.js').then(data => {
console.log(data.a); // 123;
})
21. 0.1 + 0.2 === 0.3 // false
console.log(0.1+0.2); // 0.30000000000000004
在JS當中，Number型別實際上是double型別，運算小數時存在精度問題，因為計算機只認識二進制，在進行運算時，需要將其他進制的數值轉換成二進制，然后再進行計算
小數用二進制表達時是無窮的，
// 將0.1轉換成二進制
console.log(0.1.toString(2)); // 0.0001100110011001100110011001100110011001100110011001101
// 將0.2轉換成二進制
console.log(0.2.toString(2)); // 0.001100110011001100110011001100110011001100110011001101
雙精度浮點數的小數部分最多支持53位二進制位，所以兩者相加后，因浮點數小數位的限制而截斷的二進制數字，再轉換為十進制，就成了0.30000000000000004，這樣在進行算術計算時會產生誤差，
ES6 在Number物件上面，新增一個極小的常量Number.EPSILON，根據規格，它表示1與大于1的最小浮點數之間的差，對于64位浮點數來說，大于1的最小浮點數相當于二進制的1.00…001，小數點后面有連續51個零，這個值減去1之后，就等于2的-52次方，
Number.EPSILON === Math.pow(2, -52)
// true
Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// "0.00000000000000022204"
Number.EPSILON實際上是JavaScript能夠表示的最小精度，誤差如果小于這個值，就可以認為已經沒有意義了，即不存在誤差了，
引入一個這么小的量的目的，在于為浮點數計算，設定一個誤差范圍，我們知道浮點數計算是不精確的，
Number.EPSILON可以用來設定能夠接受的誤差范圍，比如，誤差范圍設為2的-50次方（即Number.EPSILON * Math.pow(2, 2)），即如果兩個浮點數的差小于這個值，我們就認為這兩個浮點數相等，
(0.1 + 0.2 - 0.3) < Number.EPSILON // true
22.登錄驗證
網站一般只要登陸過一次后，接下來該網站的其他頁面都是可以直接訪問的，不用再次登陸，我們可以通過 token 或 cookie 來實作，下面用代碼來展示一下如何用 token 控制登陸驗證，
router.beforeEach((to, from, next) => {
// 如果有token 說明該用戶已登陸
if (localStorage.getItem('token')) {
// 在已登陸的情況下訪問登陸頁會重定向到首頁
if (to.path === '/login') {
next({path: '/'})
} else {
next({path: to.path || '/'})
}
} else {
// 沒有登陸則訪問任何頁面都重定向到登陸頁
if (to.path === '/login') {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
23.動態選單
利用 vue-router 的 addRoutes 方法可以動態添加路由，
router.addRoutes：
router.addRoutes(routes: Array<RouteConfig>)
動態添加更多的路由規則，引數必須是一個符合 routes 選項要求的陣列，
const router = new Router({
routes: [
{
path: '/login',
name: 'login',
component: () => import('../components/Login.vue')
},
{path: '/', redirect: '/home'},
]
})
或者
const router = new Router({
routes: [
{path: '/', redirect: '/home'},
]
})
router.addRoutes([
{
path: '/login',
name: 'login',
component: () => import('../components/Login.vue')
}
])
在動態添加路由的程序中，如果有 404 頁面，一定要放在最后添加，否則在登陸的時候添加完頁面會重定向到 404 頁面，
如：
{path: '*', redirect: '/404'}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/306017.html
標籤：其他
上一篇：2021-10-06