Single-Page App Development

单页应用开发教程
NEJ Technical Topic
genify(caijf@corp)

内容
• 需求说明
• 系统分解
• 构建目录
• 模块实现
• 系统整合
• 打包发布

需求说明
• 系统由五个对外可
访问（通过地址栏
可直接定位）模块
组成

需求说明
• 日志管理
– 日志：日志列表，可切换收件箱/草稿箱/回收站/标签
– 标签：标签列表，可转至日志按标签查看列表
• 博客设置
– 账号管理
• 基本资料：用户基本资料设置表单
• 个人经历：个人经历填写表单
– 权限设置：权限设置表单

系统分解
• 绘制模块层级关系图
日志管理
日志标签
博客设置
账号管理
基本资料个人经历
权限设置
系统
日志标签
权限设置

系统分解
• 抽象出模块之间的依赖关系
日志管理
日志标签
博客设置
账号管理
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu

系统分解
• 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag/
setting
/ account permission
/ edu
/
/
/
/ /

系统分解
• 确定可访问模块注册结点
m
blog
list tag/
setting
/ edu
/
/
/
/ /日志标签基本资料
个人经历
权限设置

系统分解
• 确定布局模块注册结点
m
blog
list tag/
setting
/ edu
/
/
/
/ /
blog
account
setting
m

系统分解
• 映射模块功能
m
blog
list tag/
setting
/ edu
/
/
/
/ /
m
setting
account
/

系统分解
• 模块分解原则：模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
?
blog
tag listbox
/
/ /
class
/ //?/blog/box//?/blog/tag//?/blog/list//?/blog/class/

系统分解
• 分解结果
– 对外模块
– 私有模块
m
blog
list tag/
setting
/ edu
/
/
/
/ /
?
blog
tag listbox
/
/ /
class
/ /
tab setting
tab account
tab
/
/
/

系统分解
• 绘制模块功能规范表
名称描述
模块UMI /m
实现文件 module/layout/system/index.html
模块构造 wd.m.l._$$ModuleLayoutSystem
模块功能
1. 提供左右布局容器
2. 日志管理/博客设置切换选中状态同步（组合/?/tab/）

构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
release.conf
release.bat
app.html
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
• 项目目录

构建目录
• 单元目录
unit test
index.html
index.js
test.html
index.css
模块测试
模块结构
模块逻辑
模块样式

构建目录
• 模块目录
module tab
layout system
blog
blog.list
setting
setting.account

模块实现
• 结构
– 将模块相关的静态结构拆分成若干NEJ的模板
<textarea name="js"
data-src="../js/p0.js,../js/p1.js"
data-version="20120214">
</textarea>
js 脚本资源模板
css 样式资源模板
html 嵌套模板资源
资源地址用data-src指定，多个地址用
逗号分隔（除html模板）
js/css类型资源，模板内容可内联代码data-version指定资源版本信息
<textarea name="ntp" id="mdl-ntp-0">
</textarea>
jst JST模板
txt 纯文本模板
ntp 节点模板
使用id标识标识模板

模块实现
• 结构
<meta charset="utf-8"/>
<textarea name="txt" id="module-id-0">
<div class="w-ltb">
<a class="itm" href="#/blog/" data-id="/blog/">日志管理</a>
<a class="itm" href="#/setting/" data-id="/setting/">博客设置</a>
</div>
</textarea>

<textarea name="css" data-src="./index.css"></textarea>
<textarea name="js" data-src="./index.js"></textarea>

模块实现
• 逻辑
– 依赖{lib}util/dispatcher/module.base.js，从
nej.ut._$$AbstractModule扩展一个项目的模块基
类，完成项目中模块特有属性、行为的抽象
/*
* ------------------------------------------
* 项目模块基类实现文件
* @version 1.0
* @author genify(caijf@corp.netease.com)
* ------------------------------------------
*/
define(['{lib}util/dispatcher/module.base.js'],
function(){
// variable declaration
var _ = NEJ.P,
_t = _('nej.ut'),
_p = _('wd.m'),
_pro;
if (!!_p._$$Module) return;
/**
* 项目模块基类对象
* @class {wd.m._$$Module}
* @extends {nej.ut._$$AbstractModule}
* @param {Object} 可选配置参数，已处理参数列表如下所示
*/
_p._$$Module = NEJ.C();
_pro = _p._$$Module._$extend(_t._$$AbstractModule);
/**
* 操作
* @param {Object}
* @return {Void}
*/
_pro.__doSomething = function(_args){
// TODO
};
});

模块实现
• 逻辑
– 从项目的模块基类扩展具体模块，并按照模块状态
实现具体模块的业务逻辑
– 模块状态
• 构建
• 显示
• 刷新
• 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh

模块实现
• 逻辑
– 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
– 模块最后使用nej.e._$regist接口注册模块到对应的
UMI或者UMI对应的别名
/*
* ------------------------------------------
* 项目模块实现文件
* @version 1.0
* ------------------------------------------
*/
define(['{pro}module/module.js'],
function(){
var _ = NEJ.P,
_e = _('nej.e'),
_m = _('wd.m'),
_p = _('wd.m.l'),
_pro;
if (!!_p._$$ModuleDemo) return;
/**
* 项目模块对象
* @class {wd.m.l._$$ModuleDemo}
* @extends {wd.m._$$Module}
* @param {Object} 可选配置参数
*/
_p._$$ModuleDemo = NEJ.C();
_pro = _p._$$ModuleDemo._$extend(_m._$$Module);
/**
* 构建模块，主要处理以下业务逻辑
* - 构建模块结构
* - 缓存后续需要使用的节点

模块实现
• 逻辑
/*
* ------------------------------------------
* 日志管理、权限设置切换同步模块实现文件
* @version 1.0
* ------------------------------------------
*/
define(['{pro}module/module.js'
,'{lib}util/tab/tab.view.js'],
function(){
var _ = NEJ.P,
_o = NEJ.O,
_e = _('nej.e'),
_t = _('nej.ut'),
_d = _('wd.d'),
_m = _('wd.m'),
_p = _('wd.m.b'),
_pro;
if (!!_p._$$ModuleSystemTab) return;
/**
* 日志管理、权限设置切换同步模块
* @class {wd.m._$$ModuleSystemTab}
* @extends {nej.ut._$$AbstractModuleTagList}
* @param {Object} 可选配置参数，已处理参数列表如下所示
*/
_p._$$ModuleSystemTab = NEJ.C();
_pro = _p._$$ModuleSystemTab._$extend(_m._$$Module);
/**
* 构建模块
* @return {Void}
*/

模块实现
• 测试
– 创建html页面，使用模板引入模块实现文件
– 模块放至document.mbody指定的容器中

<div id="template-box" style="display:none;">
<textarea name="html" data-src="../index.html"></textarea>
</div>
define(['{lib}util/dispatcher/test.js'],
function(){
document.mbody = 'module-id-0';
// test module
NEJ.P('nej.e')._$testByTemplate('template-box');
});

系统整合
• 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag/
setting
/ edu
/
/
/
/ /
module/layout/system/index.html
module/layout/blog/index.html
module/layout/blog.list/index.html
module/blog/tag/index.html
module/layout/setting/index.html
module/layout/setting.account/index.html
module/setting/profile/index.html
module/setting/edu/index.html
module/setting/permission/index.html
?
blog
tag listbox
/
/ /
class
/ /
tab setting
tab account
tab
/
/
/
module/tab/index.html
module/blog/list.box/index.html
module/blog/list.tag/index.html
module/blog/list.class/index.html
module/blog/list/index.html
module/setting/tab/index.html
module/setting/account.tab/index.html

系统整合
• 应用入口实现
– 使用nej.e._$startup启动应用
– 启动支持输入规则和模块配置
nej.e._$startup({
// 规则配置
// http://nej.netease.com/document/class/#nej.ut._$$Dispatcher.html|_$rule
rules:{
rewrite:{
// 重写规则配置
},
title:{
// 标题配置
},
alias:{
// 别名配置
// 建议模块实现文件中的注册采用这里配置的别名
}
},
// 模块配置
// http://nej.netease.com/document/class/#nej.ut._$$Dispatcher.html|_$regist
modules:{
// 模块UMI对应实现文件的映射表
// 同时完成模块的组合
}
});

系统整合
• 启动配置
– 规则配置
http://nej.netease.com/document/class/#nej.ut._$$Dispatcher.html|_$rule
– 模块配置
http://nej.netease.com/document/class/#nej.ut._$$Dispatcher.html|_$regist
rules:{
rewrite:{
'404':'/m/blog/list/',
'/m/blog/list/':'/m/blog/',
'/m/setting/account/':'/m/setting/'
},
title:{
'/m/blog/tag/':'日志标签',
'/m/blog/list/':'日志列表',
'/m/setting/permission/':'权限管理',
'/m/setting/account/':'基本资料',
'/m/setting/account/edu/':'教育经历'
},
alias:{
'system-tab':'/?/tab/',
'blog-tab':'/?/blog/tab/',
'blog-list-box':'/?/blog/box/',
'blog-list-tag':'/?/blog/tag/',
'blog-list-class':'/?/blog/class/',
'blog-list':'/?/blog/list/',
'setting-tab':'/?/setting/tab/',
'setting-account-tab':'/?/setting/account/tab/',
'layout-system':'/m',
'layout-blog':'/m/blog',
'layout-blog-list':'/m/blog/list/',
'layout-setting':'/m/setting',
'layout-setting-account':'/m/setting/account',
'blog-tag':'/m/blog/tag/',
'setting-edu':'/m/setting/account/edu/',
'setting-profile':'/m/setting/account/',
'setting-permission':'/m/setting/permission/'
}
}
modules:{
'/?/tab/':'module/tab/index.html',
'/?/blog/tab/':'module/blog/tab/index.html',
'/?/blog/box/':'module/blog/list.box/index.html',
'/?/blog/tag/':'module/blog/list.tag/index.html',
'/?/blog/class/':'module/blog/list.class/index.html',
'/?/blog/list/':'module/blog/list/index.html',
'/?/setting/tab/':'module/setting/tab/index.html',
'/?/setting/account/tab/':'module/setting/account.tab/index.html',
'/m':{
module:'module/layout/system/index.html',
composite:{
tab:'/?/tab/'
}
},
'/m/blog':{
module:'module/layout/blog/index.html',
composite:{
tab:'/?/blog/tab/'
}
},
'/m/blog/list/':{
module:'module/layout/blog.list/index.html',
composite:{
box:'/?/blog/box/',
tag:'/?/blog/tag/',
list:'/?/blog/list/',
clazz:'/?/blog/class/'
}
},
'/m/blog/tag/':'module/blog/tag/index.html',
'/m/setting':{
module:'module/layout/setting/index.html',
composite:{
tab:'/?/setting/tab/'
}
},
'/m/setting/account':{
module:'module/layout/setting.account/index.html',
composite:{
tab:'/?/setting/account/tab/'
}
},
'/m/setting/account/':'module/setting/profile/index.html',
'/m/setting/account/edu/':'module/setting/edu/index.html',
'/m/setting/permission/':'module/setting/permission/index.html'
}

系统整合
• 模块组合
– 模块通过__export属性开放组合模块的容器
_pro.__doBuild = function(){
this.__body = _e._$html2node(
_e._$getTextTemplate('module-id-l2')
);
// 0 - box select
// 1 - class list box
// 2 - tag list box
// 3 - sub module box
var _list = _e._$getByClassName(this.__body,'j-flag');
this.__export = {
box:_list[0],
clazz:_list[1],
tag:_list[2],
list:_list[3],
parent:_list[3]
};
};

系统整合
• 模块组合
– 通过composite配置模块组合
'/m/blog/list/':{
module:'module/layout/blog.list/index.html',
composite:{
box:'/?/blog/box/',
tag:'/?/blog/tag/',
list:'/?/blog/list/',
clazz:'/?/blog/class/'
}
}

系统整合
• 模块组合
– composite
composite:{
onshow:{
// 模块onshow时组合
// 组合的模块在模块onrefresh时不会刷新
},
onrefresh{
// 模块onshow时组合
// 组合的模块在模块onrefresh时也同时会刷新
}
// 这里配置的组合模块等价于onrefresh中配置的模块
}

系统整合
• 完整入口代码

打包发布
• 打包环境
– 安装NodeJS环境
– 获取NEJPublisher打包工具
– 认真阅读打包工具使用手册manual.docx
– 修改打包配置文件（配置参数说明参阅使用手册）
– 执行打包命令

打包发布
• 打包配置
publisher
release.conf
release.bat
# 打包配置文件
# × 每行第一个非空字符为 # 则表示该行为注释
# × 配置参数使用 KEY = VALUE 格式
# × 配置参数为路径的，如果是相对路径则必须以 ./ 、 ../ 开始
# × 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
# × 配置参数名称忽略大小写，即cfg_dir_webroot等价于CFG_DIR_WEBROOT
# 路径相关配置
# WEB根路径，必须配置，如果是相对路径则相对于当前配置文件路径(即.conf文件所在目录)
DIR_WEBROOT = D:/Workspace/test/nej/project-gbk/
# 项目HTML文件根路径，默认为DIR_WEBROOT配置信息
#DIR_SOURCE = ./src/html/
# 打包输出路径，默认为DIR_WEBROOT配置信息
#DIR_OUTPUT = ./pub/
# 静态文件输出目录，默认为DIR_OUTPUT配置信息
DIR_OUTPUT_STATIC = ./s/
# 项目服务器端模板文件根路径
# 服务器端模板文件确保页面所需的CSS、JS文件的引用均出现在模板文件中
DIR_SOURCE_TP = ./template/
# 项目服务器端模板输出路径，默认为DIR_SOURCE_TP配置信息
DIR_OUTPUT_TP = ./tpl/
# 静态资源路径，默认为WEB根路径下的res目录
#DIR_STATIC = ./res/
node %~dp0publisherreleasesrcrelease.js -c=%~dp0release.conf

打包发布
• 页面添加打包指令
– STYLE：打包后样式插入位置
– VERSION：模块版本配置输出位置
– DEFINE：打包后脚本插入位置

打包发布
• 模块指令
– TEMPLATE
– MODULE

打包发布
• TEMPLATE

<textarea name="html" data-src="module/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.box/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.class/index.html"></textarea>
<textarea name="html" data-src="module/layout/system/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog.list/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting.account/index.html"></textarea>
<textarea name="html" data-src="module/blog/tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list/index.html"></textarea>
<textarea name="html" data-src="module/setting/tab/index.html"></textarea>
<textarea name="html" data-src="module/setting/account.tab/index.html"></textarea>

</div>

打包发布
• MODULE

<textarea name="html" data-src="module/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/tab/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.box/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list.class/index.html"></textarea>
<textarea name="html" data-src="module/layout/system/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog/index.html"></textarea>
<textarea name="html" data-src="module/layout/blog.list/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting/index.html"></textarea>
<textarea name="html" data-src="module/layout/setting.account/index.html"></textarea>
<textarea name="html" data-src="module/blog/tag/index.html"></textarea>
<textarea name="html" data-src="module/blog/list/index.html"></textarea>
<textarea name="html" data-src="module/setting/tab/index.html"></textarea>
<textarea name="html" data-src="module/setting/account.tab/index.html"></textarea>

</div>

Single-Page App Development

Recommended

Recommended

More Related Content

Similar to Single-Page App Development

Similar to Single-Page App Development (20)

Single-Page App Development

Editor's Notes