EJS的CommonJs规范版本

ejs分为两个版本一个是CommonJs版本,另外一个是AMD规范的版本.

基础：html页面

安装：<script type="text/javascript" src="./node_modules/ejs/ejs.js"></script>

检查：ejs会将自身挂载到window对象上,所以你只要console.log(ejs)控制台有输出就说明安装成功了.

调试：在浏览器中

注意：和AMD规范版本不同，EJS的CommonJs版本要写在html中

查看是否成功引入ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./ejs.min.js"></script>

    <script>

        window.onload = function() {

            console.log(ejs);

        }

    </script>

</head>

<body>

</body>

</html>

渲染单个数据

方法一：ejs.render(str，data，options)

实例一：

// 14.html内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./ejs.min.js"></script>

    <script>

        window.onload = function() {

            var string = ejs.render('<h2><%= title %></h2>',{title:'hello'});

            document.getElementsByTagName('body')[].innerHTML = string;

        }

    </script>

</head>

<body>

</body>

</html>

// 在浏览器中打开页面输出 hello

实例二：

// 实际应该展示在页面上的Dom

<div id="interpolation"></div>

// 模版

<script id="interpolationtmpl" type="text/x-dot-template">

    <!-- 新增用户弹窗 -->

    <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog"

         aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;">

        <div class="q-popup-modal modal-dialog" style="width: 900px;background-color: #ffffff;">

            <div class="popup-header modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                {{? it.data && it.data.id}}

                更新计划

                {{??}}

                新增计划

                {{?}}

            </div>

        </div>

    </div>

</script>

// 编译和渲染

jQuery.ajax({

     type: "get",

     url: "http://",

     dataType: "json",

     success: function (result) {

     if (result && "" == result.code && result.json) {

          var str = ejs.render($("#interpolationtmpl").text(),result.json); // 取到模版并使用数据渲染

　　　     $("#interpolation").html(str); // 添加进之前准备好的Dom

        }

     }

 });

方法二：ejs.compile(str，options)(data)

// 实际应该展示在页面上的Dom

<div id="interpolation"></div>

// 模版

<script id="interpolationtmpl" type="text/x-dot-template">

    <!-- 新增用户弹窗 -->

    <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog"

         aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;">

        <div class="q-popup-modal modal-dialog" style="width: 900px;background-color: #ffffff;">

            <div class="popup-header modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                {{? it.data && it.data.id}}

                更新计划

                {{??}}

                新增计划

                {{?}}

            </div>

        </div>

    </div>

</script>

// 编译和渲染

jQuery.ajax({

     type: "get",

     url: "http://",

     dataType: "json",

     success: function (result) {

     if (result && "" == result.code && result.json) {

          var template = ejs.compile($("#interpolationtmpl").text()); // 取到模版

          var rs = template(result.json); // 使用数据渲染

　　　     $("#interpolation").html(rs); // 添加进之前准备好的Dom

        }

     }

 });

其他用法和AMD规范的版本相同

EJS学习（五）之EJS的CommonJs规范版本的更多相关文章

  1. EJS学习（一）之特性、安装、工作原理

    前言 EJS,"E" 代表 "effective",即[高效],EJS 是一套简单的JavaScript模板,EJS 没有如何组织内容的教条:也没有再造一套迭代 ...

  2. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  3. 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  4. NodeJS学习笔记—1.CommonJS规范

    由于现在web开发,越来越重视代码的复用和抽象的封装,为了解决代码的组织结构.管理.复用和部署等问题,现在普遍采用的机制是模块机制(module).CommonJS约定桌面应用程序和服务器应用程序需要 ...

  5. EJS学习（三）之语法规则中

    ⚠️实例均结合node,也就是AMD规范版本 ejs中使用render()表示渲染文本 接收三个参数:模版字符串.data.options,返回一个字符串 const ejs = require('e ...

  6. 学习笔记：CommonJS规范、AMD规范

    CommonJS规范 http://wiki.jikexueyuan.com/project/webpack-handbook/commonjs.html CommonJS 规范 http://www ...

  7. EJS学习（二）之语法规则上

    标签含义 <% %> :'脚本' 标签,用于流程控制,无输出即直接使用JavaScript语言. <%= %>:转义输出数据到模板(输出是转义 HTML 标签)即在后端定义的变 ...

  8. NodeJS新建服务器以及CommonJS规范

    1.什么是node.js?(1)Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.( ...

  9. Commonjs规范及Node模块实现

    前面的话 Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于java ...

随机推荐

  1. Laravel find in set排序

    做项目遇到个需求,需要对结果集中的数据进行指定规则的顺序排列.例如,用户状态有四种: 0=>未激活:1=>正常:2=>禁用:3=>软删除 现在的需求是,我要按照:正常-> ...

  2. ILSpy C# language support status

    C# language support status Asynchronous methods 已经支持 Generalized async return types  还不支持 Async main ...

  3. jxbrowser 实现java 和 js互相调用

    https://blog.csdn.net/shuaizai88/article/details/73743626 今天我们使用jxbrowser  实现js直接调用java代码. 调用javaTes ...

  4. win10搜索框突然不能使用了

    备忘: win10搜索不出来了,使用以下方法恢复了,备忘下 1,首先打开任务管理器 重新启动wservice服务 2.发现这时候搜索依然不能使用 然后重新启动explorer.exe (1)右键关闭该 ...

  5. 【转】composer proc_open(NUL)报错问题

    composer  执行的时候报错错误信息如下: [ErrorException] proc_open(NUL): failed to open stream: No such file or dir ...

  6. Workflow-产品：泛微工作流引擎

    ylbtech-Workflow-产品:泛微工作流引擎 1.返回顶部 1. 工作流引擎平台技术架构 TECHNOLOGY FRAMEWORK 高度协同系统各应用模块 泛微工作流引擎平台是整个协同办公平 ...

  7. Mysql-将一张表中的数据批量导入另一张表中

    由于mysql不支持select into 方法,mysql怎样将一张表的查询结果存到另一张表中? 找了两个方法 第一种: create table dust select * from studen ...

  8. OpenStack 的单元测试

    目录 文章目录 目录 前言 单元测试能提高生产率 Python 单元测试工具清单 unittest Test Discover Test Fixture Test Suite Assert(断言) m ...

  9. 使用shiro遇到的问题

    Caused by: java.lang.NoClassDefFoundError: net/sf/ehcache/CacheException 解决问题:缺少一个依赖的缓存jar 添加: <d ...

  10. Bug解决：mysql 创建表字段Double类型长度

    excel导入数据进行新增时,发现安装高度和可视距离在数据库创建都是double类型 程序跑完,执行成功后,数据库的数据是2,小数点后的数据没有了 打印sql并执行后发现sql并没有错误, 检查数据库 ...