wW3school前端小知識

1、css一行文字超出...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2、多行文字超出顯示...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3、ios手機容器滾動條滑動不流暢

overflow: auto;
-webkit-overflow-scrolling: touch;

4、修改滾動條樣式，隱藏div元素的滾動條

div::-webkit-scrollbar

div::-webkit-scrollbar滾動條整體部分

div::-webkit-scrollbar-thumb滾動條裡面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）

div::-webkit-scrollbar-track滾動條的軌道（裡面裝有thumb）

div::-webkit-scrollbar-button滾動條的軌道的兩端按鈕，允許通過點選微調小方塊的位置

div::-webkit-scrollbar-track-piece內層軌道，滾動條中間部分

div::-webkit-scrollbar-corner邊角，即兩個滾動條的交匯處

div::-webkit-resizer兩個滾動條的交匯處上英語通過拖動調整元素大小的小空間，注意此方案有相容性問題，一般需要隱藏滾動條時我都是用乙個色塊通過定位改上去，或者將子級元素調大，父級元素使用overflow-hidden截掉滾動條部分。

5、使用css寫出乙個三角形角標

元素寬高設定為 0，通過border屬性來設定，讓其他三個方向的border顏色為透明或者和背景色保持一致，剩餘一條border的顏色設定為需要的顏色

div

var music = document.getelementbyid('video');

var state = 0;

document.addeventlistener('touchstart', function()}, false);

document.addeventlistener("weixinjsbridgeready", function () , false);

music.onended = function ()

7、水平垂直居中

一般使用兩種方式，定位或者flex

div //父級控制子集居中

.parent

8、隱藏頁面元素

display-none：元素不存在，從dom中刪除

opacity-0：元素透明度將為 0，但元素仍然存在，繫結的時間仍舊有效扔可觸發執行

visibility-hidden：元素隱藏，但元素仍舊存在，頁面中無法觸發該元素的事件

9、前端工程化

一般來說前端工程包含：專案初始化、專案開發、繼承、構建、打包、測試、部署等流程。工程化就是以工程的角度來解決這些問題。（webpack僅僅是前端工程化中的一環，在整個工程化過程中幫我們解決了大多數問題）

10、contenteditable

html中大部分標籤都是不可以編輯的，但是新增了contenteditable屬性之後，標籤會變成可編輯狀態

不過通過這個屬性把標籤變成可編輯狀態後只有input事件，沒有change事件。也不能像表單一樣通過maxlength控制最大長度。

11、calc

這是乙個css屬性，可以計算css的值。

div

12、proxy 和 object.defineproperty 區別

proxy 的意思是**，可以攔截物件上的乙個操作。通過 new 的方式建立物件，第乙個引數是被攔截的物件，第二個引數是物件操作的描述。例項化後返回乙個新的物件

new proxy(target, ,
set(target, property) ,
deleteproperty(target, property) })

proxy 區別於 object.definedproperty

object.defineproperty 只能監聽到屬性的讀寫，而 proxy 除讀寫外還可以監聽屬性的刪除，方法的呼叫等

通常情況下我們想要監視陣列的變化，基本要靠重寫陣列方法的方式實現，這也是 vue 的實現方式，而 proxy 可以直接監視陣列的變化

const list = [1, 2, 3];
const listproxy = new proxy(list, });
list.push(4);

proxy 是以非入侵的方式監管了物件的讀寫，而 defineproperty 需要按特定的方式定義物件的屬性

13、reflect

reflect 的靜態方法和 proxy 描述中的方法完全一致。也就是 reflect 成員方法就是 proxy 處理物件的預設實現

proxy 物件預設的方法就是呼叫了 reflect 內部的處理邏輯，也就是如果我們呼叫 get 方法，那麼在內部，proxy 就是將 get 原封不動的交給了 reflect

const proxy = new proxy(obj, })

判斷物件是否存在某個屬性，可以使用 in 操作符，可以使用reflect.has(obj, name);

刪除乙個屬性可以使用 delete，也可以使用 reflect.deleteproperty(obj, name);

獲取所有屬性名可以使用 object.keys，也可以使用 reflect.ownkeys(obj);

14、解析 get 引數

通過 replace 方法獲取 url 中的引數鍵值對，可以快速解析 get 引數

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);

15、解析連線 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;

wW3school前端小知識

前端小知識

前端小知識

前端小知識積累

相關推薦