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. Python 图形界面元素

    from tkinter import * import os def button_click1(): try: filePath = r'D:\CloudMusic' os.system(&quo ...

  2. Spring Annotations

    @Bean 这是一个方法注解,作用是实例化一个Bean并使用该方法的名臣命名.

  3. 使用ViewFlipper实现广告图片的自动轮播的效果

    轮播资源图片的实现 package com.loaderman.viewflipperdemo; import android.os.Bundle; import android.support.v7 ...

  4. 图片加载框架之ImageLoader

    Android开发中,多少会接触到异步加载图片,或者加载大量图片的问题,而加载图片我们常常会遇到许多的问题,比如说图片的错乱,OOM等问题,对于这些问题解决起来会比较吃力,比较著名的就是Univers ...

  5. numpy之填充为nan的数据为该列平均值

    # coding=utf-8 import numpy as np ''' 填充nan的数据,为该列的平均值 ''' def fill_ndarray(t1): for i in range(t1.s ...

  6. JS进阶学习<一>

    一:区分大小写: 1. JS是区分大小写的,如:classname和ClassName是不一样的.同时注意方法.属性.变量等的大小写吆. 2. JS中的字符.符号等一定要在英文状态下输入吆. 二:变量 ...

  7. 【MFC】BitBlt详解

    设备上下文绘图有很多种方法.例如通过创建位图画刷,利用其填充一个区域来实现图像的绘制.此外,还可以使用CDC类的位图函数来输出位图到设备上下文中. BitBlt 用于从原设备中复制位图到目标设备,语法 ...

  8. C# WPF DataGrid在Grid中自适应窗体大小

    XAML 中设置   例如 <DataGrid AutoGenerateColumns="False" Margin="6" Name="dgV ...

  9. 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍

    安装过程:  1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...

  10. staticmethod自己定制

    class StaticMethod: def __init__(self,func): self.func=func def __get__(self, instance, owner): #类来调 ...