跳到主要内容位置

前端组件化开发的 7 条经验总结

峰华前端工程师
软件工程师 / B站UP主

自从 2010 年第一份工作接触了前后端半分离的开发方式之后,在后面的这些年里,对前端的组件化开发有了更全面一点的认识,组件化在我们的前端开发中,对提高开发效率、代码的可维护性和可复用性有很大帮助,甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码,你可以按照实际情况应用到 React 或 Vue 的项目中。

前端组件化发展历史

在讨论组件化开发之前,我们先看看前端组件化开发的发展历史。网页开发刚起步时,并没有『前端』这个概念,更不用提组件化了。当时,网页只是作为可以在浏览器中浏览的富文本文件,开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言,网页中的代码没有办法复用,即使是类似的页面,都需要复制粘贴大量的重复代码:

Vite 配置代理 Proxy,避免跨域和重复编写url的问题

峰华前端工程师
软件工程师 / B站UP主

我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如 https://example.com/api/some_end_pointhttps://example.com/api/other_end_point,针对这两种情况,可以直接用同一个配置来解决,即代理配置。 ​

不管是 Vite 还是 Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名。

Nginx 教程:如何在 Ubuntu 20.04 下安装并配置 Nginx

峰华前端工程师
软件工程师 / B站UP主

我们前端工程师在开发完前端项目,并把它打包成静态的网站之后,需要上传到服务器上,才能让互联网上感兴趣的用户来访问。我们之前在阿里云购买了一台远程服务器,它现在还不能用来让用户访问网站,因为静态的 HTML 文件是通过 HTTP 协议来发送到用户的浏览器上的,那就需要在服务器里面安装一个服务器程序,来处理 HTTP 请求,并把我们的静态网站发送到用户的浏览器上。 常见的服务器程序有:

  • Nginx。
  • Apache。
  • Tomcat。
  • IIS。等等

如何购买阿里云服务器搭建个人网站

峰华前端工程师
软件工程师 / B站UP主

阿里云

在做完网站之后,我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑,在它上面安装服务器程序后,可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有:

  • 阿里云。
  • 腾讯云。
  • 华为云等。

它们的服务基本上都差不多,这里就以阿里云为例来看一下,如何购买一台适合自己的服务器。 选择服务器最重要的是 **CPU、内存和带宽,**需要根据网站的用户量、所占的空间(例如图片、数据的大小)来选择对应的配置。

  • 如果性能太差,就无法应对大量用户的访问,比如说 1000 人同时访问。
  • 如果带宽比较小,对于大访问量也会造成页面响应延迟。

假如你要搭建的是个人网站、博客之类的,那么可以选择一个比较基础的配置,这样也比较便宜。

如何配置 Babel 来体验最新 JavaScript 特性

峰华前端工程师
软件工程师 / B站UP主

因为各个浏览器厂商对 JavaScript 规范的实现并不统一,这让开发者在日常开发中经常遇到兼容性的挑战,一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用,这样还需要针对各个浏览器编写不同的代码,才能让代码能够兼容。

后来,一些工具出现了,它们可以让我们编写有最新特性的 JavaScript 代码,然后把代码转换为各个浏览器都支持的版本,这种工具叫作转译器(Transpiler)。Babel 就是其中一个且比较著名,几乎每个前端框架中都使用到了,它可以把包含新特性的代码转换为 ES2015 版本,或者其它指定的版本来实现最大兼容性。

2021 年学前端还有前途吗?

峰华前端工程师
软件工程师 / B站UP主

‌有好多同学问我‌‌‌‌现在学前端还有没有前途?‌‌那么‌‌我就借着现在前端的发展趋势‌‌,和前端到底是个什么样的一个概念,来给‌‌大家分析一下,学前端到底有没有前途。

img

Photo by Tara Winstead from Pexels

什么是前端?

先定义一下,到底什么是前端。从广义的角度上讲,‌‌只要是我们人眼‌‌能看得见的、能够进行人机交互的‌‌界面‌‌,都属于前端的范畴,例如:APP‌‌、网站、小程序‌‌等等‌‌,甚至是智能硬件上面的‌‌显示屏‌‌(例如电视‌‌)。从这个角度上来讲,‌‌只要‌‌有人机交互的需求,‌‌那么前端‌‌开发永远都会有用武之地,我想你应该也清楚,人机交互在科技这么发达的现代社会里,不太可能消失,或者短时间里不太可能消失。

在了解这个概念后这些之后,‌‌你现在认为学前端到底有没有前途呢?‌‌

学前端到底有没有前途?

如何快速学会一门编程语言

峰华前端工程师
软件工程师 / B站UP主

面对越来越激烈的内卷,程序员需要掌握的技能越来越多,并且对于快速掌握一门编程语言的能力也日趋重要,因为现在的开发基本都是多端、各种语言都会使用,能快速的转换,才能在编程界里立足。

那么,如何才能快速学会一门编程语言?

注意

方法仅限于有其它编程语言基础。

  1. 过一下基础语法结构:变量、数据类型、运算符、循环、分支、数组、函数、类/结构、常用数据结构等。(1 - 2 天)
  2. 学习特有的语法:异常处理、泛型、注解、多线程、生命周期、指针、模块化、依赖管理等。(7 - 14 天)
  3. 熟悉常用 API:字符串操作、集合操作、文件和流操作、网络操作、代码测试等。(7 - 14天)
  4. 根据开发方向,入门一种框架:命令行类、Web 类、桌面类、APP 类、绘图类、机器学习类等。(7 - 14 天)

CSS :is() 伪类选择器使用指南

峰华前端工程师
软件工程师 / B站UP主

在使用 CSS 编写页面样式的时候,你是不是写过类似的代码:

li a,
artcile a,
section a {
color: #000000;
}
h1 a,
h2 a,
h3 a {
color: blue;
}

为了给一篇文章中,不同位置的超链接设置不同的颜色,需要在多个选择器中,重复的选择 a  元素,如果是其它名字比较长的元素或者 class,那么写起来会特别麻烦,稍加不注意就会写错。

面试没通过,又一次,我好菜呀...

峰华前端工程师
软件工程师 / B站UP主

面试

是不是每次面试没通过都会有这样的感觉?作为一名程序员,每次面试的时候都觉得准备不充分,面试资料多的看不完,实战经验也不够,即使自认为准备的很充分了,最后还是栽了,到底是因为自己菜,还是自己菜,还是自己菜呢?要回答这个问题,我们得先知道面试到底在面什么。

面试在面什么?

我们好多小伙伴总觉得面试就跟高考一样,有着严格的评分标准和分数线,谁的分高谁就能进去,但事实上,面试是通过交谈来互相了解对方的一种形式,更多的时候是考验的一个人的沟通能力,如果你能让面试官感觉聊的很投机,那么会有相当大的概率通过面试。 对于技术方面,不同的公司有不同的侧重点,大厂看重原理和算法,其它公司看中技术的熟悉程度,也就是项目经验。技术方面的问题是最棘手的,你可能认为面试通过的人,技术一定很牛,这个我以身边进谷歌、Facebook、亚马逊等国外大厂的朋友的经验证明,这是绝对错误的。技术关是最没有技术含量的考验。通常,公司并不知道一个面试者的技术水平,所以才会通过笔试和前几轮的面试进行考察,考察的问题基本都是类似的、可以举一反三的、是能专门进行准备的。简而言之,就是谁下功夫准备面试了,谁通过的概率就大很多,例如一个刷了 leetcode 500 道题 3 遍的,一定比刷了 300 道题 1 遍的通过率高。