基于nodejs服务端web组件化开发（一、组件的构建）

概述

在nodejs服务端开发web时现在用模板ejs/art-template比较多，总感觉和前端react、vue比起来缺点什么--没有“组件化”的感觉，其他感觉对于一些小项目太过复杂。 直接用模板字符串写起来爽快，面临怎样把 css 和 js 整合起来，于是弄个 define 方法来绑定起来当组件，最终发布时调用 render 方法来搞定。思路确定，立马动手，就建个文件夹hcdr-project。

一、组件的构建

ES6 引入了模板字符串，大家都在用，但是"标签模板"用的就不多了，这里的标签实际上是个函数，如：

// test.js

function tag(strs, ...data) {
  console.log({ strs, data })
}
const tpl = ({ name, age }) => tag`姓名:${name}，年龄：${age}。`
const code = tpl({ name: "张三", age: 19 })
console.log(code)

运行node test

{ strs: [ '姓名:', '，年龄：', '。' ], data: [ '张三', 19 ] }
undefined // 当然没有返回值，压根就没写

标签模板函数实际上把模板的内容分为两个数组，一个保存字面量值，一个是保存变量的值，于是将 tag 方法中数据进行拼接后返回，就是得到预期的结果。

function tag(strs, data) {
  return strs[0] + data.map((val, index) => `${val}${strs[index + 1]}`).join("")
}

// 姓名:张三，年龄：19。

这样我们的html样子就有了基础，在用 vscode 时发现有个lit-plugin插件,在书写模板字符串时有高亮和提示于是也就定义了两个方法html和css,写起模板和样式很爽。

为了方便引入，我们把核心包当成三方库安装使用 在根目录创建核心包文件夹和引入文件hcdr/index.js 并npm init -y初始化 回到根目录安装核心包文件夹

npm i ./hcdr

这样以后我们引入时就不需要点点了,把上面标签模板函数放入核心库中并创建 html 和 css 组件构建工具

// hcdr/index.js 新增
function tag(strs, data) {
  return strs[0] + data.map((val, index) => `${val}${strs[index + 1]}`).join("")
}
const html = tag
const css = tag

module.exports = { html, css }

创建测试文件

// test1.js 新增
const { html, css } = require("hcdr")

// HTML
const template = () => html` <div class="header">Header</div> `

// CSS style
const style = () => css`
  .header {
    color: red;
  }
`
// JavaScript
const script = () => {
  console.log("我是在游览器执行的...")
}

consolog("组件名称", { template, style, script })

在 hcdr-project 下控制台输入 node test1 运行，可看到返回三个函数 这三个函数就是我们准备来捆绑在一起构建组件的结构，这节先体会下标签模板函数 下节，怎样去将这几个东西包装起来....