为未来的自己编写代码

为未来的自己编写代码我们都经历过这种情况。你写了一段代码，通读了一遍，觉得它很完美，因为当时你觉得它说得通。一年后再看同一段代码，你会发现它面目全非

传统与现代 Web 开发⚔️

本文探讨了现代 Web 开发与传统方式的差异，包括管理软件包、构建用户界面、捆绑代码等方面的变化。文章指出现代 Web 开发的优势在于能够节省时间，跟踪过时或不安全的软件包，并提高生产力减少 bug。但同时也提到现代 Web 开发引入了更多的复杂性，如何选择使用工具框架变得尤为重要。文章还提到了一些现代 Web 开发中的关键工具和框架，如 npm 或 Yarn、React 或 Vue.js、Parcel 等，同时提供了一些资源帮助读者更明智地做出决策。

服务器端渲染的优势和起源

摘要：本文主要介绍了服务器端渲染（SSR）的优势和起源。首先，文章提到了为什么需要学习服务器端渲染，包括搜索引擎优化、社交媒体优化、性能和用户体验等方面的优势。然后，通过讲述起源故事，回顾了从服务器端编程语言出现到使用JavaScript构建SPA的过程。接着，文章提到了JavaScript革命带来的问题，如数据不直接在页面中可用等问题。接下来，介绍了通过Node.js实现通用JavaScript的方法，将服务器端渲染和JavaScript结合起来。最后，通过简单的React组件示例展示了如何渲染页面。

简化 JavaScript Promise

Promise 是 JavaScript 中用于处理异步操作的重要工具之一。本文旨在简化 JavaScript 中 Promise 的使用，通过结合 async/await 语法与 Promise 的 then 和 catch 方法，解决常见场景中的问题。同时，通过合理的变量声明和使用，使代码更加简洁明了。一、引言我喜欢 Promise，来自 JavaScript 的 Promise 而不是人类。Promise 使得代码简洁明了，让代码库更容易理解。二、结合 async/await 与 Promise.then 在 JavaScript 中，我们经常使用 fetch API 来获取数据。如果使用传统的 Promise.then 语法，代码可能会显得过于冗长。结合 async/await 语法，可以使得代码更加简洁。例如，使用 Promise.then 的传统方式： ```javascript fetch('/api').then(response => response.json()).then(data => { // 使用数据 }); ``` 使用 async/await 的方式： ```javascript const data = await fetch('/api').then(response => response.json()); // 使用数据 ``` 在第二种方式中，我们结合了 async/await 与 Promise.then，使代码更简洁易读。三、结合 async/await 与 Promise.catch 在使用 async/await 处理异步操作时，如果直接使用 try-catch 块，可能会遇到作用域问题。如果要在 try 块外部使用变量，必须将其声明为 let 或 var，这样可能会引发不必要的错误。我们可以结合 Promise 的 catch 方法来解决这个问题。例如，传统的 try-catch 块： ```javascript try { const data = await fetchData(); } catch (error) { console.error(error); } // 在此处无法访问 data 变量 ``` 结合 Promise 的 catch 方法： ```javascript const data = await fetchData().catch(error => { console.error(error); return null; // 返回 null 或默认值以避免作用域问题 }); // 在此处可以访问 data 变量 ``` 通过这种方式，我们可以在不使用 let 或 var 的情况下访问变量，同时处理可能的错误。四、总结与展望本文介绍了如何简化 JavaScript 中 Promise 的使用，通过结合 async/await 语法与 Promise 的 then 和 catch 方法，解决常见场景中的问题。同时，通过合理的变量声明和使用，使代码更加简洁明了。希望本文能帮助读者更好地理解和使用 JavaScript 中的 Promise。