制作此功能的动机:
1.作为前端开发人员,一直在使用大量的Div或者HTML标签实现展现形式,但个人理解,HTML标签语言的语义还是比较大众化与功能化的,针对企业稳定的框架而言,还是不够人性化;
2.同时,作为有一定年限的开发人员而言,都会形成大量的组件积累,而这些固化的积累需要通过不停的拷贝来复用,多余的重复的无效的工作量付出;
3.随着专业化的提升,组件化和应用化是软件的一个趋势,随着人力成本的增加,也是必须考虑的问题,降低门槛或者程序员分级分工是必然趋势,实现展现和实现组件进行分离;
4.JS有Dart,CoffeeScript,TypeScript;CSS有Less,Sass等工具,但html缺少此类语言来弥补这一空缺
目标:
实现helloworld的页面代码编写格式如下:
<import:zx name="base" src="base"/>
<html:base>
<helloworld:base welcome="您好,欢迎光临!"/>
</html:base>
主要内容为:包导入,命名空间,自定义标签语义
最终产出内容:
<!DOCTYPE html>
<html lang="zh-CN">
<head><title>模板</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<style>html, body {
height: 100%;
}</style>
</head>
<body>
<center>您好,欢迎光临!</center>
</body>
</html>
工具选择
1.前端人员期望语言为JS,优先考虑JS实现,选择了NodeJS,因为他能读写JS文件,而且是命令形式,给研发人员自我牛B的时尚感
2.前端开发自动化选择了Grunt,因为他上面已经积累了大量的压缩,合并,校验等一系统的NODEJS组件库
关键点:
1.包概念,包导入功能------------组件开发由多人开发,为了避免冲突,命名空间+包进行隔离是必须的
2.模板化、标签化语言------------前端对于HTML的熟悉,让我考虑继续使用xml的语言方式
实现理论(SO-EASY)
读取源代码---》解析源代码---》加载包组件---》组件替换----》目标文件落地
具体内容:
请自行用nodejs的npm安装:zx-grunt-parser,zx-grunt-html两个组件
是MIT协议,请自看实现源码,不做解释
环境搭建示例:
1.安装NodeJS:http://nodejs.cn/download/
2.在目标目录创建NodeJS的插件需求文件:目标目录/package.json
{
"name": "demo",
"description": "parser zxhtml template to html",
"version": "0.1.0",
"author": {
"name": "Bennes",
"email": "Bennes@163.com"
},
"engines": {
"node": ">= 0.8.0"
},
"scripts": {
"test": "grunt test"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-clean": "^0.7.0",
"xml2js": "^0.4.15",
"zx-grunt-html": "^0.1.10",
"zx-grunt-parser": "^0.1.6"
},
"peerDependencies": {
"grunt": "~0.4.5"
},
"keywords": [
"gruntplugin"
]
}
3.进入window批处理命令行,切换至目标目录(命令:cd /d 目标目录)
4.执行命令npm install,自动下载node包
5.下载grunt的命令行执行包:npm install -g grunt-cli
到此为止,环境安装完成,你可以通过在目标目录输入grunt -V查看对应的grunt版本
6.编写自已的代码
自已的代码有二部分内容:
语义代码:目标目录/src/helloword.html
<import:zx name="base" src="base"/>
<html:base>
<helloworld:base welcome="您好,欢迎光临!"/>
</html:base>
模板代码:目标目录/template/helloword.zx
<templates>
<template name="html">
<![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>模板</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<%this.zxBlock%>
</body>
</html>
]]>
</template>
<template name="helloworld">
<![CDATA[
<center><%this.welcome%></center>
]]>
</template>
</templates>
注:a.模板语言使用this.来引用自定义标签中的属性;b.模板使用<%%>来包裹代码段;c.模板代码段支持js语法;d.this.zxBlock作为块标签代码嵌入,为关键字,变量名中不要使用;e.模板文件以.zx作为后缀,如果层级比较深,可命名用a.b.c;f. //头部可以是数字和大小写字母,包空间必须为小写字母与数字,属性名为大小写字母与数字,属性只能被双引号包裹,属性值为大小写字母与数字,空格,及特殊字符";-,:[]{}'".当属性中出现[]{},则属性值转化为对象存储,具体词条解析正则表达式如下(大家需要,可自行修改):
var labelReg = new RegExp("(<[a-zA-Z0-9]+:[a-z0-9]+(\\s*[a-z0-9A-Z]+=\\\"[^\\\"]*\\\")*\\/{0,1}>)|(<\\/[a-zA-Z0-9]+:[a-z0-9]+>)");
块标签与个体标签的概念来源于velocity
块标签:内容嵌套其他标签或有内容的标签,如<center>abc</center> <div>fafdfdf</div>
个体标签:<input type="text" value="你好">、<br/>
<import:zx name="base" src="base"/> 此语句作为包导入语句,只能修改name与src name作为后面自定义标签的内容,如<span style="font-family: Arial, Helvetica, sans-serif;">html:base,表示base下的html模板</span>
<span style="font-family:Arial, Helvetica, sans-serif;">src的内容,表示模板位置,为gruntfile.js中配置的模板目录下文件,可以为com.base,相当于com/base.zx模板文件,其中标签语言中的前半部分需要与模板中的</span><pre name="code" class="html"><template name="html">中name的属性值进行对应
7.配置执行任务文件(此内容,请自学Grunt官网,以下仅供参考):Gruntfile.js
/*
* grunt-zx-html
* https://github.com/zengxiao/template
*
* Copyright (c) 2015 Bennes
* Licensed under the MIT license.
*/
'use strict';
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
clean:['tmp/**/**','bin/**/**'],
zx_parser: {
build: {
options: {
trimable:true,
basePath:"src/",
binPath:"tmp/"
},
files: {
'tmp/': ['src/**/**.html']
}
}
},
// Configuration to be run (and then tested).
zx_html: {
build: {
options: {
basePath:"tmp/",
binPath:"bin/",
tmplPath:"template/",
trimable:true
},
files: {
'tmp/': ['tmp/**/*.html']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('zx-grunt-parser');
grunt.loadNpmTasks('zx-grunt-html');
grunt.registerTask('default', ['clean','zx_parser','zx_html']);
};
zx_parser参数说明:
options: {
trimable:true,//是否去除源代码的换行与空格
basePath:"src/",//当前目录的源代码
binPath:"tmp/"//当前词条解析中间成果物保存目录
},
files: {
'tmp/': ['src/**/**.html']//哪此作为源文件**作为匹配符
}
zx_html参数说明:
options: {
basePath:"tmp/",//zx_parser对应的binPath目录
binPath:"bin/",//最终成果物目录
tmplPath:"template/",//模板目录
trimable:true//是否对模板中进行空格与换行去除
},
files: {
'tmp/': ['tmp/**/*.html']//为词条解析中间成果物
}
最终完成之后,目标目录文件列表如下
├─node_modules(此目录下的文件不列举了)
├─src
└─helloworld.html
└─template
└─base.zx
8.代码完成,看收获,只需要在cmd批处理中,执行grunt即可,最终会产生一个压缩版本的html内容,如果需要格式化一下,请使用其他工具,暂时未开发
在线格式化地址:http://tool.oschina.net/codeformat/
现在很多编辑也支持格式化
最后的期望:希望大家能来丰富模板库,最后,能快速的创建前端html代码,如果你想更改某个控件,在也不用一个个地方找了;你不善长页面,自定义的标签+组件,同样可以让你快速呈现自己的页面
后面有机会,我将继续丰富与webstorm的整合,实现模板提醒;开发一个像JSDuck的工具,快速从模板中提取自定义标签文档,如果你有兴趣,欢迎加我微信:zx86250268