您是否希望簡化前端開發(fā)流程？今天我們整理了 24 個不可或缺的技巧，它們將幫助您縮短開發(fā)時間并提高工作效率。讓我們深入探索這些節(jié)省時間的技巧吧！

1. 防止輸入顯示歷史記錄 

要阻止瀏覽器保留表單輸入歷史記錄，只需將 autocomplete="off" 屬性添加到您的輸入標簽中：

<input type="text" autocomplete="off">

2. 創(chuàng)建自適應圓形/橢圓形 Div 

制作一個根據內容長度調整形狀的 div：

<span class="box">1</span>


.box {
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  background: skyblue;
  color: white;
  padding: 2px;
  display: inline-block;
  border-radius: 20px;
  min-width: 18px;
}

3. 為表格設置 1px 邊框 

為您的表格實現干凈、纖細的邊框：

table {
  border-collapse: collapse;
}
table tr td, table tr th {
  border: 1px solid black;
}

4. 在真實設備上調試 MUI 中的對象 

在真實設備上調試 MUI 時，使用 JSON.stringify(object) 清晰地查看對象屬性。

5. 從其他函數停止計時器 

要從另一個函數停止計時器：

返回計時器：var time = setInterval(); return time;

在調用函數中：var timerID = timerFunction(); clearInterval(timerID);

6. 使用正則表達式刪除所有空格 

使用此正則表達式從字符串中刪除所有空格：

str.replace(/\s/g, "")

7. 使用正則表達式僅匹配中文字符

使用此正則表達式僅匹配中文字符：

/^[\u4e00-\u9fa5]+$/

8. 在 Android 和 iOS 上啟用電話撥號 

創(chuàng)建可點擊的電話號碼：

<a href="tel:888,023">Call 888 ext. 023</a>
<a href="tel:11211211212">Call 11211211212</a>

9. 點擊空白區(qū)域時關閉疊加層 

點擊外部時使疊加層消失：

dom.click(function(e) {
  var obj = $("contentObject");
  if (!obj.is(e.target) && obj.has(e.target).length === 0) {
    // Hide overlay
  }
});

或者，在父元素上設置 click-to-dismiss 并在子元素上使用 e.stopPropagation()。

10. 刪除 IE 中的圖像邊框 

消除 IE 中圖像的默認邊框：

img { border: none; }

11. 保留表格單元格填充 

使用 * { padding: 0; } 時，設置 td padding 以保持單元格填充效果。

12. 修復 display: inline-block 間隙 

解決 inline-block 元素的間距問題：

parent-element {
  font-size: 0;
  -webkit-text-size-adjust: none;
}

13. 快速創(chuàng)建微信小程序文件 

在 app.json 中添加“pages/addr/addr”，即可自動生成所需文件及目錄結構。

14. 了解 vertical-align 

vertical-align 僅適用于 inline 或 inline-block 元素。對于 div，請使用 display: table-cell。

15. 微信小程序中的條件渲染 

使用 wx:if="{{condition}}" 進行條件渲染。在 wx:for 循環(huán)中，使用 index 進行比較，并添加 wx:key="" 以消除警告。

16. 漸變邊框顏色 

使用 CSS3 創(chuàng)建漸變邊框：

border-image: linear-gradient(red 10%, blue 60%) 30 30;

請記住設置邊框寬度并包含瀏覽器前綴以實現兼容性。

17. 修復嵌套 Div 上無效的 margin-top 

當 margin-top 在嵌套 div 上不起作用時，請向父級添加 overflow: hidden 或 display: inline-block/table-cell。

18. 在 MUI 底部導航中啟用鏈接點擊 

使底部導航鏈接在 MUI 中可點擊：

mui('body').on('tap', 'a', function() {
  document.location.href = this.href;
});

19. 相對于父元素的固定定位 

要將固定元素相對于其父元素定位：

在父元素上設置 position:relative

在子元素上將 position:fixed 更改為 position:absolute

或者，向父元素添加 transform:translate(0, 0)。

20. 在微信小程序中將內容疊加在視頻上 

使用 cover-view 標簽在微信小程序中將內容疊加在視頻上。

21. 使用 inline-block 消除 Safari 中的間隙 

將 display:inline-block 替換為 display:table-cell 以解決 Safari 中的間距問題。

22. 實現兩端對齊的文本 

創(chuàng)建兩端對齊的文本：

.box {
  text-align: justify;
}
.box:after {
  display: inline-block;
  width: 100%;
  content: '';
}

23. 理解偽元素語法 

:before/:after 比 ::before/::after 具有更好的兼容性，但兩者都是偽元素。

24. 在偽元素中使用 attr() 

利用 attr() 函數訪問數據屬性：

p:after { content: attr(data-tip); }

這將在 ::after 偽元素中顯示 data-tip 屬性的值。

結論

這 24 條前端開發(fā)技巧旨在提高您的工作效率并簡化您的工作流程。通過將這些技術融入您的項目中，您將能夠編寫更干凈、更高效的代碼并輕松應對常見挑戰(zhàn)。

請記住，在發(fā)現新技巧時要不斷探索和分享。前端開發(fā)的世界在不斷發(fā)展，及時了解最新技巧可以讓您在工作中獲得顯著優(yōu)勢。