前端架构设计分析
2016-07-22 本文已影响1008人
易则知
水木资本网 www.svmuu.com
SvmuuWeb
SvmuuWeb是针对PC端开发搭建的工程化架构
目前系统平台发现的问题
-
三要素问题：部分页面的css,html,js混合在一起，不便于优化，管理及后期维护，需分离解耦。 -
页面加载优化问题：有些页面加载了不必要的js及css文件，还有多次http资源请求，造成加载速度慢，影响用户体验，浪费网络资源，需采用按需加载模式及压缩合并相关资源文件。 -
代码重用问题： 部分功能页面代码重复很多，后期需要组件化，模块化来解决这部分问题，便于管理和开发。 -
变量问题：发现系统中多采用的是全局变量，这样会造成命名冲突、代码的脆弱性、难以预测、意外的全局变量不可控等问题。后期采用命名空间，闭包等来解决此类问题。 -
文件结构问题：后期规范这块。 -
依赖js库版本管理：后期采用grunt前端工具来优化版本管理，压缩合并，打包等这一流程。 -
未发现问题：在后期开发中遇到的问题，找合适解决方案。
目的----提升性能和编码效率，便于管理及后期维护扩展
工程化 | 模块化 | 组件化 | 规范化
-
提高前端开发效率前端一些常见的任务，如js库的下载和管理、css文件的转换、js文件合并压缩、js测试的执行等，要把这些跟业务无关的问题都在架构层面处理掉。 -
项目模块化管理采用AMD异步加载模式，按需及并行加载js库，方便开发，扩展及维护。 -
工程化打包最终产出标准的前端模块。
采用的技术栈
-
Grunt– Js任务管理工具，通过各种插件对项目进行各种操作，比如文件转换、运行测试、打包部署等实现自动化。 -
Bower– Js库依赖管理工具。当你需要jquery时，不需要手动下载，只需要执行bower install jquery -
RequireJs– Js库加载管理，及模块化支持。AMD异步加载模式，可以按需及并行加载js库，可以把我们的代码以模块化的方式组织。 -
jquery– 一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). -
backbone– 构建javascript应用程序的一个优秀的类库。他简洁、轻量级、功能实在,采用MVC模式，本身提供了模型、控制器和视图从而我们应用程序的骨架便形成。 -
sass一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 -
第三方插件– ......
文件大小
Backbone.js 6.5
RequireJs 96kb
jquery 84kb
介绍说明
目录介绍：
--架构目录
svmuu
└── dist
└── grunt
│ ├── clean.js
│ ├── connect.js
│ ├── copy.js
│ ├── watch.js
│ ├── ...
└── documents
└── node_modules
└── src
└── .bowerc
└── bower.json
└── Gruntfile.js
└── package.json
└── README.md
-
dist放置打包处理后的工程 -
gruntgrunt各功能任务的配置 -
src文件夹存放的是所有的的源代码和其他静态资源（比如图片，iconfont) -
documents存放开发文档相关 -
node_modulesgrunt依赖工具库下载 -
Gruntfilegrunt入口配置 -
READMEmarkdown文件
--开发环境目录
src
└── data
└── frm
│ ├── base
│ │ ├── jquery
│ │ ├── requirejs
│ │ ├── backbone
│ │ ├── ....
│ │
│ ├── static
│ │ ├── css
│ │ ├── js
│ │ ├── images
│ │ ├── html
│ │
│ ├── locale
│ │ ├── ...
│ │
│ ├── third-part
│ │ ├── ...
│
└── modules
│ ├── chatroom
│ │ ├── js
│ │ ├── tpl
│ │ ├──index.html
-
data项目所需数据文件夹，如json，txt等格式的配置数据 -
frm项目依赖文件 -
modules模块及页面逻辑视图文件夹 -
img放置用到的图标 -
js放置页面js文件 -
locale放置国际化资源文件 -
third-part放置第三方插件
--打包目录
/dist
/frm
/base
/smft.min.js
/common.js
/require.min.js
/static
/css
/images
/js
/temp
/third-part
/weditor
/...
/modules
/common
/workman
/
/chatroom
/js
/page.js
/...
-
frm项目页面依赖文件 -
modules项目功能模块 -
common公用模块及组件 -
chatroom具体功能模块
安装编译
环境准备
- nodejs
- ruby (api生成需要)
安装设置环境
下载安装node
安装grunt命令
npm install -g grunt-cli
安装bower命令
npm install -g bower --save
安装工具插件
npm install -g copy --save
...
安装依赖js库
npm install -g requirejs --save
...
运行部署命令
- 运行：grunt start
- 打包部署：grunt build
- ...
使用示例
典型的index页代码
<!DOCTYPE html>
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>标题</title>
<link href="frm/libs/dist/css/svmuu-default.min.css" rel="stylesheet">
<script type="text/javascript" src="frm/libs/dist/js/svmuu-all.min.js"></script>
</head>
<body>
</body>
<script data-main="svmuu/chatroom/js/main" defer="defer" src="frm/requirejs/require.js"></script>
</html>
Important
- <!DOCTYPE html>声明是必须的，此声明必须位于第一行，此声明之前不能出现任何内容（包括空格），否则浏览器无法检测。
- 针对IE的注释是必不可少的；
- X-UA-Compatible元标签的配置是必不可少的，尤其是针对IE的配置，可以强制IE使用“标准模式”渲染页面，而不是以“怪异模式”；
- renderer元标签用来兼容国产的一些垃圾双核浏览器，如360等，强制它们以chrome内核渲染页面；
- viewport元标签用来支持响应式设计；
- svmuu-default.min.css 为系统平台公用css压缩文件；
- svmuu-all.min.js 为系统平台公用js压缩文件；
- data-main 为模块化加载的入口文件配置；
- ...
组件库
- 第三方组件
- 自定义组件
- 另：尽量引用成熟稳定的第三方插件以及开发自己的自定义组件。
优化方面
- 尽可能的减少http请求数
- 将js和css独立成外部文件
- 压缩js,css，图片
- Css放在页面的上方，js放在页面下方
- 移除重复的脚本
- ...
编程规范方面
- 参照js编程规范文档；
- 模块化定义规范；
- 组件编写规范；
- css样式规范；
- 注：规范文档后面有文档产出。
随着公司业务的增加及成熟，会持续调整并完善前端框架，优化前端开发环境及业务合理化，代码可维护性，扩展性，网站性能等方面持续改进。
《未完待续...》
