前端项目开发流程_前端开发的全过程

前言

拿到设计图，该如何高效快速的构建一个应用？

第一阶段 库/框架/工具选型

1. 框架

a. 框架

基于 Node.js 平台的下一代 Web 开发框架。

• Express：http://www.expressjs.com.cn/ 基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
• Egg：https://eggjs.org/zh-cn/ Egg 继承于 Koa。

Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。

• Electron：https://www.electronjs.cn/
• Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和- Chromium（作为前端）完成桌面GUI应用程序的开发。

也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。

• Redux：https://www.redux.org.cn/ Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
• ReactNative：https://reactnative.cn/ 使用JavaScript编写原生移动应用。
• mpvue：http://mpvue.com/ 基于 Vue.js 的小程序开发框架。

b. UI框架

• Bootstrap：http://www.bootcss.com/
• ElementUI：http://element-cn.eleme.io/

基于 Vue.js 的组件库。

• iView：https://www.iviewui.com/ 一套基于 Vue.js 的高质量 UI 组件库。

• Ant Design：https://ant.design 基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 Ant Design pro 作为示例，可以看看。

• Ant Design Mobile：https://mobile.ant.design/ 一个基于 Preact / React / React Native 的 移动端 UI 组件库。

• Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/
  Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

c. 类库

• jQuery：http://jquery.com/
• Zepto.js：https://zeptojs.com/ 可以理解成是移动端的 jQuery。
• ECharts：https://echarts.baidu.com/ 使用 JavaScript 实现的开源可视化库。

d. CSS

e. 构建工具

可组装的JavaScript和JSX检查工具。

f. 编辑器 && IDE

g. 编码规范

• Bootstrap编码规范：https://codeguide.bootcss.com/
• es6编程风格：http://es6.ruanyifeng.com/#docs/style
• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

h. 静态站点搭建工具

• Hexo：https://hexo.io/zh-cn/
• VuePress：https://www.vuepress.cn/
• GitBook：https://www.gitbook.com/

i. 设计工具

• 墨刀：原型设计工具。网址：https://modao.cc/
• 蓝湖：一款产品文档和设计图的在线协作平台。网址：https://lanhuapp.com
• PxCook（像素大厨）：高效易用的自动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook

j. 图标

k. 工具
CanIUse：https://caniuse.com/
浏览器兼容性查询。前端同学必须要知道。

l. 团队

• 腾讯AlloyTeam：http://www.alloyteam.com/
• 腾讯社交用户体验ISUX：https://isux.tencent.com/
• 淘宝FED | 淘宝前端团队：http://taobaofed.org/
• 阿里巴巴国际UED：http://www.aliued.com/
• 京东 | 凹凸实验室：https://aotu.io/
• 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE
• 百度前端研发部FEX：http://fex.baidu.com/
• 360 | 奇舞团：https://75team.com/
• 知道创宇FED：https://knownsec-fed.com/

2. js库

a. jquery

jquery主要是用于处理js和html页面交互的，封装了很多操作dom的方法，以及ajax，相比于原生的js更加的简洁，提高了开发效率。

b. underscore

underscore.js可以理解为一个js的函数库，其中主要封装了一些常用的js操作函数方法，比如数组操作的map，reduce，filter等等，不过这些函数大多在es6中已经实现了。类似underscore的还是lodash，都是辅助js开发的。

c. Lodash

Lodash是js的工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前ECMAScript尚未制订的规范，但同时被业界所认可的辅助函数。

第二阶段 页面开发阶段

第一步：将设计好的 UI 划分为组件层级

设计稿 => JSON API => 划分组件及子组件(并命名) => 确定组件层级 =>
单一功能原则来判定组件的范围

UI（或者说组件结构）与 JSON 数据模型一一对应

第二步：用 React 创建一个静态版本

渲染 UI 和 添加交互 分离 => 创建复用组件(props) => 可重用的组件库 => render() 方法渲染 =>

• props传入数据，props 是父组件向子组件传递数据的方式
• 编写一个应用的静态版本时，往往要编写大量代码，而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，而不需要编写太多代码。

第三步：确定 UI state 的最小（且完整）表示

找出应用所需的 state 的最小表示 => 根据需要计算出其他所有数据 =>

• 关键是 DRY: Don’t Repeat Yourself。只保留应用所需的可变 state 的最小集合，其他数据均由它们计算产生。
• 保存一个包含所有事项的数组。展示任务个数时，只需要利用该数组的 length 属性即可。

示例：任务清单应用

你要编写一个任务清单应用，你只需要保存一个包含所有事项的数组，而无需额外保存一个单独的 state 变量（用于存储任务个数）。当你需要展示任务个数时，只需要利用该数组的 length 属性即可。

我们的示例应用拥有如下数据：

• 包含所有产品的原始列表
• 用户输入的搜索词
• 复选框是否选中的值
• 经过搜索筛选的产品列表

通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：

1. 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
2. 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
3. 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

包含所有产品的原始列表是经由 props 传入的，所以它不是 state；搜索词和复选框的值应该是 state，因为它们随时间会发生改变且无法由其他数据计算而来；经过搜索筛选的产品列表不是 state，因为它的结果可以由产品的原始列表根据搜索词和复选框的选择计算出来。

综上所述，属于 state 的有：

• 用户输入的搜索词
• 复选框是否选中的值

第四步：确定 state 放置的位置

确定哪个组件能够改变这些 state，或者说拥有这些 state。

注意：React 中的数据流是单向的，并顺着组件层级从上往下传递。

步骤来判断：

1. 对于应用中的每一个 state：
2. 找到根据这个 state 进行渲染的所有组件。
3. 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
4. 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
5. 如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。

根据以上策略重新考虑我们的示例应用：

• ProductTable 需要根据 state 筛选产品列表。SearchBar 需要展示搜索词和复选框的状态。
• 他们的共同所有者是 FilterableProductTable。

因此，搜索词和复选框的值应该很自然地存放在 FilterableProductTable 组件中。

第五步：添加反向数据流

数据反向传递：处于较低层级的表单组件更新较高层级的 FilterableProductTable 中的 state。

React 通过一种比传统的双向绑定略微繁琐的方法来实现反向数据传递。尽管如此，但这种需要显式声明的方法更有助于人们理解程序的运作方式。

重新梳理一下需要实现的功能：每当用户改变表单的值，我们需要改变 state 来反映用户的当前输入。由于 state 只能由拥有它们的组件进行更改，FilterableProductTable 必须将一个能够触发 state 改变的回调函数（callback）传递给 SearchBar。我们可以使用输入框的 onChange 事件来监视用户输入的变化，并通知 FilterableProductTable 传递给 SearchBar 的回调函数。然后该回调函数将调用 setState()，从而更新应用。

第三阶段：组件化开发与资源管理

1. 页面结构目录

结构一

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

结构二

├─api                   //  数据请求
├─assets                //  静态资源
├─components            //  组件
├─controllers           //  控制层
├─instance              //  页面实例
├─middleware            //  中间件
├─mixins                //  混入
├─publicComponents      //  公共组件
│  ├─base                   //  基础组件
│  └─basic                  //  业务组件
├─routers               //  路由
├─services              //  业务处理
├─style                 //  样式
└─views                 //  页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

多页面工程

|-- src/ 源代码目录

    |-- html/ html 文件目录
        |-- page1.html page1 页面的 html 文件
        |-- module1/ 子目录
            |-- page2.html page2 页面的 html 文件
            |-- ...
            
        |-- ...    
        
    |-- js/ js 文件目录
        |-- common/ 公共文件目录
        |-- page1/ page1 页面的 js 目录
        |-- module1/ 子目录
            |-- page2/ page2 页面的 js 目录
            |-- ...
            
        |-- ...
        
    |-- css/ css 文件目录
        |-- common/ 公共文件目录
        |-- page1/ page1 页面的 css 目录
        |-- module1/ 子目录
            |-- page2/ page2 页面的 css 目录
            |-- ...
            
        |-- ...
        
    |-- less/ less 文件目录（内部结构跟上面类似）
    |-- images/ 图片文件目录（内部结构跟上面类似）
    |-- data/ api-mock 文件目录（内部结构跟上面类似）
    |-- ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

单页面应用

|-- src/ 源代码目录
    |-- components/ 组件文件目录（如 react）
        |-- common/ 公共文件目录
        |-- page1.js page1 页面的组件文件
        |-- module1/ 子目录
            |-- page2.js page2 页面的组件文件
            |-- ...
            
        |-- ...    
        
    |-- services/ service 文件目录
        |-- service1.js page1 页面的 service
        |-- module1/ 子目录
            |-- service2.js page2 页面的 service
            |-- ...
            
        |-- ...
        
    |-- models/ model 文件目录
        |-- model1.js page1 页面的 model
        |-- module1/ 子目录
            |-- model2.js page2 页面的 model
            |-- ...
            
        |-- ...
        
    |-- ...
    
|-- images/ 图片文件目录（内部结构跟上面类似）
|-- data/ api-mock 文件目录（内部结构跟上面类似）
|-- ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

├──src
│   ├──view                    //页面
│       ├──carts               //购物车页面 
│           ├──component       //该页面专用组件
│           ├──model.js        //该页面的数据层[redux和vuex文件的细分]    
│           ├──index.js        //该页面的布局文件    
│           ├──service.js      //该页面用到的api  
│           ├──index.scss      //该页面用到的scss  
│   ├──utils                   //JS工具库
│   ├──api                     //共用api接口【永不删除】
│   ├──style                   //共用style【永不删除】
│   ├──config                  //配置
│   ├──model                   //共用model层其实是redux或vux文件【永不删除】
│   ├──component               //共用组件
│       ├──map                 //地图组件
│           ├──model.js        //该组件的数据层[redux和vuex文件的细分]    
│           ├──index.js        //该组件的布局文件    
│           ├──service.js      //该组件用到的api  
│           ├──index.scss      //该组件用到的scss  
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── assets                 // 主题 字体等静态资源【永不删除】
├── index.html                 // html模板
└── package.json 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

前端项目来源：前端项目目录结构