如何使用内置的readline Node模块使Node.js CLI程序具有交互性 如何使Node.js CLI程序具有交互性？ Node自版本7开始提供了readline模块，可以实现从可读流（比如process.stdin流，它在Node程序执行期间是终端输入）逐行获取输入。 const readline = require('readline').createInterface({ input: process.stdin, output: process.stdout }) readline.question(`What's your name?`, (name) => { console.log(`Hi ${name}!`) readline.close() }) 这段代码会询问用户名，一旦文本被输入，并且用户按下回车键，我们会发送一条问候语。 question()方法会展示第一个参数（一个问题），并且等待用户输入。一旦按下回车键，它会调用回调函数。 在这个回调函数中，我们关闭了readline接口。 readline还提供了其他几个方法，我会让你自己在我上面提供的包文档中去查阅。 如果你需要输入密码，最好不要将其回显，而是显示为*符号。 最简单的方法是使用readline-sync包，它在API方面与上述方法非常相似，并且直接处理了这个问题。 一个更完整和抽象的解决方案则是由Inquirer.js包提供。 你可以使用npm install inquirer进行安装，然后你可以像这样重现上面的代码： const inquirer = require('inquirer') var questions = [{ type: 'input', name: 'name', message: "What's your name?", }] inquirer.prompt(questions).then(answers => { console.log(`Hi ${answers['name']}!`) }) Inquirer.js可以让你做很多事情，比如提问多个选择、使用单选按钮、确认等等。 值得知道所有的选择，尤其是Node提供的内置选择，但如果你计划将CLI输入推向一个新的层次，Inquirer.js是一个优秀的选择。

正則表達式讓我們可以在字符串中查找符合特定格式的內容。 通過使用特殊的語法來構建正則表達式，您可以： 在字符串中進行搜索 在字符串中替換子字符串 從字符串中提取信息 re模塊是Python標準庫中的一個工具集，用於處理正則表達式。 特別是它提供了以下函數： re.match()：檢查字符串開頭的匹配 re.search()：在字符串中查找匹配項 這兩個函數都接受三個參數：模式、要搜索的字符串和標誌。 在介紹如何使用它們之前，讓我們先介紹一下正則表達式模式的基礎知識。 模式是一個以r''定界符包裝的字符串。在其中，我們可以使用一些特殊的字符組合來捕獲我們想要的值。 例如： . 匹配一個字符（除了換行符） \w 匹配任何字母數字字符（[a-zA-Z0-9_]） \W 匹配任何非字母數字字符 \d 匹配任何數字 \D 匹配任何非數字字符 \s 匹配空白字符 \S 匹配任何非空白字符 方括號中可以包含多個字符匹配：[\d\sa] 匹配數字、空白字符和字符a。[a-z] 匹配從a到z的字符。 \ 可用於轉義，例如要匹配點.，在模式中應使用\.。 | 表示“或”。 然後我們有錨點： ^ 匹配一行的開頭 $ 匹配一行的結尾 然後我們有數量修改符： ? 表示“零個或一個”出現 * 表示“零個或多個”出現 + 表示“一個或多個”出現 {n} 表示“正好出現n次” {n,} 表示“至少出現n次” {n, m} 表示“至少出現n次，最多出現m次” 括號 (<expression>) 創建一個分組。分組很有趣，因為我們可以捕獲分組的內容。 以下這兩個示例匹配整個字符串： re.match('^.*Roger', 'My dog name is Roger') re.match('.*', 'My dog name is Roger') 打印這些語句將得到像這樣的字符串：...

在React組件中，Props是由父組件傳遞給子組件的變量。 而State則是由組件直接初始化和管理的變量。 State可以通過Props進行初始化。 例如，父組件可能通過調用以下代碼來包含子組件： <ChildComponent /> 父組件可以通過以下語法傳遞一個Props： <ChildComponent color="green" /> 在ChildComponent的構造函數中，我們可以訪問這個Props： class ChildComponent extends React.Component { constructor(props) { super(props); console.log(props.color); } } 並且在此類中的任何其他方法都可以使用this.props引用該Props。 Props可以用來根據構造函數中的Props值設置內部State, 如下所示： class ChildComponent extends React.Component { constructor(props) { super(props); this.state = { colorName: props.color }; } } 當然，組件也可以不參考Props來初始化State。 在這種情況下，沒有任何有用的內容，但是根據Props值做一些不同的操作，可能最好設置State值。 在子組件中，Props不應該被更改，因此如果有一個改變某個變量的操作，該變量應該屬於組件的State。 Props還用於允許子組件訪問父組件中定義的方法。這是一種將狀態集中管理在父組件中，避免子組件需要擁有自己狀態的良好方式。 大部分組件只會根據接收到的Props顯示一些信息，並且保持無狀態（stateless）。

我想根据鼠标悬停状态来显示或隐藏一个小面板。 当我悬停在链接上时，面板会显示出来。 然后我可以用鼠标进入这个面板，当我移开鼠标时，面板会隐藏起来。 就像Twitter上的个人资料，在鼠标悬停在一个人的名字上时会显示出来： 对于触发面板显示的<a>元素，我添加了onMouseEnter事件： <a onMouseEnter={() => { setShowCard(true) }} >flavio</a> 所以当我用鼠标悬停在它上面时，面板会显示出来，因为它是根据我之前设置的showCard状态变量来显示的： const [showCard, setShowCard] = useState(false) 然后我有一个ProfileCard组件，但是我不能简单地这样做： <ProfileCard onMouseEnter={() => { setShowCard(true) }} onMouseLeave={() => { setShowCard(false) }} /> 因为它不起作用。ProfileCard不是一个DOM元素，所以它无法响应被触发的事件。 我必须将onMouseEnter和onMouseLeave作为props传递给ProfileCard组件，然后在组件内部找到可以接收这些事件的正确DOM元素，并在那里附加事件处理程序。在这种情况下，我使用了容器div： const ProfileCard = ({ onMouseEnter, onMouseLeave }) => ( <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}> ... 现在当离开面板时，它会隐藏起来。

如何使用CSS來為React應用程式添加樣式 在React中，你有多種方式來為組件添加樣式。 使用類別和CSS 第一種也是最簡單的方法是使用類別，在一個普通的CSS文件中為這些類別定義樣式： const Button = () => { return <button className="button">一個按鈕</button> } .button { background-color: yellow; } 你可以使用import語句導入樣式表，如下所示： import './style.css' Webpack會自動將CSS屬性添加到bundle中。 使用style屬性 第二種方法是使用附加到JSX元素的style屬性。使用此方法，你不需要一個單獨的CSS文件。 const Button = () => { return <button style={{ backgroundColor: 'yellow' }}>一個按鈕</button> } 現在CSS的定義略有不同。首先，請注意雙重大括號：這是因為style接受一個對象。我們傳入一個JavaScript對象，該對象在大括號中定義。我們也可以這樣做： const buttonStyle = { backgroundColor: 'yellow' } const Button = () => { return <button style={buttonStyle}>一個按鈕</button> } 在使用create-react-app時，這些樣式默認情況下會自動添加Autoprefixer來進行樣式前綴處理。 此外，現在的樣式是大小寫混合命名法，而不是使用破折號。每當一個CSS屬性有破折號時，將其刪除並使用下一個單詞開頭大寫的方式替代。 使用CSS模組 CSS模組是一個完美的折衷選擇：你使用類別，但是CSS的作用範圍限定在組件內，這意味著你添加的樣式不能自動應用到其他組件上，除非你明確允許。同時，你的樣式是在一個單獨的CSS文件中定義的，這比在JavaScript中使用CSS更容易維護（還可以使用你習慣的CSS屬性名稱）。 首先創建一個以.module.css結尾的CSS文件，例如Button.module.css。最好將其與要為其添加樣式的組件具有相同的名稱。 在這裡添加你的CSS，然後在要為其添加樣式的組件文件中導入它： import style from './Button.module.css' 現在你可以在JSX中使用它了： const Button = () => { return <button className={style....

如何使用SASS來設計React應用程式 當你使用create-react-app來建構React應用程式時，你有很多選擇來進行樣式設計。 當然，如果你不使用create-react-app，你有無數的選擇，但我們只討論create-react-app提供的選項。 你可以使用普通的class和CSS檔案、使用style屬性或CSS模組來進行樣式設計。 SASS/SCSS是非常流行的選項，許多開發人員喜愛使用它。 你可以在create-react-app 2版本中完全不需要任何配置就可以使用它。 你只需要一個.sass或.scss檔案，然後在組件中引入它： import './styles.scss' 你可以在https://codesandbox.io/s/18qq31rp3看到它正常運作的範例。

什麼是代碼分割，以及如何在React應用程序中引入它 現代JavaScript應用程序在捆綁大小方面可能相當巨大。您不希望用戶需要下載1MB大小的JavaScript包（包括您的代碼和使用的庫）才能加載首頁，對吧？但是這是使用Webpack捆綁構建的現代Web應用程序的默認情況。 該捆綁包將包含一些可能永遠不會運行的代碼，因為用戶只停留在登錄頁，從不看到應用程序的其他部分。 代碼分割是僅在需要時加載JavaScript的一種實踐方式。 這將改善： 應用程序的性能 對內存的影響，以及移動設備的電池使用情況 下載的基於KB（或MB）的大小 React 16.6.0於2018年10月發布，引入了一種進行代碼分割的新方法，它應該取代以前使用的所有工具或庫：React.lazy和Suspense。 React.lazy和Suspense組成了一種完美的方式來懶加載依賴項，並且只在需要時加載它。 讓我們從React.lazy開始。您可以使用它來導入任何組件： import React from 'react' const TodoList = React.lazy(() => import('./TodoList')) export default () => { return ( <div> <TodoList /> </div> ) } 在它可用的時候，TodoList組件將動態添加到輸出中。Webpack將為其創建一個單獨的捆綁包，並在需要時進行加載。 Suspense是一個您可以用於包裝任何懶加載組件的組件： import React from 'react' const TodoList = React.lazy(() => import('./TodoList')) export default () => { return ( <div> <React.Suspense> <TodoList /> </React.Suspense> </div> ) } 它負責處理在懶加載組件被提取和渲染時的輸出。 使用fallback屬性輸出一些JSX或組件： ... <React.Suspense fallback={<p>Please wait</p>}> <TodoList /> </React....

如何在React中動態輸出某些元素或其他元素 在React的元件JSX中，您可以基於條件進行動態決定要輸出的元件或其他元素，或者只是其中一部分的JSX。 最常見的方式可能是使用三元運算符： const Pet = (props) => { return ( {props.isDog ? <Dog /> : <Cat />} ) } 另一種方式是使用&&運算符，當您概念上只有if而無else時，這種方式很好用。它的運作方式是：如果它之前的表達式求值為true，則打印之後的表達式： const Pet = (props) => { return ( {props.isDog && <Dog />} {props.isCat && <Cat />} ) }

如何在React應用程序中處理表單 表單是少數默認具有互動性的HTML元素之一。 它們的設計目的是允許用戶與頁面進行互動。 常見的表單用途? 搜索 聯繫表單 購物車結帳 登錄和註冊 等等！ 使用React可以使我們的表單具有更多互動性且不那麼靜態。 在React中處理表單有兩種主要方式，它們在基本級別上有所不同：數據是如何管理的。 如果數據由DOM處理，我們稱之為非受控組件 如果數據由組件處理，我們稱之為受控組件 如您所想，大多數情況下都會使用受控組件。組件狀態是唯一的真相來源，而不是DOM。但有時候，當使用一些具有固有行為的表單字段時，您被迫使用不受控制的組件，例如<input type="file">字段。 當表單字段中的元素狀態更改時，我們使用onChange屬性來跟踪它。 class Form extends React.Component { constructor(props) { super(props) this.state = { username: '' } } handleChange(event) {} render() { return ( <form> Username: <input type="text" value={this.state.username} onChange={this.handleChange} /> </form> ) } } 在類組件中，為了設置新的狀態，我們必須將this綁定到handleChange方法，否則this無法在該方法內部訪問： class Form extends React.Component { constructor(props) { super(props) this.state = { username: '' } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ username: event....

學習如何在Svelte中處理事件 監聽DOM事件 在Svelte中，你可以使用on:<event>語法在模板中直接定義DOM事件的監聽器。 例如，要監聽click事件，你可以將一個函數傳遞給on:click屬性。 要監聽onmousemove事件，你可以將一個函數傳遞給on:mousemove屬性。 以下是一個範例，其中處理函數在內聯中定義： <button on:click={() => { alert('clicked') }}>點擊我</button> 以下是另一個範例，其中處理函數在組件的script部分中定義： <script> const doSomething = () => { alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 當代碼不太冗長時，我更喜歡內聯。如果只有2-3行，例如，否則我會將其移至組件的script部分。 Svelte將事件處理程序作為函數的參數傳遞，這很方便，如果你需要停止事件傳播或參考事件對象中的某些內容： <script> const doSomething = event => { console.log(event) alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 現在，我提到了“停止事件傳播”。這是一個非常常見的操作，例如停止提交表單事件。Svelte提供了修飾符，可以直接應用它，而無需手動處理。 stopPropagation和preventDefault是你最常使用的兩個修飾符，我想。 你可以這樣應用修飾符：<button on:click|stopPropagation|preventDefault={doSomething}>點擊我</button> 還有其他修飾符，它們更加專業化。capture使事件捕獲而不是冒泡，once只觸發一次事件，self只有當事件的目標是該對象時才觸發該事件（從冒泡/捕獲層次結構中移除）。 在組件中創建自定義事件 有趣的是，我們可以在組件中創建自定義事件，並使用相同的內建DOM事件語法。 要做到這一點，我們必須從svelte包中引入createEventDispatcher函數並調用它以獲取一個事件分發器： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() </script> 一旦這樣做，我們可以調用dispatch()函數，並傳遞一個字符串，用於識別事件（我們將在使用此事件的其他組件中使用on:語法）： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() //當觸發事件的時候 dispatch('eventName') </script> 現在，其他組件可以使用我們的組件，並使用以下方式：...