项目参数:
开发平台:Mac/Windows/Linux
架构模式:前后端完全分离、纯静态方式、分层架构模块化
模块化方案:CommonJs+Webpack
技术栈: Html+CSS +JQuery+React+Sass……
开发工具: Sublime,Chrome,Charles/Fiddler
版本控制工具:Git
项目发布方式: shell脚本自动化发布
代理工具: Charles/Fiddler
语言环境:JQuery,Webpack,Nodejs,Git
需要安装的软件:NodeJs,Sublime,Chrome,Charlse……
架构设计 -- 分层架构
定义:把功能相似,抽象级别相近的实现进行分层隔离
优势:松散耦合(易维护、易复用、易扩展)
常见分层方式: MVC MVVM
架构设计 -- 模块化
定义:解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程
意义:解耦,可并行开发
模块化方案:AMD CMD CommonJS ES6
AMD: require.js
CMD: sea.js
区别:加载和实际运用不太一样
模块化的代码和业务代码一起
commonjs 语法结构简单,语法和业务是分开的
es6 兼容性不好
架构设计
逻辑层 主模块
子模块 子模块 子模块
数据层 service 服务器
工具层 工具
技术选型:(挑出主流方案 从稳定性、扩展性、运行速度、开发效率、兼容性等方面综合考虑)
a. 软件过程:(瀑布、螺旋、敏捷开发) 敏捷开发
b. 前后端分离: 完全分离,纯静态的模式
c. 构建工具:webpack (模块化方案:commonJS+webpack)
d. 框架:
e. 版本控制:git
f. 发布方式:
软件过程选择 -- 敏捷开发
(适用于多变的开发需求)
定义:以用户的需求进化为核心,采用迭代、循环渐进的方法进行软件开发
是一种迭代的意识和方法,而不是概念和工具
优点:能够应对满足不断变化的需求
不足:对团队成员的能力要求比较高
前后端分离方式 -- 不分离
前后端共用同一套项目目录,甚至页面内嵌js、css
本地开发环境搭建成本高
共同维护成本高
发布风险高
前后端分离方式 -- 部分分离
后端负责页面模板(JSP/Velocity/Freemarker)
本地开发环境搭建成本较高
更新页面模板仍需后端协助,效率不够高
需要前后端同时发布
前后端分离方式 -- 完全分离1
方案1: velocity,发布的时候同步到后端
优点:完全分离,能直接生成动态的模板,利于SEO
缺点:系统复杂度高,需要前后端同时发布
前后端分离方式 -- 完全分离2
方案2:纯静态html,完全通过接口做数据交互
优点:完全脱离后端模板,系统复杂度低
缺点:不太利于SEO
框架选型:
jQuery Angular Avalon Vue React
Css Less Sass
用户端:求稳、用户类型多样、有SEO要求,多页应用(用户端技术不能一味的追求新技术而忽略用户群体)
管理系统:求快、用户类型单一、无SEO要求(管理人员针对公司内部的开发人员,考虑简洁快速)
构建工具:
grunt gulp webpack
版本控制工具:
svn git
发布方式:
发布过程:拉取待发布的代码 编译打包 发布到线上机器上
域名分布:
html www./admin.
js+css s.
images img.
总结:
软件过程:敏捷开发
前后端分离:完全分离、纯静态方式
模块化方案:CommonJs+Webpack
框架选择:用户端如:jQuery+css, 管理端:React+Sass
版本控制: git
发布过程: 拉取代码 --- 编译打包 --- 发布到线上辑器
网友评论