整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
用域、作用域鏈、詞法作用域
在 Javascript 中，函數(shù)和對(duì)象都是變量，作用域決定了代碼不同部分的變量的可訪問性。
有趣的是，當(dāng)我們開始更好地理解作用域時(shí)，我們可以在不同的作用域中使用相同的變量名，而不會(huì)發(fā)生任何沖突等等……
范圍分為三種，
全球范圍
在函數(shù)外部聲明的變量稱為全局范圍，我們可以從代碼的任何部分訪問這些變量。
這里要注意的是我們可以訪問在全局范圍內(nèi)聲明的變量，在代碼的任何范圍內(nèi)，如函數(shù)或塊范圍。
功能或本地范圍
在函數(shù)內(nèi)部聲明的變量是局部作用域，我們無法在函數(shù)外部訪問這些變量，這些變量?jī)H限于該特定函數(shù)。
var bikeName="Jarvis"; // declared in global scopefunction bikerDetails(){ var bikerName="TTF"; // declared in functional or local scope console.log(bikerName + " loves " + bikeName);
}bikerDetails();在上面的代碼中，bikeName是在全局范圍內(nèi)聲明的，我們可以從代碼的任何部分訪問bikeName，變量bikerName是在bikerDetails函數(shù)內(nèi)部聲明的，我們不能從外部訪問bikerName。
塊范圍
這是在 ES6 中引入的，大括號(hào)稱為代碼塊，其中在塊內(nèi)使用 let 和 const 聲明的變量只能在塊內(nèi)訪問。
在 ES6 之前的傳統(tǒng) javascript 中，在 var 中聲明的變量要么是函數(shù)作用域，要么是全局作用域，取決于它的聲明位置，因此當(dāng)花括號(hào)塊不像其他語言那樣形成作用域時(shí)，這可能會(huì)非常棘手和混亂。
const raining=1;
if(raining){
var action="off the AC";
}else{
var action="let the AC run";
}
console.log(action);在上面的 var 示例中，它是全局作用域，我們可以從代碼的任何部分訪問 var 操作，為了避免這種混淆，在 ES6 let 中，引入了 const 和塊作用域。
const raining=1;
if(raining){
let action="off the AC";
}else{
let action="let the AC run";
}
console.log(action);在上面的代碼中，控制臺(tái)語句拋出了一個(gè)錯(cuò)誤，因?yàn)樽兞?action 沒有在全局范圍內(nèi)定義，我們?cè)噲D在塊范圍內(nèi)定義的全局范圍內(nèi)訪問 action 變量。
與 var 不同，let 和 const 的作用域是最近的花括號(hào)，但如果我們?cè)诖a塊中聲明 var，我們可以從代碼的任何部分（如全局作用域）訪問該 var 變量。
{
var bikeName="Jarvis";
let bikerName="TTF";
}
console.log(bikeName); // jarvis
console.log(bikerName); // throws not defined error在上面的代碼塊中，由于 let 的行為， bikerName 會(huì)拋出一個(gè)錯(cuò)誤，就像 let const 一樣，行為是這樣的。
當(dāng)我們?cè)诼暶鲿r(shí)不將 var、let 或 const 放在變量的前綴中時(shí)，默認(rèn)情況下它將作為 var 。
{
bikerFriend="Ajeesh Bro";
}在上述場(chǎng)景中，變量 bikerFriend 的行為類似于 var 。
以上內(nèi)容也適用于嵌套作用域，當(dāng)前上下文的作用域可以訪問父作用域的變量，它會(huì)搜索到全局作用域的變量，如果在全局作用域中沒有找到該變量，那么它 引發(fā)參考錯(cuò)誤，未定義。
嵌套范圍
讓我們考慮以下示例代碼，
const bikeName="Jarvis";
function printBikeDetails() {
function getBikerDetails() {
function getBikeName() {
return bikeName;
}
return getBikeName();
}
return getBikerDetails();
}
console.log(printBikeDetails()); // Jarvis在上面的嵌套范圍中，我們從 getBikeName 函數(shù)返回了 bikeName 變量，其中 getBikeName 函數(shù)在自己的范圍內(nèi)搜索變量，如果沒有找到，則在其父范圍或其外部范圍 getBikerDetails 中搜索，再次在父范圍中搜索 ，直到找到bikeNamevariable，它一直在父范圍內(nèi)搜索，直到到達(dá)全局范圍。
要記住的主要事情是范圍是關(guān)于定義空間的，而不是關(guān)于調(diào)用空間的
上述在外部作用域中查找變量直至到達(dá)全局作用域的過程稱為作用域鏈。
詞匯環(huán)境
無論何時(shí)創(chuàng)建執(zhí)行上下文 詞法環(huán)境也被創(chuàng)建，詞法環(huán)境是本地內(nèi)存以及其父或外部范圍的詞法環(huán)境。
詞匯意味著層次或順序。
讓我們考慮這個(gè)例子，
const bikeName="Jarvis";
function printBikeDetails() {
function getBikerDetails() {
function getBikeName() {
return bikeName;
}
return getBikeName();
}
return getBikerDetails();
}
console.log(printBikeDetails()); // Jarvis內(nèi)部函數(shù) getBikeName 可以訪問 getBikerDetails 的詞法環(huán)境，就像 getBikerDetails 可以訪問 printBikerDetails 的詞法環(huán)境一樣，其中 printBikerDetails 可以訪問全局范圍。
通過使用作用域鏈和詞法環(huán)境，當(dāng)本地作用域中不可用時(shí)，我們可以從父作用域訪問變量。
關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！
年快樂，開工大吉。今天帶大家了解一個(gè)實(shí)用的CSS新特性：@scope規(guī)則。在Sass或Less這類CSS預(yù)編譯工具中嵌套語法較為常見，就像這樣，可以一定程度上簡(jiǎn)化CSS代碼的書寫，讓層次結(jié)構(gòu)更清晰。
@scope規(guī)則的作用與之類似，例如將剛才的Sass嵌套改為@scope規(guī)則書寫，就會(huì)是這樣，可以看到樣式按照正確的預(yù)期渲染了，這里的背景色成功渲染了。
@scope規(guī)則不會(huì)改變CSS選擇器的優(yōu)先級(jí)，例如這里的@scope(nav)的優(yōu)先級(jí)等同于nav，右邊的案例可以證明這一點(diǎn)。如果@scope(nav)不參與優(yōu)先級(jí)計(jì)算，遵循后來居上的原則，上面這個(gè)鏈接的背景色應(yīng)該是淺粉色，但事實(shí)沒有，說明@scope(nav)參與了優(yōu)先級(jí)計(jì)算。
any-link是偽類選擇器，優(yōu)先級(jí)大于任意的標(biāo)簽選擇器，因此下面的鏈接的背景色是淺粉色。規(guī)范還提供了名為：scope的偽類，可以選擇規(guī)則自身的匹配，例如這里可以設(shè)置nav元素自身紅色邊框。
@scope規(guī)則還提供了排除語法，例如此例，通過to語法的設(shè)置讓p元素的子元素不參與nav匹配，因此p元素下的a元素就沒有背景色設(shè)置。
最后@scope規(guī)則還支持復(fù)雜選擇器，就像這樣的語法也是合法的。
以上就是本次分享的全部?jī)?nèi)容，如果你有任何疑問可以通過評(píng)論的方式進(jìn)行反饋，我會(huì)一一解答，我們下個(gè)視頻再見。
端工程師最常見且最具挑戰(zhàn)性的問題之一是 CSS 命名約定。隨著 Block Element Modifier（BEM）方法的流行，許多人習(xí)慣于按照一種可維護(hù)的模式組織他們的樣式。
即將在 Chrome 瀏覽器中實(shí)施的 @scope 允許在樣式表中對(duì)樣式進(jìn)行塊級(jí)作用域劃分，從而進(jìn)一步提高了 BEM 的性能。這將使樣式表更易于維護(hù)，同時(shí)對(duì) CSS 級(jí)聯(lián)進(jìn)行更嚴(yán)格的控制。
在這篇文章中，我們將展示如何在 Chrome 中使用 @scope 特性，以及如何使用它來替換前端項(xiàng)目中的 BEM。我們通過幾個(gè)例子進(jìn)行講解，你可以在 GitHub 上的示例項(xiàng)目中查看并跟隨操作。
在即將發(fā)布的 Chrome 118 版本中，@scope 特性創(chuàng)建了 CSS 樣式的塊級(jí)作用域。這給了開發(fā)者對(duì) CSS 樣式更多的控制權(quán)，因?yàn)槲覀儸F(xiàn)在可以在 CSS 文件中直接為視圖的不同部分明確定義作用域。
請(qǐng)看下面的 HTML 示例：
<main className="sample-page">
<h1>With Scope</h1>
<section className="first-section">
<p>some text</p>
<p>
some text and then a <a href="/">back link</a>
</p>
</section>
<section className="second-section">
<h2>Dog Picture</h2>
<div>
<p>second section paragraph text</p>
</div>
<img src={'./DOG_1.jpg'} alt="dog" />
</section>
</main>
在此 HTML 中，我們可以使用以下方法對(duì) second-section 樣式區(qū)域內(nèi)的元素進(jìn)行樣式設(shè)置：
.second-section {
display: flex;
flex-direction: column;
border: solid;
padding: 40px;
margin: 20px;
}
@scope (.second-section) {
h2 {
text-align: center;
}
img {
max-width: 400px;
max-height: 100%;
}
div {
display: flex;
justify-content: center;
margin: 20px;
}
p {
max-width: 200px;
text-align: center;
background-color: pink;
color: forestgreen;
padding: 10px;
border-radius: 20px;
font-size: 24px;
}
}
使用 @scope 時(shí)，還可以創(chuàng)建一個(gè) "甜甜圈 "作用域，為一組樣式及其中的元素定義起始和結(jié)束部分。使用上述相同的 HTML，甜甜圈作用域可以定義從 sample-page 的起始區(qū)域到 second-section 樣式區(qū)域的樣式：
/* donut scope */
@scope (.sample-page) to (.second-section) {
p {
font-size: 24px;
background-color: forestgreen;
color: pink;
text-align: center;
padding: 10px;
}
a {
color: red;
font-size: 28px;
text-transform: uppercase;
}
}
最棒的是，它的功能與使用 BEM 造型非常相似，但代碼量更少。
截至2023年10月2日，CSS @scope 還未正式發(fā)布，因此需要開啟實(shí)驗(yàn)性網(wǎng)絡(luò)功能標(biāo)志來使用它。要做到這一點(diǎn)，首先在 Chrome 中打開一個(gè)標(biāo)簽頁，前往 chrome://flags/，然后搜索并啟用“實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能”標(biāo)志：
BEM 是一種在HTML視圖中分組樣式的方式，可以輕松地進(jìn)行導(dǎo)航。
考慮到一個(gè)大型 HTML 頁面有許多具有不同樣式的元素。在設(shè)置了幾個(gè)初始樣式名稱后，隨著頁面的擴(kuò)展，要保持樣式就會(huì)變得很困難。BEM 試圖通過圍繞實(shí)際樣式來構(gòu)建樣式名來緩解這一問題。
block 是一個(gè)包含 HTML 元素?？紤]一下類似這樣的 HTML
<main className="sample-page">
<h1 className="sample-page__title">With BEM</h1>
<section className="sample-page__first-section">
<p className="sample-page__first-section--first_line">
some text
</p>
<p className="sample-page__first-section--second-line">
some text and then a{' '}
<a
className="sample-page__first-section--second-line-link"
href="/"
>
back link
</a>
</p>
</section>
</main>
在此 HTML 中
修改器 = 當(dāng)在 <section> 元素中為 <p> 元素設(shè)計(jì)樣式時(shí)，樣式名稱會(huì)多出一個(gè) --first-line ，從而創(chuàng)建 sample-page__first-section--first-line ，所以：
BEM 的擴(kuò)展性很好，尤其是在使用 SASS 將樣式分組并使用 & 操作符創(chuàng)建類似內(nèi)容時(shí)：
.sample-page {
display: flex;
flex-direction: column;
margin-top: 10px;
&__title {
font-size: 48px;
color: forestgreen;
}
&__first-section {
font-size: 24px;
border: solid;
padding: 40px;
margin: 20px;
&--first-line{
font-size: 24px;
background-color: forestgreen;
color: pink;
text-align: center;
padding: 10px;
}
}
}
難點(diǎn)在于，在一個(gè)大型項(xiàng)目中，這會(huì)產(chǎn)生非常大的 CSS 或 SASS 文件，而這些文件仍然很難進(jìn)行大規(guī)模管理。可以使用 @scope 替換 BEM 樣式，使樣式定義更小、更易于管理。
展示使用 @scope 的優(yōu)勢(shì)的最佳方式是在使用 React 等主流框架或庫的應(yīng)用程序中使用 @scope。在 GitHub 上的示例應(yīng)用程序中， react-example 文件夾中有一個(gè)項(xiàng)目，其中的頁面首先使用 BEM 進(jìn)行了樣式設(shè)計(jì)，然后使用 @scope 進(jìn)行了重構(gòu)。
可以運(yùn)行應(yīng)用程序并單擊 WithBEM 或 WithScope 按鈕來查看具體實(shí)現(xiàn)。組件和樣式表都有相應(yīng)的名稱，前綴為 WithBEM 或 WithScope ，分別位于 pages 和 styles 文件夾中。
從 BEM 樣式組件 WithBEMPage.tsx 開始，我們首先看到了用 BEM 方法設(shè)計(jì)的 HTML 樣式：
<main className="sample-page">
<h1 className="sample-page__title">With BEM</h1>
<section className="sample-page__first-section">
<p className="sample-page__first-section--first_line">
some text
</p>
<p className="sample-page__first-section--second-line">
some text and then a{' '}
<a
className="sample-page__first-section--second-line-link"
href="/"
>
back link
</a>
</p>
</section>
<section className="sample-page__second-section">
<h2 className="sample-page__second-section--title">
Dog Picture
</h2>
<div className="sample-page__second-section--div">
<p className="sample-page__second-section--div-paragraph">
second section paragraph text
</p>
</div>
<img
className="sample-page__second-section--image"
src={'./DOG_1.jpg'}
alt="dog"
/>
</section>
</main>
在組件 WithScopePage.tsx 中，我們可以通過以下內(nèi)容看到重構(gòu)是多么干凈利落：
<main className="sample-page">
<h1>With Scope</h1>
<section className="first-section">
<p>some text</p>
<p>
some text and then a <a href="/">back link</a>
</p>
</section>
<section className="second-section">
<h2>Dog Picture</h2>
<div>
<p>second section paragraph text</p>
</div>
<img src={'./DOG_1.jpg'} alt="dog" />
</section>
</main>
要將 BEM 重構(gòu)為 @scope ，只需找到樣式組，然后適當(dāng)添加您的作用域樣式。我們先來看看標(biāo)題部分。在原始的 WithBEMPage.tsx 文件中，每個(gè)部分都定義了不同的樣式。而在 @scope 版本中，則為特定元素定義了更簡(jiǎn)潔的樣式：
.sample-page {
display: flex;
flex-direction: column;
margin-top: 10px;
}
/* replaced */
/* .sample-page__title {
font-size: 48px;
color: forestgreen;
} */
/* donut scope */
@scope (.sample-page) to (.first-section) {
h1 {
font-size: 48px;
color: forestgreen;
}
}
同樣，在第一部分內(nèi)容中，原始 BEM 風(fēng)格如下：
.sample-page__first-section {
font-size: 24px;
border: solid;
padding: 40px;
margin: 20px;
}
.sample-page__first-section--first_line {
font-size: 24px;
background-color: forestgreen;
color: pink;
text-align: center;
padding: 10px;
}
.sample-page__first-section--second-line {
font-size: 24px;
background-color: forestgreen;
color: pink;
text-align: center;
padding: 10px;
}
.sample-page__first-section--second-line-link {
color: red;
font-size: 28px;
text-transform: uppercase;
}
用 @scope 重構(gòu)第一部分，我們現(xiàn)在就有了一個(gè)更簡(jiǎn)潔的樣式定義：
.first-section {
font-size: 24px;
border: solid;
padding: 40px;
margin: 20px;
}
/* donut scope */
@scope (.sample-page) to (.second-section) {
p {
font-size: 24px;
background-color: forestgreen;
color: pink;
text-align: center;
padding: 10px;
}
a {
color: red;
font-size: 28px;
text-transform: uppercase;
}
}
這樣做的另一個(gè)好處是，HTML 視圖更小，更容易閱讀?？紤]到之前
<section className="sample-page__first-section">
<p className="sample-page__first-section--first_line">
some text
</p>
<p className="sample-page__first-section--second-line">
some text and then a{' '}
<a
className="sample-page__first-section--second-line-link"
href="/"
>
back link
</a>
</p>
</section>
然后
<section className="first-section">
<p>some text</p>
<p>
some text and then a <a href="/">back link</a>
</p>
</section>
通過這兩個(gè)示例組件，我們可以對(duì)每個(gè)部分進(jìn)行重構(gòu)。最終注意到它是如何使樣式更簡(jiǎn)潔、更易讀的。
除了將 BEM 重構(gòu)為 @scope 的優(yōu)勢(shì)外，使用 @scope 還可以更好地控制 CSS 級(jí)聯(lián)。CSS 級(jí)聯(lián)是一種算法，它定義了網(wǎng)絡(luò)瀏覽器如何處理組成 HTML 頁面上元素的樣式條件。
在處理任何前端項(xiàng)目時(shí)，開發(fā)者可能需要處理由于樣式層疊而產(chǎn)生的奇怪結(jié)果。通過使用@scope，可以通過緊密限定元素范圍來控制層疊的副作用。
文件 no_scope.html 的樣式和一些元素定義如下：
<!DOCTYPE html>
<html>
<head>
<title>Plain HTML</title>
<style>
.light {
background: #ccc;
}
.dark {
background: #333;
}
.light a {
color: red;
}
.dark a {
color: yellow;
}
div {
padding: 2rem;
}
div > div {
margin: 0 0 0 2rem;
}
p {
margin: 0 0 2rem 0;
}
</style>
</head>
<body>
<div class="light">
<p><a href="#">First Level</a></p>
<div class="dark">
<p><a href="#">Second Level</a></p>
<div class="light">
<p><a href="#">Third Level</a></p>
</div>
</div>
</div>
</body>
</html>
結(jié)果如下:
這里的問題是，根據(jù)已定義的 CSS， Third Level 應(yīng)為紅色文本，而不是黃色。這是 CSS 級(jí)聯(lián)的副作用，因?yàn)轫撁鏄邮绞歉鶕?jù)外觀順序來解釋的，因此 Third Level 被認(rèn)為是黃色而不是紅色。通過 Bram.us 原文中的圖表，我們可以看到 CSS 級(jí)聯(lián)評(píng)估選擇器和樣式的順序：
如果不使用 @scope ，CSS 級(jí)聯(lián)將直接從 "特定性 "轉(zhuǎn)為 "外觀順序"。使用 @scope 后，CSS 級(jí)聯(lián)將首先考慮 @scope 元素。您可以通過在示例中為 .light 和 .dark 樣式添加 @scope 來了解其效果。
首先，將原始 HTML 和 CSS 修改如下：
<!DOCTYPE html>
<html>
<head>
<title>Plain HTML</title>
<style>
.light {
background: #ccc;
}
.dark {
background: #333;
}
div {
padding: 2rem;
}
div > div {
margin: 0 0 0 2rem;
}
p {
margin: 0 0 2rem 0;
}
@scope (.light) {
:scope {
background: white;
}
a {
color: red;
}
}
@scope (.dark) {
:scope {
background: black;
}
a {
color: yellow;
}
}
</style>
</head>
<body>
<div class="light">
<p><a href="#">First Level</a></p>
<div class="dark">
<p><a href="#">Second Level</a></p>
<div class="light">
<p><a href="#">Third Level</a></p>
</div>
</div>
</div>
</body>
</html>
輸出結(jié)果如下
在本文中，我們探討了將 BEM 風(fēng)格應(yīng)用程序重構(gòu)為使用 Chrome 瀏覽器中新推出的 @scope 功能的方法。我們介紹了 @scope 的工作原理，然后將一個(gè)簡(jiǎn)單的頁面從 BEM 重構(gòu)為 @scope 。
新的 @scope 功能有可能成為前端開發(fā)人員的一大優(yōu)勢(shì)。不過，其他瀏覽器也必須實(shí)現(xiàn)支持，這可能需要時(shí)間。在此之前，這絕對(duì)是一個(gè)有趣的功能，對(duì)前端項(xiàng)目的樣式設(shè)計(jì)可能會(huì)有很大幫助。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
