整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
靈訪談非常有幸能邀請到 “魔法哥” 做一期專訪。我們都知道您是國內(nèi)知名的 CSS 專家，是什么樣的 “CSS 情結(jié)” 使得您愿意將 “CSS魔法” 作為自己的別名？
大家好，很榮幸接受圖靈的專訪。我叫 “CSS魔法”，熟悉我的朋友都叫我 “魔法哥”。
這個問題問得好，瞬間把我的思緒拉回八年之前——那時我剛開始系統(tǒng)地學(xué)習(xí)前端知識。當(dāng)時為了找一份前端工作，我把市面上所有的 CSS 書籍全部買來，全部啃光，迅速且系統(tǒng)地掌握了 CSS 的基礎(chǔ)知識。
在這一堆書里，有一套上下冊教程叫作《Eric Meyer 談 CSS》（是由圖靈引進的哦）。我記得很清楚，書里有這么一段話：“在準(zhǔn)備好語義化的結(jié)構(gòu)之后，我們再給它施加一點兒 CSS 魔法……” 我當(dāng)時感覺這句話正好契合 CSS 帶給我的體驗！
我很喜歡 CSS 這門技術(shù)，它優(yōu)雅、神奇、充滿魔力，短短幾行代碼就可以讓我們的網(wǎng)頁脫胎換骨、煥然一新。于是從那時起，我就開始使用 “CSS魔法” 這個網(wǎng)名了，以這個名字注冊了微博；后來還創(chuàng)建了 “CSS魔法” 微信公眾號，分享自己在前端領(lǐng)域的學(xué)習(xí)經(jīng)驗；在為圖靈翻譯《CSS 揭秘》一書時，也很自然地以此為筆名了。
說到 Eric Meyer，他還是《CSS 權(quán)威指南》的作者，也是我的偶像。從偶像那里得來一個名字，很榮幸；而且這其中也有圖靈的功勞，也是緣份。
請簡單介紹一下您在百姓網(wǎng)的工作內(nèi)容吧！
我目前在百姓網(wǎng)擔(dān)任手機站的前端架構(gòu)師。比較尷尬的是，“前端架構(gòu)師” 這個頭銜經(jīng)常遭遇質(zhì)疑：“前端居然也需要架構(gòu)？” 所以我也趁這個機會闡述一下，我理解中的前端架構(gòu)到是什么。
其實不管是前端還是后端，任何一項嚴(yán)肅的、長期的、大規(guī)模的工程，都是需要有人來設(shè)計架構(gòu)的。
百姓網(wǎng)的前端架構(gòu)目標(biāo)很明確：隨著業(yè)務(wù)規(guī)模的擴張和團隊的壯大，整個網(wǎng)站系統(tǒng)的復(fù)雜度也隨之迅速上升；如何化繁為簡、幫助業(yè)務(wù)工程師高效高質(zhì)完成開發(fā)任務(wù)，這正是前端架構(gòu)師的職責(zé)和挑戰(zhàn)所在。
因此，簡單概括一下，我在百姓網(wǎng)所做前端架構(gòu)工作包括：
除此以外，長年重構(gòu)代碼也都是份內(nèi)事，偶爾還需要投身業(yè)務(wù)開發(fā)。畢竟架構(gòu)層作為業(yè)務(wù)層的堅實后盾，松懈不得啊！
您覺得哪些 CSS 知識是必須掌握的？
對一個專業(yè)的 CSS 開發(fā)者來說，首先，CSS 2 的核心知識必須完全掌握。以《CSS 權(quán)威指南》（第三版）為例，除了 “聲音樣式” 之外，這本書的所有內(nèi)容都是應(yīng)該透徹理解的。即使記不住某些冷僻屬性的名稱與行為，也需要知道在哪里可以快速查閱。
接下來，關(guān)于 CSS 3，很多同學(xué)都問過我這樣一個問題：“魔法哥，現(xiàn)在瀏覽器都支持 CSS 3 了，我跳過 CSS 2 直接學(xué) CSS 3 可以嗎？”
在回答這個問題之前，我們需要先搞清楚 “CSS 3” 到底是什么。讀過《CSS 揭秘》這本書的同學(xué)應(yīng)該都很清楚了，“CSS 3” 是一個俗稱，并不是 W3C 的官方術(shù)語。基本上它表示 CSS 2 之后更新或新增的 CSS 規(guī)范模塊的合稱。
實際上，CSS 3 相對于 CSS 2 并不是類似軟件版本更替那樣的升級。CSS 2 的全稱是 “CSS Level 2”，后續(xù)的 CSS 規(guī)范并不是完全以替代品的形態(tài)出現(xiàn)的，某些 Level 3 的 CSS 規(guī)范模塊（或新增的規(guī)范模塊）往往是基于 CSS 2 來擴展的。
因此，對于 CSS 學(xué)習(xí)者來說，如果買了一本只講 CSS 3 新增內(nèi)容的教程或參考書，那還需要搭配 CSS 2 的書來看。事實上，由于篇幅所限，市面上絕大部分以 “CSS 3” 為賣點的圖書確實都不會重復(fù)講解 CSS 2 的內(nèi)容。看到這里，相信上面的問題在大家心中已經(jīng)得出答案了吧。
我自己的學(xué)習(xí)路徑是這樣的：通過《CSS 權(quán)威指南》和《精通 CSS》等 CSS 2 時代的經(jīng)典教程來打好 CSS 2 的基礎(chǔ)（因為 CSS 2 已經(jīng)完全穩(wěn)定了）；對后續(xù)新技術(shù)和新規(guī)范的了解和掌握，通常求助于 MDN 等在線資源（因為變化相當(dāng)快）。如果新入門的同學(xué)面對龐雜的 CSS 體系感覺無從下手，不妨參考這條路徑。
有圖靈社區(qū)網(wǎng)友提問：您在工作中常用的 CSS 實用技巧有哪些？
首先，我會毫不猶豫地推薦大家使用 CSS 預(yù)處理器。由于 CSS 并不是編程語言，并不具備抽象能力，當(dāng)網(wǎng)站的規(guī)模發(fā)展到一定程度之后，原生 CSS 很難解決抽象與復(fù)用的問題。而預(yù)處理器則正好彌補了 CSS 在這方面的不足。
即使你不打算學(xué)習(xí)預(yù)處理器的特有語法，甚至還有些排斥，那也不妨嘗試?yán)盟哪K機制來拆分和組織代碼。由于預(yù)處理器大多兼容 CSS 原生語法，因此你可以保持原來寫代碼的習(xí)慣，僅利用預(yù)處理器在模塊化方面的功能。
對于多人合作的團隊來說，通過模塊來拆分代碼尤為重要。雖然引入預(yù)處理器會要求你在工作流中加入構(gòu)建環(huán)節(jié)，但我認(rèn)為這個成本是完全值得的。
接下來，想跟大家分享的經(jīng)驗就是：做好 CSS 代碼的 “分層”。我設(shè)計的 CSS 架構(gòu)通常都會由 “Normalize + Reset → 通用基礎(chǔ)樣式 → UI 組件 → 頁面通用的布局框架 → 單個頁面的布局和樣式” 這幾個層級構(gòu)成，越往左越靠近架構(gòu)，越往右越靠近業(yè)務(wù)。
劃好層級并把代碼寫到正確的層級去，可以帶來很多好處：在團隊分工上，可以把不同層級的代碼交給不同的人來開發(fā)和維護，相當(dāng)于關(guān)注點分離；從架構(gòu)角度來看，也可以實現(xiàn) “控制復(fù)雜度” 這一重要目的。
還有就是善用工具。比如通過 Lint 程序來保障代碼規(guī)范的執(zhí)行，通過構(gòu)建工具來讓重復(fù)勞動盡可能自動化，通過 Autoprefixer 這樣的工具來加工或生成代碼，等等。俗話說，磨刀不誤砍柴工，多看多聽多試，用開放的心態(tài)去了解和嘗試新工具，往往會有不錯的收獲。
如果這位網(wǎng)友想問的是 “有哪些實用的 CSS 特性”，那我覺得至少要提一下 Flexbox。它是 CSS 3 引入的更強大、更易用的布局方式，而且我們在移動端已經(jīng)可以安全地使用 Flexbox 的基礎(chǔ)特性了。其它的特性，比如高級選擇符、漸變、動畫等高級特性，也非常有價值，我在編寫 CMUI 這個框架時都有實際應(yīng)用。
此外，大家可能還想了解在編寫 CSS 時需要掌握的原則和思路。這里我會推薦《CSS 揭秘》這本書中的 “CSS 編碼技巧” 一節(jié)。我一直想寫篇文章來講述自己多年積累的 CSS 經(jīng)驗，但一直苦于找不到合適的切入點，總怕掛一漏萬。而當(dāng)我讀到這一節(jié)時終于釋然——原來已經(jīng)有人幫我做了這件事情！隨后我也將它親手翻譯了出來，也算了卻了一樁心事。
前端領(lǐng)域的技術(shù)更新非常快，常常是一門技術(shù)還沒學(xué)明白，另一門技術(shù)又火了，你是如何取舍的呢？
確實，近些年前端領(lǐng)域的新技術(shù)、新工具、以及新的實踐方式都層出不窮，稍不留神就會有落伍的感覺。而每個人精力都是有限的，面對這樣的局面，難免會有一種疲于奔命的壓迫感。
我自己的應(yīng)對方式是抓住核心，放棄自己很難精通的、一時用不到的、或者對當(dāng)下想做的事情價值不大的技術(shù)方向。比如一路以來，我放棄了富媒體方向的 Flash，放棄了圖形與游戲方向的 Canvas 和 WebGL，放棄了單頁應(yīng)用方向的 MV*，放棄了語言方向的 FP，等等。
當(dāng)然這些 “放棄” 都是戰(zhàn)略性的，而不是永久性的。畢竟精力有限，不可能面面俱到。不過，一旦某個方向變成自己必須攻克的戰(zhàn)略要地，那我也必然會義無反顧躍入新坑。
除了在技術(shù)范疇內(nèi)作取舍，我還會把一部分精力放在 “人” 身上——就是寫代碼的這群人。個人英雄的時代一去不復(fù)返了，單打獨斗能力再強，也難成氣候。因此，幫助身邊的小伙伴快速成長，打造一支梯隊完備、技能互補的前端開發(fā)團隊，往往更具現(xiàn)實意義。有些時候，這也可以成為一種 “突破瓶頸” 的解決方案——每當(dāng)團隊里的小伙伴攻克了某項新技術(shù)時，我都可以寬慰自己：我不會，沒關(guān)系，有小伙伴可以頂上！
有圖靈社區(qū)網(wǎng)友提問：CSS 與它的小伙伴兒 JavaScript 的關(guān)系是怎樣的？有什么共同點和差異？
哇噢，這個問題完全是面試題的既視感啊！好的，我來好好回答一下，重溫被面試的感覺。
根據(jù) Web 標(biāo)準(zhǔn)的 “分離” 原則，網(wǎng)頁界面由三層構(gòu)成：結(jié)構(gòu)層、表現(xiàn)層、行為層。這三者在技術(shù)上分別由 HTML、CSS、JS 來實現(xiàn)。大家都知道有句話叫 “術(shù)業(yè)有專攻”，在網(wǎng)頁上也是一樣，不同的層應(yīng)該由不同的技術(shù)來實現(xiàn)。
在近些年，CSS 的能力得到了不少提升，比如 :hover 偽類的增強以及 :checked、:target 等新偽類的出現(xiàn)，令原本只能由 JS 實現(xiàn)的交互功能也可以用 CSS 來實現(xiàn)了。這意味著，在某些場景下，這兩者的功能有重疊的地方。
不過從原理上來說，CSS 只具備修改渲染樹的能力，無法修改 DOM 結(jié)構(gòu)（“渲染樹” 是指 DOM 樹在應(yīng)用樣式之后產(chǎn)生的、用于渲染網(wǎng)頁界面的數(shù)據(jù)模型）。CSS 可以通過 display、visibility、opacity等屬性來控制元素的顯隱，但無法…………
……
點贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點贊，都是耍流氓-_-）
關(guān)注 ｛我｝，享受文章首發(fā)體驗！
每周重點攻克一個前端技術(shù)難點。更多精彩前端內(nèi)容私信 我 回復(fù)“教程”
原文鏈接：https://github.com/cssmagic/blog/issues/63
者：YGYOO
轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/5b8905456fb9a01a105966b4
常，作為開發(fā)人員，我們會編寫類似類型的代碼，陷入一種雖然舒適但有時感覺很平凡的模式。
然而，JavaScript 的世界是廣闊的，充滿了高級功能，當(dāng)發(fā)現(xiàn)和使用這些功能時，可以將我們的開發(fā)工作變得更加令人興奮和充實。
在本指南中，我們將揭曉 25 個高級 JavaScript 功能，這些功能不僅能揭示這些隱藏的瑰寶，還能將您對 JavaScript 的掌握提升到前所未有的水平。
讓我們一起踏上這段發(fā)現(xiàn)之旅，將 JavaScript 的高級功能集成到我們的編碼庫中，以創(chuàng)建更高效?、更優(yōu)雅、更強大的應(yīng)用程序。是時候為我們的開發(fā)任務(wù)注入新的樂趣和創(chuàng)造力了。
JavaScript 允許標(biāo)記循環(huán)和塊語句，從而可以使用 和 進行精確break控制continue。
outerLoop: for (let i = 0; i < 5; i++) {
innerLoop: for (let j = 0; j < 5; j++) {
if (i === 2 && j === 2) break outerLoop;
console.log(`i=${i}, j=${j}`);
}
}
逗號運算符允許按序列計算多個表達式，并返回最后一個表達式的結(jié)果。
let a = (1, 2, 3); // a = 3
除了創(chuàng)建字符串之外，標(biāo)記模板還可用于 DSL（域特定語言）、清理用戶輸入或本地化。
function htmlEscape(strings, ...values) {
// Example implementation
}
盡管不推薦，但 JavaScript 允許在塊內(nèi)聲明函數(shù)，這可能會導(dǎo)致非嚴(yán)格模式下的不同行為。
if (true) {
function test() { return "Yes"; }
} else {
function test() { return "No"; }
}
test(); // Behavior varies depending on the environment
該void運算符計算任何表達式，然后返回 undefined，這對于 JavaScript 的超鏈接很有用。
void (0); // returns undefined
位運算符（例如|and &）可以更快地執(zhí)行某些數(shù)學(xué)運算，但會犧牲可讀性。
let floor = 5.95 | 0; // Fast way to do Math.floor(5.95)
該with語句擴展了塊的作用域鏈，允許您編寫更短的代碼。但是，出于可讀性和性能方面的考慮，不建議這樣做。
with(document.getElementById("myDiv").style) {
background = "black";
color = "white";
}
與 Christian Heilmann 一起提高您的 JavaScript 技能 - 從今天開始編寫更干凈、更快、更好的代碼！
JavaScript 嘗試修復(fù)缺失的分號，但依賴它可能會導(dǎo)致意外結(jié)果。
let x = 1
let y = 2
[x, y] = [y, x] // Without proper semicolons, this could fail
檢查對象是否具有屬性，而無需直接訪問其值。
"toString" in {}; // true
instanceof檢查原型鏈，同時typeof返回一個字符串，指示未計算的操作數(shù)的類型。
function Person() {}
let person = new Person();
console.log(person instanceof Person); // true
console.log(typeof person); // "object"
ES6允許函數(shù)具有塊作用域，類似于let和const。
{
function test() {
return "block scoped";
}
}
console.log(typeof test); // "function" in non-strict mode, "undefined" in strict mode
使用該debugger語句暫停執(zhí)行并打開調(diào)試器。
function problematicFunction() {
debugger; // Execution pauses here if the developer tools are open
}
eval將字符串作為 JavaScript 代碼執(zhí)行，但會帶來重大的安全性和性能影響。
eval("let a = 1; console.log(a);"); // 1
利用 InMotion Hosting 的一系列計劃（從共享服務(wù)器到 VPS 以及專用服務(wù)器）為您的項目找到合適的托管解決方案。
雖然__proto__廣泛支持設(shè)置對象的原型，但它是非標(biāo)準(zhǔn)的。使用Object.getPrototypeOf()andObject.setPrototypeOf()代替。
let obj = {};
obj.__proto__ = Array.prototype; // Not recommended
document.write()直接寫入 HTML 文檔，但使用它可能會產(chǎn)生負面影響，特別是對于同步加載外部腳本。
document.write("<h1>Hello World!</h1>");
JavaScript 允許鏈?zhǔn)劫x值，它可以在一個語句中將單個值分配給多個變量。
let a, b, c;
a = b = c = 5; // Sets all three variables to the value of 5
該in運算符檢查對象中是否存在屬性，而無需訪問屬性值。
const car = {
make: 'Toyota',
model: 'Corolla'
};
console.log('make' in car); // true
為對象分配屬性時，如果屬性名稱與變量名稱相同，則可以使用簡寫。
const name = 'Alice';
const age = 25;
const person = { name, age };
您可以將默認(rèn)參數(shù)值與函數(shù)參數(shù)中的解構(gòu)結(jié)合起來，以獲得更具可讀性和更靈活的函數(shù)定義。
function createPerson({ name = 'Anonymous', age = 0 } = {}) {
console.log(`Name: ${name}, Age: ${age}`);
}
createPerson({ name: 'Alice' }); // Name: Alice, Age: 0
createPerson(); // Name: Anonymous, Age: 0
使用該方法快速初始化具有特定值的數(shù)組fill()。
const initialArray = new Array(5).fill(0); // Creates an array [0, 0, 0, 0, 0]
利用可調(diào)節(jié) LED 照明優(yōu)化您的工作空間，提高工作效率和舒適度，為專注的工作會議創(chuàng)造理想的環(huán)境。
使用 方法可以輕松檢查數(shù)組中是否存在元素includes()，這比使用 更具可讀性indexOf()。
const fruits = ['apple', 'banana', 'mango'];
console.log(fruits.includes('banana')); // true
當(dāng)destructuring一個對象時，您可以使用別名將屬性分配給具有不同名稱的變量。
const obj = { x: 1, y: 2 };
const { x: newX, y: newY } = obj;
console.log(newX); // 1
??僅在處理null或時用于提供默認(rèn)值undefined，而不是其他falsy值，例如
const count = 0;
console.log(count ?? 10); // 0, because count is not null or undefined
使用對象字面量中的計算屬性名稱創(chuàng)建具有動態(tài)名稱的函數(shù)。
const dynamicName = 'func';
const obj = {
[dynamicName]() {
return 'Dynamic Function Name!';
}
};
console.log(obj.func()); // "Dynamic Function Name!"
使用哈希#前綴定義類中的私有字段，該字段無法從類外部訪問。
class Counter {
#count = 0;
increment() {
this.#count++;
}
getCount() {
return this.#count;
}
}
當(dāng)我們結(jié)束對 25 個 JavaScript 高級功能的探索時，JavaScript 的庫既龐大又強大。
我們深入研究的每個功能都為解決編碼挑戰(zhàn)開辟了新途徑，類似于在我們的工具包中添加創(chuàng)新工具。
這不僅增強了我們創(chuàng)造性、高效地制定解決方案的能力，而且還強調(diào)了 JavaScript 的動態(tài)多功能性。
這些高級功能凸顯了持續(xù)學(xué)習(xí)在 Web 開發(fā)領(lǐng)域的關(guān)鍵作用。
接受這些細微差別并將它們集成到我們的日常編碼實踐中，使我們能夠提高我們的技能并為網(wǎng)絡(luò)技術(shù)的發(fā)展做出貢獻。
請記住，掌握 JavaScript 的道路是一個持續(xù)的旅程，每一行代碼都提供了發(fā)現(xiàn)非凡事物的機會。
讓我們不斷突破 JavaScript 所能實現(xiàn)的極限，保持好奇心并對未來的無限可能性保持開放態(tài)度。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
