基於 react 後端渲染模板引擎 noox 發佈了

時間 2019-11-24

標籤基於 react 後端渲染模板引擎 noox 發佈欄目 React 简体版

原文原文鏈接

React 組件化思想受到愈來愈多開發者的關注，組件化思想幫助開發者將頁面解耦成一個一個組件，代碼更加模塊化, 更易擴展。而目前流行的後端模板引擎如 ejs, swig, jade, art 共同的問題是：css

須要學習各種模板引擎定義的語法，如 {{if}}, {{loop}}
對組件化支持不夠強，實現複雜，不易用

針對以上痛點，筆者基於 React 造出了 noox 這樣一個工具，專一於後端模板的解析，讓模板解析更加簡單，易用。node

使用方法

安裝

npm install noox
複製代碼

簡單的 demo

模板代碼

首先建立組件目錄和增長模板文件git

mkdir components && cd components
vi Head.jsx
複製代碼

Head.jsx 內容以下:github

<head>
	<title>{title}</title>
	<meta name="description" content={props.description} />
	<link rel="stylesheet" href="./css/style.css" />
</head>
複製代碼

Node.js Code

const noox = require('noox');
const nx = new noox(path.resolve(__dirname, './components'), {title: 'noox'});
let output = nx.render('Head', {description: 'hello, noox.'})
複製代碼

輸出

<head>
	<title>noox</title>
	<meta name="description" content="hello, noox." />
	<link rel="stylesheet" href="./css/style.css" />
</head>
複製代碼

原理

Noox 在 React 的 Jsx 的基礎上，簡化了組件引用和建立，假設建立一個目錄結構以下：npm

components/
  Header.jsx
  Body.jsx
  Layout.jsx
複製代碼

運行以下 nodejs 的代碼：後端

nx = new noox(path.resolve(__dirname, './components'))
複製代碼

將會建立三個組件：api

Header
Body
Layout

而後經過 nx.render 渲染bash

nx.render('Body', props)
複製代碼

後記

感興趣的能夠 star 關注下，共同探討模塊化

Github: noox工具

另外推廣下咱們團隊的項目 YApi

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。