bmwjs

1.0.0 • Public • Published

bmw.js

模板被编译后,相当于执行原生js代码,速度快是 bmw.js 最大优点

支持热加载,开发时修改内容更方便

<html>
<head>
<title>{#title}</title>
</head>
<body>

<!--可嵌套使用,同一标签最多支持3个指令-->
{include ../header.html}
<div @for="i 1, 101">
  <p @if="i === 50" @for="item,index in data">条件成立</p>
  <p @else="i > 60">一样条件 {#i}</p>
  <p @else="">默认输出 {#i}</p>
</div>

<!--模块定义-->
{module 模块名称1 参数1, 2, 3...}
{/module}
{module 模块名称2 参数1, 2, 3...}
{/module}

<!--导入模块-->
{import 模块文件地址 as 自定义名称}
{#自定义名称.模块名称1(参数1, 2, 3...)}

<!--模板继承-->
{extends ../inc/layout.html}
{block body}{/block}

<!--嵌入代码块-->
{%
for (var a = 0; a < 100; a++)
  print(a);
%}

<!--条件分支-->
{if i === 50}
{elseif i > 60}
{else}
{/if}

<!--三种循环-->
{for i, 1, 101}
{for item, index in items}
{for key, index on json}
{/for}

</body>
</html>

前端使用

<script type="text/javascript" src="bmw.js"></script>
<script type="text/javascript">

//若后端也使用bmw.js渲染,如下内容使用 \@for \@if,可以避免被后端解析
bmwjs.render('<div @for="i 1, 101">\
  <p @if="i === 50" @for="item,index in data">条件成立</p>\
  <p @else="i > 60">一样条件 {#i}</p>\
  <p @else="">默认输出 {#i}</p>\
</div>', options, function(r) {
  // r 是返回渲染后的内容
});

</script>

nodejs 中接入到 express 使用 

var bmw = require('bmw');

app.use(express.static(path.join(__dirname, 'public')));
// view engine setup
app.engine('html', function (filePath, options, callback) { // 定义模板引擎
  callback(null, lib.bmw.renderFile(filePath, options));
});

app.set('views', path.join(__dirname, 'views_bmw'));
app.set('view engine', 'html');

Readme

Keywords

Package Sidebar

Install

npm i bmwjs

Weekly Downloads

3

Version

1.0.0

License

ISC

Last publish

Collaborators

  • 2881099