跳到主要内容

2 篇博文 含有标签「框架」

查看所有标签

React 框架的使用体验

· 阅读需 6 分钟

为什么学

每次学习新技术,我都习惯问自己这个问题。那么,换一句话说,我们为什么需要借助框架来完成前端开发(而不是 vanilla JS)?以下是 chatgpt-4o 对这个问题的回答:

从更底层的角度来看,前端框架解决了开发过程中一些核心的复杂性和挑战。以下是几个关键方面:

  1. DOM 操作的抽象
  • 原生 JavaScript :直接操作 DOM 通常需要编写大量代码,且容易出错。例如,创建、插入、删除和修改 DOM 元素需要详细处理每个步骤,这在复杂应用中会变得难以维护。

  • 框架 :通过抽象层(如虚拟 DOM),框架简化了 DOM 操作。例如,React 的虚拟 DOM 机制会在状态变化时高效地更新实际 DOM,而开发者只需关注状态的变化和 UI 的呈现。

  1. 状态管理
  • 原生 JavaScript :管理复杂应用的状态可能需要大量的事件处理和全局变量,容易导致代码混乱和难以调试。

  • 框架 :提供了系统化的状态管理方案。例如,Redux 和 Vuex 等状态管理库帮助开发者集中管理应用状态,使得状态变化更可预测、更易调试。

  1. 组件化开发
  • 原生 JavaScript :复用 UI 组件通常需要手动编写和管理,难以保证组件的独立性和复用性。

  • 框架 :提供了组件化开发的基础设施。开发者可以创建独立的、可复用的组件,这些组件可以在不同的地方使用,并且易于维护和扩展。

  1. 数据绑定
  • 原生 JavaScript :实现数据绑定(即数据变化自动反映在 UI 上)需要手动编写代码,通常通过事件监听和 DOM 操作来实现。

  • 框架 :例如,Vue 的双向数据绑定机制和 React 的单向数据流,使得数据和 UI 同步更加直观和简单,减少了手动更新 DOM 的繁琐工作。

  1. 模块化与依赖管理
  • 原生 JavaScript :管理代码模块和依赖关系通常需要借助外部工具(如 Webpack),且需要手动配置和管理。

  • 框架 :许多框架自带模块化和依赖管理系统。例如,Angular 内置的模块化系统和依赖注入机制,使得代码组织和依赖管理更加简便。

  1. 性能优化
  • 原生 JavaScript :手动优化性能通常需要深入了解浏览器的工作原理和具体的性能瓶颈。

  • 框架 :例如,React 的虚拟 DOM 和 Vue 的渐进式增强机制,帮助开发者自动处理许多性能优化问题,使得应用更加高效。

  1. 开发工具和生态系统
  • 原生 JavaScript :虽然有许多开发工具可以使用,但需要单独配置和集成。

  • 框架 :通常提供了一整套开发工具和生态系统。例如,React 开发者工具、Vue CLI 等,帮助开发者快速搭建、调试和部署应用。

通过这些底层机制,前端框架解决了许多原生 JavaScript 开发中的复杂问题,使得开发流程更加高效、代码更加健壮和可维护。

我的感受:前端 JS 最烦人的就是 dom 操作,非常频繁且 api 写法冗长。前端框架把人从 dom 操作中解脱出来,只要关注数据的变化即可。还有一个就是组件化开发,html 的树状结构意味着一定有很多功能相同的节点,这意味着需要抽取出来作为组件,这一点在 JS 中同样不好实现。

在前端领域,各个方向的工具的选择项都非常丰富。然而,在框架层面,就是 React 和 Vue(暂不讨论 Angular 和 Svelte)。客观上讲,这两个无优劣之分,只有适合与否。React 在海外的流行程度应该远超过 Vue。另外,我的感受是,渲染数据时,在 JavaScript 中写 HTML(React)比在一个框架定义的类 html 模板里更顺手,后者需要记住自定义的标签。

React 是框架吗

严格上来说,React 不是框架。因为 react 并没有针对前端项目的一个完整解决方案(包括路由、状态管理等)。Vuejs 作为 React 的竞争对手,就是一个开箱即用的框架。

react 的核心就是 react 和 react-dom 两个库。

expressjs 框架的使用体验

· 阅读需 3 分钟

expressjs 的官网介绍:一款快速的、无预设的、极简的 web 框架。Nodejs 的很多框架正是基于 expressjs。作为一个极简框架,我打算在一篇文章中介绍它和我的使用感受。

hello-world

项目创建这一步就体现了 expressjs slogan 中的极简。其他框架都要借助npx或者npm install xxx -g等脚手架工具,生成一个完整(庞大)的项目。然而,express 只需要简单的npm init -y来初始化项目,然后npm install express,执行完后目录中只有 index.js, node_modules, package.json,非常的清爽。同时这也体现了无预设的特性,既不规定开发者要按什么规范来组织代码文件架构,不干涉技术选型。可以说,掌握了 expressjs,就掌握了 web 后端开发的众多核心概念。

.env 文件的创建

一直以来关于 nodejs 项目的环境变量,我都有一个误解,就是要真的跑到 os 的环境变量管理窗口去添加。实际上,只需要遵守下列步骤就可以了:

  • 项目根目录创建.env文件,填上变量,并在代码中使用process.env.xxx来引用
  • package.json的启动命令中,加上参数--env-file=.env
  • 重启项目

指定模块定义方式

两种模块定义方式,commonjs 和 ES6,可以在package.json加一个 type 字段,如:`type: module"。默认的是 commonjs。

最佳实践

因为 express 本身不规定任何开发模式,所以遵守最佳实践是很重要的。有几个必要的文件夹:

  • routes: 存放路由
  • middleware: 中间件
  • controller:handle function

上面这些组件可以在主文件中被导入并使用。