❤
npm
Sign UpSign In

hcs

0.1.10 • Public • Published

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库

Readme

Keywords

Package Sidebar

Install

npm i hcs

Repository

github.com/ly891763/HCS

Homepage

github.com/ly891763/HCS#readme

Weekly Downloads

6

Version

0.1.10

License

BSD-3-Clause

Last publish

Collaborators

  • ly891763
Try on RunKit
Report malware