Vue / React / Angular 下载APP
章节索引 :

Vue、React、Angular

VueReactAngular 常被一起称作三大框架、现代框架。

三大框架是目前驱动前端项目底层的最常用的框架。随着前端行业从业人员的增加,更易上手的 VueReact 占据了更大部分市场。

本章节不会探讨这些框架的具体用法

1. 前端框架改变了什么

随着 AJAX 的普及以及浏览器性能的提升,前端的交互越来越复杂,前端工程师的工作职责也在变广。

其中最容易让代码变得复杂的业务逻辑就是 DOM 操作。

在没有任何框架的情况下,给一个按钮切换文案可能是这样的:

var btn = document.querySelector('.btn');

btn.addEventListener('click', function() {
  var txt = btn.innerText;

  if (txt === '开') {
    btn.innerText = '关';
  } else {
    btn. innerText = '开';
  }
});

如果要往里面插入各种逻辑,如发起请求,请求后对应界面上的某个 DOM 的复杂改变,代码就会变得越来越难维护。

如果有维护过老项目,对这方面的印象会更深刻。老项目可能会充斥着各种字符串拼接 HTML,代码可读性差,逻辑难以被后人扩充维护,小模块的重构又怕影响到项目根基,这些问题会随着时间慢慢暴露出来。

再就是花了太多时间在 DOM 操作上,为了取某个父级会经历多次 .parentNode,导致经常要去数数等这些问题。

不管是性能还是可维护性,总归来讲就是在 DOM 操作上吃了太多亏,这一点也是出现这些前端框架的出要原因:UI 与 数据的同步太费事儿

对于新人,刚学习前端框架感到最震撼的点通常都是框架对 DOM 操作的解放,以 Vue2.x 为例:

<template>
	<button @click="toggle">
    {{ text }}
  </button>
</template>

<script>
	export default {
    data() {
      return {
        text: '开',
      }
    },
    method: {
      toggle() {
        this.text = (this.text === '开') ? '关' : '开';
      },
    },
  };
</script>

以数据来驱动视图,特别是在列表渲染上,这个特性的优点就能被放的很大,其具体实现原理可以学习对应框架的底层细节。

所以前端框架带来的最大改变,就是解放了大量的操作 DOM 的工作,让开发者更注重逻辑上的表现。

其他的改变,还有组件化、工程化等,具体开发就能体会到。

2. 小结

前端框架是目前必备技能,可以选其一针对学习研究,再扩展其他。

慕课网有 Vue 相关的 Wiki,相信阅读完会有更多的收获。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源