小猿圈web前端自學之css基礎入門之權重

EB前端現在是時下較火的編程語言之一，特別是對于自學來說連css的一些權重都不是很了解，針對這種情況小猿圈web前端講師就講講css基礎入門之權重，希望對你的前端學習有一定的幫助。

一、css權重是什么?

css權重指的是css6大基礎選擇符的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高說明權重越高，反之亦然。

css6大基礎選擇器：

a)、id選擇器(#box{})

b)、類選擇器(.box{})

c)、屬性選擇器(a[href=http://www.xxx.com])

d)、偽類和偽對象選擇器(:hoevr{}和::after{})

e)、標簽類型選擇器(div{})

f)、通配符選擇器(*{})

優先級順序從大到小：

內聯樣式 > ID 選擇器 > 類選擇器=屬性選擇器=偽類選擇器 > 元素(類型)選擇器=偽元素選擇器

二、css權重計算規則

計算css權重是有一定規則的，根據w3c制定的css規范，css權重計算規則如下：

a)、計算選擇符中的id選擇器的數量一個id選擇器為一個a，一個a為100

b)、計算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數量一個類選擇器、屬性選擇器以及偽類選擇器為一個b，一個b為10

c)、計算標簽類型選擇器和偽對象選擇器的數量一個標簽類型選擇器、偽對象選擇器為一個c，一個c為1

d)、忽略通配符選擇器通配符選擇器忽略不計

如圖是一個css選擇器權重的例子：

如果兩個選擇符的權重相同，則可依照”就進原則”來判斷，最后定義的選擇符會被采用。但盡量避免出現這種依靠定義的順序決定選擇符優先級的情況，因為在后續的維護中很難保證定義的順序不會被打亂。

小猿圈web前端講師認為：授之以魚更授之以漁，想要學好web前端首先需要就是端正自己的學習態度，明確學習目標，這樣才能堅持學習。想要了解更多關于前端方面的小伙伴，可以關注小猿圈每天的動態，會不定期更新互聯網編程知識，希望對你的學習有一定的幫助。

文由ScriptEcho平臺提供技術支持

項目地址：傳送門

Vue 中使用 inMap 創建動態遮罩覆蓋物

應用場景

在基于 Vue 構建的地理信息系統應用中，經常需要在底圖上繪制動態的遮罩覆蓋物，以突出顯示特定區域或隱藏敏感信息。

基本功能

這段代碼利用 inMap 庫在 Vue 組件中創建了一個可自定義樣式的遮罩覆蓋物。該覆蓋物可根據提供的數據動態更新，并提供豐富的事件處理功能。

功能實現步驟及關鍵代碼分析

1. 加載必要的 JavaScript 庫

const loadJavascript=(jsUrl)=> {
  return new Promise((resolve, reject)=> {
    // ...
  })
}

onMounted(async ()=> {
let jsUrls=[
// ...
]
await Promise.all(jsUrls.map((js)=> loadJavascript(js)))
})

首先，需要加載 inMap 庫和相關的依賴庫。loadJavascript 函數使用 Promise 來異步加載 JavaScript 腳本，并提供回調函數來處理加載完成或失敗的情況。

2. 初始化 inMap 地圖

var inmap=new inMap.Map({
  id: 'allmap',
  // ...
})

創建 inMap 地圖實例，并指定容器 ID 和其他配置選項，如中心點和縮放級別。

3. 創建遮罩覆蓋物

var overlay=new inMap.MaskOverlay({
  style: {
    // ...
  },
  data: [],
  event: {
    // ...
  },
})

使用 MaskOverlay 構造函數創建一個遮罩覆蓋物實例。style 屬性用于設置覆蓋物的樣式，包括背景色、邊框色、陰影顏色等。data 屬性用于指定覆蓋物的數據，可以是地理JSON 數據或自定義數據結構。event 屬性用于注冊事件處理函數。

4. 添加覆蓋物到地圖

inmap.add(overlay)

將遮罩覆蓋物添加到地圖實例中，使其在底圖上顯示。

5. 監聽覆蓋物事件

overlay.on('init', function () {
  // ...
})
overlay.on('setData', function () {
  // ...
})

注冊事件處理函數以響應覆蓋物的初始化和數據更新事件。這些事件處理函數可以執行自定義邏輯，如更新覆蓋物樣式或響應用戶交互。

總結與展望

通過這段代碼，我們實現了在 Vue 組件中創建和管理動態遮罩覆蓋物的功能。它提供了豐富的自定義選項和事件處理能力，使開發者能夠靈活地創建復雜的地圖可視化效果。

未來，該功能可以進一步拓展，例如：

支持多邊形、圓形等更多形狀的遮罩覆蓋物；
提供更精細的樣式控制，如漸變色、紋理填充等；
與其他地圖控件集成，如圖例、縮放控件等。
更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

unxiao Zou ,Chunrong Fang ,Zhenyu Chen ,Xiaofang Zhang,Zhihong Zhao

南京大學軟件新技術國家重點實驗室，南京，中國

蘇州大學計算機科學與技術學院，蘇州，中國

電子郵件：zychen@software.nju.edu.cn

摘要

測試準則是軟件測試的一個基本課題，其對于評估和驅動測試方法非常重要。代碼覆蓋由于其易實現性和有效性在軟件測試中得到了廣泛的應用。動態 web 技術已經被用來提高應用程序的可用性及其用戶體驗。然而，它帶來了一些新的測試挑戰，因為動態 web 應用程序在客戶端和服務器端之間有更多的迭代，所以代碼覆蓋就很難捕獲這些復雜的迭代來進行充分的測試。

本文提出了一種新的覆蓋準則--hybrid 覆蓋。這是一種混合覆蓋準則，它結合了語句覆蓋和 HTML 元素覆蓋，并同時覆蓋了客戶端和服務器端的特性。

1. 引言

Web 應用程序已經成為應用最廣泛的軟件類型之一。AJAX（異步 JavaScript 和 XML 格式）作為 web2.0 核心的一項新技術，它極大地改變了 web 應用程序的開發方式。

測試是保證軟件質量的主要手段。對于不同的應用程序（包括 web 應用程序），有許多現有的測試方法。為了評估和驅動測試方法，我們引入了一些覆蓋標準來計算測試集使用的程序元素的百分比。

語句覆蓋（Statement coverage）是一種代碼覆蓋，由于其易于實現性及其以較小的開銷執行被測程序的特性而得到廣泛應用，但是語句覆蓋不足以支持 web2.0 的 web 應用程序的豐富功能。

元素覆蓋（Element coverage），對于 web 應用程序來說，標準的 HTML 元素是顯示內容和接收用戶輸入事件的基本單元。然而，僅僅基于 HTML 元素的覆蓋標準有其自身的不足。

在本文中，我們提出了一種新的動態 web 應用程序的混合覆蓋。它結合語句覆蓋和元素覆蓋來表示測試集的服務器端和客戶端覆蓋條件，以此來驗證 web 應用程序是否得到了充分的測試。web 爬蟲將創建 UI（user interface）結構，收集測試集執行的 HTML 元素和代碼點，并將其用于計算混合覆蓋率。

2. 混合覆蓋準則

(1) HTML 元素

HTML 元素是 HTML 文檔的單個組件，而 HTML 文檔是 web 應用程序前端內容的基本塊。每個元素都可以有特定的屬性和內容。HTML 元素有三種：Void 元素、原始文本元素和普通元素。

?Void 元素只有一個包含任何屬性的開始標記。

?原始文本元素由以下內容構成：標記元素開頭的開始標記、一些文本內容、一種結束標記。

?普通元素通常同時具有開始標記和結束標記以及其內容。內容可以是嵌套元素，也可以是元素和文本內容的組合。

(2) 元素覆蓋

本文將 web 應用的 UI 模型定義如下：

定義 1（web 前端狀態圖）：動態 web 應用程序 A 的 web 前端狀態圖 G 是一個三元組<i、V、E>，其中：

?i 是加載完成后的初始狀態（通常是 web 應用的索引項）

?V 是一組狀態，表示 web 應用程序 a 運行時的 DOM tree 條件。

?E?V×V 是兩個頂點之間的一組有向邊。每個邊（v1，v2）只有在當且僅當通過在狀態 v1 下對 HTML 元素執行事件可以從 v1 到達 v2 時的條件成立時才都存在。

在我們的方法中，集合是從 web UI 模型獲得的。它的定義如下：

?元素集 E 是一組 HTML 元素。

?每個元素 e∈E 在以下條件成立時存在，當且僅當 G 至少存在一個狀態 v∈V 時，v 的 DOM tree 結構包含 e。

定義 2（元素覆蓋）：測試用例集 T 在這樣的條件下滿足元素覆蓋準則

?當且僅當對于每個元素 e∈E，至少有一個測試用例 t∈T 使得 e 被 t 訪問，其中 e 表示被測試的應用程序的元素集。

在定義中，元素被測試用例訪問意味著該元素在測試用例執行期間在瀏覽器上顯示或接收事件。

(3) 混合覆蓋

混合覆蓋的關鍵思想是結合 web 應用程序運行時的客戶端和服務器端功能。服務器端特性可以表示為服務器腳本的代碼執行條件。而客戶端特性則處于 JavaScript 執行和 DOM tree 條件的混合狀態。DOM tree 條件可以由元素表示，JavaScript 執行通常由元素事件觸發。服務器端和客戶端的交互也可以用訪問的元素來表示。

基于語句覆蓋和元素覆蓋，混合覆蓋可以定義如下：

定義 3（混合覆蓋）：一組測試用例在這樣的條件下滿足混合覆蓋準則，當且僅當對于每個元素 e∈E，至少有一個測試用例 t∈T 使得 e 被 t 訪問，對于每個語句 s∈S，至少有一個測試用例 t∈T 使得 s 被 t 執行，其中 E 表示元素集，S 表示被測應用程序的語句集。

定義中的狀態集包含被測應用程序的服務器端腳本的所有語句。

3. 方法

我們實現了一個框架來獲取測試用例的元素覆蓋率。并使用 Crawljax 作為被測 web 應用程序的模型生成工具，因為據我們所知，它是目前唯一支持基于 AJAX 的 web 站點的可用工具。

在上一步得到了 web 前端模型之后，該框架使用 web UI 模型和在自動化測試運行環境中收集的測試數據來計算測試套件的覆蓋率。為了收集測試數據，框架在 web 應用程序的測試套件中運行測試用例，并在執行測試用例中的每個測試命令后從瀏覽器的 DOM tree 中收集數據。

在之前收集的數據用于識別 web UI 模型中訪問的 HTML 元素并計算元素覆蓋率。對于語句覆蓋，我們使用了用于 PHP 和 phpunit3 的 Xdebug2 擴展的組合。工具鏈可以生成包含語句覆蓋信息的測試報告。混合覆蓋率可以很容易地用元素覆蓋率和語句覆蓋率信息來計算。

4. 實驗

實驗的目的是從測試池中選取一部分具有較高故障檢測能力的測試用例。測試用例優先排序的選擇策略通常基于覆蓋率指標。因此，我們通過比較通過基于不同的覆蓋的策略來選擇的測試用例集的故障檢測能力來評估不同覆蓋準則的有用性。

(1) 實驗項目

我們選擇了兩個 PHP web 應用程序 schoolmate4 和 timeclock 5 作為我們的項目程序，表 1 顯示了這些主題的一些信息。

表1.試驗項目

我們招募了一個由高年級本科生和研究生組成的團隊來為學科項目創建測試用例。

(2) 實驗過程

我們首先初始化測試池。所選測試用例的初始集為空，并且在該過程的每一輪中從測試工具中選擇 0 或 1 個測試用例。對于每個選擇，該過程遍歷測試工具中未選擇的測試用例并計算適應度值作為每個候選測試用例的選擇度量。選擇適應度值最大的候選測試用例。如果存在多個具有相同最大適應度值的合格候選測試，則從中隨機抽取一個測試用例。如果選定測試的覆蓋率達到最大覆蓋率（即測試池的覆蓋率），則清除覆蓋數據并繼續該過程。如果滿足結束條件，程序將結束。

我們設置了一個所選測試用例的最大數量。如果選擇了足夠的測試用例，或者檢測到了所有的 bug，那么該過程將結束。實驗過程如圖 1 所示。

圖1.實驗程序

(3) 選擇策略

我們實驗的關鍵是適應度函數。適應度函數是基于覆蓋的。同時還考慮了測試用例的執行成本。候選測試用例對所選測試用例集的覆蓋貢獻可以通過附加覆蓋集（ACS）來度量，它包含在候選測試用例 t 的覆蓋集（CS（t））中的覆蓋點，而不是在所選測試用例集 t 的覆蓋信息（CS（Cover Info（T））的覆蓋集中的覆蓋點。附加覆蓋集可以通過公式 ACS（t，Cover Info（T））=CS（t）? CS（Cover Info（T））。因為覆蓋信息可能在實驗過程中被清除，所以我們用 CS（Cover Info（T））代替 CS（T）。測試用例的執行成本由初始化測試用例的成本加上在測試用例中執行測試命令的成本來衡量，一般適應度公式定義如下：

Fitness(t, T)=

(4) 結果分析

一個有效的策略可以用少量的測試用例來檢測大量的故障。我們用每個試驗項目和選擇策略組合而成的錯誤檢測率來衡量這個特征。圖 2 和圖 3 顯示了三種策略在兩個試驗項目（同學和時鐘）上的錯誤檢測率。

圖2.同學的故障檢出率

圖3.時鐘的故障檢測率

從圖中可以看出，基于混合覆蓋的策略比基于語句覆蓋和基于元素覆蓋的策略能夠檢測到更多的 bug。

(5) 有效性威脅

外部威脅：我們試驗項目的數量。

內部威脅：我們為元素覆蓋率計算創建的 web UI 模型的不完整性。

5. 結論

本文提出了一種新的 web 應用測試覆蓋準則。元素覆蓋用于度量測試用例訪問的 HTML 元素集。基于這種元素覆蓋和傳統的語句覆蓋，我們提出了一種混合覆蓋來覆蓋客戶端和服務器端的特性。實驗還評估了混合覆蓋準則的有效性。

在線咨詢

上一篇：6 款好用到爆的 JSON 處理工具，極大提高效率
下一篇：在 Linux 上配置 mongodb

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商