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

前言

绝大部分开发人员(非前端),可能因为没有关注过,所以对前端开发仍然停留在叫久远的时期。即一个前端项目中只有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中。

现在的框架实现这样的形式,各有各的不同。主要的三个框架angular2vuereact都是实现了这样子的模式。

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

单页面应用

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

单页面应用结构图
image.png

多页面应用

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


image.png

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

image.png

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

前端工程化

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

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

模块化

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

组件化

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

模块化、组件化对比

image.png

前端开发环境

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

NodeJS 和 NPM


一切从 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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,510评论 1 52
  • 原文: iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 开篇 iOS应用架构谈 网络层设计方案 i...
    难却却阅读 1,252评论 0 7
  • 转自http://casatwy.com/iosying-yong-jia-gou-tan-viewceng-de...
    严木木阅读 1,519评论 1 8
  • 记忆在我小的时候如此清澈,长大了却浑浊。春节,爸爸端上来萝卜炖牛肉的那一刻,我们都凝固了。这清香的味道穿越...
    热馄饨阅读 184评论 0 2
  • 没见过这样的塔,今天就画一个吧! 下面的塔,左边是没有画辅助线的情况下徒手画的,而右边是借助辅助线徒手画出来的,但...
    金圆迪阅读 177评论 2 3