最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

构建前端项目

XAMPP下载 admin 738浏览 0评论
 分离
为什么需要 “前后端分离、web服务器与static服务器分离”:

前端与后端耦合 (需求)
自动化、工程化的构建前端的代码 (基础条件)
模块化、组件化,项目共享代码 (过程)
浏览器运行速度 (硬件)
前后端分离具体:

工程分离
数据流分离
web服务器与static服务器分离:

web 服务器:存放运行后端 web 应用的程序,以及前端 html 文件(入口文件)
static 服务器:静态资源服务器,存放前端除 html 文件之外的其他资源文件,包括 js, css, images
web服务器与static服务器的缺点:

前端构建过程中会产生大量的冗余文件
前端人员能够直接接触到后端代码,也不够安全
静态资源会占用 web 服务器的资源和带宽
web服务器与static服务器的注意点:

多个项目共用同一个 static 服务器
保证静态资源的路径的正确
并行开发
本地化接口模拟、前后端并行开发

本地化接口模拟原因: 前端与后端耦合,web 前端程序依赖数据。

本地数据模拟的解决方案的思路:(更多项目是配合使用)

同等模拟服务器环境,就是依据文档,完全按照服务器的接口配置搭建本地的接口服务;
多环境配置&切换,就是从代码的层面配置多个环境(如 线上环境,本地环境),根据是在线上还是在本地切换不同的环境。
同等模拟服务器环境
mork json数据
RAML(RESTful API Modeling Language 即 RESTful API 建模语言)
Swagger
多环境配置&切换
把应用对接口的实现进行一次封装隔离 (fetch file)
更好的管理代码
开发过程中预定 3 个环境:0(线上环境 prod),1(本地模拟后台接口环境 dev),2(并行开发环境 uat)

规范
编码规范
项目结构规范
框架、工具规范
其他约定
编码规范
Code Guide

html: 缩进,标签,加载顺序
css: 缩进,换行,引号,注释
js: 缩进,换行,变量名称,括号,文档注释
项目结构规范
文件、目录命名规范,模块化分组规范,组件化规范

变量:
完整英文命名的用复数形式,缩写用单数形式
全部采用小写方式, 以下划线分隔
模块化分组规范:

/project/src/: 工作空间

index.html: html 入口文件

index.js: js 入口文件

index.(css|less|scss): 样式入口文件

js/: js 文件目录

js/ajax/: 对 ajax 封装的目录
js/util/: 工具类函数的目录
js/pages/: spa 应用页面目录
js/data/: 静态数据目录
js/tpl/: 模板目录
js/(event|view)/: 事件监听文件目录
data/: 本地 json 数据模拟

(css|less|scss)/: 样式文件目录

images/: 图片文件目录

components/: 组件目录(如果基于 react, vue 等组件化框架)

组件化规范:这里的组件化并不是指在代码、框架层面的组件化,而是在架构和规范层面的组件化
/project/src/component/hello/: hello 组件的工作空间

README.md

: 组件的说明,包括功能介绍、api文档、一些用例等等

index.js: 组件的入口文件,调用组件将使用如下的方式

demo/:用例目录

框架、工具规范
框架和 UI 库:

从最开始的时候要确定要技术选型,并且最好不要更改选定的框架和UI库,因为不同的框架,不同的UI库一般相互之间是不兼容的,同时用多个框架或UI库也是要尽量避免。

框架选型

jquery + bootstrap
react + ant-design | material-ui |
Semantic-UI

vue + element-ui | vux
工具规范:

eslint: 语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
其它约定
每个 js 文件不应该超过 400 行,超过就应该分块
每个 css 文件不应该超过 200 行,超过就应该分块
文档
目的
降低团队的协作成本和维护成本
提高开发效率和质量
开发人员的变动而产生较大的影响
形成文档内容
注释 JSDoc:放在方法或函数或类声明之前
业务逻辑: 比较复杂的业务逻辑不合适放在注释里,需要单独写逻辑文档
更新日志: 方便查找更新状态、时间、开发人员
备注: 额外有用的信息
/**
* 函数功能描述
*
* @param arg {type} 变量描述
* @return {type} 返回值作用描述
*/
SPA
SPA优点:

本地路由,由JS定义路由,根据路由渲染页面,控制跳转(最基本特点)
文件只会加载一次,最大限度重用文件,提升加载速度。
整个应用只有一个入口html文件,路由由前端控制,有时候需要后端配合
Hash Router
原理:location hash

http://www.example.com

-> index.html

http://www.example.com

-> 主页面
http://www.example.com/#/

-> 主页面
http://www.example.com/#/page1

-> page1 页面
http://www.example.com/#/page2

-> page2 页面
路由组件:

react-router
vue-router
page.js
director
按需加载
按需加载:

按照需要来加载不同的组件/文件
避免首页加载缓慢
react 全家桶:react + react-router + redux + redux-saga + react-redux + dva

react 全家桶 + ant-design 开发模板: antd-admin | ant-design-pro

SSR 和 node中间层
解决痛点:

使用SPA后,整个页面的渲染基本上都由前端JS动态渲染,搜索引擎的爬取不到,SEO实现 麻烦
电商类应用必须要使用。
解决思路:

服务器端渲染(SSR):服务器端和前端公用同一个应用,然后通过构建工具及配置,确定哪些组件需要再服务器端渲染,那些组件需要再客户端渲染。
node中间层:保留服务器端模板渲染的功能,但是由node程序来代替后端语言模板渲染,后端语言与node程序只做数据交互。
SSR
服务器端渲染,由框架与构建工具配合,并依据一定的项目结构和编码方式,共同运行。

next.js: 服务器端渲染 react 组件,使用方法用Next.js快速上手React服务器渲染
nuxt.js: 服务器端渲染 vue 组件,使用方法nuxt.js

node 中间层
从NodeJS搭建中间层再谈前后端分离

淘宝前后端分离实践

node中间层做开发,难点如何让前后端分离的两个项目协同开发与调试:

一般web项目开发时有热更新(Hot Reloading)与热替换(Hot Replacing)功能
一般node项目开发时有 nodemon功能
能将两者结合起来开发,不管改动web项目文件还是node项目文件,浏览器页面都能够自动刷新,就可以在本地调试node中间层的模板输出。

转载请注明:XAMPP中文组官网 » 构建前端项目

您必须 登录 才能发表评论!