面向后端开发者的前端技术栈概要

2019/11/19 big-front

主要说明前端基础概要,作为索引不断优化补充知识结构,前端技术逐渐走向工程化模式,随着框架的增多,所需的原理知识也不断增多,给一些后端学习带来一些困扰,本文主要说明如何循序渐进,本文结构也遵照认知过程逐渐说明各个技术间的关系,并逐渐深入。本文只是对技术要点进行有规律提取,方便以后进行重点了解,本文主要针对对象是后端开发,可能有时需要独自完成管理后台的开发,前端技术在不断演化,已经逐渐向工程化迈进,不再是简单脚本语言,因此对后端开发提出了新的要求,新的框架的衍生,比如react为开发者建立单页应用提供便利,但也为后端开发者增加了学习成本,因此本文有必要对前端知识做一个系统地描述,以帮助自身形成一个完整的知识体系,并且能够跟随趋势进行技术迭代更新。

HTML && CSS

  • HTML 使用xml语法,标记语言,熟悉其基本结构,elementattribute,在html中使用样式css的三种方式,css使用classid进行样式共享
  • CSS 描述html 元素如何展示,了解css基本语法selector:{property:value;},重点理解几种selector使用方式,CSS Combinators不同样式定义同一selector的加载顺序,CSS Pseudo-classes描述元素特定行为下的状态,与CSS Pseudo-elements描述元素部分样式,理解CSS box model这是进行元素内容布局的关键

深入理解CSS布局模型

  • Learn to Code HTML & CSS 可以作为前端基础入门教程,一步一步解释各个组件的功能
  • Learn to Code Advanced HTML & CSS css 布局高级技巧进阶,新概念的引入必定有其实际的应用价值,由应用引入新的概念更能帮助读者理解css具体的设计思路,更能应用到实际开发当中
  • 学习CSS布局 了解position,displayfloat等关键属性影响布局的原理

NOTE: 通过如上的示例学习,css如何进行html标签定位,理解盒模型的应用,如何利用这些属性美化布局,理解html布局的一些技巧,布局复杂页面

JavaScript

熟悉JavaScript基本结构,了解javascipt对象定义,主要与java等语言的区别,因为其为脚本语言,大多在浏览器内运行,需要结合HTML DOM,因为数据Dom对象至关重要,jquery为我们提供dom相关的便捷操作

  • JQuery 了解jquery在操作dom相关的便利性,主要包括Selectors,Traversing(遍历)Manipulation (元素操作)EventsEffect

了解javaScript如何操作dom对象,作为脚本语言如何动态改变html的element,attribute,css style,监听改变并并处理相应的handler

NOTE: 基于以上技术,可以采用相关的模块,快速掌握以上基本技术AdminLTE

框架篇

针对通过的操作进行抽象,简化开发,例如css规则定义可以适当的抽象,总结出一套固有的ui主题样式,这样的框架即是bootstrap css

  • JQuery 简化javascript操作dom
  • Bootstrap CSS UI 框架

React

构建单页面应用,创建可重用的组件,理解JSX,注意jsx引用大段html必须将其加入父亲标签内,不然会报错.组件创建的两种方式,组件之间的基于importexport实现引用;组件之间通过html的attribute实现prop传递,并且prop是只读的;认识component内建对象state,并且state对象变更会触发component的rerender,理解组件的生命周期;react事件监听与html的不同,方法采用驼峰式命名,以便于与html事件区分,事件处理方法采用{}包围;react中使用css的几种方式

  • React 介绍React基本概念
  • 从零开始学 ReactJS 了解react基本概念以及相关的技术栈,项目编译打包等工具webpack的结合,了解模块化管理

React关键概念系列文章

案例演示

  • calculator 演示了基于react的基本的spa应用构建,展示prop属性传递与state变更刷新,以及事件的处理

React 生态组件

React生态组件很多,了解它们需要知道在不使用它们会给开发带来那些不便利性,从而理解这些组件引入之后给开发带来的好处

React-Router

React-Router为单页应用,页面嵌套提供统一的路由配置,路由的原理在于根据路径解析除具体组件,并在相应的父组件中渲染出来,形成层层渲染的模式。相对与传统的多页面应用,减少不必要的重复定义,重点理解this.prop.children与嵌套路由的组合使用,理解嵌套路由的渲染时基于父容器在其内部渲染你相关组件,了解withRouter的用法

MobX

利用观察者模式进行数据状态维护的框架

Vue

比较与React的区别,了解各个框架使用难点与特性。这些框架试图改变以往的前端的开发思维,逐步向后端工程化逼近,编程的思想越加趋近。模块化思维,分层思想逐渐整合,相当利用js本身组合CSS,HTML构建了一套属于自己的GUI系统

包学会浅入浅出Vue,三篇文章从开发角度简要介绍vue的核心特性,快速形成基本的开发思维

关键特性

为了实现页面相应性,vue实例属性需要与页面绑定,当属性值发生变化时,相应的页面也会发生变更,以下时vue与html原生标签绑定的几种方案

  • 实现页面普通属性绑定,主要是文本绑定
  • 表单输入实现双向数据绑定,v-model
  • 计算属性与侦听器,如果是复杂计算,需要使用计算属性绑定
  • Class与style绑定,v-bind,vue对其专门做了增强,表达式结果的类型除了字符串之外,还可以是对象或数组
  • 事件处理,v-on,可以之间在上面谢js代码,也可以接收方法名称
  • 组件
    • 属性prop传递,可通过v-bind传递
    • 子组件与父组件通信,类似react的状态提升,原生组件的点击方法回调。通过回调父组件方法的方式<button v-on:click="$emit('enlarge-text')">,调用父组件的方法,也就是子组件将事件抛出,让父组件接收通知调用相应的方法来实现
    • slot
      • 具名插槽 就是明确指明插槽名称,方便template显式替代插槽内容
      • 作用域插槽 访问子组件绑定的prop
    • 组件访问refs
  • 路由
  • 状态管理

    示例教程

  • Vue 2.x Todo 教程 本教程一步一步说明vue相关的核心概念,理解vue核心参数方法,计算属性,父子组件参数传递与通信机制,比较原生android组件的联系与区别,理解相互之间事件触发机制,参数传递

    工程工具

  • 前端工程化概述 梳理前端工程化工具的应用,理解这些工具如何协同工作,提升开发效率
  • NPM 重点理解npm scripts 使用指南
  • Webpack

开发框架

应用项目

Search

    Post Directory