前端开发服务框架

CSS模块化标签

只有1个标签：@import

引用模块代码示例：

注：文件路径算法就跟CSS原生的import的路径算法一样。事实上这跟CSS原生的import就是一样的，除了这里的@import标签可以放在css代码里的任意位置！

HTML模块化标签与语法

2个标签：include引用模块，mokdata给模块传递数据

1个内置对象$data，$data有2个内置属性__preview和__file（不能使用这3个字符串作为变量名）

示例1：

示例2：

说明：{{$root}}为输出项目配置里的全局变量$root。

{{}}里还能嵌入JS代码（一个JS函数体），返回值将被输出：

{{
	//这里可以是JS函数体，如下：
	var html = '';
	for(var i = 0; i < 10; i++){
		html += '<div>div '+ i +'</div>';
	}
	return html; //return的值将被输出
}}

{{ return $data.isTop ? 'top content' : 'not top' }}

{{
	//还可以用两个中括号代替引号包着一整块的html
	if($data.someConditions){
		return [[
			<dl class="s-txt">
				<dt class="caption"></dt>
				<dd class="time"></dd>
			</dl>
		]];
	}
}}

注意：在JS代码里，只能通过对象$data访问传递给当前模块的数据，包括项目配置里的全局变量。

预览模块：

{{
	if($data.__preview){
		return '<link rel="stylesheet" type="text/css" href="'+$data.$root+'css/common.css" />';
	}
}}

{{ return $data.__preview ? '<link rel="stylesheet" type="text/css" href="'+$data.$root+'css/top.css" />' : '' }}

<div>a module</div>

说明：
1、__preview为moktext的内置对象$data的一个属性，预览模块时此属性为true。解决在预览时输出特定的html代码，而这些代码在调试整个页面或构建项目时又不需要输出。
2、__file也是moktext的内置对象$data的一个属性，值为浏览器当前请求的这个文件（包括文件路径）。例如浏览器地址为http://m.com/mokdoc/index.html，则$data.__file的值为“mokdoc/index.html”。