十年后WEB架构

现在是北京时间的2016年01月07日16:32:35,准备开始整理下十年后项目的架构,主要是WEB。大致上使用了baidu的脑图,下面的链接可以打开到具体的页面查看脑图(如果打不开或者错误,请刷新页面重试下)。

版本 1.0.0

作者 TuzK1ss

更新 2016-01-07

1、十年后产品

产品介绍 : 十年后是 …

首先是整个十年后产品的的架构:

image

脑图地址为: 地址

十年后的产品主要分为三大块:

1、Server (服务端)

服务端主要是服务器(apache),数据库(mysql),后台(php)等。

2、Web (网页端)

网页端主要是两个站点,一个正式服,一个测试服

3、App (应用端)

App端主要分为Android和iOS客户端。

2、十年后WEB架构

首先是十年后WEB的及架构

十年后WEB架构

百度脑图地址为 : 地址

十年后WEB主要分为以下几块:

1、开发语言

主要使用了HTML, CSS, Javascript,不过新的采用的CSS的预处理器SASS,可以在最大程度上重用代码和管理代码。

2、第三方类库 (主要)

WEB主要使用一些Javascript的第三方类库:

  • jQuery.js 基础类库
  • require.js 基础模块化类库
  • timeline.js 时间轴类库
  • simditor.js HTML5日志编辑器类库
  • jQuery.fullPage.js 登陆页面全屏滚动类库
  • Zepto.js 移动端页面基础类库

    3、模板引擎

WEB中使用到了2中模板引擎,分别是:

WEB中使用AMD的加载方式,所以引入requrire.js作为加载js。

PS:在开发中会书写Javascript会同一使用UMD(Universal Module Definition)加载方式书写,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

(function (root, factory) {
'use strict';

if (typeof define === 'function' && define.amd) {

// 引入所需模块,例如 define(['jquery'], factory);
define([], factory);
} else if (module.export === 'Object') {

// 引入所需模块,例如 module.export = factory(require('jquery'));
module.export = factory();
} else {

// 引入所需模块,例如 root.module = factory(jQuery);
// 同时需要修改具体方法中的传入值,例如 (this, function ($){})
// 修改module name
root.module = factory();
}


}(this, function () {
'use strict';

// 创建具体的模块内容
var module = {
initialize : function () {
//
}
};

// 返回模块初始化话函数
return module.initialize();
}));

5、自动化构建

使用gulp来作为自动化构建工具,教程可参考 地址1地址2

主要使用到gulp作为自动化构建工具的功能有:

  • 编译SASS
  • 编译ES2015(后期)
  • 为静态文件添加md5后缀

    6、文件夹结构

·

├─ application (WEB应用文件夹啊)

| ├── … (其他文件夹)

| └── views (HTML页面)

├─ static (静态资源)

| ├── build (gulp编译之后自动生成的文件夹)

| ├── css (静态CSS文件)

| ├── images (静态图片文件)

| ├── sass (SCSS文件)

| ├── scripts (静态Javascript文件)

其中有些文件夹下面会存在三个子文件夹 :

  • common 通用文件
  • libs 第三方文件
  • view/core 页面文件/核心文件

    7、页面结构

还是看图比较直观吧:

image

3、十年后WEB系统功能

十年后WEB作为一个SNS的社交网站,主要分为 用户未登录用户已登录 的状态。

十年后WEB系统功能图

具体的脑图地址为: 地址

1、未登录

image

在未登录的情况下,用户可以注册,查看一些允许的页面。
如果该用户进行一些操作,例如点赞,评论等需要提示该用户登录或者注册。

2、登录

image

用户在登录情况下允许以下操作:

  • 查看公开的所有页面
  • 查看个人的消息通知(即来往)
  • 进行一系列的操作 (包括发布状态,点赞,评论等等)

未完待续…