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. 在jdk7下慎用String.intern()作为synchronized的对象锁

    有一段这样的代码: for (int i = 0; i < 10000000; i++) { ("bluedavy" + i).intern(); if(i % 100 == ...

  2. JDBC的URL

    JDBC的URL＝协议名+子协议名+数据源名. 协议名总是“jdbc”. 子协议名由JDBC驱动程序的编写者决定. 数据源名也可能包含用户与口令等信息:这些信息也可单独提供. 几种常见的数据库连接 o ...

  3. 代码实现:从键盘输入接收一个文件夹路径,打印出该文件夹下所有的.java文件名

    package com.loaderman.test; import java.io.File; import java.io.FileReader; import java.util.Scanner ...

  4. Selenium 2自动化测试实战25（自动化测试模型）

    一.自动化测试模型 自动化测试模型介绍:线性测试.模块化驱动测试.数据驱动测试和关键字驱动测试 线性测试:每个测试脚本相对独立,且不产生其他依赖与调用,只是单纯的来模拟用户完整的操作场景.模块化驱动测 ...

  5. jsp部分

    1,struts2下拉框,直接赋值.<s:select list="#{'':'---请选择---','0':'否','1':'是'}"listKey="key&q ...

  6. JAVA8中Predicate,Consumer，UnaryOperator，Function接口的应用

    笔者平时时间有限,直接贴代码,关于几个接口的差别,可以查看这两篇文章 感受lambda之美,推荐收藏,需要时查阅 https://juejin.im/post/5ce66801e51d455d850d ...

  7. Centos7 安装 Amazon Corretto 8

    yum install dejavu-sans-mono-fonts dejavu-serif-fonts jpackage-utils wget https://d3pxv6yz143wms.clo ...

  8. Spring集成CXF获取HttpServletRequest,HttpServletResponse

    最近的项目中,在Spring继承CXF中要用到request来获取IP,所以先要获取到HttpServletRequest对象,具体方法如下: 1.配置文件: <jaxrs:server id= ...

  9. [转] An In-Depth Look at the HBase Architecture - HBase架构深度剖析

    [From] https://mapr.com/blog/in-depth-look-hbase-architecture/ In this blog post, I’ll give you an i ...

  10. AESTest

    using Gaea.MySql; using System; using System.Data; using System.IO; using System.Security.Cryptograp ...