資訊專欄INFORMATION COLUMN
摘要：事件的響應分區為三個階段捕獲目標冒泡階段。綁定的多個事件會被覆蓋，后者覆蓋前者。再用轉換成數值表示。如實際數量為，則展示為項目中使用過濾器做的處理可以抽取方法的，調整相關，可以獲取指定位數的縮寫。
CSS html5中a的download屬性
定義和用法
download 屬性定義下載鏈接的地址或指定下載文件的名稱。文件名稱沒有限定值，瀏覽器會自動在文件名稱末尾添加該下載文件的后綴 (.img, .pdf, .txt, .html, 等)。
download 屬性是HTML5中新增的 標簽屬性。
| 語法 | 屬性值 | 值 描述 |
|---|---|---|
| filename | 指定文件名稱。 |
檢測瀏覽器是否支持download屬性
"download" in document.createElement("a");
1px邊框(解決不同分辨率屏幕1px的寬窄不同)
縮放原理
.border-1px {
position relative
}
.border-1px:after {
display block
content ""
position absolute
left 0
bottom 0
width 100%
border-top 1px solid #ccc
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) .border-1px::after {
transform scaleY(0.7)
-webkit-transform scaleY(0.7)
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
.border-1px::after {
transform scaleY(0.5)
-webkit-transform scaleY(0.5)
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
.border-1px::after {
transform scaleY(0.3333)
-webkit-transform scaleY(0.3333)
}
隱藏移動端ios/android滾動條，使滾動流暢
隱藏滾動條，不影響滾動
::-webkit-scrollbar display none
流暢滾動
//在滾動元素`css`中添加
-webkit-overflow-scrolling touch // IOS系統
overflow-scrolling touch // 安卓系統
偽元素（:或::都可以，::更準確，:兼容好）與偽類(只能:)的區別
偽類與偽元素都是用于向選擇器加特殊效果
偽類與偽元素的本質區別就是是否抽象創造了新元素
偽類只要不是互斥可以疊加使用
偽元素在一個選擇器中只能出現一次，并且只能出現在末尾
偽類與偽元素優先級分別與類、標簽優先級相同
偽類標簽只對可以插入內容的標簽添加：div spanVue中使用less根據分辨率給元素添加背景圖片
按照less官方文檔，url應當如下使用：
URLs
// Variables
@images: "../img";
// Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}
故而有了根據屏幕分辨率設置背景圖片代碼
.bg-image(@url) {
background-image: url("@{url}@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image: url("@{url}@3x.png");
}
} // 報錯報錯 找不到路徑的
這里要使用“~”符號來告訴less引號里面的內容不需要編譯。
正確代碼：
.bg-image(@url) {
background-image:~"url("@{url}@2x.png")";
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: ~"url("@{url}@3x.png")";
}
}
改變輸入框input，textarea的placeholder樣式，去除輸入框選中邊框高亮
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
//設置樣式
}
input:focus { outline:none;} /* focus 標記*/
（原諒我一直沒找很完善的reset.css,這些在一些重置樣式文件自帶的有，大家有好的完善的也可以告知我一下 ）
sticky 屬性在使用 position: sticky 的時候，如果不指定 top 屬性是不會有效果的。
這個屬性是用來實現滾動吸頂的，具體可了解position。
inline-flex 和 inline-block 一樣，對內部元素來說是個 display:flex 的容器，對外部元素來說是個 inline-block 的塊
JS addEventListener VS onclick孰優孰劣兩個都可以實現效果。
addEventListener 以及 IE 的 attachEvent可以實現綁定多個事件，如果你有這方面的需求的話（奇怪的是你總會的）。
addEventListener的第三個參數可以用來控制監聽器對于冒泡事件的響應，大部分情況是false，如果置為true，則響應事件的捕獲階段。事件的響應分區為三個階段 ：捕獲、目標、冒泡階段。
onclick綁定的多個事件會被覆蓋，后者覆蓋前者。
考慮到兼容ie，可以寫一個原生的事件綁定兼容方案：
function addEvent(element, evnt, funct){
if (element.attachEvent)
return element.attachEvent("on"+evnt, funct);
else
return element.addEventListener(evnt, funct, false);
}
// example
addEvent(
document.getElementById("myElement"),
"click",
function () { alert("hi!"); }
);
參考鏈接：addEventListener 與 onclick
圖片上傳按鈕以及預覽（轉載+解析）//代碼來源：https://www.jb51.net/article/120617.htm 這里解析一下{{googleSecuritKey}} 復制解決科學計數法顯示數字問題參考出處：JavaScript中科學計數法轉化為數值字符串形式
以下兩種情況，JavaScript 會自動將數值轉為科學計數法表示
(1) 小于1且小數點后面帶有6個0以上的浮點數值：
JavaScript 代碼: 0.0000003 // 3e-7 0.00000033 // 3.3e-7 0.000003 // 0.000003(2) 整數位數字多于21位：
JavaScript 代碼: 1234567890123456789012 //1.2345678901234568e+21 1234567890123456789012.1 //1.2345678901234568e+21 123456789012345678901 //123456789012345680000解決方案：
JavaScript 代碼:function toNonExponential(num) { var m = num.toExponential().match(/d(?:.(d*))?e([+-]d+)/); return num.toFixed(Math.max(0, (m[1] || "").length - m[2])); } toNonExponential(3.3e-7) // "0.00000033" toNonExponential(3e-7) // "0.0000003" toNonExponential(1.401e10) // "14010000000" toNonExponential(0.0004) // "0.0004"解析一下：
用.toExponential()將數字轉化為科學記數法表示，匹配正則表達式/d(?:.(d*))?e([+-]d+)/,獲取科學記數法中小數點后的字符及冪指數（e 后面的值），這樣可以確定數字是幾位小數。再用toFixed() 轉換成數值表示。
大額數量轉換需求：
數量保持最多5個字符。
當數量<1，展示為0.003
當數量為1-1000，展示為1.234，12.34，123.4
當數量＞1000，帶上單位K，展示為1.54K，15.4K，154K
當數量>1000000時，帶上單位M，展示為1.23M，12.3M，123M
數值采用向下取數展示的方式。如實際數量為15345，則展示為15.3K
項目中使用vue過濾器做的處理：
export default (vol) => { const val = parseFloat(vol) + ""; if (isNaN(val)) return vol; let num = val.indexOf(".") ? val.split(".")[0].length : val.length; const getFiv = function(v) { let a = v.indexOf(".") ? v.substring(0, 5) : v; let b = a.replace(/[.]$/, ""); return b; }; if (num < 4) { let v = val + ""; return getFiv(v); } else if (num < 7) { let v = val / 1000 + ""; return getFiv(v) + "K"; } else { let v = val / 1000000 + ""; return getFiv(v) + "M"; } };可以抽取方法的，調整5相關，可以獲取指定位數的縮寫。
含有變量的正則表達式value = value.replace(new RegExp(`^(-)*(d+).(d{${count}}).*$`), "$1$2.$3");//只能輸入count位小數比如count為4：
value = value.replace(/^(-)*(d+).(d{4}).*$/, "$1$2.$3");//只能輸入4位小數Blob文件下載 借鑒
把請求responseType設置為 blob,在response.body中拿數據（例子中使用了封裝過的axios，data處理過）；
const { data } = await http({ method: "POST", headers: defaultHeaders, url: ..., responseType: "blob", data: ... });
把接受的data處理成blob對象，關于Blob
let blob = new Blob([data], { type: data.type });以下來自MDN
語法 參數 var aBlob = new Blob( array, options ); array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其他類似對象的混合體，它將會被放進 Blob。DOMStrings會被編碼為UTF-8。 options 是一個可選的BlobPropertyBag字典，它可能會指定如下兩個屬性： - type，默認值為 ""，它代表了將會被放入到blob中的數組內容的MIME類型。 - endings，默認值為"transparent"，用于指定包含行結束符n的字符串如何被寫入。 它是以下兩個值中的一個： "native"，代表行結束符會被更改為適合宿主操作系統文件系統的換行符，或者 "transparent"，代表會保持blob中保存的結束符不變
創建url
//URL.createObjectURL()方法會根據傳入的參數創建一個指向該參數對象的URL. 這個URL的生命僅存在于它被創建的這個文檔里. 新的對象URL指向執行的File對象或者是Blob對象. let url = window.URL.createObjectURL(blob); let fileName = "分析師列表.xlsx";
創建a標簽實現自動下載或者手動下載
``` if ("download" in document.createElement("a")) { const a = document.createElement("a"); a.href = url; a.download = fileName; a.style.display = "none"; document.body.appendChild(a); a.click(); URL.revokeObjectURL(a.href); document.body.removeChild(a); } else { navigator.msSaveBlob(blob, fileName); } ```純函數 (Pure Function)純函數是指不依賴于且不改變它作用域之外的變量狀態的函數。ES6及以上常用的方法 Array.from()Array.from() 方法從一個類似數組或可迭代對象中創建一個新的數組實例。
Array.from(arrayLike[, mapFn[, thisArg]])
第一個必選參數 類數組對象
每個元素的回調函數
this對象
返回新數組
常見用法，不多說：
Array.from("string"); // ["s", "t", "r", "i", "n", "g"] Array.from({a: "a", b: "b"}); // [] Array.from({1: "a", 2: "b"}); // [] Array.from([1, 2, 3], x => x + x)); // [2, 4, 6]Array.from() 可以通過以下方式來創建數組對象：
偽數組對象（擁有一個 length 屬性和若干索引屬性的任意對象）
可迭代對象（可以獲取對象中的元素,如 Map和 Set 等）
擁有一個 length 屬性這是我一直忽略的，這一點還是蠻有技巧性的，有時候能簡化不少步驟
先看使用中的多種情況：
Array.from({1: "a", 2: "b", length: 2}); // [undefined, "a"] Array.from({1: "a", 2: "b", length: 3}); // [undefined, "a", "b"] Array.from({a: "a", b: "b",length: 3}); // [undefined, undefined, undefined]還算比較智能。
看一下應用，來自Daily-Interview-Question2019-04-16的面試題：
第 55 題：某公司 1 到 12 月份的銷售額存在一個對象里面，如下：{1:222, 2:123, 5:888}，請把數據處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。我最開始直接來了個基本的遍歷法...還在new Array(13)或者[].length=13
簡化版：
// 13長度的數組對應進去保持了key與索引一致，最終去除掉第一個元素就好 Array.from({1:222, 2:123, 5:888, length: 13}).slice(1).map(e => e || null); let obj = {1:222, 2:123, 5:888}; Array.from({length: 12}).fill(null).map((e, index) => obj[index +1] || null);相比起來，Array.fill()沒有什么容易忽略的地方。
未完待續
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113441.html
相關文章
前端實用資源整理
摘要：事件的響應分區為三個階段捕獲目標冒泡階段。綁定的多個事件會被覆蓋，后者覆蓋前者。再用轉換成數值表示。如實際數量為，則展示為項目中使用過濾器做的處理可以抽取方法的，調整相關，可以獲取指定位數的縮寫。 CSS html5中a的download屬性 定義和用法download 屬性定義下載鏈接的地址或指定下載文件的名稱。文件名稱沒有限定值，瀏覽器會自動在文件名稱末尾添加該下載文件的后綴 (...
JavaScript文章
摘要：我對知乎前端相關問題的十問十答張鑫旭張鑫旭大神對知乎上經典的個前端問題的回答。作者對如何避免常見的錯誤，難以發現的問題，以及性能問題和不好的實踐給出了相應的建議。但并不是本身有問題，被標準定義的是極好的。 這一次，徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。 不論你是javascript新手還是老...
發表評論
0條評論
Gu_Yan
男|高級講師
TA的文章
閱讀更多
ESP32+串口屏組成的疫情監控平臺
閱讀 2089·2021-11-23 09:51
#雙十一#LOCVPS：全場新購七折優惠，香港高防/荷蘭/日本東京等KVM VPS套餐5折優惠，充值
閱讀 3697·2021-10-20 13:49
阿里云服務器全新優惠：爆品秒殺，2核4G云服務器低至500元
閱讀 1706·2021-09-06 15:13
程序人生 - 祝賀登榜《大數據領域內容榜》NO.20
閱讀 1816·2021-09-06 15:02
使用Python，OpenCV進行基本的圖像處理——提取紅色圓圈輪廓并繪制
閱讀 3154·2021-09-02 15:11
前端實用資源整理
閱讀 890·2019-08-29 15:37
【推薦】jquery開發的大型web應用—H5編輯器工具
閱讀 1731·2019-08-29 13:24
繞了一大圈，只是因為auto是相對父元素的 —— 中欄流動布局中的一個小問題
閱讀 2274·2019-08-29 11:28
最新活動
