當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

EJS学习（五）之EJS的CommonJs规范版本

發布時間：2025/3/15 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 EJS学习（五）之EJS的CommonJs规范版本小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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')[0].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 && "0" == 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 && "0" == result.code && result.json) {var template = ejs.compile($("#interpolationtmpl").text()); // 取到模版var rs = template(result.json); // 使用數據渲染$("#interpolation").html(rs); // 添加進之前準備好的Dom }}});

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

轉載于:https://www.cnblogs.com/kunmomo/p/11468354.html

總結

以上是生活随笔為你收集整理的EJS学习（五）之EJS的CommonJs规范版本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。