如今的前端开发(给本团队非前端人员介绍)

前言

绝大部分开发人员(非前端)，可能因为没有关注过，所以对前端开发仍然停留在叫久远的时期。即一个前端项目中只有html、css、js，使用jquery来实现页面功能。除此之外没有其他概念。
对此，借进行部门内部分享机会，科普一下如今的前端体系及开发的过程。使团队成员能对前端开发有个简单认识，提高团队协作度。

开发模式

前后端分离后的架构演变——MVC、MVP和MVVM

MVC

前端的MVC应该与后端类似，具备着View、Controller和Model。
Model：负责保存应用数据，与后端数据进行同步
Controller：负责业务逻辑，根据用户行为对Model数据进行修改
View：负责视图展示，将model中的数据可视化出来。
这种模式在开发中更加的灵活，backbone.js框架就是这种的模式。

MVP

MVP与MVC很接近，P指的是Presenter，presenter可以理解为一个中间人，它负责着View和Model之间的数据流动，防止View和Model之间直接交流。

MVVM

首先，何为MVVM呢？MVVM可以分解成(Model-View-VIewModel)。ViewModel可以理解为在presenter基础上的进阶版。
View是ViewModel的外在显示，和ViewModel的数据是同步的。一旦View中的数据发生变化，会自动同步到ViewModel，然后ViewModel可以将变化的数据传给Model；反过来也是一样的，Model中的数据一旦发生改变，就会将值传给ViewModel，而ViewModel也会同步更新到view中。

现在的框架实现这样的形式，各有各的不同。主要的三个框架angular2、vue、react都是实现了这样子的模式。

前端中的单页面应用和多页面应用

单页面应用

只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源(js、css等)仅需加载一次。

单页面应用结构图

image.png

多页面应用

多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载

image.png

单页面应用于多页面应用对比

image.png

前端工程化、模块化、组件化

前端工程化

工程化是一种思想而不是某种技术。
表现形式：模块化、组件化。

举个例子来说：要盖一栋大楼，假如我们不进行工程化的考量那就是一上来掂起瓦刀、砖块就开干，直到把大楼垒起来，这样做往往意味着中间会出现错误，要推倒重来或是盖好以后结构有问题但又不知道出现在哪谁的责任甚至会在某一天轰然倒塌，那我们如果用工程化的思想去做，就会先画图纸、确定结构、确定用料和预算以及工期，另外需要用到什么工种多少人等等，我们会先打地基再建框架再填充墙体这样最后建立起来的高楼才是稳固的合规的，什么地方出了问题我们也能找到源头和负责人。

模块化

举简单的例子,我们要写一个实现A功能的JS代码，这个功能在项目其他位置也需要用到，那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写，既能实现复用还可以分而治之。

组件化

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面。

模块化、组件化对比

image.png

前端开发环境

Web前端开发涉及多种工具，这里将常用工具的安装和配置进行说明，提供了详细的说明，为后继的开发创建一个坚实的基础。

NodeJS 和 NPM

image

一切从 NodeJS 开始吧，官方网址： https://nodejs.org/
就和安装java开发环境同理吧= = ，npm类似于maven。

webpack

image.png

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，也称为构建工具。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

git

这里大部分开发同学应该都懂，就不详细介绍了。一个分布式的版本控制系统。

image.png

gulp

用自动化构建工具增强你的工作流程！

image.png

前端开发中提高效率的技术、框架

样式类

sass、less、stylus: CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。
styled-components:可以以组件化形式编写css样式的库，使用ES6和CSS的最佳位来设置您的应用程序没有压力。

JS类

vue、angular2、react,现今最普遍使用的三大MVVM框架。
Lodash：是一个一致性、模块化、高性能的 JavaScript 实用工具库。
TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
ts代码片段

import { action, observable } from "mobx";
import { $ComponentService } from "../../classes/service/$component-service";

@bean($GoodsListMv)
export class $GoodsListMv {
  @autowired($ComponentService)
  public $componentService: $ComponentService;

  @observable public goodsList: any;

  @observable public isSpin: boolean = false;

  @observable public orderPriceViewPermission: string;

  @action
  public showSpin() {
    this.isSpin = true;
  }

  @action
  public hideSpin() {
    this.isSpin = false;
  }

  @action
  public fetchGoodsList(params) {
    this.$componentService.queryGoodsList(params).then((data) => {
      const { productList, orderPriceViewPermission } = data;
      this.orderPriceViewPermission = orderPriceViewPermission;
      this.goodsList = productList;
      this.hideSpin();
    });
  }
}

数据交互

fetch、axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

组件库

......省略XXX字，一大堆组件库。

前端本地调试

MockServer

什么是MockServer
MockServer可用于模拟通过HTTP或HTTPS（即服务，网站等）集成的任何系统。
当MockServer收到请求时，它会根据已配置的活动期望来匹配请求。
一个预期定义了动作时所采取，例如，响应可以返回。

image.png

以上所有点都为笼统概括意在让非前端团队成员对前端体系能有一个初步的概念。