整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在當今快速迭代的Web開發領域，構建可維護、可擴展且適應性強的用戶界面成為了每個前端工程師面臨的挑戰。隨著項目規模的擴大和團隊成員的增加，如何確保代碼的一致性、提升組件的重用率，以及加快新成員的融入速度，成為提升開發效率的關鍵因素。正是在這樣的背景下，BEM（Block Element Modifier）這一革命性的前端開發方法論應運而生。
BEM（Block Element Modifier）是一種前端開發中用于組織CSS類名的命名約定，由Yandex公司提出。該方法論旨在提高代碼的可維護性、可擴展性和團隊協作效率，尤其適用于大型項目和組件化開發。BEM的核心理念圍繞著三個基本概念展開：
這一模塊是抖音應用中的常用功能（function），所以我們可以命名為dy-fc
總體布局可以分為上下兩部分，我們可以將頂部模塊當成頭部命名為dy-fc__hd
而下面的各個功能的模塊我們當作身體命名為dy-fc__bd
將頂部模塊中的標題模塊命名為dy-fc__title
將下面每個功能模塊命名為dy-fc__item
<div class="dy-fc">
<div class="dy-fc__hd">
<span class="dy-fc__title">常用功能</span>
</div>
<div class="dy-fc__bd">
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">我的錢包</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">券包</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">小程序</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">觀看歷史</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">內容偏好</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">離線模式</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">設置</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">稍后再看</p>
</a>
</div>
</div>首先重置默認樣式
* {
margin: 0;
padding: 0;
}接著我們給整個界面設為暗白色，初始化<a>標簽
body {
background-color: rgba(211, 209, 209, 0.25);
}
a{
text-decoration: none;
}然后我們設置一下整個模塊的樣式:
設置寬占比為94%，
設置外邊距為10px并居中
將背景顏色設為白色
調整邊角弧度
.dy-fc {
width: 94%;
margin: 10px auto;
background-color: #fff;
border-radius: 10px;
}再然后是設置頭部模塊和標題
.dy-fc__hd {
padding: 10px;
}
.dy-fc__title {
font-size: 18px;
font-weight: bold;
}繼續是身體模塊
我們將其設置為彈性容器并定義換行屬性，使容器內的元素能夠按行或列排列，并且可以自動換行、自動調整元素的位置和大小。它使得布局更加靈活和方便。
.dy-fc__bd {
padding: 10px;
display: flex;
flex-wrap: wrap;
}隨后是各個功能模塊，我們將寬度設置為33%，使得三個為一行
.dy-fc__item {
width:33%;
text-align: center;
line-height: 2.1em;
color: black;
padding-bottom: 10px;
}再然后就是圖片和底部文字的樣式啦
img {
width: 30px;
height: 30px;
}
.dy__desc {
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
}在實際應用中，可以根據項目規模和需求靈活調整BEM的嚴格程度，例如引入簡寫規則或使用工具自動處理類名生成。 結合現代前端框架和工具（如Vue、React的CSS Modules或SASS的嵌套規則）可以進一步簡化BEM的編寫過程，同時保持其核心優點。
BEM不僅僅是一種命名方式，更是一種思維方式，它幫助開發者從模塊化和可維護性的角度去設計和構建界面，是現代前端開發不可或缺的一部分。
平化風格由來已久，但自蘋果公司庫克接任總裁職位之后，iPhone更新系統值IOS7，扁平化風格才徹底火爆整個科技圈。如今今年過去了，慢慢的感覺到扁平化風格已經大不如前，其主要原因還是蘋果在自身使用扁平化后，并沒有出臺一套扁平化的標準，似乎0高度，畫面接近簡約都可以稱作扁平化，導致了扁平化的濫用，引起了人們的視覺疲勞。
另一方面還要歸功于谷歌大力推廣Material Design，我覺得扁平化設計出來的非常簡潔，但是MD也能做到，而且MD設計出來的卡片式交互轉場的時候非常好看，但是國內現在普及的還很少，有的app只是在一兩個地方用到了MD里最基本的功能，可能還是考慮用戶機型適配的原因，MD support庫起步Android4.4，有的必須5.0以上才支持，有的Android6.0和5.0的庫又不一樣，而且因為機型繁多，兼容是個很大的問題，所以目前還沒有普及。為此，外媒thenextweb對2018年的網頁設計趨勢進行了預測大致如下：
彈出式/插入式內容的終結
Google往往是網頁趨勢發展背后的驅動者。最近，這家搜索引擎公司宣布將處罰那些在搜索結果中使用彈出式或插入式內容等擾人政策的網站，例如屏蔽那些當用戶點擊彈出窗口上的“X（關閉）”按鈕之后才會消息的內容。
不過并不是所有插入式內容都會消失，像年齡驗證、登錄窗口等內容則會被保留下來。
破碎/非常規網格布局
相信明年會有越來越多的網站開始嘗試新的網格布局，非常規甚至破碎的網格將成為更加流行的設計美學。
Invision Studio就是一個很好的例子，最新發布的網站就在推動網格設計的邊界，其對用戶在滾動頁面時候的網格布局進行了一番改變，甚至還在某些情況下通過在特定位置采用文本覆蓋圖片的方式“打破”邊界。
襯線的回歸
曾經的扁平化設計為了盡可能地扁平化甚至去掉了襯線。然而當扁平化設計開始走到盡頭的時候，人們又開始看到了襯線的回歸。
在眾籌網站Kickstarter上大家就可以看到一些襯線。這為原本干凈、現代的設計布局加入更多的個性，因為襯線就是增加個性化和真實性的方式之一。
圓角復活
看起來圓角并沒有真正死去，實際上現在設計師們又將它帶來了回來。看Twitter的新推文發布框就是一個很好的證明。
動畫的存在不再分散用戶注意力
多虧了jQuery和CSS3，動畫在各大網站發展起來，然而到最近，設計師們想要網頁上的所有東西都動起來。所以2018年預計網頁會出現更多的動畫和交互式內容，但它們出現的目的是為了體驗而非分散用戶的注意力。
就網頁設計而言，2018年注定會是令人興奮的一年。上面談到的趨勢在2017年最后幾個月已經廣受歡迎，所以相信到了明年它們勢必將能大放異彩。
文講述了 9 條非常強大的 JavaScript 技巧。
作者 | Klaus
譯者 | 彎月，責編 | 屠敏
以下為譯文：
全部替換
我們知道string.replace函數只會替換第一次出現的位置。在正則表達式末尾添加 /g 即可替換所有出現。
var example="potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"
提取唯一值
使用Set對象和spread操作符可以創建一個新的數組，僅包含唯一的值。
var entries=[1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries=[...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]
數字轉為字符串
只需要將其與空字符串連接。
var converted_number=5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string
字符串轉為數字
只需要使用 + 運算符。
注意這個技巧只能在“字符串形式的數字”上使用。
the_string="123";
console.log(+the_string);
// 123
the_string="hello";
console.log(+the_string);
// NaN
打亂數組的元素順序
var my_list=[1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function {
return Math.random - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
多維數組扁平化
只需使用spread運算符。
var entries=[1, [2, 5], [6, 7], 9];
var flat_entries=.concat(...entries);
// [1, 2, 5, 6, 7, 9]
短路條件
比如下面的例子：
if (available) {
addToCart;
}只需將變量和函數寫到一起即可：
available && addToCart
動態屬性名
原來我以為必須先定義一個對象才能指定動態屬性名，其實不需要：
const dynamic='flavour';
var item={
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }
使用length屬性來改變數組大小或清空數組
只需要重寫數組的length即可。
要想改變數組大小：
var entries=[1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length=4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]要想清空數組：
var entries=[1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length=0;
console.log(entries.length);
// 0
console.log(entries);
// 原文：https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p
本文為 CSDN 翻譯，轉載請注明來源出處。
【End】
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
