《VUE+Django:手把手教你打造自己的电商独立站》1.2 前端技术选型

698 阅读6分钟

《VUE+Django:手把手教你打造自己的电商独立站》专栏写作大纲

《VUE+Django:手把手教你打造自己的电商独立站》1.1 为什么需要前后端分离的架构

前面介绍了前后端分离的开发模式。那么前端通常有哪些技术可以使用呢。前端技术在移动互联网时代开启之后得到了突飞猛进的发展,下图展示了一些常见的前端框架。

image-20230203102344-x63l2tk.png

但是在实际开发中,需要综合考虑技术生态的丰富程度,作为低阶开发者,总不能每个功能都要自己造轮子,出了问题没人讨论吧。经过全世界前端程序员的不断试错和改进,目前主流的前端框架包括如下几种:

  • Bootstrap
  • Angular
  • React
  • Vue

1.2.1 Bootstrap

Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 在 2011 年发布了第一个正式版本,提供了优雅的 HTML 和 CSS 规范,它是由动态 CSS 语言 Less 写成。

Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA、MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。国内一些移动开发者较为熟悉的其它框架,如 WeX5 前端开源框架等,也是基于 Bootstrap 源码进行性能优化而来。

Bootstrap 是当今可用的前端框架中最受欢迎的,它具有直观,时尚的界面,而且功能强大,可以更快更轻松的实现 web 开发,而且不需要捆绑附件就可以使用许多第三方插件,大多数浏览器都支持它,而且它提供了比其他前端框架更多的组合资源。与其说他是一个前端框架,不如说是一个 UI 框架更准确

官网:www.bootcss.com/

1.2.2 Angular

Angular 自 2009 年由 Misko Hevery 等人创建,在前端框架中一直占有重要的地位。它是一款优秀的前端 JS 框架,被用于 Google 的多款产品当中。作为一款 MVVM 框架,对于构建高度可交互的网页应用非常方便。angularJS 有着诸多特性,最核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等,这些特性都是前端人员非常喜欢的东西。

Angular 是一个以 JavaSpript 编写的库,模板功能也异常强大,带有丰富的 Angular 指令。可以通过指令扩宽 HTML,也可以通过表达式绑定数据到 HTML。它的模板功能强大丰富,是一个比较完善的前端 MVC 框架,自带了丰富的 Angular 指令;比较大胆的引入了 Java 的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。

但是 Angular 使用非常复杂的语法,从低版本向高版本迁移的时候成本高。另外验证功能错误信息显示比较薄弱,需要写很多模板标签;View 只能有一个,不能嵌套多个视图,在复杂的网页应用中难以分模块管理。总体比较笨重,而且没有让用户选择一个轻量级的版本。曾经作为最流行的前端 js 框架,现在热度也在慢慢降低。由于它的体量大,不适合小项目使用

官网:angular.cn/

1.2.3 React

React 框架是起源于 Facebook 的项目,2013 年 5 月开源,语法非常简洁,它可以轻易的解决跨浏览器兼容的问题,主要是通过对 DOM 的模拟,减少与 DOM 的交互做到的。

React 的模块化把组件进行了隔离,出现问题的时候更方便程序员对其进行修改,而且基于 JavaScript,因此更有利于搜索引擎的优化。它引入了虚拟 DOM 的概念,运行速度快;提供了标准化的 API,解决了跨浏览器问题、兼容性更好;代码更加模块化,重用代码更容易,可维护性高。React 通常和其它框架组合使用,并不能称为一个完整的框架。

官网:reactjs.org/

1.2.4 Vue

Vue (读音 /vju ː/,类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架,2020 年 9 月正式发布了 3.0 版本。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

2013 年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量级框架,最初命名为 Seed 。2013 年 12 月,更名为 Vue,图标颜色是代表勃勃生机的绿色,版本号是 0.6.0。

2014.01.24,Vue 正式对外发布,版本号是 0.8.0

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。由于 Vue 的核心库只关注视图层,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用(SPA)。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。简单易学,容易与其它库或已有项目整合,比较出名的有饿了么开源的ElementUI。与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用

Vue 作为比较轻量级的框架,通过进行双向数据绑定来达到驱动页面的效果,大多程序员在学习新框架的时候都会先从 Vue 开始。Vue 可以非常快速的通过异步批处理的方式对 DOM 进行更新,也能把可复用的、解耦的组件组合在一起使用,更能允许多种模块的安装,场景使用也更加灵活。渐进式构建能力是 Vue.js 最大的优势,Vue 有一个简洁而且合理的架构,使得它易于理解和构建。

Vue 社区生态丰富,这为 Vue.js 增加了巨大的价值,从空白项目创建一个综合的解决方案是十分容易的。但是在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑;它类似于 Web 组件的模式,但又不是真正的 Web 组件。

官网:cn.vuejs.org/

以上前端框架各有优缺点,如果是进入大厂工作,都必须有所涉及。但是针对中小型项目,以及语言熟悉的程度,Vue 是大多数国内工程师的首选,本系列文章也以 Vue 框架介绍电商独立站的开发过程。