Single-Page App Development
43
单页应用开发教程 NEJ Technical Topic genify(caijf@corp)
Transcript of Single-Page App Development
单页应用开发教程
NEJ Technical Topic
genify(caijfcorp)
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
需求说明
bull 系统由五个对外可
访问（通过地址栏
可直接定位）模块
组成
需求说明
bull 日志管理
ndash 日志日志列表可切换收件箱草稿箱回收站标签
ndash 标签标签列表可转至日志按标签查看列表
bull 博客设置
ndash 账号管理
bull 基本资料用户基本资料设置表单
bull 个人经历个人经历填写表单
ndash 权限设置权限设置表单
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统分解
bull 绘制模块层级关系图
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
日志 标签
基本资料 个人经历
权限设置
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
需求说明
bull 系统由五个对外可
访问（通过地址栏
可直接定位）模块
组成
需求说明
bull 日志管理
ndash 日志日志列表可切换收件箱草稿箱回收站标签
ndash 标签标签列表可转至日志按标签查看列表
bull 博客设置
ndash 账号管理
bull 基本资料用户基本资料设置表单
bull 个人经历个人经历填写表单
ndash 权限设置权限设置表单
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统分解
bull 绘制模块层级关系图
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
日志 标签
基本资料 个人经历
权限设置
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
需求说明
bull 系统由五个对外可
访问（通过地址栏
可直接定位）模块
组成
需求说明
bull 日志管理
ndash 日志日志列表可切换收件箱草稿箱回收站标签
ndash 标签标签列表可转至日志按标签查看列表
bull 博客设置
ndash 账号管理
bull 基本资料用户基本资料设置表单
bull 个人经历个人经历填写表单
ndash 权限设置权限设置表单
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统分解
bull 绘制模块层级关系图
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
日志 标签
基本资料 个人经历
权限设置
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
需求说明
bull 日志管理
ndash 日志日志列表可切换收件箱草稿箱回收站标签
ndash 标签标签列表可转至日志按标签查看列表
bull 博客设置
ndash 账号管理
bull 基本资料用户基本资料设置表单
bull 个人经历个人经历填写表单
ndash 权限设置权限设置表单
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统分解
bull 绘制模块层级关系图
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
日志 标签
基本资料 个人经历
权限设置
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统分解
bull 绘制模块层级关系图
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
日志 标签
基本资料 个人经历
权限设置
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 绘制模块层级关系图
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
日志 标签
基本资料 个人经历
权限设置
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 抽象出模块之间的依赖关系
日志管理
日志 标签
博客设置
账号管理
基本资料 个人经历
权限设置
系统
blog
list tag
setting
account
profile education
permission
systemm
blog
list tag
setting
account permission
profile edu
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 根据UMI规则格式化依赖关系树
m
blog
list tag
setting
account permission
profile edu
m
blog
list tag
setting
account permission
edu
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 确定可访问模块注册结点
m
blog
list tag
setting
account permission
edu
日志 标签 基本资料
个人经历
权限设置
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 确定布局模块注册结点
m
blog
list tag
setting
account permission
edu
blog
account
setting
m
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 映射模块功能
m
blog
list tag
setting
account permission
edu
m
setting
account
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 模块分解原则模块之间无耦合性
收件箱切换
类别列表
标签列表日志列表
blog
tag listbox
class
blogboxblogtagbloglistblogclass
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 分解结果
ndash 对外模块
ndash 私有模块
m
blog
list tag
setting
account permission
edu
blog
tag listbox
class
tab setting
tab account
tab
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统分解
bull 绘制模块功能规范表
名称 描述
模块UMI m
实现文件 modulelayoutsystemindexhtml
模块构造 wdml_$$ModuleLayoutSystem
模块功能1 提供左右布局容器2 日志管理博客设置切换选中状态同步（组合tab）
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
构建目录
Project
deploy
webroot
publisher
res
src css
html
javascript
module
releaseconf
releasebat
apphtml
打包工具
打包配置
打包指令
静态资源
前端源码
模块实现
系统入口
bull 项目目录
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
构建目录
bull 单元目录
unit test
indexhtml
indexjs
testhtml
indexcss
模块测试
模块结构
模块逻辑
模块样式
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
构建目录
bull 模块目录
module tab
layout system
blog
bloglist
setting
settingaccount
blog tab
list
listbox
listtag
tag
setting tab
accounttab
profile
edu
permission
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 结构
ndash 将模块相关的静态结构拆分成若干NEJ的模板
lttextarea name=js data-src=jsp0jsjsp1js data-version=20120214gt lttextareagt
js 脚本资源模板css 样式资源模板html 嵌套模板资源
资源地址用data-src指定多个地址用逗号分隔（除html模板）
jscss类型资源模板内容可内联代码data-version指定资源版本信息
lttextarea name=ntp id=mdl-ntp-0gt
lttextareagt
jst JST模板txt 纯文本模板ntp 节点模板
使用id标识标识模板
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 结构
ltmeta charset=utf-8gtlttextarea name=txt id=module-id-0gt ltdiv class=w-ltbgt
lta class=itm href=blog data-id=bloggt日志管理ltagt
lta class=itm href=setting data-id=settinggt博客设置ltagt ltdivgtlttextareagtlt-- TEMPLATE --gtlttextarea name=css data-src=indexcssgtlttextareagtlttextarea name=js data-src=indexjsgtlttextareagtlt-- TEMPLATE --gt
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 逻辑
ndash 依赖libutildispatchermodulebasejs从
nejut_$$AbstractModule扩展一个项目的模块基
类完成项目中模块特有属性行为的抽象
------------------------------------------
项目模块基类实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([libutildispatchermodulebasejs]function() variable declaration var _ = NEJP _t = _(nejut) _p = _(wdm) _pro if (_p_$$Module) return
项目模块基类对象 class wdm_$$Module extends nejut_$$AbstractModule
param Object 可选配置参数已处理参数列表如下所示 _p_$$Module = NEJC() _pro = _p_$$Module_$extend(_t_$$AbstractModule)
操作 param Object return Void _pro__doSomething = function(_args) TODO )
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 逻辑
ndash 从项目的模块基类扩展具体模块并按照模块状态
实现具体模块的业务逻辑
ndash 模块状态
bull 构建
bull 显示
bull 刷新
bull 隐藏
_$$AbstractModule
__doBuild
__onShow
__onHide
__onRefresh
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 逻辑
ndash 具体模块根据实际需求完成四个状态对应方法的重
写及模块特有业务逻辑的实现
ndash 模块最后使用neje_$regist接口注册模块到对应的
UMI或者UMI对应的别名
------------------------------------------
项目模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs]function() variable declaration var _ = NEJP _e = _(neje) _m = _(wdm) _p = _(wdml) _pro if (_p_$$ModuleDemo) return
项目模块对象 class wdml_$$ModuleDemo extends wdm_$$Module
param Object 可选配置参数 _p_$$ModuleDemo = NEJC() _pro = _p_$$ModuleDemo_$extend(_m_$$Module)
构建模块主要处理以下业务逻辑
- 构建模块结构
- 缓存后续需要使用的节点
- 初始化需要使用的组件的配置信息 return Void _pro__doBuild = function() this__supDoBuild() TODO
显示模块主要处理以下业务逻辑
- 添加事件
- 分配组件
- 处理输入信息
param Object 输入参数 return Void _pro__onShow = function(_options) this__supOnShow(_options) TODO
刷新模块主要处理以下业务逻辑
- 分配组件分配之前需验证
- 处理输入信息
- 同步状态
- 载入数据 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) TODO
隐藏模块主要处理以下业务逻辑
- 回收事件
- 回收组件
- 尽量保证恢复到构建时的状态 return Void _pro__onHide = function() this__supOnHide() TODO notify dispatcher _e_$regist( umi_or_alias _p_$$ModuleDemo ))
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 逻辑
------------------------------------------
日志管理权限设置切换同步模块实现文件 version 10 author genify(caijfcorpneteasecom) ------------------------------------------ define([promodulemodulejs libutiltabtabviewjs]function() variable declaration var _ = NEJP _o = NEJO _e = _(neje) _t = _(nejut) _d = _(wdd) _m = _(wdm) _p = _(wdmb) _pro if (_p_$$ModuleSystemTab) return
日志管理权限设置切换同步模块 class wdm_$$ModuleSystemTab extends nejut_$$AbstractModuleTagList
param Object 可选配置参数已处理参数列表如下所示 _p_$$ModuleSystemTab = NEJC() _pro = _p_$$ModuleSystemTab_$extend(_m_$$Module)
构建模块 return Void _pro__doBuild = function() this__supDoBuild() this__body = _e_$html2node( _e_$getTextTemplate(module-id-0) ) this__tbview = _t_$$TabView_$allocate( list_e_$getChildren(this__body) oncheckthis__doCheckMatchEQ_$bind(this) )
刷新模块
param Object 配置信息 return Void _pro__onRefresh = function(_options) this__supOnRefresh(_options) this__tbview_$match( this__doParseUMIFromOpt(_options) )
验证选中项
param Object 事件信息 return Void _pro__doCheckMatchEQ = function(_event) _eventmatched = _eventtargetindexOf(_eventsource)==0 notify dispatcher _e_$regist(system-tab_p_$$ModuleSystemTab))
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
模块实现
bull 测试
ndash 创建html页面使用模板引入模块实现文件
ndash 模块放至documentmbody指定的容器中
lt-- template box --gtltdiv id=template-box style=displaynonegt lttextarea name=html data-src=indexhtmlgtlttextareagtltdivgt
define([libutildispatchertestjs] function() documentmbody = module-id-0 test module NEJP(neje)_$testByTemplate(template-box) )
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 将UMI依赖关系树中需要注册模块的节点同模
块实现文件进行映射
m
blog
list tag
setting
account permission
edu
modulelayoutsystemindexhtml
modulelayoutblogindexhtml
modulelayoutbloglistindexhtml
moduleblogtagindexhtml
modulelayoutsettingindexhtml
modulelayoutsettingaccountindexhtml
modulesettingprofileindexhtml
modulesettingeduindexhtml
modulesettingpermissionindexhtml
blog
tag listbox
class
tab setting
tab account
tab
moduletabindexhtml
modulebloglistboxindexhtml
modulebloglisttagindexhtml
modulebloglistclassindexhtml
modulebloglistindexhtml
modulesettingtabindexhtml
modulesettingaccounttabindexhtml
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 应用入口实现
ndash 使用neje_$startup启动应用
ndash 启动支持输入规则和模块配置
neje_$startup(
规则配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule rules rewrite
重写规则配置 title
标题配置 alias
别名配置
建议模块实现文件中的注册采用这里配置的别名
模块配置 httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist modules
模块UMI对应实现文件的映射表
同时完成模块的组合 )
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 启动配置
ndash 规则配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$rule
ndash 模块配置httpnejneteasecomdocumentclassnejut_$$Dispatcherhtml|_$regist
rules rewrite 404mbloglist mbloglistmblog msettingaccountmsetting title
mblogtag日志标签
mbloglist日志列表
msettingpermission权限管理
msettingaccount基本资料
msettingaccountedu教育经历 alias system-tabtab blog-tabblogtab blog-list-boxblogbox blog-list-tagblogtag blog-list-classblogclass blog-listbloglist setting-tabsettingtab setting-account-tabsettingaccounttab layout-systemm layout-blogmblog layout-blog-listmbloglist layout-settingmsetting layout-setting-accountmsettingaccount blog-tagmblogtag setting-edumsettingaccountedu setting-profilemsettingaccount setting-permissionmsettingpermission
modules tabmoduletabindexhtml blogtabmoduleblogtabindexhtml blogboxmodulebloglistboxindexhtml blogtagmodulebloglisttagindexhtml blogclassmodulebloglistclassindexhtml bloglistmodulebloglistindexhtml settingtabmodulesettingtabindexhtml settingaccounttabmodulesettingaccounttabindexhtml m modulemodulelayoutsystemindexhtml composite tabtab mblog modulemodulelayoutblogindexhtml composite tabblogtab mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass mblogtagmoduleblogtagindexhtml msetting modulemodulelayoutsettingindexhtml composite tabsettingtab msettingaccount modulemodulelayoutsettingaccountindexhtml composite tabsettingaccounttab msettingaccountmodulesettingprofileindexhtml msettingaccountedumodulesettingeduindexhtml msettingpermissionmodulesettingpermissionindexhtml
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 模块组合
ndash 模块通过__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__bodyj-flag) this__export = box_list[0] clazz_list[1] tag_list[2] list_list[3] parent_list[3]
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 模块组合
ndash 通过composite配置模块组合
mbloglist modulemodulelayoutbloglistindexhtml composite boxblogbox tagblogtag listbloglist clazzblogclass
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 模块组合
ndash composite
composite onshow
模块onshow时组合
组合的模块在模块onrefresh时不会刷新 onrefresh
模块onshow时组合
组合的模块在模块onrefresh时也同时会刷新
这里配置的组合模块等价于onrefresh中配置的模块
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
系统整合
bull 完整入口代码
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
内容
bull 需求说明
bull 系统分解
bull 构建目录
bull 模块实现
bull 系统整合
bull 打包发布
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
打包发布
bull 打包环境
ndash 安装NodeJS环境
ndash 获取NEJPublisher打包工具
ndash 认真阅读打包工具使用手册manualdocx
ndash 修改打包配置文件（配置参数说明参阅使用手册）
ndash 执行打包命令
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
打包发布
bull 打包配置
publisher
releaseconf
releasebat
打包配置文件
times 每行第一个非空字符为 则表示该行为注释
times 配置参数使用 KEY = VALUE 格式
times 配置参数为路径的如果是相对路径则必须以 开始
times 配置参数中如无特殊说明使用的相对路径均相对于DIR_WEBROOT的路径
times 配置参数名称忽略大小写即cfg_dir_webroot等价于CFG_DIR_WEBROOT
路径相关配置
WEB根路径必须配置如果是相对路径则相对于当前配置文件路径(即conf文件所在目录)DIR_WEBROOT = DWorkspacetestnejproject-gbk
项目HTML文件根路径默认为DIR_WEBROOT配置信息DIR_SOURCE = srchtml
打包输出路径默认为DIR_WEBROOT配置信息DIR_OUTPUT = pub
静态文件输出目录默认为DIR_OUTPUT配置信息DIR_OUTPUT_STATIC = s
项目服务器端模板文件根路径
服务器端模板文件确保页面所需的CSSJS文件的引用均出现在模板文件中DIR_SOURCE_TP = template
项目服务器端模板输出路径默认为DIR_SOURCE_TP配置信息DIR_OUTPUT_TP = tpl
静态资源路径默认为WEB根路径下的res目录DIR_STATIC = res
node ~dp0publisherreleasesrcreleasejs -c=~dp0releaseconf
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
打包发布
bull 页面添加打包指令
ndash STYLE打包后样式插入位置
ndash VERSION模块版本配置输出位置
ndash DEFINE打包后脚本插入位置
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
打包发布
bull 模块指令
ndash TEMPLATE
ndash MODULE
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
打包发布
bull TEMPLATE ltdiv id=template-box style=displaynonegt lt-- TEMPLATE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- TEMPLATE --gt ltdivgt
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
打包发布
bull MODULE ltdiv id=template-box style=displaynonegt lt-- MODULE --gt lttextarea name=html data-src=moduletabindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistboxindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglisttagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistclassindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsystemindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutblogindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutbloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingindexhtmlgtlttextareagt lttextarea name=html data-src=modulelayoutsettingaccountindexhtmlgtlttextareagt lttextarea name=html data-src=moduleblogtagindexhtmlgtlttextareagt lttextarea name=html data-src=modulebloglistindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingtabindexhtmlgtlttextareagt lttextarea name=html data-src=modulesettingaccounttabindexhtmlgtlttextareagt lt-- MODULE --gt ltdivgt
QampA
Thank You
QampA
Thank You
Thank You
