🧑🏻‍💻前端工程化如何改变开发？了解高效工作法！

Aphasia
314 阅读5分钟

引言

作为一个大学生，可能对工程不是很了解，但是，我们会参加一些比赛和项目，在完成过程中，我们可能面临以下问题：

  • 分工不明确，导致工作量分配不均。
  • 缺乏沟通与协作，进度跟踪困难。
  • 项目产出质量参差不齐，甚至难以完成。

针对这些问题，工程化思想应运而生。💡

什么是工程化思想？🤔

工程化思想是一种将复杂任务通过系统化、规范化、工具化的方式进行管理和实施的理念，其核心目标是提高效率、确保质量并降低风险。

前端工程化思想

前端工程化是指将前端开发过程中的各个环节（如开发、测试、构建、部署）进行系统化、规范化和工具化管理的实践，旨在提高开发效率、保障代码质量、优化团队协作，并提升项目的可维护性。

如何做到前端工程化？🤔

大致可分为四个步骤：

  • 项目工程化
  • 代码模块化
  • 页面组件化
  • 编码规范化

一.项目工程化

合理管理项目结构，支持多人协作和多环境开发。

1.初始化

使用 npm init vite 是一种快速初始化 Vite 项目的方式。

注：这篇文章将以vue和JavaScript为例讲解初始化

具体步骤：

  • 在目录下创建一个新文件夹，右键在集成终端中打开并输入npm init vite

image.png

  • 完成后会提示你输入项目名称，这里我以vue-text为例

image.png

  • 完成后使用键盘上的方向键选择模板，这里我们选择Vue

image.png

  • 接着选择JavaScript

image.png

  • 现在我们就初始化完成了
项目目录结构

生成的 Vue 项目主要目录结构如下：

image.png

.vscode/--------------------VSCode专用的配置文件夹，通常位于项目的根目录下。
node_modules/---------------依赖文件夹
public/---------------------公共静态资源
src/------------------------源代码文件夹
   ├── assets/--------------静态资源（图片、样式等）
   ├── components/----------公共组件
   ├── App.vue--------------根组件
   ├── main.js--------------项目入口文件
   └── style.css------------用于存放全局样式
.gitignore------------------Git 忽略文件配置
index.html------------------入口 HTML 文件
package-lock.json-----------npm 锁定文件，确保安装一致的依赖版本
package.json----------------项目配置文件
README.md-------------------项目说明文档
vite.config.js--------------Vite 配置文件

2.安装依赖

初始化完成后，进入项目目录并安装依赖：

cd vue-text
npm i

3.启动开发服务器

安装完成后，运行以下命令启动开发服务器：

npm run dev

image.png

在浏览器访问 http://localhost:5173/，即可看到默认的 Vite 项目页面。

image.png

二、代码模块化

代码模块化 是一种将代码按照功能或逻辑划分成若干独立模块的编程思想和实践。这种方式可以提高代码的复用性、可维护性和可扩展性，使项目更加清晰且易于管理。

1.工具函数模块化

将常用的工具函数独立封装为一个模块。如：

  • 创建一个工具函数文件，如 utils.js：

    // utils.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

  • 在其他文件中导入并使用：

    import { add, subtract } from './utils';

console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 3)); // 输出: 2

2.调用API模块化

将 API 请求逻辑封装到一个模块中，避免重复代码。如：

  • 创建一个 API 模块文件，如 api.js：

    // api.js
import axios from 'axios';

const API_BASE_URL = 'https://api.example.com';

export function fetchUser(userId) {
    return axios.get(`${API_BASE_URL}/users/${userId}`);
}

export function fetchPosts() {
    return axios.get(`${API_BASE_URL}/posts`);
}

  • 在需要的地方调用：

    import { fetchUser } from './api';

fetchUser(1).then(response => {
    console.log(response.data);
});

三、页面组件化

页面组件化 是将页面划分为一个个独立的视图组件，每个组件封装自己的模板（HTML）、逻辑（JavaScript）和样式（CSS）。 页面组件化的实现往往需要依赖代码模块化。

定义组件
  • 每个组件通常放在 src/components 目录下，使用 .vue 文件格式。 下面的代码就是默认的组件Hello World.vue：
<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
使用组件
  • 在其他组件或页面中导入和使用，如在App.vue中使用了上面的组件：
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

image.png

  • 如果把import HelloWorld from './components/HelloWorld.vue'组件导入删除，那么页面就是这样的：

image.png

代码模块化和页面组件化的区别

image.png

四、编码规范化

编码规范化是指制定并遵循一套统一的代码编写标准和规则，确保团队在开发过程中编写出的代码一致、易于维护，并且具有较高的可读性和可扩展性。 大致包括的规范有：

  • 命名规范
  • 代码格式规范
  • 注释规范
  • 错误处理规范
  • 代码组织和目录结构规范
  • 安全性规范

结语

无论是在个人项目还是团队协作中，工程化的理念都将为我们的开发旅程提供巨大的助力。希望每一位开发者都能成为更专业、更高效的前端工程师！✨

点个赞吧

Suggestion.gif

avatar
文章
阅读
粉丝