2 Star 3 Fork 0

张向明 / JRazor

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

JRazor

介绍

极简约的前端模板语言。

安装

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

开发示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table {
            width: 500px;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 3px;
        }
    </style>
</head>

<body>
    <h3>JRazor示例</h3>
    <script type="text/template" id="template1">
        <h4>衣服</h4>
        <ul>
            `for(let i=0;i&lt;model.clothes.length;i++){
                `var item=model.clothes[i];
                <li>
                    <label for="name${i}">名称:</label>
                    <input id="name${i}" type="text" value="${item.name}" />
                    <label for="price${i}">价格:</label>
                    <input id="price${i}" type="text" value="${item.price}" style="color:${item.price<200?'green':'red'};" />
                </li>
            `}
        </ul>
        <h4>联系方式</h4>
        <form>
            <div>
                <label for="name">姓名:</label>
                <input id="name" type="text" value="${model.order.name}" />
            </div>
            <div>
                <label for="email">邮箱:</label>
                <input id="email" type="text" value="${model.order.email}" />
            </div>
            <div>
                <label for="tel">电话:</label>
                <input id="tel" type="text" value="${model.order.tel}" />
            </div>
        </form>
    </script>

    <script type="text/javascript" src="jrazor.js"></script>
    <script type="text/javascript">
        const api = {
            clothes: [
                { name: "衬衫", price: "120" },
                { name: "西服", price: "620" },
                { name: "裤子", price: "300" },
            ],
            order:{
                name:"张向明",
                email:"zhang_xiangm@163.com",
                tel:"15889961112"
            }
        }

        //通常使用无参的构造函数即可,以下仅为体现构造函数参数的全貌
        const razor = new JRazor({
            razor: '`',             //标记js代码的字符,默认值:`
            openLog:true,           //是否在控制台输出预编译日志,默认值:true
        });
        const template = document.getElementById("template1");
        let html = razor.execute(template, api);
        //let html = razor.execute(template,api,false); //第三个参数为false则不构建dom
        console.log(html);
    </script>
</body>
</html>

构造函数

const razor = new JRazor({
    razor: '`',             //标记js代码的字符,默认值:`
    openLog:true,           //是否在控制台输出预编译日志,默认值:true
});
参数名称 数据类型 参数说明
razor string 标记js代码的字符,缺省值为反引号`
openLog boolean 是否在控制台输出预编译日志,缺省值为true

execute方法

razor.execute(template,model,buildDom)

参数名称 数据类型 参数说明
template HTMLBaseElement 被解析的模板元素
model any 数据模型
buildDom boolean 解析完template后,是否构建dom并插入到template原来的位置,缺省值为true
函数返回值 string 构建好的html字符串

razor标记

razor标记是指您在模板中用什么字符串来标记一句javascript代码,由1-n个字符组成,默认值为反引号`,可在构造函数中声明其他razor标记:const razor=new JRazor({razor:"@"})。

  • razor标记的要求如下:
  1. 强制要求:不能是正则表达式的特殊字符 * . ? + ^ $ | \ / [ ] ( ) { }
  2. 非强制要求:不能是html标签,不能破坏xml的结构

转义字符

  • 框架本身并不要求对模板中javascript代码的特殊字符进行转义,如果您对xml有洁癖,可以将小于号转义为&lt;,将大于号转义为&gt;
  • 模板中的html代码的第一个字符一定不能是反引号´(或您在构造函数中声明的razor字符),如果您确定要怎么做,可以通过以下两种方式来解决
  1. <span>´</span>
  2. const razor = new JRazor({razor:"换一个标记"})

内置变量:model

model是JRazor的内置变量,可在模板中直接使用,其指向excute方法的二个参数,razor.excute(template,model)。

JRazor的优点

  1. 框架代码及其简单,有效代码仅50行左右,强烈建议您花10分钟时间阅读jrazor.js源代码。
  2. 过程透明,您可以打开控制台,观察预编译的代码。
  3. 没有带来任何学习成本,html还是html,javascript前加一个razor标记,除此之外您不需要学习任何陌生的标记和语法。
  4. 自定义razor标记,方便与其他模板引擎共存,如jsp和.net mvc。

JRazor方法论

  1. 工具集成: JRazor充分照顾主流的开发工具,如代码的高亮、结构校验、快捷键等。

  2. 两种视角:

    • 框架视角:JRazor的本质是javascript,模板中的每一行(包括注释和空行)都将被预编译为javascript代码,您可以在浏览器控制台看到预编译好的代码;
    • 开发视角:JRazor是一个HTML片段,因此JRazor优先照顾HTML代码的原汁原味。
  3. 我的纠结:

    • JRazor将按行解析模板的内容,以反引号`(或构造函数声明的razor标记)开始的行将被解析为javascript,以其他字符开始的行将被解析为html;
    • 牢记"按行解析"四个字很重要,您的一行代码中一定不能既有html又有javascript;
    • 之所以按行解析,是在性能、健壮性、核心代码量、可读性综合权衡后所作出的选择。
  4. 前端福祉: ${}是es6给前端工程师带来的最有诚意的礼物, 您在编写JRazor模板代码时应充分利用${},任何说明性的文字都不如您亲自打开控制台看看预编译好的代码是如何工作的。

  5. 关于源码: 如果您打开jrazor.js文件后发出“什么鬼,这叫框架?”的感叹, 那么作者会很欣慰,没错,这就是一个将近40岁的老头子搞出来的东西,100行不到的代码就是JRazor的全貌;

未来计划

将其改造成golang,pytho,node的服务端mvc视图引擎。

Comments ( 0 )

Sign in for post a comment

About

极简约的前端模板语言。 expand collapse
JavaScript and 2 more languages
GPL-3.0
Cancel

Releases

No release

JRazor

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/zhang_xiangm/jrazor.git
git@gitee.com:zhang_xiangm/jrazor.git
zhang_xiangm
jrazor
JRazor
master

Search