วิธีการใช้ underscore.js เป็นเครื่องมือแม่แบบ?

ฉันพยายามเรียนรู้เกี่ยวกับจาวาสคริปต์ใหม่ ๆ ในฐานะภาษาเซิร์ฟเวอร์และภาษาที่ใช้งานได้ ไม่กี่วันที่ผ่านมาฉันได้ยินเกี่ยวกับ node.js และแสดงกรอบงาน จากนั้นฉันเห็น underscore.js เป็นชุดฟังก์ชันยูทิลิตี้ ผมเห็นคำถามนี้ใน StackOverflow มันบอกว่าเราสามารถใช้ underscore.js เป็นเครื่องมือแม่แบบ ใครรู้บทเรียนที่ดีเกี่ยวกับวิธีการใช้ underscore.js สำหรับการสร้างเทมเพลตโดยเฉพาะอย่างยิ่งสำหรับผู้ที่มีประสบการณ์น้อยกับจาวาสคริปต์ขั้นสูง ขอบคุณ

ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับแม่แบบขีดเป็นที่นี่ 3 ข้อที่ควรทราบ:

1. <% %> - เพื่อรันโค้ดบางอย่าง
2. <%= %> - เพื่อพิมพ์ค่าในเทมเพลต
3. <%- %> - เพื่อพิมพ์ค่าบางค่า HTML ที่หลบหนี

นั่นคือทั้งหมดที่เกี่ยวกับมัน

ตัวอย่างง่ายๆ:

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

จากนั้นtpl({foo: "blahblah"})จะถูกแสดงผลเป็นสตริง<h1>Some text: blahblah</h1>

<!-- Install jQuery and underscore -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%
        // repeat items 
        _.each(items,function(item,key,list){
          // create variables
          var f = item.name.split("").shift().toLowerCase();
      %>
        <tr>
          <!-- use variables -->
          <td><%= key %></td>
          <td class="<%= f %>">
            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
            <h3><%- item.name %></h3>
            <p><%- item.interests %></p>
          </td>
        </tr>
      <%
        });
      %>
    </tbody>
  </table>
</script>

<!-- Create your target -->

<div id="target"></div>

<!-- Write some code to fetch the data and apply template -->

<script type="text/javascript">
  var items = [
    {name:"Alexander", interests:"creating large empires"},
    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
    {name:"..."},
    {name:"Yolando", interests:"working out"},
    {name:"Zachary", interests:"picking flowers for Angela"}
  ];
  var template = $("#usageList").html();
  $("#target").html(_.template(template,{items:items}));
</script>

• JsFiddleขอบคุณ @PHearst!
• JsFiddle (ล่าสุด)
• รายการJsFiddleจัดกลุ่มตามตัวอักษรตัวแรก (ตัวอย่างที่ซับซ้อนด้วยภาพ / การเรียกฟังก์ชันแม่แบบย่อย) แยกไว้! มีระเบิด ...
• JsFiddle Demo ของแฮ็ค XSS ที่บันทึกโดย @tarun_telang ด้านล่าง
• JsFiddleหนึ่งวิธีที่ไม่ได้มาตรฐานในการทำเทมเพลตย่อย

ในรูปแบบที่ง่ายที่สุดคุณจะชอบ:

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });
//html is now '<li>John Smith</li>'   

หากคุณกำลังจะใช้แม่แบบสองสามครั้งคุณจะต้องรวบรวมมันเพื่อให้เร็วขึ้น:

var template = _.template('<li><%= name %></li>');

var html = [];
for (var key in names) {
    html += template({ name: names[i] });
}

console.log(html.join('')); //Outputs a string of <li> items

ฉันชอบไวยากรณ์สไตล์หนวด คุณสามารถปรับเครื่องหมายโทเค็นเทมเพลตเพื่อใช้เครื่องหมายปีกกาคู่:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

var template = _.template('<li>{{ name }}</li>');

เอกสารสำหรับการสร้างเทมเพลตเป็นบางส่วนฉันดูแหล่งที่มา

_.templateฟังก์ชั่นมี 3 ข้อโต้แย้ง:

1. ข้อความสตริง: สตริงแม่แบบ
2. ข้อมูลวัตถุ: ข้อมูลการประเมินผล
3. การตั้งค่าวัตถุ: การตั้งค่าท้องถิ่น_.templateSettingsเป็นวัตถุการตั้งค่าร่วม

หากไม่ได้รับข้อมูล (หรือ null) ฟังก์ชันการแสดงผลจะถูกส่งคืนมากกว่า มันมี 1 ข้อโต้แย้ง:

1. ข้อมูลวัตถุ: เหมือนกับข้อมูลข้างต้น

มี 3 รูปแบบ regex และพารามิเตอร์แบบคงที่ 1 ในการตั้งค่า:

1. RegExp ประเมินผล : "<% code%>" ในสตริงแม่แบบ
2. RegExp แก้ไข : "<% = code%>" ในสตริงแม่แบบ
3. RegExp หลบหนี : "<% - รหัส%>"
4. ตัวแปรสตริง: เป็นทางเลือกชื่อของพารามิเตอร์ข้อมูลในสตริงแม่แบบ

รหัสในส่วนประเมินจะถูกประเมินเพียง คุณสามารถเพิ่มสตริงจากส่วนนี้ด้วยคำสั่ง__p + = "mystring"ไปยังเทมเพลตที่ประเมิน แต่ไม่แนะนำ (ไม่ได้เป็นส่วนหนึ่งของส่วนต่อประสานเทมเพลต) ใช้ส่วนแทรกแทน ส่วนประเภทนี้มีไว้สำหรับเพิ่มบล็อกเช่นถ้าหรือสำหรับแม่แบบ

ผลลัพธ์ของรหัสในส่วนการแก้ไขจะถูกเพิ่มไปยังเทมเพลตที่ประเมิน ถ้า null กลับมาสตริงที่ว่างเปล่าจะถูกเพิ่ม

ส่วนการหลบหนีหนีออกมาจาก html ด้วย_.escapeบนค่าส่งคืนของรหัส ดังนั้นของที่คล้ายกันกว่า_.escape (code)ในตีความส่วน แต่มันหนีกับ\ตัวละครช่องว่างเช่น\ nก่อนที่มันจะผ่านรหัสไปยัง_.escape ฉันไม่รู้ว่าทำไมถึงมีความสำคัญมันอยู่ในรหัส แต่มันทำงานได้ดีกับการสอดแทรกและ_.escape - ซึ่งไม่ได้หนีจากอักขระช่องว่าง - เช่นกัน

โดยค่าเริ่มต้นพารามิเตอร์ข้อมูลจะถูกส่งผ่านโดยคำสั่งwith (data) {... }แต่การประเมินประเภทนี้ช้ากว่าการประเมินด้วยตัวแปรที่ระบุชื่อมาก ดังนั้นการตั้งชื่อข้อมูลด้วยพารามิเตอร์ตัวแปรจึงเป็นสิ่งที่ดี ...

ตัวอย่างเช่น:

var html = _.template(
    "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" +
        "as the  \"<%= _.escape(o.text) %>\" and the same<br />" +
        "as the \"<%- o.text %>\"</pre>",
    {
        text: "<b>some text</b> and \n it's a line break"
    },
    {
        variable: "o"
    }
);

$("body").html(html);

ผล

The "<b>some text</b> and 
 it's a line break" is the same
as the "<b>some text</b> and 
 it's a line break" and the same
as the "<b>some text</b> and 
 it's a line break"

คุณสามารถหาตัวอย่างเพิ่มเติมได้ที่นี่วิธีใช้เทมเพลตและแทนที่การตั้งค่าเริ่มต้น: http://underscorejs.org/#template

โดยการโหลดแม่แบบคุณมีตัวเลือกมากมาย แต่ในตอนท้ายคุณจะต้องแปลงแม่แบบเป็นสตริงเสมอ คุณสามารถกำหนดให้เป็นสตริงปกติเช่นตัวอย่างด้านบนหรือคุณสามารถโหลดจากแท็กสคริปต์และใช้ฟังก์ชัน. html ()ของ jquery หรือคุณสามารถโหลดจากไฟล์แยกต่างหากด้วยปลั๊กอิน tpl of require.js .

อีกทางเลือกหนึ่งในการสร้างต้นไม้ดอมด้วยลาโคนิกแทนการสร้างเทมเพลต

ฉันยกตัวอย่างง่ายๆ

1)

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

ผลที่ได้ก็คือ

Welcome you are at mysite.This has been created by john whose age is 25.

2) นี่คือเทมเพลต

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

นี่คือ html

<div>
  <ul id="list_2"></ul>
</div>

นี่คือรหัส javascript ซึ่งมีวัตถุ json และวางแม่แบบลงใน html

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

ด้วยด่วนมันง่ายมาก ทุกสิ่งที่คุณต้องการคือการใช้โมดูลรวมบนโหนดดังนั้นคุณต้องติดตั้ง:

npm install consolidate --save

จากนั้นคุณควรเปลี่ยนเอ็นจิ้นเริ่มต้นเป็นเทมเพลต html ตามนี้:

app.set('view engine', 'html');

ลงทะเบียนเอ็นจินเทมเพลตขีดล่างสำหรับส่วนขยาย html:

app.engine('html', require('consolidate').underscore);

มันจบแล้ว !

ตอนนี้โหลดตัวอย่างเช่นเทมเพลตชื่อ 'index.html':

res.render('index', { title : 'my first page'});

บางทีคุณอาจจะต้องติดตั้งโมดูลขีดล่าง

npm install underscore --save

ฉันหวังว่านี่จะช่วยคุณได้!

ฉันต้องการแบ่งปันการค้นพบที่สำคัญมากกว่านี้อีกครั้ง

การใช้ <% = variable => จะส่งผลให้เกิดช่องโหว่การเขียนสคริปต์ข้ามไซต์ ดังนั้นจึงปลอดภัยกว่าที่จะใช้ <% - variable -> แทน

เราต้องแทนที่ <% = ด้วย <% - เพื่อป้องกันการโจมตีสคริปต์ข้ามไซต์ ไม่แน่ใจว่าสิ่งนี้จะส่งผลกระทบต่อประสิทธิภาพหรือไม่

Lodash ยังเหมือนเดิมเขียนสคริปต์เป็นดังนี้:

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

ตอนนี้เขียน JS ง่ายๆดังนี้:

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

โดยที่ popoup คือ div ที่คุณต้องการสร้างตาราง