基于nodejs服务端web组件化开发（三、渲染方法）

三、渲染方法

上节，说到了组件的结构已搞定，但是样式还没看到，于是想起我们最后一个方法 render 还没发挥作用，下面开始拼装结构、样式和脚本。

// hcdr/index.js 中加入

function render(component, data, css) {
  // 标签模板构建的函数，在执行时会往下钻取特点
  // 最后执行一次组件将获取整个结构
  let strHtml = component(data || {}, css || {})

  // 把容器中缓存的样式代码组合起来
  let strCss = container.style.filter(str => str).join("\n")

  // 容器中脚本是函数这里只需要函数体
  let strJs = container.script
    .filter(fn => fn)
    .map(fn => {
      const str = fn.toString()
      let start = str.indexOf("{")
      let end = str.lastIndexOf("}")
      return str.substring(start + 1, end)
    })
  // 返回拼装的结构 ，脚本用闭包结构
  return `
  <style>${strCss}</style> 
  ${strHtml} 
  <script>
  ;(function(){
  ${strJs}  
  })()
  </script>
  `
}

// 导出
module.exports = { html, css, define, render }

搞定渲染方法 render 后将下面代码改写后执行

// test2.js 修改
const { html, css, define, render } = require("hcdr")
// ...
const code = render(Layout, { slot: Home() })
console.log(code)

可以得到我们想要结果了结构、样式和脚本都齐全了

<style>
  .navbar {
    color: red;
  }

  .navbar {
    color: blue;
  }
</style>
<div id="app">
  <header><div class="header">头部</div></header>
  <nav><div class="navbar">导航</div></nav>
  <main>undefined</main>
  <footer><div>底部</div></footer>
</div>
<script>
  ;(function () {
    console.log("我是在游览器执行的脚本.")
  })()
</script>

从上看出，实现 node 服务端组件化开发是可行的。 但是这种方式，当组件复用时，样式会被最后的进行覆盖。 下节，我们来解决这个问题。