整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，今天告訴大家一個(gè)好消息，CSS要支持類似Sass框架的嵌套語(yǔ)法了，不需要任何框架，就可以很方便的使用，是不是特別爽呢。那么我們一起看看這個(gè)想法和過(guò)程是如何產(chǎn)生的，有助于我們更好的理解這個(gè) CSS 嵌套語(yǔ)法方案
W3C 的年底充滿了起起伏伏，該組織與麻省理工學(xué)院之間的辯論最終在圣誕節(jié)前夕得到解決，這要?dú)w功于兩個(gè)組織的領(lǐng)導(dǎo)。
幸運(yùn)的是，它并沒(méi)有影響 CSS 嵌套的工作，這個(gè)新特性不僅在 CSS 組中，而且在開(kāi)發(fā)者社區(qū)中都引起了激烈的爭(zhēng)論。
2022 年 12 月 15 日，Jen Simmons 宣布了一項(xiàng)調(diào)查，以選擇開(kāi)發(fā)人員最喜歡的 CSS 嵌套變體。
在排除了方案一和方案二之后，2500 名開(kāi)發(fā)者不得不在方案三、方案四和方案五之間做出選擇。
調(diào)查結(jié)果太棒了！事實(shí)證明，86% 的開(kāi)發(fā)人員選擇了與心愛(ài)的 Sass 最相似的選項(xiàng) 3。
在我們能夠慶祝 CSS 將會(huì)擁有一個(gè)熟悉的原生嵌套解決方案之前，有一些事情需要考慮。
調(diào)查結(jié)果可作為社區(qū)期望的指標(biāo)。 W3C 團(tuán)隊(duì)采取正確方向的輸入。
團(tuán)隊(duì)在認(rèn)真聽(tīng)取用戶聲音并聽(tīng)取在線辯論的同時(shí)，還必須完善最終的解決方案。有許多原因需要考慮。
雖然 Sass 語(yǔ)法很好，但不可能將其 1:1 轉(zhuǎn)換為 CSS。
CSS 標(biāo)準(zhǔn)依賴于瀏覽器解析必須理解新語(yǔ)法的樣式表。團(tuán)隊(duì)必須考慮整個(gè) CSS 標(biāo)準(zhǔn)，并確保新語(yǔ)法在所有用例中都能兼容。
這可能很棘手，可能需要解析器開(kāi)關(guān)或一些規(guī)則來(lái)確保嵌套以可預(yù)測(cè)的方式工作。
為了新語(yǔ)法的成功，規(guī)則集必須最少，團(tuán)隊(duì)被吸引到特殊字符規(guī)則中。該規(guī)則規(guī)定嵌套選擇器必須以特殊字符開(kāi)頭。例如 &、.、# 或：。
該規(guī)則很容易理解，應(yīng)該也很容易記住。
還有其他不確定因素。嵌套運(yùn)算符 (&) 是強(qiáng)制性的還是可選的，目前仍有爭(zhēng)議。
盡管如此，該團(tuán)隊(duì)在兩周前決定聽(tīng)從開(kāi)發(fā)人員的聲音，并從選項(xiàng) 3 開(kāi)始繼續(xù)工作。與 Sass 最相似的一個(gè)。同時(shí)對(duì)未來(lái)可能發(fā)生的所有可能性持開(kāi)放態(tài)度。
如果您是前端網(wǎng)絡(luò)工程師，您也可以參與這項(xiàng)工作。查看文章末尾的鏈接以導(dǎo)航到討論 CSS 嵌套的問(wèn)題。
完善 CSS 嵌套肯定需要幾個(gè)月的時(shí)間。我會(huì)讓你知道進(jìn)展情況。
在 W3C 團(tuán)隊(duì)支持標(biāo)準(zhǔn)的情況下，我相信最終的解決方案將成為構(gòu)建結(jié)構(gòu)良好的樣式表的標(biāo)準(zhǔn)。對(duì)于構(gòu)建現(xiàn)代應(yīng)用程序非常重要的東西。
今天的分享就到這里，針對(duì)這個(gè)方案大家有什么看法，歡迎大家在評(píng)論區(qū)發(fā)表看法，你也可以通過(guò)以下的討論鏈接參與到這個(gè)標(biāo)準(zhǔn)的制定中。感謝你的閱讀，如果你喜歡我的分享，別忘了點(diǎn)贊轉(zhuǎn)發(fā)，讓更多的人看到，最后別忘記點(diǎn)個(gè)關(guān)注，你的支持將是我分享最大的動(dòng)力，后續(xù)我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。
討論鏈接：https://github.com/w3c/csswg-drafts/issues/8248
原文：https://tomaszs2.medium.com/w3c-decided-on-css-nested-syntax-950bc13f3ce7
作者：Tom Smykowski
非直接翻譯，有自行改編和添加部分。
擊鏈接閱讀原文，獲取更多技術(shù)內(nèi)容：React組件封裝實(shí)踐：如何拆解復(fù)雜的頁(yè)面-阿里云開(kāi)發(fā)者社區(qū)
在日常開(kāi)發(fā)中，遇到非常難以維護(hù)的頁(yè)面是常態(tài)，相信不少同學(xué)也為此苦惱過(guò)，筆者在業(yè)務(wù)開(kāi)發(fā)中總結(jié)了些經(jīng)驗(yàn)希望對(duì)大家有所啟發(fā)。（后臺(tái)回復(fù)大數(shù)據(jù)即可獲得《大數(shù)據(jù)&AI實(shí)戰(zhàn)派》電子書(shū)）
作者 | 王峰(楚梟)
來(lái)源 | 阿里開(kāi)發(fā)者公眾號(hào)
在日常開(kāi)發(fā)中，遇到非常難以維護(hù)的頁(yè)面是常態(tài)，相信不少同學(xué)也為此苦惱過(guò)，筆者在業(yè)務(wù)開(kāi)發(fā)中總結(jié)了些經(jīng)驗(yàn)希望對(duì)大家有所啟發(fā)。下圖是一個(gè)較為復(fù)雜的詳情頁(yè)、表單頁(yè)，我截取了其中一小部分作為示例：
隨著需求不斷迭代，這個(gè)頁(yè)面的代碼變得越來(lái)越復(fù)雜，代碼達(dá)到幾千行，html 標(biāo)簽嵌套層級(jí)非常深，每次想在正確的節(jié)點(diǎn)改東西、加元素都非常費(fèi)眼睛；每次想修改、疊加業(yè)務(wù)邏輯，看到一堆 useEffect、useState、useRef 令人望而卻步。于是決定重構(gòu)以改變現(xiàn)狀。
如何重構(gòu)一個(gè)復(fù)雜前端頁(yè)面？筆者平常主要寫(xiě)后端，實(shí)際工程中后端代碼的腐化很多都來(lái)源于 if-else 不斷疊加，要重構(gòu)一般分幾個(gè)層次看：
大的思路如此，具體場(chǎng)景各有各的特殊性，需要靈活應(yīng)對(duì)，這里也不過(guò)多展開(kāi)。總之，后端的復(fù)雜度和各個(gè)場(chǎng)景的業(yè)務(wù)邏輯息息相關(guān)，垂直縱深很大，但前端呢？私以為前端雖然也有業(yè)務(wù)邏輯但不深，它的復(fù)雜不是來(lái)源于垂直縱深，而是水平堆積。一個(gè)頁(yè)面的內(nèi)容經(jīng)常又多又雜，有詳情、有表單、各種區(qū)塊、不同標(biāo)簽頁(yè)，里面的內(nèi)容我不贅述。那么重構(gòu)的方向呼之欲出：使用組合的思想拆分水平堆積的業(yè)務(wù)邏輯塊。具體到 React，其實(shí)就是拆解業(yè)務(wù)、封裝組件，是一個(gè)組件化的過(guò)程。
其實(shí)前端整個(gè) React App 說(shuō)白了可以抽象成一個(gè)組件樹(shù)，如圖：
筆者習(xí)慣將組件分成：基礎(chǔ)組件和區(qū)塊組件。
按照基礎(chǔ)組件和區(qū)塊組件的劃分，我開(kāi)始重構(gòu)上圖詳情頁(yè)。
我將頁(yè)面上的展示內(nèi)容按照業(yè)務(wù)塊進(jìn)行了劃分，自頂向上對(duì)業(yè)務(wù)區(qū)塊進(jìn)行了重新的定義，如圖：
劃分好了就開(kāi)始封裝，列舉幾個(gè)組件的封裝示例。
AliTalk IM 組件定義
接收方 IM 身份的 id 作為入?yún)ⅲ祷?IM 展示組件，點(diǎn)擊 icon 則喚起聊天彈窗進(jìn)行聊天操作，完成后可關(guān)閉彈窗。至于初始化聊天框、銷毀聊天框的邏輯，以及如何進(jìn)行聊天，應(yīng)該在組件內(nèi)封裝好，外部業(yè)務(wù)不關(guān)心這些，主要代碼：
type ChatProps = {
uid?: string;
};
const Chat: FC<ChatProps> = (data: ChatProps) => {
const [showChat, setShowChat] = useState(true);
useEffect(() => {
console.log('init Alitalk: ' + data.uid);
return () => {
console.log('destroy Alitalk: ' + data.uid);
setShowChat(false);
const aliTalkMessageBox = document.getElementsByClassName('weblite-iframe');
for (let i = 0; i < aliTalkMessageBox.length; i++) {
const item = aliTalkMessageBox[i];
item.remove();
}
};
}, []);
return (
<div>
{showChat && (
<Alitalk uid={data.uid} pid={'xx'} bizType={1} bizId={'xx'} >
<img width={24} height={24}
src={
'https://img.alicdn.com/imgextra/i2/O1CN01acXzMG1d5JsurHGVR_!!6000000003684-2-tps-200-200.png'
} />
<span style={{ marginLeft: '5px', color: '#FF6600' }}>chat now</span>
</Alitalk>
)}
</div>
);
};
export default Chat;AliTalk IM 組件定義組件引用
直接引入 <Chat> 標(biāo)簽，一行代碼即可：
<Descriptions style={{ marginBottom: 24 }} title="買家信息">
<Descriptions.Item label="買家旺旺">
<Chat uid={detailData?.data?.buyerAliTalkId} />
</Descriptions.Item>
</Descriptions>剩余60%，完整內(nèi)容請(qǐng)點(diǎn)擊下方鏈接查看：React組件封裝實(shí)踐：如何拆解復(fù)雜的頁(yè)面-阿里云開(kāi)發(fā)者社區(qū)
阿里云開(kāi)發(fā)者社區(qū)，千萬(wàn)開(kāi)發(fā)者的選擇。百萬(wàn)精品技術(shù)內(nèi)容、千節(jié)免費(fèi)系統(tǒng)課程、豐富的體驗(yàn)場(chǎng)景、活躍的社群活動(dòng)、行業(yè)專家分享交流，盡在：阿里云開(kāi)發(fā)者社區(qū)-云計(jì)算社區(qū)-阿里云
網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，我們有時(shí)會(huì)遇到HTML頁(yè)面白屏的問(wèn)題，即打開(kāi)網(wǎng)頁(yè)時(shí)頁(yè)面顯示空白，沒(méi)有任何內(nèi)容。這不僅令用戶困惑，也使開(kāi)發(fā)者頭疼不已。本文將分享一些常見(jiàn)的HTML頁(yè)面白屏問(wèn)題解決方法，幫助你快速解決這個(gè)問(wèn)題，讓你的網(wǎng)頁(yè)煥然一新！
第一步：檢查HTML代碼
首先，我們需要檢查HTML代碼是否正確。常見(jiàn)的錯(cuò)誤包括標(biāo)簽未閉合、標(biāo)簽嵌套錯(cuò)誤等。這些錯(cuò)誤可能會(huì)導(dǎo)致頁(yè)面無(wú)法正常顯示。因此，仔細(xì)檢查HTML代碼，確保沒(méi)有語(yǔ)法錯(cuò)誤是解決白屏問(wèn)題的第一步。
第二步：檢查CSS文件
HTML頁(yè)面的樣式通常由CSS文件控制。如果CSS文件中存在錯(cuò)誤或者無(wú)法正常加載，可能會(huì)導(dǎo)致頁(yè)面白屏。我們可以通過(guò)以下步驟檢查CSS文件是否存在問(wèn)題：
1、檢查CSS文件路徑是否正確：確保CSS文件的路徑正確，并且文件存在于指定的位置。可以通過(guò)瀏覽器開(kāi)發(fā)者工具查看網(wǎng)絡(luò)面板，檢查CSS文件是否被成功加載。
2、檢查CSS文件語(yǔ)法錯(cuò)誤：使用CSS驗(yàn)證工具，如W3C CSS驗(yàn)證服務(wù)，檢查CSS文件是否存在語(yǔ)法錯(cuò)誤。如果存在錯(cuò)誤，及時(shí)修復(fù)。
3、檢查CSS選擇器和樣式規(guī)則：檢查CSS文件中的選擇器和樣式規(guī)則是否正確。可能存在選擇器與HTML元素不匹配或樣式規(guī)則沖突的情況。可以通過(guò)逐個(gè)注釋掉樣式規(guī)則，逐步排查問(wèn)題。
第三步：檢查JavaScript代碼
JavaScript代碼也可能導(dǎo)致頁(yè)面白屏。以下是檢查JavaScript代碼的步驟：
1、檢查JS文件路徑是否正確：與CSS文件類似，確保JS文件的路徑正確，并且文件存在于指定的位置。通過(guò)瀏覽器開(kāi)發(fā)者工具查看控制臺(tái)面板，檢查是否有JS文件加載錯(cuò)誤的提示信息。
2、檢查JS代碼語(yǔ)法錯(cuò)誤：使用JS語(yǔ)法檢查工具，檢查JS代碼是否存在語(yǔ)法錯(cuò)誤。如果有錯(cuò)誤，及時(shí)修復(fù)。
3、檢查JS代碼邏輯錯(cuò)誤：檢查JS代碼中的邏輯是否正確。可能存在變量未定義、函數(shù)未調(diào)用或者邏輯錯(cuò)誤等問(wèn)題。可以通過(guò)調(diào)試工具，如瀏覽器開(kāi)發(fā)者工具中的調(diào)試器，逐步排查問(wèn)題。
第四步：排查網(wǎng)絡(luò)請(qǐng)求問(wèn)題
如果前面的步驟都沒(méi)有發(fā)現(xiàn)問(wèn)題，那么可能是網(wǎng)絡(luò)請(qǐng)求出現(xiàn)了問(wèn)題。以下是一些排查網(wǎng)絡(luò)請(qǐng)求問(wèn)題的方法：
1、檢查網(wǎng)絡(luò)連接：確保你的設(shè)備已連接到互聯(lián)網(wǎng)，并且網(wǎng)絡(luò)連接穩(wěn)定。
2、檢查資源加載狀態(tài)：通過(guò)瀏覽器開(kāi)發(fā)者工具的網(wǎng)絡(luò)面板，檢查頁(yè)面中的資源加載狀態(tài)。可能存在資源加載失敗或者超時(shí)的情況，導(dǎo)致頁(yè)面白屏。
3、檢查服務(wù)器配置：如果你使用了服務(wù)器端腳本語(yǔ)言，如PHP，檢查服務(wù)器配置是否正確。可能存在服務(wù)器配置問(wèn)題導(dǎo)致頁(yè)面無(wú)法正確渲染。
第五步：優(yōu)化頁(yè)面性能
如果以上方法都沒(méi)有解決問(wèn)題，那么可能是頁(yè)面性能問(wèn)題導(dǎo)致白屏。以下是一些優(yōu)化頁(yè)面性能的方法：
1、壓縮和合并文件：將CSS和JS文件進(jìn)行壓縮和合并，減少文件的大小和數(shù)量，提高頁(yè)面加載速度。
2、使用緩存：利用瀏覽器緩存機(jī)制，將靜態(tài)資源進(jìn)行緩存，減少服務(wù)器的請(qǐng)求次數(shù)，提高頁(yè)面加載速度。
3、異步加載資源：使用異步加載技術(shù)，如異步加載JS文件或使用延遲加載，減少頁(yè)面加載時(shí)間。
4、減少HTTP請(qǐng)求：減少頁(yè)面中的HTTP請(qǐng)求次數(shù)等。
結(jié)語(yǔ)：
通過(guò)以上五個(gè)步驟，我們可以逐步排查HTML頁(yè)面白屏問(wèn)題，并解決它們。不同的問(wèn)題可能需要不同的解決方法，因此需要耐心和細(xì)心地分析和排查。在開(kāi)發(fā)過(guò)程中，我們也要時(shí)刻關(guān)注頁(yè)面性能，優(yōu)化頁(yè)面加載速度，提高用戶體驗(yàn)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
