JAVASCRIPT的5個未充分利用的功能

們展示了如何使用 JavaScript 來創建可重復使用的代碼、解決日期管理問題、鏈接函數、檢測惡意網站等。

譯自 Top 5 Underutilized JavaScript Features，作者 Alexander T Williams。

JavaScript 是一種必不可少的編程語言，但其功能常常未得到充分探索。JS 擁有廣泛的功能，可應用于無數的用例，幫助開發人員創建高效、可重用且可適應的代碼。

在本文中，我們將探討五大未充分利用的 JavaScript 功能及其用例。我們還將提供代碼示例，展示如何使用 JS 來完成幾乎所有事情，從解決日期管理問題到鏈接函數，甚至檢測惡意網站。

1. JavaScript 鉤子用于檢測惡意網站

一個巧妙的 JS 功能是使用鉤子作為一種有效的方法，判斷網站是否為假，而無需任何特定的 OpSec 或網絡安全知識。

鉤子是 JS 函數，允許開發人員“鉤入”流行的 UI 開發庫 React 中的狀態和生命周期功能。這意味著開發人員可以使用 React，而無需編寫單獨的類。

在以下示例中，我們將重點關注使用靜態和動態組件構建的網頁。靜態組件始終作為 HTML 源代碼的一部分聲明，并由瀏覽器或其已安裝的插件呈現。同時，動態組件包括 JS 等腳本，這些腳本通過添加、更改或刪除某些元素來修改 HTML 文檔，以及利用 XMLHttpRequest 和類似對象進行服務器交互。

工作原理

破解工具包（網絡犯罪分子使用的工具包）和惡意網站或 Web 應用程序通常依賴混淆來繞過基于簽名的保護方法。JS 可用于對網站進行混淆處理，修改代碼及其元素，以便瀏覽器可以讀取和處理。

破解工具包通常包含非常大的代碼塊，以隱藏利用并混淆 Web 瀏覽器。一旦被 JS 解碼，就會添加新的頁面元素，例如新的 DIV 元素、新的 JS 元素和加載利用的新 Java 小程序元素。

這意味著在混淆處理過程中可以將 JS 鉤子應用于腳本函數，如果檢測到任何異常情況（例如添加潛在的惡意 Java 小程序元素），則發出警報。

為此，我們必須首先專注于鉤住添加元素的主要方法：appendChild、replaceChild 和 document.write。第四種方法稍微有挑戰性；因此，應該專注于鉤住特定函數，例如 document.getElementById() 或 document.createElement()。然后可以將對象添加到 MutationObserver 對象，或者我們可以使用 Mutation 事件并監視任何更改。

下面是一個注冊鉤子的函數示例：

function jsh_hook_function(object, property, pre_h_func, post_h_func) {
  const original = object[property];
  object[property] = function(...args) {
    if (pre_h_func) {
      pre_h_func.apply(this, args);
    }
    const result = original.apply(this, args);
    if (post_h_func) {
      post_h_func.apply(this, [args, result]);
    }
    return result;
  };
}

2. 在 Node.js 中生成報告

報告和文檔是健壯網絡安全策略的關鍵要素，但它可能是一個乏味且耗時的過程，尤其是在涉及更敏感信息（例如滲透測試報告、漏洞評估和任何其他與安全相關的信息）時。Jsreport 是一個專門的報告平臺，已在開源 JavaScript 運行時環境 Node.js 中開發。該平臺具有廣泛的用例，包括 HTML 到 PDF 的轉換。

只需使用 Chrome 瀏覽器，您只需安裝 jsreport npm 包并調用單個函數。除了 HTML，該平臺還可以轉換各種媒介，從而可以使用 JS 單獨生成 DOCX 文件為 PDF 甚至整個電子表格，包括公式。這意味著數據可以保存在單個平臺上并轉換為報告，而無需第三方工具——非常適合網絡安全文檔和導出滲透測試報告，以便測試、分析和數據存儲都集中化。

Jsreport 并非 Google Chrome 專用，并且與一系列服務和技術兼容，以打印輸出。這包括 Apache FOP，用于呈現 XML 文件。

工作原理

安裝 jsreport npm 并調用一個函數：

const http = require('http');
const jsreport = require('jsreport');
http.createServer(async (req, res) => {
  try {
    const result = await jsreport.render({
      template: {
        content: '<h1>Hello world</h1>',
        engine: 'handlebars',
        recipe: 'chrome-pdf'
      }
    });
    res.setHeader('Content-Type', 'application/pdf');
    result.stream.pipe(res);
  } catch (e) {
    res.writeHead(500, { 'Content-Type': 'text/plain' });
    res.end(`Error generating PDF: ${e.message}`);
  }
}).listen(1337, '127.0.0.1');

3. 使用生成器控制執行流

生成器是一種可以暫停和恢復的函數類型，它可以幫助開發人員更好地控制執行流。生成器可用于回溯算法、無限序列和異步操作；此外，它們還允許創建自定義迭代模式。

這是一個功能強大且用途廣泛的 JavaScript 特性，但經常被低估，許多軟件開發人員錯失了最大程度控制代碼執行的能力。

工作原理

這是一個簡單的代碼示例：

function* generatorFunction() {
  yield 'Hello';
  yield 'World';
}
const generator = generatorFunction();
console.log(generator.next().value); // 輸出：Hello
console.log(generator.next().value); // 輸出：World

要指定一個生成器函數，首先應使用 function* 語法定義 generatorFunction，然后使用 yield 關鍵字暫停函數執行并返回一個值。接下來，通過調用 generatorFunction 創建生成器對象，然后調用生成器上的 next 方法以恢復執行。返回的對象的 value 屬性還包含已生成的 value。

4. 使用 Temporal 改進日期管理

多年來，許多開發人員抱怨 JavaScript 中的日期管理功能不佳。幸運的是，Temporal 提供了一個本機解決方案，提供了一個標準全局對象來替換 date 對象以解決一系列問題。例如，一個令人困惑的問題是索引不佳，月份從 0 開始，而日期從 1 開始。

Temporal 支持多個時區和非公歷，它是一個開箱即用的解決方案，具有易于使用的 API，可以簡化從字符串中解析日期。Temporal 對象不可變的特性（即無法更改）還意味著日期將不受導致意外修改的錯誤影響。

工作原理

以下是開發人員可以利用的幾種 Temporal 方法：

a) PlainDate() – 創建一個沒有時間的日期。

new Temporal.PlainDate(2024, 7, 26);
Temporal.PlainDate.from('2024-07-26');
// both return a PlainDate object that represents 26th July 2024

b) PlainTime () – 創建一個沒有日期的時間。

new Temporal.PlainTime(20, 24, 0);
Temporal.PlainTime.from('20:24:00');
// both return a PlainTime object of 20:24

c) PlainMonthDay () – 創建一個月份和日期，但不指定年份。對于每年在同一天重復的日期（例如情人節）來說，這是一個有用的函數。

const valentinesDay = Temporal.PlainMonthDay.from({ month: 2, day: 14 });

5. 使用高階函數創建可重用代碼

在 JavaScript 中，函數優先，這允許創建高階函數來建立代碼層次結構。高階函數將一個或多個函數轉換為參數，或者可用于返回另一個函數。這提供了一系列功能，例如組合、currying和函數鏈式調用 - 最終幫助開發者創建簡化、模塊化的代碼，這些代碼可以在其他項目中輕松重用。

工作原理

我們以函數鏈式調用為例。在此示例中，對象是一個計算器，使用函數鏈式調用有很多方法可以改變其內部狀態并無縫返回每個修改后的狀態。

lass屬性 - 定制化網頁設計的強大武器

在HTML中,Class屬性是一個非常強大而又靈活的工具。它可以讓您為網頁中的各種元素賦予獨特的樣式和功能,從而打造出與眾不同的視覺效果和交互體驗。本文將為您解密Class屬性的魔力,教您如何利用它來實現個性化的網頁設計。

1. Class屬性的基本用法

Class屬性允許您為HTML元素指定一個或多個類名。這些類名可以在CSS中定義樣式規則,從而影響元素的外觀。

<div class="header">
  <h1 class="title">歡迎來到我的網站</h1>
  <p class="description">這里是網站的簡介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class屬性的進階用法

除了基本的樣式定制,Class屬性還可以用于更復雜的場景。您可以為同一個元素指定多個類名,實現更細致的樣式控制。

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class屬性與JavaScript的結合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進行聯動,實現各種交互效果。您可以通過JavaScript動態地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個盒子</div>

const box = document.getElementById('box');

box.classList.add('active'); // 添加類名
box.classList.remove('box'); // 刪除類名
box.classList.toggle('hidden'); // 切換類名

4. Class屬性的最佳實踐

在使用Class屬性時,有幾個需要注意的最佳實踐:

類名要具有描述性,方便理解和維護
避免過多的類名,保持CSS規則的簡潔性
利用CSS預處理器如SASS/LESS來管理類名和樣式規則
結合BEM或OOCSS等命名方法論,提高代碼的可讀性和可維護性

總之,HTML Class屬性是一個非常強大的工具,它可以幫助您定制化網頁設計,打造出獨一無二的視覺效果和交互體驗。只要掌握好它的用法,相信您一定能創造出令人驚嘆的網頁作品。

面試官常問的清除浮動和BFC——看完不再擔心面試問題

**前言：**

在Web前端開發中，理解和熟練掌握“清除浮動”與“BFC(Block Formatting Context)”的概念及應用是至關重要的，這兩個知識點不僅關乎頁面布局效果的實現，更是在實際項目開發和面試環節中的高頻考點。本文將深入淺出地解析這兩部分內容，并配以實例代碼演示，讓你在面對任何有關此話題的面試問題時都能游刃有余。

## **一、理解浮動（Float）及其帶來的影響**

**1. 浮動概念：**

CSS浮動是一種布局模式，通過`float`屬性設置元素可以使其脫離正常的文檔流進行左右對齊排列。例如：

```html

<style>

.box {

float: left;

width: 100px;

height: 100px;

background-color: red;

}

</style>

```

在這個例子中，`.box`會向左浮動，不占據原來的位置，形成“浮動布局”。

**2. 浮動帶來的問題：**

然而，浮動會導致父元素高度塌陷（height collapse），即父元素高度不能被其浮動子元素撐開，這可能導致頁面其他元素布局錯亂。

## **二、清除浮動(Clearing Floats)**

**1. 清除浮動的意義：**

清除浮動是為了消除浮動元素對周圍非浮動元素的影響，確保父容器能夠正確包裹所有子元素，防止高度塌陷等問題。

**2. 清除浮動的方法：**

- **傳統方法：**

```html

</div>

<style>

.floated {

float: left;

}

.clear {

clear: both;

}

</style>

```

在這個例子中，我們創建了一個專門用于清除浮動的`.clear`元素，并設置了`clear:both`來清除前面的浮動元素影響。

- **偽元素法：**

```html

<style>

.parent {

/* 使用偽元素清除浮動 */

&:after {

content: "";

display: block;

clear: both;

}

.box {

float: left;

}

</style>

</div>

```

這種方法利用偽元素`::after`在父元素內部生成一個看不見的內容為空的塊級元素，用以清除浮動，無需額外HTML標簽。

- **Flex布局法/GRID布局法：**

現代布局方案如Flexbox和Grid布局天然解決了浮動導致的問題，可以直接替代清除浮動的需求。

## **三、Block Formatting Context（BFC）**

**1. BFC定義：**

BFC是CSS布局中的一種格式化上下文，它規定了塊級盒模型內部如何布局以及與其他元素的關系。

**2. BFC特性：**

- 內部的Box會在垂直方向上一個接一個地放置。

- 垂直邊距會發生重疊。

- 計算BFC的高度時，浮動元素也會參與計算。

- BFC區域不會與float元素重疊。

- 每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。

**3. 創建BFC的方式：**

以下情況會創建一個新的BFC：

- 根元素或其它包含塊。

- `float`不是`none`。

- `position`為`absolute`或`fixed`。

- `display`為`inline-block`、`table-cell`、`table-caption`、`flex`、`grid`等。

- `overflow`值不為`visible`。

**4. BFC在清除浮動的應用：**

通過觸發父元素生成BFC，也可以達到清除浮動的效果，避免高度塌陷：

```html

<style>

.parent {

overflow: auto; /* 觸發BFC */

}

.box {

float: left;

}

</style>

</div>

```

在這段代碼中，給父元素`.parent`設置`overflow:auto`，使得其生成BFC，從而自動計算包含了浮動元素的高度，有效防止了高度塌陷。

總結：深入理解清除浮動和BFC原理并熟練運用，不僅能解決實際開發中的布局難題，更能輕松應對各類面試場景下的相關問題。希望這篇指南能幫助你在Web前端的學習之路上更進一步，從容應對各種挑戰！

在線咨詢

上一篇：CSS樣式浮動
下一篇：使用原生js、css和html實現圖片畫廊組件

您的項目需求

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

整合營銷服務商

JAVASCRIPT的5個未充分利用的功能

1. JavaScript 鉤子用于檢測惡意網站

工作原理

2. 在 Node.js 中生成報告

工作原理

3. 使用生成器控制執行流

工作原理

4. 使用 Temporal 改進日期管理

工作原理

5. 使用高階函數創建可重用代碼

工作原理

lass屬性 - 定制化網頁設計的強大武器

1. Class屬性的基本用法

2. Class屬性的進階用法

3. Class屬性與JavaScript的結合

4. Class屬性的最佳實踐

您的項目需求