构建前端项目

mindwind 发布于2019-08-23 13:51 / 1993人阅读

摘要：解决思路服务器端渲染服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。

分离

为什么需要 “前后端分离、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中间层的模板输出。

idc机房托管云服务器前端构建如何构建java项目前端项目前端项目视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99670.html

如何构建大型的前端项目

摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。如何构建大型的前端项目 1. 搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：自动化构建代码，比如打包、压缩、上传等功能本地开发与调试，并有热替换与...

lykops 2019-08-29 16:56 评论0 收藏0
如何构建大型的前端项目

摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。如何构建大型的前端项目 1. 搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：自动化构建代码，比如打包、压缩、上传等功能本地开发与调试，并有热替换与...

plokmju88 2019-08-23 12:18 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0
《从零构建前后分离的web项目》：前端了解过关了吗？前端基础架构和硬核介绍

摘要：前端准备前端了解过关了吗前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解，并且最好带有一定的技术前瞻性，好的技术架构可能日后会方便的扩展，减少重构的次数，即使重构也不需要大动干戈，我通常选型技术栈会参考以下三 # 前端准备：前端了解过关了吗？前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/...

SwordFly 2019-08-29 16:37 评论0 收藏0