hcs

v0.1.10

Published

2 years ago

HTML precompiled by component tool

Downloads

0High
0Medium
0Low

ly891763

HTML compile component

HTML组件预编译系统

回归本源，只做纯粹的HTML。使用组件方式拼装HTML。

安装

npm install hcs -g

使用组件

系统对页面中的组件进行预编译，实现HTML组件化

安装组件

组件计划采用文件夹方式管理，也可选采用依赖方式，由组件开发者设定组件git地址。

将下载好的组件复制到项目中为组件设置的文件夹即可，文件夹可随意命名，默认组件目录名称为HCSLib

使用方法

在HTML中的使用方法

假设已安装了一个名为component的组件，直接在HTML中作为标签使用即可

<!-- index.html -->
<component var-name="component_obj" data-a="a" data-b="b">
	something or other component label
</component>

对于包含有循环内容的组件，组件将对组件内的第一级子元素进行遍历，例如：

<!-- index.html -->
<component var-name="component_obj" data-a="a" data-b="b">
    <div class="anyClass">
	    something or other component label
    </div>
    <h1 class="anyClass">
	    something or other component label
    </h1>
    <div>
	    something or other component label
    </div>
</component>

在js中的使用方法

如果要使用组件对象，则在组件属性中增加var-name属性，然后即可在js代码中使用该名称即可。因此，用于为组件导出对象的var-name属性命名一定要符合js变量命名规则。

<!-- index.html -->
<component var-name="component_obj">
	something or other component label
</component>

编译器提供了document.ready方法，组件对象在该方法中使用，支持队列，如下所示：

// user script
document.ready(function(){
  // TODO: some init func
  component_obj.someMethod();
});
document.ready(function(){
  // TODO: some other init func
});

属性

组件可以通过标签中的data-*属性向组件传递数据

<!-- index.html -->
<component var-name="component_obj" data-a="a" data-b="b">
	something or other component label
</component>

帮助

组件可以通过增加help属性获取组件帮助。

设置help属性后，组件中的其他属性失效
设置help属性后，组件内部的HTML代码全部失效，仅显示帮助信息

<!-- index.html -->
<component help="true" var-name="component_obj" data-a="a" data-b="b">
	something or other component label
</component>

编译

随后执行hcs -in src -out build -lib componentsPath即可在build目录生成编译的文件，文件结构如下：

build
- index.html
- js/index_hcs.js
- css/index_hcs.css

在js/index_hcs.js和css/index_hcs.css中分别集成了component组件所使用的js和css代码。

--lib componentsPath表示组件文件所在的路径，默认路径为./HCSLib

配置文件-HCSConf.json

除了在命令行输入参数外，也可以使用配置文件方式进行编译，如hcs -conf demo/confDir ，默认路径为当前路径，配置文件名固定为HCSConf.json

// HCSConf.json
{
  "in" : "src",
  "out": {
    "root": "build",
    "html" : "",
    "js" : "js",
    "css" : "css"
  },
  "lib" : "HCSLib",
  "resource": {
    "root": "src",
    "path": [
      "js",
      "rs"
    ]
  },
  "watch": 60000
}

in：输入目录，所有被编译的文件都在该目录下
out：编译文件输出目录，也可以直接设置为字符串，如"out2" : "build"，此时root默认为"build"，js默认为"js"，css默认为"css"，html默认为""。
- root：用于标记根路径，主要在复制额外资源文件时使用。
lib：组件库目录
resource：资源目录，所有资源目录将被复制到输出目录中html的同级目录下。
- root：根路径，仅用于定位资源，不参与输出目录的写入
- path：资源相对路径，用于定位资源，并且在输出目录中也会按照该路径写入
watch：文件监听选项，该选项设置的是监听间隔时长，单位ms。

创建组件

您可以自由的创建组件，并将组件集成到您的HTML当中。

组件的文件结构

componentName**[文件夹]**

config.json
```
// 组件配置文件，可配置依赖项
// 定义数据传递方式，如html直接写入或js动态获取
{
  "version": "1.0.0",
  "name": "组件名称",
  "description": "描述",
  "initJs" : "var {{autoVarName}} = new componentName({{params}});{{autoVarName}}.init();",
  "export" : true,
  "help" : "<p>这里为使用者提供帮助信息，当组件标签中含有help属性时，编译后的文件中将会显示这段文字</p><p>因为是直接输出到HTML文档中，因此可以使用任何支持的HTML标签和css样式</p>"
}
```
- initJs: 用于初始化的js代码
  - {{autoVarName}}为默认字段，每个初始化代码中最多有一个{{autoVarName}}，编译后会被替换为动态的变量名称
  - {{params}}为参数字段，编译器会将组件的data-*的属性全部整合到一个对象中传入，如果组件含有id属性，id属性也会被整合到参数对象中，键值为id。该属性与data-id互相冲突，请避免使用data-id属性传递参数。
- export: 是否含有对外使用的js对象，如果有值，则编译时会检查组件的var-name属性，并使用var-name属性的值作为变量名。注意：当export=true并且编译器发现组件含有var-name属性时，编译器会自动将加入{{varName}} = {{autoVarName}}，并将代码加入到js文件中，此时要求initJS字段中必须含有{{autoVarName}}。

componentName.html

<!-- 组件HTML内容模板 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>componentName</title>
    <link rel="stylesheet" href="componentName.css">
    <script src="componentName.js"></script>
  </head>
  <body>
    <!-- body内部为组件内容，body最多只能有一个子元素 -->
    <div>
      <span>Hello world!</span>
      <div>
        {{content}}
      </div>
    </div>
  </body>
</html>

如果组件含有循环体，使用{{loop}}和{{/loop}}标签标识循环体，{{content}}必须在{{loop}}和{{/loop}}中间使用。

<!-- 组件HTML内容模板 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>componentName</title>
    <link rel="stylesheet" href="componentName.css">
    <script src="componentName.js"></script>
  </head>
  <body>
    <!-- body内部为组件内容 -->
    <div>
      <span>Hello world!</span>
      {{loop}}
      <div>
        {{content}}
      </div>
      {{end}}
    </div>
  </body>
</html>

componentName.js js脚本一定有且只有一个类，不允许有任何在这个类以外代码。创建类实例请在config.json文件中的initJS字段创建。

类名必须为componentName，与组件名称保持一致

/** debug **/
// 这部分代码用于组件单独调试，不会加载到实际输出中
var component = new componentName(1, 2);
/** end **/
// componentName类构造函数
function componentName(x, y) {
  this.x = x;
  this.y = y;
}
componentName.prototype.showColor = function() {
  alert(this.color);
};
// 或使用class
class componentName {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

componentName.css
```
html,body{padding: 0}
```

待增加

组件依赖管理
- 依赖的其他组件
- 依赖的js和css库

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme