nodom3

nodom是一款基于数据驱动的web mvvm框架。用于搭建单页应用(SPA)。内置路由，提供数据管理功能，支持模块化开发。在不使用第三方工具的情况下可独立开发完整的单页应用。

更多使用细节参考API。

目录结构

核心库目录./core：核心框架源码。
扩展目录./extend：预定义指令、自定义element和事件。
示例目录./examples：示例。
发布目录./dist：发布包，所有示例从该目录引入编译后的nodom文件。

dist目录文件说明

nodom.esm.js：es module模式的开发包
nodom.esm.min.js: es module模式的生产包

示例

以vscode为例，使用Live Server插件启动./examples目录下的html文件即可，示例目录总入口在index.html文件。

编译

先运行npm i安装依赖，具体依赖包参考package.json文件“devDependencies”配置项，安装依赖包后，执行“npm run build”，编译结果在“/dist”目录中。

调试模式

使用Nodom.debug()启动调试模式，调试模式会对表达式的异常进行输出，启动调试模式示例如下：

import{Nodom} from '/dist/nodom.esm.js'
Nodom.debug();

国际化

使用Nodom.setLang(language)设置语言，默认为中文，Nodom支持语言包括：

设置项	描述
zh	中文
en	英文

设置语言方法示例如下：

import{Nodom} from '/dist/nodom.esm.js'
//设置语言为英文
Nodom.setLang('en');

实例化单例模式

使用Nodom.Use(clazz)以单例模式实例化类，实例化后，可以通过Nodom['$'+类名]方式进行使用，便于用户在代码中当作静态类使用。示例如下：

import{Nodom,Router} from '/dist/nodom.esm.js'
//启用Router功能
const router = Nodom.use(Router);
//以下两种方式使用，foo为Router类的成员方法
router.foo();
//或
Nodom['$Router'].foo();

CDN

下列代码引入nodom.esm.min.js文件，即es module模式的nodom生产环境包。

import{Nodom,Module} from "https://unpkg.com/nodom3"

下载引入

Nodom使用ES Module实现模块化，无需构建工具即可完成模块化开发，引入方式如下：

<script type="module">
	//引入nodom和Module
    import{Nodom,Module} from '/dist/nodom.esm.js'
	//定义模块类
	class Module1 extends Module{
		...
	}
	//启动应用，把Module1渲染到document.body
	Nodom.app(Module1);
</script>

第一个例子

此例子在页面中输出"Hello Nodom"。

假设你已经掌握一定的Html,Css,JavaScript基础，如果没有，那么阅读文档将会有些困难。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>nodom examples - first</title>
	</head>
	<body>
	</body>
	<script type='module'>
		import{Nodom,Module} from '/dist/nodom.esm.min.js'
		class MHello extends Module {
			//模板函数，返回模板串
			template() {
				return `
					<div>
						Hello {{name}}
					</div>
				`;
			}
			data(){
				return{
					name:'Nodom'
				}
			}
		}
		//把MHello模块渲染到document.body下
		Nodom.app(MHello);
	</script>
</html>

后续示例代码主要阐述各类用法，主要对各示例的模块类进行描述，完整的使用需要参考上面代码结构。

核心概念

模块(Module)

Nodom以模块为单位进行应用构建，一个应用由单个或多个模块组成。模块定义需要继承Nodom提供的模块基类Module。

class Module1 extends Module{
	//your code
}

模板(Template)

模板是模块必不可少的组成元素，通过template()方法返回字符串形式（建议使用模板字符串）的模板代码，Nodom采用基于HTML的模板语法。

template(){
	return `
		<div>
			Hello,Nodom
		</div>
	`;
}

模型(Model)

模型是模块必不可少的组成元素，通过data()方法返回模块所需的数据对象，类型为object，Nodom对数据对象做响应式处理，响应式处理后的数据对象，Nodom称为Model对象，并存储在模块实例中。

注：如果data方法不存在，则会创建一个空模型

data(){
	return {
		name:'nodom'
	}
}

为了描述方便，随后的章节中，我们将响应式处理后的对象称为Model。一个Model中还可能包含其它Model对象。Model实际是对原始数据对象进行代理拦截的Proxy对象。

指令(Directive)

为增强dom节点的使用，增加了指令功能，指令用于模板串中，指令以“x-”开头，作为属性放置于标签头中，见下面代码的x-repeat，目前NoDom支持指令:module,model,repeat,class,if,else,show,field,route,router，详情见指令。

class M1 extends Module{
	template(props){
		return `
			<div>
				<!-- x-repeat指令 -->
				<div x-repeat={{rows}}>
					{{name}}
				</div>
			</div>
		`
	}
	data(){
		return{
			rows:[
				{name:nodom},
				{name:noomi}
			]
		}
	}
}

表达式(Expression)

表达式用于数据，以{{expr}}表示，其中expr为你自己的表达式串，表达式可以作为元素属性值、文本节点值使用，支持属性运算、JS内置对象操作、模块方法操作及其组合操作，示例如下，详情见表达式。

class M1 extends Module{
	template(props){
		return `
			<div>
				<div x-repeat={{getRows()}}>
					<!-- 直接返回name的值 -->
					{{name}}
				</div>
			</div>
		`
	}
	getRows(){
		return [
			{name:nodom},
			{name:noomi}
		]
	}
}

事件(NEvent)

事件和元素的事件相对应，以"e-"开头，覆盖html标准事件类型和nodom自定义事件类型，模板中事件定义不能带参数，NoDom会自动传递约定的参数，共四个，依次为：

序号	参数	类型
1	事件对应dom的model	Model
2	事件对应的虚拟dom	RenderedDom
3	nodom event对象	NEvent
4	Html Event对象	Html Event

示例如下，更多详情见事件。

class M1 extends Module{
	template(props){
		return `
			<div>
				<!-- click 事件 -->
				<button e-click='click'>点击</button>
				...					
			</div>
		`
	}
	//事件方法
	click(model,dom,evObj,event){
		...
	}
}

虚拟Dom、编译及渲染

模板串经过编译后，形成虚拟dom树，树中节点为虚拟Dom(VirtualDom)；
虚拟dom树经过renderDom方法渲染后，形成渲染树，树中节点为渲染节点(RenderedDom)；
渲染树经过renderToHtml方法渲染后，渲染到html document，渲染方式分为首次渲染和增量渲染。

详细介绍

模块(Module)

定义模块类时，类名必须全局唯一（ModuleA和modulea是两个合法且不同的类名，但在nodom中会当作一个模块类）。

用户在编写模块时，主要用到5个部分，模块声明，模板，模型，方法和事件。

模块声明

当模块中需要引入其它模块时，需要在该模块中声明，声明方式为：modules=[子模块类1,子模块类2,...]。当然，如果该模块已在其他地方声明或采用Nodom.registModule方法注册，此模块中可以不再声明。示例如下：

引用模块M1(文件名为m1.js)定义如下，需要在class前用export修饰（es module方式）。

import{Module} from '/dist/nodom.esm.js'
export class M1 extends Module{
	...
}

主模块定义如下：

import{Module} from '/dist/nodom.esm.js'
import{M1} from './m1.js'
class Main extends Module{
	//声明子模块，此处需区分大小写
	modules=[M1];
	//模板
	template(props){
		return `
			<div>
				<!--此处直接用类名使用子模块，不区分大小写-->
				<m1/>
			</div>
		`
	}
	...
}

模板(Template)

模板在模块中用template()进行声明，参数为props，props为从父模块(如果该模块为子模块)对应标签传递的属性(attribute)，改写上例：

M1模块类定义

export class M1 extends Module{
	template(props){
		//根据不同的type生成不同的模板串
		if(props.type===1){
			return `
				<div>
					type为1的模板
				</div>
			`
		}else{
			return `
				<div>
					type不为1的模板
				</div>
			`
		}
	}
}

主模块类定义

import{Module} from '/dist/nodom.esm.js'
import{M1} from './m1.js'
class Main extends Module{
	modules=[M1];
	template(props){
		return `
			<div>
				<button e-click='changeType'>修改type</button>
				<m1 type={{mytype}}/>
			</div>
		`
	}
	data(){
		return{
			mytype:1
		}
	}
	//点击按钮修改mytype
	changeType(){
		this.model.mytype = this.model.mytype===1?0:1;
	}
}

模板的写法遵循两个基本原则：

所有的标签都应该闭合，没有内容的标签可以写成自闭合标签；

<!-- 闭合标签 -->
<div>do something</div>
<!-- 自闭合标签 -->
<ModuleA />

所有模块的模板都应该有一个根节点。

<!-- 外层div作为该模块的根 -->
  <div> 
      <!-- 模板代码 -->
      template code...
  </div>

模型(Model)

模型通过data()方法返回模块所需的数据对象，如果data方法不存在，则会创建一个空模型，在模块方法中，根模型通过this.model访问。
model进行分层提取，子节点自动继承父节点model对象，x-model指令可以修改节点对应的model对象

class Main extends Module{
	template(){
		return `
			<div p1={{data}}>
				<span>{{data}}</span>
			</div>
		`
	}
	data(){
		return{
			data:'nodom'
		}
	}
}

渲染后的结果为：

	<div p1='nodom'>
		<span>nodom</span>
	</div>

可以看到div节点和span节点都使用了根model。

下例通过x-model修改dom节点model对象

class Main extends Module{
	template(){
		return `
			<div>
				<div x-model='date'>{{year}}-{{month}}-{{day}}</div>
				<!-- 等价于 -->
				<div>{{date.year}}-{{date.month}}-{{date.day}}</div>
			</div>
		`
	}
	data(){
		return{
			date:{
				year:2017,
				month:11,
				day:15
			}
		}
	}
}

渲染后的结果为：

<div>
	<div>2017-11-15</div>
	<div>2017-11-15</div>
</div>

通过上例可以看到，x-model指令设置了第一个div节点的model对象为this.model.date，更多详情见指令。

方法(Method)

模块类和通常的JavaScript类一致，模块内的方法可以使用在模板中，主要用于事件和表达式，也可以像普通方法那样使用，对于所有方法，this都指向模块实例（与普通JavaScript类一致）。示例如下：

class Module1 extends Module{
	template(){
		return `
			<div>
				<button e-click='change'>change</button>
				<div class={{genClass(type)}}>Hello {{name}}</div>
				<!-- style -->
				<style>
					.class1{
						color:red;
					}
					.class2{
						color:blue;
					}
				</style>
			</div>
		`
	}
	//定义模块需要的数据
	data(){
		return {
			name:'Nodom'
		}
	}	
	//此方法用于事件，参数无法手动传递
	//有以下四个默认参数：Model,虚拟Dom, NEvent对象,HtmlEvent对象
	change(model,dom,nevent,event){
		model.name='Nodom3';
		this.model.type = this.model.type === 1?0:1;
	}
	//此方法用于表达式，参数type可以手动传递，也可以通过this.model获取
	genClass(type){
		if(type === 1){
			return 'class1';	
		}else{
			return 'class2';
		}
	}
}

模块事件(Module Event)

模块事件是在Module不同工作环节被调用的方法，定义方式与普通方法一致，参数为model，当然也可以通过this.model操作。Nodom提供的模块事件如下，注意区分大小写：

事件名	描述	前置事件	后置事件
onInit	初始化后（constructor后，已经有model对象，但是尚未编译，只执行1次）	无	onCompile
onCompile	模板编译后执行事件，如果模板串有改动，则会重新编译，此时已存在VirtualDom树	onInit	onBeforeFirstRender 或 onBeforeRender
onBeforeFirstRender	首次渲染前执行（只执行1次）	onCompile	onRender
onBeforeRender	每次渲染前执行	onBeforeRender或无	onFirstRender或onRender
onFirstRender	首次渲染后执行（只执行1次），此时已有RenderedTree	onBeforeRender	onRender
onRender	每次渲染后执行，此时已有RenderedTree，如果为增量渲染，尚未执行Diff（新旧渲染树对比）运算	onFirstRender或onBeforeRender	onBeforeMount
onBeforeMount	挂载到document前执行	onRender	onMount
onMount	挂载到document后执行	onBeforeMount	无
onBeforeUnMount	从document脱离前执行	无	onUnMount
onUnMount	从document脱离后执行	onBeforeUnMount	无
onBeforeUpdate	更新到document前，增量渲染师时有效	onRender	onUpdate
onUpdate	更新到document后，增量渲染时有效	onBeforeUpdate	无

其中 onInit,onBeforeFirstRender,onFirstRender只执行1次；onBeforeRender,onRender每次执行，其它事件则满足条件时执行。

示例代码如下：

class Hello extends Module{
	template(){
		return `
			<div>
				Hello World
			</div>
		`
	}
	//模块在渲染前会在控制台输出 onBeforeRender
	onBeforeRender(model){
		console.log("onBeforeRender");
	}
	//模块在初始化后执行
	onInit(model){
		console.log("oninit");
	}
	onRender(model){

	}
	...
}

模块状态

模块分为三个状态，包括：

状态名	描述
INIT	已初始化
UNMOUNTED	未挂载到document
MOUNTED	挂载到document

模块注册和别名

使用Nodom.registModuleAPI注册模块，注册的同时可提供别名。

// 定义模块A
export class ModuleA extends Module{
   template(){
    	return `
  		<div>
  			<span>This is ModuleA</span>
  		</div>
  	`
  }
}
// 模块A注册并设置别名（别名不区分大小写）
Nodom.registModule(ModuleA,'mod-a');

class Main extends Module{
    template(){
    	return `
  		<div>
  		   <span>This is Main</span>
  			<!-- 使用模块A注册时使用的别名 -->
  			<mod-a />
			<!-- 以下两种写法效果与上面一样 -->
			<modulea />
			<ModuleA />
  		</div>
  	`
  }
}

表达式(Expression)

表达式是一段可执行代码，代码以{{}}包裹，并可返回一个结果，如：Math.round(x),x+y*z等。其中变量由model提供，支持标准js运算符、js内置对象如：Math、Object、Date等。

注意事项

由于表达式的执行环境是一个沙盒，请勿在内部使用用户定义的全局变量。
Nodom表达式并不支持所有的Javascript表达式，对于某些原生函数如Array.prototype.map()等，这些原生函数接收一个callback作为回调函数，Nodom无法处理这些回调函数，因为这些回调函数的参数由内部传入。
还有一些情况是函数内接收字面量形式的正则表达式时，如String.prototype.replace()等，Nodom会将正则表达式解析为Model内部的变量，导致这些函数执行异常。
一个可行的解决方案是将这些操作使用模块方法封装，在表达式内部调用封装好的模块方法即可。
一些常见非表达式写法包括：赋值，流程控制。避免使用它们，如：

{{ let a = 1 }}
{{ if (true) { return 'HelloWorld!' } }}

保留字

表达式提供了两个保留字：this和$model，其中：

this: 模块实例，可以通过它访问模块所有方法、属性和模型，如：this.name,this.model.age等。
$model: 当前节点对应的model，如：$model.age。

表达式示例

<div>
    {{20*((price+2)*discount)}}
	<div>{{year + '年' + month + '月'}}</div>
	<div>多级数据：{{ac.age.as}}</div>
	<h2>数据计算</h2>
	<div>价格：{{Math.round(price * discount) + 'hello'}}</div>
	<--需在模块中提供cacDis方法-->
	<div>折扣：{{cacDis(price*discount)}}</div>
	<--需在模块中提供addStr方法-->
	<div>描述：{{30 + addStr('hello' + desc) + 20}}</div>
	<div>随机折扣:{{(Math.random()*price).toFixed(1)}}</div>
	<--需在模块中提供genDate方法-->
	<div>当前日期是:{{genDate(date1)}}</div>
	<div>当前日期时间是:{{genDate(date1,1)}}</div>
	<div>当前时间是:{{genDate(date1,2)}}</div>
	<div x-if={{Object.keys(goods).length>0}}>商品列表存在则显示</div>
	<div>路径：{{'/'+'path'+'/'+url}}</div>
	<div>{{!true}}</div>
	<div>转换为小写字母:{{name.toLowerCase()}}</div>
	<div>转换为大写字母:{{name.toUpperCase()}}</div>
	<div>数组求和:{{sum(...arr)}}</div>
	<div>判断数组中有没有‘num’: <span x-if={{new Set(arr).has(num)}}>true</span></div>
	<div>价格求和: {{sum(1,2)+price}}</div>
	<div>{{genDate(new Date().getTime())}} 是否为工作日：<span x-if={{new Date().getDay()<6}}>true</span></div>
	<div>货币：¥{{(price*discount).toFixed(1)}}</div>
	<div x-if={{price>30 && discount !== undefined}}>是低价商品并且还有折扣</div>
	<div>计算：{{cac(1,2)+ (Math.round((price * discount))).toFixed(1) + 1}}</div>
	<div>instanceof用法:{{arr instanceof Array}}</div>
	<div>{{num+1}}</div>
	<div>三目运算：{{num>0?1:0}}</div>
	<div>对象判断：{{{x:1,yyy:2}.constructor.name === 'Object'}}</div>
	<div>数组方法：{{arr.join(',')}}</div>
	<div>使用this：{{desc + ' ' + this.state}}</div>
	<div>扩展运算-数组求和：{{sum(...arr)}}</div> 
	<div>typeof：{{typeof arr}}</div>
</div>

表达式值

表达式都应该有一个返回值，如果表达式内的计算结果产生不可预知的错误，默认会返回空字符串，确保程序运行时不会出错。

如果在调试模式，出现计算异常时，会在控制台输出表达式计算异常相关信息。

事件(NEvent)

可以通过两种方式定义事件：

在模板中使用e-事件名='事件方法名'在模板中定义；
在js代码中使用new NEvent(module,eventName,eventString|handler)方法定义。

绝大部分场景，采用第1种方式定义，后续示例采用第1种方式。

示例如下：

class Main extends Module{
	template(){
		return `
			<div>
				<button e-click="add">addNum</button>
				<div e-mouseenter="enter">mouseenter test</div>
			</div>
		`
	}

	add(model,dom,nevent,event){
		...
	}
	enter(model,dom,nevent,event){
		...
	}

事件参数

在模板配置事件时，只需要事件名，而不能携带参数，Nodom会传递给事件方法4个参数，见上例中click和enter方法，参数如下：

序号	说明	类型
1	事件对象对应虚拟dom的model	Model
2	事件对象对应虚拟dom	RenderedDom
3	nodom event对象	NEvent
4	HtmlEvent对象	Html Event

事件修饰符

在传入事件处理方法的时，允许以:分隔的形式传入指定事件修饰符，多个修饰符可混合使用。事件处理支持4种修饰符：

名字	作用
once	事件只执行一次
nopopo	禁止冒泡
delg	事件代理到父对象
capture	使用useCapture模式

示例如下：

class Main extends Module{
	template(){
		return `
			<div>
				<h3>只触发一次</h3>
				<button e-click="tiggerOnce:once">addNum</button>
				<div> num is:{{num}} </div>
				<h3>禁止冒泡</h3>
				<!--点击内部框时，outer不会执行 -->
				<div e-click="outer" 
					style="width:200px;height:200px;background-color: #777777;">
					<div 
						e-click="inner:nopopo" 
						style="width:100px;height:100px;background-color: #cccccc;">
					</div>
				</div>
				<h3>代理事件到父对象</h3>
				<p>代理到ul元素</p>
				<ul>
					<li x-repeat={{rows}} e-click="check:delg">{{name}}</li>
				</ul>
			</div>
		`
	}
	data(){
		return {
			num:1,
			rows:[
				{name:"name1"},
				{name:"name2"},
				{name:"name3"},
			]
		}
	}
	tiggerOnce(model){
		model.num++;
	}
	outer(model){
		console.log("outer");
	}
	inner(model){
		console.log("inner");
	}
	check(model,dom,NEvent,e){
		console.log(model,dom,NEvent,e);
	}
}

指令(Directive)

指令用于增强元素的表现能力，以"x-"开头，以设置元素属性(attribute)的形式来使用。指令具有优先级，数字越小，优先级越高。优先级高的指令优先执行。

指令简写方式

Nodom提供了指令简写方式，可以通过自定义标签方式简写指令。将在后续每个指令单独讲解。
自定义标签经过编译之后默认为div标签，若想使用其它标签，可通过tag属性指定，下面是repeat指令简写的一个示例：

<!-- 未指定tag，默认为div -->
<for cond={{rows}}>
	<span>{{name}}</span>
</for>
<!-- 等价于 -->
<div x-repeat={{rows}}>
	<span>{{name}}</span>
</div>
<!-- 指定tagName为p -->
<for cond={{rows}} tag="p">
	<span>{{name}}</span>
</for>
<!--等价于 -->
<p x-repeat={{rows}}>
	<span>{{name}}</span>
</p>

指令列表

目前NoDom支持以下几个指令:

指令名	指令优先级	指令描述
model	1	绑定数据
repeat	2	按照绑定的数组数据生成多个相同节点
recur	2	递归
if	5	条件判断
else	5	条件判断
elseif	5	条件判断
endif	5	结束判断
show	5	显示/隐藏
slot	5	插槽
module	8	模块（表明节点为模块）
field	10	双向数据绑定
route	10	路由
router	10	路由容器

自定义指令

除了Nodom自带的指令，用户可以通过Nodom.createDirective()方法创建指令，参数如下：

序号	说明	类型	备注
1	指令名	string	无
2	指令执行方法	Function	执行方法默认传递两个参数：1 module（dom所属模块）, 2 dom（所属渲染节点，类型RenderedDom）。方法中的this指向指令
3	优先级	Number	1-10，如果设置优先级<5，需慎重

指令执行方法返回true/false，当返回false时，不再进行当前节点的后续渲染，包括子节点渲染，同时该dom节点不加入到渲染树中，也就是说，不会渲染到document中，更多详情参考源码 /extend/directiveinit.ts。

Nodom.createDirective(
	'directive name',
	function (module: Module, dom: RenderedDom){
		//your code
	},
	10
)

model 指令

model指令用于给view绑定数据，数据采用层级关系，如:需要使用数据项data1.data2.data3，可以直接使用data1.data2.data3，也可以分2层设置分别设置x-model='data1'，x-model='data2'，然后使用数据项data3。下面的例子中描述了x-model的几种用法。

class Main extends Module{
	template(){
		return `
			<div>
				<!-- 设置div节点的model为this.model.user -->
				<div x-model="user">
					<p>{{name.firstName}} {{name.lastName}}</p>
					<!-- 设置div节点的model为this.model.user.name -->
					<div x-model="name">
					 	<p>{{firstName}} {{lastName}}</p>
					</div>
				</div>
			</div>
		`
	}
	data(){
		return {
			user: { 
				name: { firstName: 'Nodom', lastName: 'Yang' } 
			} 
		}
	}
}

repeat 指令

repeat指令为循环指令，用于渲染数组数据。

可通过index属性设置索引名，以便在渲染时使用索引，如index='idx'，模板中可直接用idx。
如果数组元素不是object类型，则用$model放在表达式中渲染数据，此时index属性无效。

class Main extends Module{
	template(){
		return `
			<div>
				<h3>常规用法</h3>
				<div x-repeat={{rows}}>
					name:{{name}},age:{{age}}
				</div>
				<h3>使用index属性</h3>
				<div x-repeat={{rows}} index="idx">
					index:{{idx}},name:{{name}},age:{{age}}
				</div>
				<h3>数组元素不为object时的用法-使用$model作为表达式</h3>
				<div x-repeat={{rows1}} index='idx'>
					name:{{$model}}
				</div>
			</div>	
		`
	}
	
	data(){
		return {
			rows:[
				{name:"Nodom",age:6},
				{name:"Noomi",age:4},
				{name:"Relaen",age:3},
				{name:"React",age:12},
				{name:"Vue",age:12}
			],
			rows1:['Nodom','Noomi','Relaen','React','Vue']
		}
	}
}

简写方式
repeat指令可以用for标签进行简写，指令值用cond属性进行配置，改写上面的模板如下：

class Main extends Module{
	template(){
		return `
			<div>
				<for cond={{rows}}>
					name:{{name}},age:{{age}}
				</for>
			</div>	
		`
	}
	...
}

recur 指令

recur指令为递归指令，用于渲染递归格式的数据类型，如树形结构，菜单结构等，模板中递归由两部分组成：

递归定义，定义递归节点内容，见下例第一个带x-recur属性的div，定义时可以通过name属性设置名称，在引用时指定，默认为default。
递归引用，引用必须包含ref属性，如果定义时为匿名，则ref的值为空，否则应与定义中的name属性保持一致，见下例第二个带x-recur属性的div。

class Main extends Module{
	template(){
		return `
			<div>
				<h3>匿名递归</h3>
				<!--定义recur，通过x-recur指令设置递归数据属性名，与data中数据项保持一致-->
				<div x-recur='ritem'>
					<div e-click='itemClick'>
						<span class={{cls}}>{{title}}</span>
					</div>
					<!-- 引用default -->
					<div x-recur ref/>
				</div>

				<h3>命名递归-增加name属性</h3>
				<div x-recur='ritem' name='r1'>
					<p e-click='itemClick'>
						<span class={{cls}}>{{title}}</span>
					</p>
					<!-- 引用r1 -->
					<div x-recur ref='r1'/>
				</div>

				<style>
					.cls1{
						background-color:red;
					}
					.cls2{
						background-color:green;
					}
					.cls3{
						background-color:blue;
					}
				</style>
			</div>
		`
	}
	data(){
		return {
			ritem:{
				title:"第一层",
				cls:'cls1',
				ritem:{
					title:"第二层",
					cls:"cls2",
					ritem:{
						title:"第三层",
						cls:"cls3"
					}
				}
			}
		};
	}
}

在实际使用中，通常数据项由数组构成，如树、菜单等，下面是数据项为数组的结构示例：

class Main extends Module{
	template(){
		return `
			<div>
				<!--定义recur，并设置了name属性-->
				<recur cond='items' name='r1' class='secondct'>
					<for cond={{items}} >
						<div class='second' e-click='itemClick'>id is:{{id}}-{{title}}</div>
						<!--ref指向了recur定义的name-->
						<recur ref='r1' />
					</for>
				</recur>
				<style>
					.secondct{
						background:#ff9900;
						padding:5px 20px;
						margin:5px 0;
						border:1px solid;
					}
					.second{
						padding:5px;
						background-color:beige;
					}
				</style>
			</div>
		`
	}
	data(){
		return{
			items:[
				{
					title:'aaa',
					id:1,
					items:[{
						id:1,
						title:'aaa1',
						items:[
							{title:'aaa12',id:12},
							{title:'aaa11',id:11,items:[
								{title:'aaa111',id:111},
								{title:'aaa112',id:112}
							]},
							{title:'aaa13',id:13}
						]},{
						title:'aaa2',
						id:2,
						items:[
							{title:'aaa21',id:21,items:[
									{title:'aaa211',id:211,items:[
									{title:'aaa2111',id:111},
									{title:'aaa2112',id:112}
								]},
								{title:'aaa212',id:212},
							]},
							{title:'aaa22',id:22}
						]}
					]
				},{
					title:'bbb',
					id:2,
					items:[{
						title:'bbb1',
						id:10,
						items:[
							{title:'bbb11',id:1011},
							{title:'bbb12',id:1012}
						]},{
						title:'bbb2',
						id:20
					}]
				}
			]
		}
	}
}

简写方式

recur指令可以用recur标签进行简写，指令值用cond属性进行配置，从上面的例子可以看到recur标签的用法。

if/elseif/else/endif 指令

与javascript的if/else/else if逻辑一致，当if指令条件为true时，则渲染该节点。当if指令条件为false时，则进行后续的elseif指令或else指令判断，如果某个节点判断条件为true，则渲染该节点，最后通过endif指令结束上一个if条件判断。示例如下：

class Main extends Module{
	template(){
		return `
			<div>
				<button e-click='change'>修改分数为90</button>
				<p x-if={{score<60}}>不及格，分数为：{{score}}</p>
				<p x-elseif={{score<70}}>及格，分数为：{{score}}</p>
				<p x-elseif={{score<80}}>中等，分数为：{{score}}</p>
				<p x-elseif={{score<90}}>良好，分数为：{{score}}</p>
				<p x-else>优秀，分数为：{{score}}</p>
				<p x-endif />
			</div>
		`
	}
	data(){
		return {
			score:75
		}
	}
	change(){
		this.model.score=90;
	}
}

简写方式

使用对应名称的标签即可，改写上例的模板如下：

class Main extends Module{
	template(){
		return `
			<div>
				<if cond={{score<60}}>不及格，分数为：{{score}}</if>
				<elseif cond={{score<70}}>及格，分数为：{{score}}</elseif>
				<elseif cond={{score<80}}>中等，分数为：{{score}}</elseif>
				<elseif cond={{score<90}}>良好，分数为：{{score}}</elseif>
				<else>优秀，分数为：{{score}}</else>
				<endif/>
			</div>
		`
	}
	...
}

show 指令

show指令用于显示或隐藏dom节点，如果指令对应的表达式返回为true，则显示该视图，否则隐藏（display='none'），示例如下：

class Main extends Module{
	template(){
		return `
			<div>
				<button e-click='toggle'>{{show?'隐藏':'显示'}}</button>
				<div x-show={{show}}>价格：{{price}}</div>
			</div>
		`
	}
	data(){
		return {
			show:true,
			price:200
		}
	}
	toggle(){
		this.model.show = !this.model.show;
	}
}

简写方式

使用show标签即可，改写上例的模板如下：

class Main extends Module{
	template(){
		return `
			<div>
				<show cond={{show}}>价格：{{price}}</show>
			</div>
		`
	}
	...
}

module 指令

module指令用于表示该元素是一个子模块，module指令对应的模块会被渲染至该元素所在位置。使用方式为x-module='模块类名'，子模块需要通过父模块的modules属性进行声明。示例如下：

modulea.js文件

//需使用export
export class ModuleA extends Module{
	...
}

main.js 文件

import {ModuleA} from './modulea.js' 
class Main extends Module{
	//声明 MmoduleA
	modules=[ModuleA]
	template(){
		<div>
			<div x-module='modulea' />
			...
		</div>
	}
	...
}

简写方式

使用module标签或module类名两种方式进行简写，改写上例的模板如下：

class Main extends Module{
	<!--声明 MmoduleA-->
	modules=[ModuleA]
	template(){
		<div>
			<!--方式1，用name指定module类名，名字不区分大小写一-->
			<module name='modulea' />
			<!--方式2，直接使用模块类名，名字不区分大小写-->
			<modulea/>
			...
		</div>
	}
	...
}

field 指令

field指令用于实现input、select、textarea等输入元素与数据项之间的双向绑定。

配置说明

单选框radio：多个radio的x-field值必须设置为同一个model属性名，同时需要设置value属性，选中值为value属性对应的值。
复选框checkbox：除了设置x-field绑定数据项外，还需要设置yes-value和no-value两个属性，分别对应选中和未选中的值。

示例如下：

class Main extends Module{
	template(){
		return `
			<div>
				<!-- 绑定name数据项 -->
				姓名：<input x-field="name" />
				<!-- radio，绑定sexy数据项 -->
				性别：<input type="radio" x-field="sexy" value="M" />男
					<input type="radio" x-field="sexy" value="F" />女
				<!-- checkbox，绑定married数据项 -->
				已婚：<input type="checkbox" x-field="married" yes-value="1" no-value="0" />
				<!-- select，绑定edu数据项，并使用x-field指令生成多个option -->
				学历：<select x-field="edu">
					<option x-repeat={{edus}} value="{{eduId}}">{{eduName}}</option>
				</select>
			</div>
		`
	}
	data(){
		return{
			name: 'nodom',
			sexy: 'F',
			married: 1,
			edu: 2,
			//下拉列表option数据
			edus: [
				{ eduId: 1, eduName: "高中" },
				{ eduId: 2, eduName: "本科" },
				{ eduId: 3, eduName: "硕士研究生" },
				{ eduId: 4, eduName: "博士研究生" },
			]
		}
	} 
}

slot 指令

slot指令为插槽指令，表示该dom节点是一个插槽，插槽作为模板暴露的外部接口，增大了模板的灵活度，更利于模块化开发。详细使用见插槽。

route 指令

route将当前dom设定路有节点，点击dom将跳进行路由跳转。使用方式如下：

<a x-route='path'>跳转到path</a>

可使用route标签进行替代，route指令的值由path代替。默认标签为a,如果修改，则设置tag属性。改写上例代码如下：

<route path='path'>跳转到path</route>
<!-- dom设置为button标签 -->
<route path='path' tag='button'>跳转到path</route>

path值为定义的路由路径，更多详情参考路由。

router 指令

router指令用于定义路由模块的容器，如果使用了route指令，必须在模版中使用router指令，示例如下：

<a x-route='path'>跳转到path</a>
...
<div x-router />

同样，可以用router标签代替，修改如下：

<route path='path'>跳转到path</route>
...
<router/>

ajax请求

通过Nodom.request方法进行ajax请求，请求参数为object或string，如果为string，则直接以get方式获取参数指定的url资源，我们建议传递object，object 各项配置如下:

参数名	类型	默认值	必填	可选值	描述
url	string	无	是	无	请求url
method	string	GET	否	GET,POST,HEAD	请求类型
params	Object/FormData	{}	否	无	参数，json格式
async	bool	true	否	true,false	是否异步
timeout	number	0	否	无	请求超时时间
type	string	text	否	json,text
withCredentials	bool	false	否	true,false	同源策略，跨域时cookie保存
header	Object	无	否	无	request header 对象
user	string	无	否	无	需要认证的请求对应的用户名
pwd	string	无	否	无	需要认证的请求对应的密码
rand	bool	无	否	无	请求随机数，设置则浏览器缓存失效

为避免重复请求，可以通过Nodom.setRejectTime(time)方法设置重复请求拒绝的间隔时间，单位为ms。

如果需要使用其它的ajax库，需重写Nodom.request方法，且返回类型为Promise。

深入

本章节建议先阅读完前面内容。

模块

模块注册

Nodom为模块提供两种注册方式：

模块modules数组注册

// 待注册模块A
export class ModuleA extends Module{
    template(){
    	return `
			<div>this is ModuleA</div>
 		`
 	}
}
// 待注册模块B
export class ModuleB extends Module{
    template(){
		return `
			<div>this is ModuleB</div>
			`
		}
}
// 注册使用模块A，B
class Main extends Module{
    modules=[ModuleA,ModuleB]
	template(){
		return `
		<div>
			<!-- 使用模块A-->
			<ModuleA />
			<!-- 使用模块B-->
			<ModuleB />
		</div>
	 `
	 }
}

Nodom.registModule方法注册 Nodom.registModule方法可以给待注册模块设置别名，在模板代码中使用模块时，既可以使用模块类名作为标签名引入，也可以使用注册的别名作为标签名引入。

<!--待注册模块A -->
export class ModuleA extends Module{
    template(){
    return `
		<div>this is ModuleA</div>
 		`
 	}
}
//注册ModuleA并设置别名为 user
Nodom.registModule(ModuleA,'user');
export class Main extends Module{
    template(){
        return `
		<div>
			<user />
		</div>
		`
    }
}

属性传递

为了加强模块之间的联系，Nodom在父子（如果为插槽，则是模板所在模块和内部模块，下同）模块之间提供props来传递数据。除根模块外，每个模块在执行template方法时，会将子模块对应的节点属性以对象的形式作为参数传入，也就是说，子模块可以在自己的template函数内，依据传入的props来动态创建模板。

//模块A 
class ModuleA extends Module{
    template(props){
       	let str;
	   	//根据传递的name属性生成不同模板串
		if(props.name=='add'){
			return `<h1>add<h1>`
		}else{
			return `<h2>none</h2>` 
		}
    }
}
Nodom.registModule(ModuleA,'user');
// 根模块 
class Main extends Module{
    template(){
        return `
			<div>
			<!-- 传递name属性给user模块 -->
				<user name='add' />
			</div>
		`
    }
}

模块传值

props实现了属性传递，也可以实现父模块向子模块的数据传递，但是这是被动的传递方式，需要手动进行转换，如果需要将值传递至子模块的model，可以在传递的属性名前，加上$前缀，Nodom会将其传入子模块的根model内，实现响应式监听。

注意：如果传值是一个对象，则该对象存在于两个模块内，对象内数据的改变会造成两个模块的渲染，建议传值时，尽量使用非对象数据。

//模块A
class ModuleA extends Module{
    template(props){
        return `<div><h1>{{name}}<h1></div>`
    }
}
//根模块
class Main extends Module{
	modules = [ModuleA]
    template(){
        return `
      	 <div>
		 	<!-- name项将直接存放于ModuleA的model中 -->
        	<ModuleA $name={{name}} />
		</div>
    `
    }
    data(){
        return {
            name:'Nodom',
        }
    }
}

反向传递

由于Props的存在，父模块可以暴露外部接口，将其通过Props传递给子模块，子模块调用该方法即可实现反向传递的功能。例如:

//模块A
class ModuleA extends Module{
    template(props){
        this.parentChange=props.add;
        return `
			 <div>
			 	<button e-click='change'>父模块+1</button>
			 </div>
		`
    }
    change(){
        this.parentChange(1);
    }
}
Nodom.registModule(ModuleA,'user');
//根模块 
class Main extends Module{
    template(){
        return `
		<div>
			count={{sum}}
			<user add={{this.add}} />
		</div>
        `
    }
    data(){
        return {
           sum:0,
        }
    }
    //这里需要使用箭头函数，来使该函数的this始终指向根模块，或者使用bind函数绑定this指向
    add=(num)=>{
        this.model.sum++;
    }
}

多模块数据共享

上述的值或属性传递，只能存在于父子之间，不能解决兄弟节点或不同父模块之间的传递问题，Nodom提供了GlobalCache来管理共享数据，实现多个模块的数据共享。

GlobalCache内置get(获取)、set(设置)、remove(移除)、subscribe(订阅)方法以便操作数据。

import{Nodom,Module,GlobalCache} from '/dist/nodom.esm.js'
//无论数据是否存在，都可以订阅
GlobalCache.set("globalData", {
	msg: 0,
});

class ModuleA extends Module {
	template() {
		return ` 
			<div>
				<button e-click="change">change</button>
			</div>
		`;
	}
	change() {
		let data = GlobalCache.get("globalData");
		if(!data){
			data = {msg:0}
		}else{
			data.msg++;
		}
		GlobalCache.set("globalData",data);
	}
}

class ModuleB extends Module {
	template() {
		return ` 
			<div>
				moduleb global data is:{{msg}}
			</div>
		`;
	}
	onInit(model) {
		//订阅数据
		GlobalCache.subscribe(this, "globalData", (val) => {
			model.msg = val.msg;
		});
	}
}

class Main extends Module {
	modules = [ModuleA,ModuleB];
	template() {
		return `
			<div>
				main global data is:{{msg}}
				<ModuleA />
				<ModuleB />
			</div>
		`;
	}
	onInit(model) {
		//订阅数据
		GlobalCache.subscribe(this, "globalData", (val) => {
			model.msg = val.msg;
		});
	}
}

也可使用第三方数据发布-订阅库。在开发大型项目时，可以使用数据管理库帮助我们管理数据，使数据以可预测的方式发生变化，我们推荐使用Nodom团队开发的kayaks库，或者其他优秀的数据管理库均可。

插槽

在实际开发中，插槽功能会较大程度的降低应用开发难度，插槽作为模板暴露的外部接口，增大了模板的灵活度，更利于模块化开发。Nodom以指令和自定义元素的方式实现插槽功能。

<!--自定义元素的方式使用插槽，命名插槽 -->
<slot name='title'>
    ...
</slot>
<!-- 指令的形式使用插槽，命名插槽-->
<div x-slot='title'>
	...
</div>
<!-- 匿名插槽-->
<slot>
	...
</slot>

innerRender

插槽内的节点渲染时的默认数据来源于所属模板的模块的model，而某些时候，需要用子模块内部的数据进行渲染，Nodom提供innerRender属性支持。

注意：添加innerRender后，插槽内元素表达式依赖的数据项、方法，定义的事件方法都来源于子模块，否则都来源于模板所在模块。

下面的例子中，渲染数据name来源于模块Main。

class ModuleA extends Module{
    template(props){
		 return `
			<div>
				<slot/>
			</div>	
		`
    }
}
class Main extends Module{
	template(props){
		return `
			<div>
				<modulea>
					<!--name来源于Main-->
					<span>my name is : {{name}}</span>
				</modulea>
			</div>	
		`
    }
}

下面的例子中，渲染数据name来源于模块ModuleA。

class ModuleA extends Module{
    template(props){
		 return `
			<div>
				<!--增加innerRender设置-->
				<slot innerRender/>
			</div>	
		`
    }
}
class Main extends Module{
	template(props){
		return `
			<div>
				<modulea>
					<!--name来源于ModuleA-->
					<span>my name is : {{name}}</span>
				</modulea>
			</div>	
		`
    }
}

匿名插槽

如果子模块内slot标签无name属性，则模块(如下面的modulea)标签内的元素会替换子模块的slot标签。

//模块A 
class ModuleA extends Module{
      template(props){
		 return `
			<div>
				<!--slot标签会被Main模块modulea标签内的内容代替-->
				<slot>
					我是默认内容
				</slot>
			</div>	
		`
    }
}
<!-- 根模块  User标签内的所有内容作为待插入的内容-->
class Main extends Module{
	modules=[ModuleA];
    template(){
        return `
			<div>
  				<modulea>
					<!--下面的p和button标签会替换ModuleA的slot标签-->
					<p>我是父模块的P标签</p>
					<button>我是父模块</button>
				 </modulea>
			</div>
		`
    }
}

命名插槽

在实际使用中，可能需要多个插槽，就需要使用命名插槽，通过插槽的name属性设置插槽名字。命名插槽就是给插槽定义插槽名，传入的标签需要与插槽名一致才可发生替换。

//模块A
class ModuleA extends Module{
    template(props){
		return `
			<div>
				<slot name='title'>
					我是title
				</slot>
				<slot name='footer'>
					我是footer
				</slot>
			</div>
		`
    }
}
// 根模块  modulea标签内的slot标签内容作为待插入的内容
class Main extends Module{
	modules=[ModuleA];
    template(){
        return `
		<div>
 		 	<modulea>
				<slot name='title'>
					<!--替换ModuleA<slot name='title'>标签-->
					<button>我是父模块的title</button>
				<slot>
				<slot name='footer'>
					<!--替换ModuleA<slot name='name'>标签-->
					<button>我是父模块的footer</button>
				<slot>
 			</modulea>
		</div>	
`
    }
}

详细使用见examples/slot.html。

模型(Model)

Model作为模块数据的提供者，绑定到模块的数据模型都由Model管理。Model是一个由Proxy代理的对象，Model的数据来源有两个：

模块实例的data()函数返回的对象;
父模块通过$data方式传入的值。

每一个模块都有独立的Model，使用方式如下：

class ModuleA extends Module{
    template(props){
        return `<div>{{name}}</div>`;
    }
}
//根模块
class Main extends Module{
	modules=[ModuleA];
    template(){
        return `
		<div>
        	<ModuleA $name={{name}}/>
		</div>`
		;
    }
    data(){
        return {
            name:'Nodom'
        }
    }
}

Model会深层代理内部的object类型数据。Model分层结构与所代理的数据对象结构一样，即父Model和子孙Model的关系。

基于Proxy，Nodom可以实现数据劫持和数据监听，来做到数据改变时候的响应式更新渲染。

关于Proxy的详细信息请参照Proxy-MDN。

在使用的时，可以直接把Model当作对象来操作：

class Main extends Module{
	template(){
		return `
		<div>
			{{count}}
			<button e-click="changeCount">click</button>
		</div>
		`
	}
	// 模块的数据来源
	data(){
		return {
			title:'Hello',
			count:0
		}
	}
	changeCount(model){
		model.count++;
	}
}

保留属性

Model提供了4个保留属性，用户在定义数据项时应避免。

数据项	说明	类型	备注
__source	源数据对象	object	通过此属性可以获取被代理的数据对象
__key	model key(全局唯一)	number	-
__module	所属模块	Module	-
__parent	父Model	Model	可通过此属性获取祖先model
__name	在父模型中的属性名	string	-

Model与模块渲染

每个Model存有一个模块列表，当Model内部的数据变化时，会引起该Model的模块列表中所有模块的渲染。一个Model的模块列表中默认只有初始化该Model的模块，当存在slot或模块传值为对象时，将会导致Model绑定到多个模块，当然也可以通过ModelManager的bindToModule方法绑定。

set方法

在module中提供了一个set()方法，该方法可以往model上设置一个深层次的对象或值。当model缺省，则表示模块根model。

参数说明

序号	说明	类型
1	模型	Model
2	属性名	string
3	属性值	any

如果第一个参数为属性名，则第二个参数为属性值，默认model为根模型

data(){
	return {
		data:{
			a:1,
			b:'b'
		}
	}
}
change(model){
	// 会报错，因为data1为undefined
	model.data1.data2.data3 = { a:'a' };
	// 使用$set可以避免该问题，如果不存在这么深层次的对象$set会帮你创建。
	this.set("data1.data2.data3",{a:'a'});
}

get方法

Module中提供了一个get()方法，可以从Model上获取一个深层次的对象值，当不知道对象具体层次时有效。

参数说明

model: Model, key: string, value:any

序号	说明	类型
1	model	Model
2	属性名	string

如果第一个参数为属性名，则默认model为根模型

data(){
	return {
		data:{
			a:1,
			b:'b'
		}
	}
}

getValue(){
	// 等同于 this.model.data.a
	console.log(this.get("data.a"));
}

watch方法

module的watch方法用来检测Model里的数据变化，当数据变化时执行配置的钩子函数。

参数说明

model: Model, key: string|string[], operate: Function,module?:Module,deep?:boolean

参数名	类型	参数说明
model	Model	监听对象，如果省略，则表示module的根model
key	string或string[]	监听属性
operate	Function	监听触发方法，默认参数为(model,key,oldValue,newValue)，其中model为被监听的model，key为监听的键，oldValue为旧值，newValue为新值
deep	boolean	如果设置为true，当key对应项为对象时，对象的所有属性、子孙对象所有属性都会watch，慎重使用该参数，避免watch过多造成性能损失。

取消watch

watch 方法会返回一个函数，当不需要watch时，执行该函数即可取消watch。

示例

详细使用请参考 examples/model.html。

class Main extends Module{
	template(){
		return `
			<div>
				<button e-click='change'>change</button>
				<button e-click='watch'>watch</button>
				<button e-click='cancelWatch'>cancel watch</button>
				<div>{{count}}</div>
			</div>
		`
	}
	data(){
		return {
			count:1,
			user:{
				name:{
					first:'nodom',
					last:'noomi'
				}
			},
			hobbies:[{name:'健身'},{name:'游戏'}]
		}
	}
	//激活watch，通常情况下，我们把watch放置在onBeforeFirstRender事件中
	watch(model){
		//当被监听的model为根model时，可以省略
		this.watcher = this.watch('count',(model,key,oldVal,newVal)=>{
			console.log('检测到数据变化');
			console.log('oldVal：',oldVal);
			console.log('newVal：',newVal);
		})
		//等价于
		// this.watcher = this.watch(this.model,'count',(m,key,oldVal,newVal)=>{
		// 	console.log('检测到数据变化');
		// 	console.log('oldVal：',oldVal);
		// 	console.log('newVal：',newVal);
		// })
		//watch多个，并设置deep为true
		this.watch(['user.name','hobbies'],(model,key,oldVal,newVal)=>{
			console.log(model,key,oldVal,newVal);
		},true);
	}
	//修改数据
	change(){
		this.model.count++;
		this.model.hobbies[1].name='旅游';
		this.model.user.name.last = 'relaen';
	}
	//取消监听
	cancelWatch(){
		//cancel count数据项的watch
		this.watcher();
	}
}

编译

当首次渲染或tempate()返回的模板串发生改变时，会触发模板重新编译，所以在构造模板串时，尽量避免用可变的props值或model项来构造，而是采用指令、表达式或插槽的方式来保持渲染的动态性。

下面的模板是不建议的

//子模块 ModuleA
template(props){
	return `
		<div>
			<div class='${props.type===1?'clsa':'clsb'}>
				hello world
			</div>
		</div>
	`
}

//父模块 Main
template(props){
	return `
		<div>
			<modulea type={{type}}/>
		</div>
	`
}

当模块Main的数据type发生改变时，会导致ModuleA重新编译，改进方式如下：

//子模块 ModuleA
template(props){
	return `
		<div>
			<!--通过表达式获取-->
			<div class={{genClass(type)}}>
				hello world
			</div>
		</div>
	`
}

genClass(type){
	return type===1?'clsa':'clsb';
}

//父模块 Main
template(props){
	return `
		<div>
			<!--通过数据传递-->
			<modulea $type={{type}}/>
		</div>
	`
}

当模块Main的type发生改变时，ModuleA会渲染，但不会重新编译。

渲染

渲染时机

Nodom的渲染是基于数据驱动的，也就是说只有Model内的数据发生了改变，当前模块才会进行重新渲染的操作。
子模块渲染依赖：

Model数据改变；
父模块传属性(props)发生改变；
父模块传值发生改变。

手动触发

如果需要手动渲染，则需调用module.active()进行触发。

CSS支持

Nodom对CSS提供额外的支持。在模板中使用<style></style> 标签中直接写入CSS样式，示例代码如下：

class Module1 extends Module {
    template() {
        return `
			<div>
				<h1 class="test">Hello nodom!</h1>
				<style>
					.test {
						color: red;
					}
				</style>
			</div>`;
       }
}

在模板代码中的 <style></style> 标签中通过表达式调用函数返回CSS样式代码串，示例代码如下：

class Module1 extends Module {
     template() {
         return `
			<div>
                <h1 class="test">Hello nodom!</h1>
                <style>{{css()}}</style>
            </div>`;
     }
     css() {
         return `
			.test {
				color: red;
			}`;
     }
}

在模板代码中的 <style></style> 标签中通过@import url('CSS url路径')引入CSS样式文件，示例代码如下：

template() {
	return `
		<div>
			<h1 class="test">Hello nodom!</h1>
			<style>
				@import url('./style.css')
			</style>
		</div>
	`;
}

对模板代码中需要样式的节点直接写行内样式，示例代码如下：

template() {
	return `
		<div>
			<h1 style="color: red;" class="test">Hello nodom!</h1>
		</div>
	`;
}

scope属性

给节点添加该属性后，Nodom会自动在CSS选择器前加前置名。使CSS样式的作用域限定在当前模块及其子模块，不会污染其它模块。

示例代码如下：

 template() {
	return  `
		<div>
			<h1 class="test">Hello nodom!</h1>
			<style scope="this">
				.test {
					color: red;
				}`;
			</style>
		</div>
	`;
 }

此例中， .test css class只对当前模块及其子模块有效。

自定义元素

自定义元素需要继承DefineElement类，且需要在DefineElementManager中注册。

// 定义自定义元素
class MYELEMENT extends DefineElement{
	/**
	 * @param node 		VirtualDom
	 * @param module	所属模块
	 */ 
	constructor(node,module){
        super(node,module);
        
		......
    }
}
	
// 注册自定义元素
DefineElementManager.add(MYELEMENT);

更多使用参考/extend/elementinit.ts文件。

路由

Nodom内置了路由功能，可以配合构建单页应用，用于模块间的切换。

路由初始话

如果需要使用路由，则需要在创建路由前引入路由模块，引入方式使用Nodom.use()方法。引入路由初始化参数如下：

序号	说明	类型	备注
1	路由基础路径	String	可选，如果配置此项，则浏览器显示的路径以此路径开始
2	路由进入方法	Function	可选，每个路由进入时都将执行此方法，传递参数为 1:module，2:进入时路径
3	路由离开时方法	Function	可选，每个路由离开时都将执行此方法，传递参数同上
初始化示例如下：

//启用路由
import {Nodom,Router} from '/dist/nodom.esm.js'
Nodom.use(Router,['/router',function(mdl,path){
    console.log('enter',mdl,path)
},function(mdl,path){
    console.log('leave',mdl,path)
}]);

初始化后，可以在任意模块中使用 Nodom['$Router']访问路由对象。

创建路由

Nodom提供Nodom.createRoute方法，用于注册路由。以Object配置的形式指定路由的路径、对应的模块、子路由等。以下是一个简单的路由示例：

主模块

class Main extends Module{
	template(){
		return `
			<div>
				<!-- 点击触发路由跳转-->
				<div x-route='/hello'>hello</div>
				<!-- 指定路由模块渲染的位置-->
				<div x-router />
			</div>
		`
	}
}

创建路由

import {Nodom} from '/dist/nodom.esm.js';
//这里默认Hello为一个完整的模块
import Hello from'./route/hello.js';
//创建路由
Nodom.createRoute({
    path:'/hello',
    //指定路由对应的模块
    module:Hello
});

当点击hello时，浏览器路径会跳转到 /hello，router指令处会显示为Hello模块的内容。

上述方式会导致模块提前加载，nodom提供了通过模块路径实现懒加载，修改上例代码如下：

Nodom.createRoute({
    path:'/hello',
    // 此处设置模块路径，当执行路由时再加载Hello模块
    module:'./route/hello.js'
});

注意事项

一个模板中，只能有一个节点带router指令。
实现多级路由，需要在不同模块的模板中配置router指令。

嵌套路由

在实际应用中，通常由多层嵌套的模块组合而成。配置对象内routes属性，以数组的方式注册子路由。例如：

import {Nodom} from '/dist/nodom.esm.js';
import {Main} from './route/main.js';
Nodom.createRoute({
    path:'/main',
    //指定路由对应的模块
    module:Main，
    routes:[
    {
     	path:'/m1',
    	//指定路由对应的模块
    	module:'./route/m1.js' 
	},{
     	path:'/m2',
    	//指定路由对应的模块
    	module:'./route/m2.js'
	}]
});

当访问/main/r1时，先加载Main模块，再加载M1模块。

路由跳转

借助x-route指令，用户无需手动控制路由跳转。但在一些情况下，需要手动控制路由跳转，跳转方式为： js //path为需要跳转的路径 Nodom['$Router'].go(path);

路由传值

如果想要实现路由传值，只需在路径内以:params配置。例如：

import {createRoute} from './nodom.esm.js';
//这里默认Hello为一个完整的模块
import Hello from'./route/hello.js';
//创建路由
createRoute({
    path:'/main/:id',
    //指定路由对应的模块
    module:Hello
});

Nodom将通过路由传的值放入模块根Model的$route中。

路由模块中可以通过$route.data获取path传入的值。

<!--跳转模块 -->
<div>
<div x-route='/main/1'>跳转至模块Hello</div>
    <div x-router></div>
</div>
<!-- 路由模块Hello-->
<div>
    <!-- 值为1-->
   {{$route.data.id}} 
</div>

路由事件

单路由事件

每个路由可设置：

onEnter事件，在路由进入时执行
onLeave事件，在路由离开时执行

执行时传入参数：

module（路由绑定的模块）
当前路径

如：从/r1/r2/r3 切换到 /r1/r4/r5。则onLeave响应顺序为r3 onLeave、r2 onLeave。 onEnter事件则从上往下执行执行顺序为 r4 onEnter、 r5 onEnter。

例如：

import {Nodom} from '/dist/nodom.esm.js';
//这里默认Hello为一个完整的模块
import Hello from'./route/hello.js';
//创建路由
createRoute({
    path:'/main',
    module:Hello,
    onLeave:function(module,path){
        console.log('我执行了onleave函数');
    },
    onEnter:function(module,path){
         console.log('我执行了onEnter函数');
    }
});

全局路由事件

通过路由初始化时设置，见路由初始化，全局事件针对所有路由有效。

浏览器刷新

浏览器刷新时，会从服务器请求资源，nodom路由在服务器没有匹配的资源，则会返回404。通常的做法是: 在服务器拦截资源请求，如果确认为路由，则做特殊处理。假设主应用所在页面是/web/index.html，当前路由对应路径为/webroute/member/center。刷新时会自动跳转到/member/center路由。相应浏览器和服务器代码如下：

浏览器代码

import {Nodom,Module} from './nodom.esm.js';

class Main extends Module{
    ...
    //在根模块中增加onFirstRender事件代码
    onFirstRender:function(module){
        let path;
        if(location.hash){
            path = location.hash.substr(1);
        }
        //默认home ，如果存在hash值，则把hash值作为路由进行跳转，否则跳转到默认路由
        path ||= '/home';
       	Nodom['$Router'].go(path);
   	}
	...
}

服务器代码

服务器代码为noomi框架示例代码，其它如java、express做法相似。如果Nodom路由以'/webroute'开头，服务器拦截到请求后，分析资源路径开始地址是否以'/webroute/'开头，如果是，则表示是nodom路由，直接执行重定向到应用首页，hash值设定为路由路径(去掉‘/webroute’)。

@Instance({
    name:'routeFilter'
})
class RouteFilter{
    @WebFilter('/*',2)
    do(request:HttpRequest,response:HttpResponse){
        const url = require("url");
        let path = url.parse(request.url).pathname;
        //拦截资源
        if(path.startsWith('/webroute/')){
			//去掉/webrouter
            response.redirect('/web/index.html#' + path.substr(9));
            return false;
        }
        return true;
    }
}
export{RouteFilter};

页面路由初始化代码如下：

//设置路由基础路径为`/webroute`，此处的onEnber和onLeave可选填
Nodom.use(Router,['/webroute',onEnter,onLeave]);

更多示例参考/examples/route.html,/exampls/modules/route目录

nodom3

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads