Article directory
foreword
How to efficiently and quickly build an application after getting the design drawing?
Phase 1 library/framework/tool selection
1. Framework
a. frame
| frame | features | url |
|---|---|---|
| Vue.js | MVVM | https://cn.vuejs.org/ |
| React | https://reactjs.org/ | |
| Angular | https://angular.cn/ | |
| AngularJS | https://angularjs.org/ | |
| So | https://koa.bootcss.com/ |
A next-generation web development framework based on the Node.js platform.
- Express: http://www.expressjs.com.cn/ Based on the Node.js platform, it is a fast, open and minimalist web development framework.
- Egg: https://eggjs.org/zh-cn/ Egg inherits from Koa.
Koa is a very good framework, but for enterprise applications, it is still relatively basic. Egg chose Koa as its basic framework, and further enhanced it based on its model.
- Electron：https://www.electronjs.cn/
- Electron (formerly known as Atom Shell) is an open source js framework developed by GitHub. It allows the development of desktop GUI applications to be done using Node.js (as the backend) and - Chromium (as the frontend).
In other words, we can use the js language to develop client software. In fact, the client software of VS Code is written in js language.
- Redux: https://www.redux.org.cn/ Redux is a JavaScript state container that provides predictable state management.
- ReactNative: https://reactnative.cn/ Use JavaScript to write native mobile applications.
- mpvue: http://mpvue.com/ A small program development framework based on Vue.js.
b. UI framework
- Bootstrap：http://www.bootcss.com/
- ElementUI：http://element-cn.eleme.io/
A component library based on Vue.js.
-
iView: https://www.iviewui.com/ A set of high-quality UI component libraries based on Vue.js.
-
Ant Design: https://ant.design is a React-based UI component library, mainly used for developing enterprise-level mid- and back-end products. The official website launched Ant Design pro as an example, you can take a look.
-
Ant Design Mobile: https://mobile.ant.design/ A mobile UI component library based on Preact / React / React Native.
-
Ant Design of Vue: https://vue.ant.design/docs/vue/introduce-cn/
Ant Design's Vue implementation, development and service for enterprise-level background products.
c. Class library
- jQuery：http://jquery.com/
- Zepto.js: https://zeptojs.com/ can be understood as jQuery on the mobile side.
- ECharts: https://echarts.baidu.com/ An open source visualization library implemented using JavaScript.
d. CSS
| name | features | url |
|---|---|---|
| Sass | https://sass-lang.com/ Getting started documentation: http://sass.bootcss.com/ |
Sass is a mature, stable and powerful CSS extension language |
| Less | http://lesscss.org/ Getting Started Documentation: https://less.bootcss.com/ |
Spice up your CSS |
| Stylus | http://stylus-lang.com/ |
e. Build tools
| name | url |
|---|---|
| NPM | https://www.npmjs.com/ |
| Yarn | https://yarnpkg.com/zh-Hans/ |
| Webpack | https://webpack.js.org/ |
| Gulp | https://www.gulpjs.com.cn/ |
| Babel | https://babeljs.io/ |
| ESLint | https://cn.eslint.org/ |
Composable JavaScript and JSX inspection tool.
| name | url | Function |
|---|---|---|
| PostCSS | https://www.postcss.com.cn/ | Tools to transform CSS code with JavaScript tools and plugins |
| whistle | https://wproxy.org/whistle/ | Proxy capture tool, very good and powerful |
| Fiddler | https://www.telerik.com/fiddler | Proxy capture tool |
| Easy Mock | https://www.easy-mock.com | Mock data |
f. Editor && IDE
| name | url |
|---|---|
| VS Code | https://code.visualstudio.com/ |
| Sublime Text | https://www.sublimetext.com/ |
| WebStorm | https://www.jetbrains.com/webstorm/ |
| Atom | https://atom.io/ |
g. Coding Standards
- Bootstrap coding specification: https://codeguide.bootcss.com/
- es6 programming style: http://es6.ruanyifeng.com/#docs/style
- Airbnb Javascript Style Guide：https://github.com/airbnb/javascript
h. Static site builder
- Hexo：https://hexo.io/zh-cn/
- VuePress：https://www.vuepress.cn/
- GitBook：https://www.gitbook.com/
i. Design tools
- Ink Knife: A prototyping tool. URL: https://modao.cc/
- Blue Lake: An online collaboration platform for product documents and design drawings. URL: https://lanhuapp.com
- PxCook (Pixel Chef): An efficient and easy-to-use automatic annotation tool. Software download link: https://www.fancynode.com.cn/pxcook
j. icon
| name | url |
|---|---|
| Font Awesome | http://www.fontawesome.com.cn/ |
| Iconfont | https://www.iconfont.cn/ |
| icomoon | https://icomoon.io/ |
| EasyIcon | https://www.easyicon.net/ |
| icons8 | https://icons8.cn/ |
| IconStore | https://iconstore.co/ |
| iconninja | http://www.iconninja.com/ |
k. Tool
CanIUse: https://caniuse.com/
browser compatibility query. Front-end students must know.
l. Team
- Tencent AlloyTeam: http://www.alloyteam.com/
- Tencent Social User Experience ISUX: https://isux.tencent.com/
- Taobao FED | Taobao front-end team: http://taobaofed.org/
- Alibaba International UED: http://www.aliued.com/
- Jingdong | Aotu Lab: https://aotu.io/
- Ele.me front end: https://zhuanlan.zhihu.com/ElemeFE
- FEX of Baidu front-end research and development department: http://fex.baidu.com/
- 360 | Strange Dance Troupe: 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：
- 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
- 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
- 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
包含所有产品的原始列表是经由 props 传入的，所以它不是 state；搜索词和复选框的值应该是 state，因为它们随时间会发生改变且无法由其他数据计算而来；经过搜索筛选的产品列表不是 state，因为它的结果可以由产品的原始列表根据搜索词和复选框的选择计算出来。
综上所述，属于 state 的有：
- 用户输入的搜索词
- 复选框是否选中的值
第四步：确定 state 放置的位置
确定哪个组件能够改变这些 state，或者说拥有这些 state。
注意：React 中的数据流是单向的，并顺着组件层级从上往下传递。
步骤来判断：
- 对于应用中的每一个 state：
- 找到根据这个 state 进行渲染的所有组件。
- 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
- 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
- 如果你找不到一个合适的位置来存放该 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
结构二
├─api // 数据请求
├─assets // 静态资源
├─components // 组件
├─controllers // 控制层
├─instance // 页面实例
├─middleware // 中间件
├─mixins // 混入
├─publicComponents // 公共组件
│ ├─base // 基础组件
│ └─basic // 业务组件
├─routers // 路由
├─services // 业务处理
├─style // 样式
└─views // 页面结构
多页面工程
|-- 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 文件目录（内部结构跟上面类似）
|-- ...
单页面应用
|-- 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 文件目录（内部结构跟上面类似）
|-- ...
├──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
前端项目来源：前端项目目录结构