了解JavaScript字符串的toLocaleUpperCase()方法 返回原字符串的大写转换后的新字符串，根据地区大小写映射规则。 第一个参数表示地区，但是它是可选的（如果省略，将使用当前地区）： 'Testing'.toLocaleUpperCase() //'TESTING' 'Testing'.toLocaleUpperCase('it') //'TESTING' 'Testing'.toLocaleUpperCase('tr') //'TESTİNG' 与toUpperCase()方法类似，只是不考虑地区大小写。
了解 JavaScript 字串的 trim() 方法 從原始字串的開頭和結尾中移除空格並回傳新的字串 'Testing'.trim() //'Testing' ' Testing'.trim() //'Testing' ' Testing '.trim() //'Testing' 'Testing '.trim() //'Testing'
了解 JavaScript 字符串的 valueOf() 方法 返回当前 String 对象的字符串表示： const str = new String('Test') str.valueOf() //'Test' 同 toString()。
了解 JavaScript 字串的 trimStart() 方法 從原始字串的開頭移除空白並回傳新的字串 'Testing'.trimStart() //'Testing' ' Testing'.trimStart() //'Testing' ' Testing '.trimStart() //'Testing ' 'Testing '.trimStart() //'Testing'
了解JavaScript字符串的normalize()方法。 Unicode有四种主要的标准化形式：NFC、NFD、NFKC、NFKD。维基百科对此有很好的解释。 normalize()方法根据您指定的形式对字符串进行标准化，并将其作为参数传递给该方法（如果未设置参数，则默认为NFC）。 我将重用MDN的示例，因为我确信这是一个有效的用法，但我找不到其他示例： '\u1E9B\u0323'.normalize() //ẛ̣ '\u1E9B\u0323'.normalize('NFD') //ẛ̣ '\u1E9B\u0323'.normalize('NFKD') //ṩ '\u1E9B\u0323'.normalize('NFKC') //ṩ
Styled Components是在現代JavaScript中使用CSS的新方法之一。它被認為是CSS模組化的接班人，是一種將CSS寫在單個元件中並且不會泄漏到頁面中其他元素的方式。 簡要歷史 介紹Styled Components 安裝 你的第一個樣式化元件 使用props來自定義元件 擴展現有的樣式化元件 這是常規的CSS 使用供應商前綴 結論 簡要歷史 從前，網站非常簡單且沒有CSS存在。我們使用表格和框架來佈局網頁。這真是美好的時光。 然後CSS誕生了，過了一段時間後，人們開始意識到框架可以很好地幫助佈局和設計網頁，其中Bootstrap和Foundation在其中扮演了重要的角色。 預處理器（如SASS）在減慢框架的採用和更好地組織代碼方面起到了很大的幫助，特別是在團隊中，像BEM和SMACSS等約定也逐漸被廣泛使用。 然而約定並不是萬能的解決方案，而且很難記住，所以在過去幾年中，隨著每個前端項目都普遍採用JavaScript和構建流程，CSS也進入了JavaScript的領域（CSS-in-JS）。 新的工具不斷探索CSS-in-JS的新方法，其中一些工具變得非常受歡迎，比如： React Style jsxstyle Radium 等等。 介紹Styled Components 這些工具中最受歡迎的之一就是Styled Components。 它意圖成為CSS模組的後繼者，是一種在單個元件中撰寫僅適用於該元件的CSS而不會泄漏到頁面中其他元素的方式。 更多關於CSS模組的資訊，請參考這裡和這裡。 安裝 使用npm或yarn安裝styled-components： npm install styled-components yarn add styled-components 只要進行了安裝，你只需要添加這個import語句： import styled from 'styled-components' 你的第一個樣式化元件 在導入styled物件後，你就可以開始創建樣式化元件。這是你的第一個樣式化元件： const Button = styled.button` font-size: 1.5em; background-color: black; color: white; ` 現在Button是一個React元件了。 我們使用了styled物件的一個函數來創建這個元件，並且在模板字面量中傳遞了一些CSS屬性。 現在，你可以在容器中使用正常的React語法渲染這個元件： render(<Button />) Styled Components還提供了其他一些函數，你可以使用這些函數創建其他元件，不僅僅是button，還有section、h1、input等等。 這種語法，用反引號，可能一開始看起來有點奇怪，但這是一種標記模板，它是一種將參數傳遞給函數的方式，並且是標準的JavaScript語法。 使用props來自定義元件 當你將一些props傳遞給樣式化元件時，它將將它們傳遞給DOM節點。例如，這是如何為一個input元件傳遞placeholder和type props： const Input = styled.input` //....
如何開始使用 Svelte 自從我開始使用 Hugo 作為靜態網站生成器創建網站以來，我喜歡這種在網絡上發布的方式，相對於使用動態生成頁面的 CMS，這是我過去習慣的方式。 Svelte 是一個 JavaScript 框架，它給我一種相同的感覺。與 React、Vue、Angular 和其他框架相比，使用 Svelte 構建的應用是事先編譯的，您的網站訪問者不需要網絡中的框架和庫代碼，結果是體驗更順暢，消耗帶寬更少，一切都感覺更快和更輕量級。 就像 Hugo 一樣，在部署時，Svelte 消失了，你只得到純 JavaScript。 但讓我們跳轉到文章的主要內容。如何開始使用 Svelte。 需要安裝 Node.js。如果你還沒有安裝，請參考我的如何安裝 Node.js文章！ 並確保它是最新版本的（如何更新 Node.js）。 Node 安裝了npx命令，這是一種運行 Node 命令的便捷方式。特別是我們將運行以下命令： npx degit sveltejs/template firstapp 這將下載並運行degit 命令，它接下來會下載位於https://github.com/sveltejs/template的 Svelte 項目模板的最新代碼到firstapp文件夾中。 現在進入 firstapp 文件夾，運行 npm install 下載模板的其他依賴項。在撰寫本文時，這些依賴項如下： "npm-run-all" "rollup" "rollup-plugin-commonjs" "rollup-plugin-livereload" "rollup-plugin-node-resolve" "rollup-plugin-svelte" "rollup-plugin-terser" "svelte" 如您所見，其中包括 Svelte 核心，還有 Rollup（一個替代 Webpack 的工具）及其一些插件。此外還有 npm-run-all，它是一個用於並行或串行運行多個 npm 腳本的 CLI 工具。 現在，我們可以運行開發模式下的 Svelte 網站，運行以下命令： npm run dev 這將在默認情況下在 localhost 的 5000 端口啟動應用程序：...
如何使用 Svelte 的生命周期事件 Svelte 中的每個組件都會觸發幾個生命周期事件，我們可以在其中進行操作，以實現我們想要的功能。 具體而言，我們有 onMount - 在組件渲染後觸發 onDestroy - 在組件被銷毀後觸發 beforeUpdate - 在 DOM 更新之前觸發 afterUpdate - 在 DOM 更新後觸發 我們可以通過 Svelte 觸發這些事件時安排執行特定的函數。 默認情況下，我們無法直接訪問這些方法，但是我們可以從 svelte 包中導入它們： <script> import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte' </script> onMount 的常見用法是從其他源獲取數據。 以下是使用 onMount 的示例： <script> import { onMount } from 'svelte' onMount(async () => { // 在組件渲染後執行某些操作 }) </script> onDestroy 允許我們清理數據或停止在組件初始化時開始的任何操作，比如使用 setInterval 設置的計時器或定期執行的函數。 需要注意的是，如果我們從 onMount 返回一個函數，那麼它的功能與 onDestroy 相同 - 當組件被銷毀時運行該函數：...
如何使用 Svelte 中的插槽來定義可組合的組件 插槽是一種方便的方式，讓你能夠定義可以組合在一起的組件。 根據你的觀點，插槽也是一種方便的方式，用於配置正在匯入的組件。 以下是它們的工作原理。 在組件中，你可以使用 <slot /> 或 <slot></slot> 語法來定義插槽。 這是一個簡單將 <button> HTML 標籤輸出的 Button.svelte 組件： <button><slot /></button> 對於 React 開發者來說，這基本上與 <button>{props.children}</button> 相同。 任何匯入它的組件都可以定義要放入插槽中的內容，只需將其添加到組件的開始和結束標籤中： <script> import Button from './Button.svelte' </script> <Button>將此插入插槽中</Button> 你可以定義一個預設的內容，如果插槽未被填充，將會使用它： <button> <slot> 按鈕的默認文字 </slot> </button> 在一個組件中你可以有多個插槽，你可以使用命名插槽來區分它們。未命名的單個插槽將是默認插槽： <slot name="before" /> <button> <slot /> </button> <slot name="after" /> 以下是如何使用的方式： <script> import Button from './Button.svelte' </script> <Button> 將此插入插槽中 <p slot="before">在前面添加這個</p> <p slot="after">在後面添加這個</p> </Button> 它將會渲染如下的 DOM 內容： <p slot="before">在前面添加這個</p> <button> 將此插入插槽中 </button> <p slot="after">在後面添加這個</p>
如何在 Svelte 中使用綁定 使用 Svelte，您可以在數據和 UI 之間創建雙向綁定。 許多其他 Web 框架可以提供雙向綁定，這是一種非常常見的模式。 在表單中特別有用。 bind:value 讓我們從您通常會使用的最常見的綁定方式開始，您可以使用 bind:value 來應用它。您從組件狀態中獲取一個變量，並將它綁定到表單字段上： <script> let name = '' </script> <input bind:value={name}> 現在，如果 name 變量發生變化，輸入字段將更新其值。反之亦然：如果用戶更新表單，則 name 變量的值也會更改。 請注意，該變量必須使用 let/var 關鍵字定義，而不能使用 const，否則它無法被 Svelte 更新，因為 const 定義了一個值無法重新分配的變量。 bind:value 可以用於所有類型的輸入字段（type="number"，type="email" 等），但它也適用於其他類型的字段，比如 textarea 和 select（稍後會詳細介紹 select）。 複選框和單選按鈕 複選框和單選按鈕（input 元素的 type="checkbox" 或 type="radio"）允許以下 3 種綁定方式： bind:checked bind:group bind:indeterminate bind:checked 允許我們將一個值綁定到元素的選中狀態： <script> let isChecked </script> <input type=checkbox bind:checked={isChecked}> bind:group 對複選框和單選按鈕很有用，因為這些按鈕通常以組的形式使用。使用 bind:group，您可以將一個 JavaScript 數組關聯到一組複選框上，並根據用戶的選擇自動填充它。 以下是一個示例。goodDogs 數組根據我勾選的複選框填充：...