前端js模板引擎,快速地動態拼接html代碼

2021-01-07 飛飛愛編程

批量添加數據時,需要動態添加html代碼。例如:添加規格。

本猿新手時期是這麼做的:(主要看紅框中代碼)

字符與變量拼接,倒是簡單易行,就是容易出錯(比如:引號不成對),需要反覆調試。

拼接字符串要是不講究, 那更是不便於我們人類閱讀,所以,要是 元素有改變 或者 新增了元素,維護起來自然不易。

要是像php模板引擎一樣,直接把變量塞進html代碼裡面,不但不用糾結引號是否匹配、成對標籤是否缺失閉標籤,而且格式化,那多好嗯,這個可以有。

php有模板引擎,咱js也有,不但有,還百家爭鳴。

本猿機緣巧合之下,遇見了art-template.js。

先看一眼官方文檔。

於是,上文的動態添加html代碼需求可以這麼實現:

想要查看art-template官方文檔的更多信息,可以這麼做:

相關焦點

  • JavaScript 模板引擎 Velocity.js
    Velocity.js是Velocity模板語法的Javascript實現。Velocity模板適用於大量模板使用的場景,支持複雜的邏輯運算,包含基本數據類型、變量賦值和函數等功能。Velocity語法具有很高的容錯能力,類似於html結構的解析,同時語法規則複雜。velocity.js兼容ie6+,chrome等其他瀏覽器。
  • html2canvas - 動態生成海報的優質js庫
    今天分享的html2canvas就可以。介紹在微信項目中經常會遇到動態生成海報的需求,Web前端合成圖片往往會使用canvas。canvas雖然強大,但用來合成海報非常繁瑣,一不小心就幾百行代碼了。而html2canvas.js是一款輕鬆地將HTML+CSS寫成的布局直接轉換成canvas,生成可保存分享的圖片。
  • 前端技術及開發模式的演進
    我們會發現,所有的樣式聲明,js代碼以及html代碼都會集中在一個文件中。這樣一個功能如果較為複雜,頁面代碼看起來會非常複雜,久而久之就會變得不易維護。當然有一些優化的方式。就是目錄劃分更友好一些,就是剝離css和js腳本,採用外部引入的方式,這種方式也是後來採用的比較多的方式,像下面這樣,看起來就清爽多了。
  • Ember.js和Vue.js,哪種框架更適合前端開發?
    作為一個流行的前端開發框架,學習指南必不可少。Ember.js明確了一般應用程式的組織和結構,確保你不會犯任何錯誤。Ember.js的模板基於Handlebar 語法,藉助它可以使你輕鬆閱讀和理解模板,同樣也能使頁面加載速度變得更快。除此之外,你不必每次在頁面上添加或刪除數據時都更新模板,因為這一切,語言本身已自動為你完成。
  • 網頁前端設計快速入門技巧
    今天我就跟大家說說前端,如何快速入門?網頁前端設計一千個人眼中就有一千個哈姆雷特,每個人對網頁前端的理解也是不一樣的。我認為網頁前端開發就像是網際網路的美容師,不僅給訪客帶來視覺上的美感,而且隨著網際網路的發展,Html5、CSS3的應用,前端工程師結合技術與藝術能把網站最好的界面呈現給用戶,這就是網頁前端!
  • Vue.js——60分鐘組件快速入門(上篇)
    因為當子組件註冊到父組件時,Vue.js會編譯好父組件的模板,模板的內容已經決定了父組件將要渲染的HTML。慶幸的是,Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來。使用<script>標籤<!
  • Vuejs基礎之:實例、模板、計算、class與Style綁定
    2.1   插值插值的簡單理解,即Vue.js通過模板的方式來編寫HTML,而模板中被Vue.js替換的部分,即是插值。•  文本•純HTML•屬性•使用javascript表達式•過濾器2.1.1   文本html中需要動態顯示的文本內容,可以通過{{ }}來讓Vue.js解析並插入•數據綁定最常見的形式就是使用 「Mustache」 語法(雙大括號)的文本插值,代碼如圖:
  • 超全整理前端開發面試題——HTML篇(2016年)
    前端還是一個年輕的行業,新的行業標準, 框架, 庫都不斷在更新和新增。正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話:「每18至24個月,前端都會難一倍」,這些變化使前端的能力更加豐富、創造的應用也會更加完美。所以關注各種前端技術,跟上快速變化的節奏,也是身為一個前端程式設計師必備的技能之一。Doctype作用?標準模式與兼容模式各有什麼區別?
  • 秒懂laravel框架blade模板引擎基礎if_foreach用法及原理
    laravel框架blade模板引擎基礎用法,針對if、while、foreach等相關的php代碼在blade模板中使用方法及邏輯判斷用法。Blade是Laravel提供的一個既簡單又強大的模板引擎,和其他流行的PHP模板引擎不一樣,Blade並不限制你在視圖view中使用原生的PHP代碼,所有的Blade視圖頁面都將被編譯成原生的PHP代碼並緩存起來,除非你的的模板文件修改,否則不會重新編譯.
  • Juicer 0.4.0-dev 發布,JS模板引擎
    Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎,效率和易用是它追求的目標。 除此之外,它還可以運行在 Node.js 環境中。示例模板:{@each list as item,index} {@if index===3} the index is 3, the value is ${item.prop} {@else if index === 4} the index is 4, the value is ${item.prop} {
  • Node.js對於Java開發者而言是什麼?
    每個人都對學習Node.js感興趣,並希望可以工作於Node.js。在開始工作之前了解技術背後的概念總是不會錯的。但對初學者來說,可能會因為不同的人使用的不同定義而暈頭轉向。Node.js究竟是什麼?它是新的語言還是新的框架,是新的工具抑或只是一個簡單的JavaScript文件?即使對於有經驗的Java開發人員來說,也很難快速了解Node.js。
  • html2canvas 將代碼轉為圖片
    為了更好地在各種非主流(對程式設計師來說)的平臺上愉快地貼代碼,我們只能幹脆將代碼轉為圖片。最簡單的轉換方式,當然是——截屏。截屏的問題利用作業系統自帶的截屏或者其他工具的截屏功能來截取代碼當然是可行的。轉換代碼到圖片使用 html2canvas,這是一個非常著名的從瀏覽器網頁截圖的開源庫,使用很方便,功能也很強大。
  • 第21天:Web開發 Jinja2模板引擎
    模板的作用模板是用來做什麼的呢?模板是用來更高效地生成相應時的Html文本的,沒有模板,可以手寫,比如之前的hello world示例,寫段html代碼:<h1>Hello world!</h1>對於簡單的練習還行,但對於規模大的,動態化程度高的項目來說,這樣寫就有些勉強了,即,不利於項目和產品化。
  • 你應該知道的前端小知識
    在這些表象的背後呢,實際上是行業對開發人員的要求發生了天翻地覆的變化,以往前端寫demo,套模板,調頁面這種刀耕火種的方式已經完全不符合當下對開發效率的要求,前端工程化就是在這樣一個背景下被提上檯面,成為前端工程師必備的手段之一。一般來說前端工程包含,項目初始化,項目開發,集成,構建,打包,測試,部署,監控等流程。工程化就是以工程的角度來解決這些問題。
  • 2020最新WEB前端簡歷模板
    WEB前端簡歷模板詳細資料 1 姓名:XXX 出生年月:XXXX年X月 2 3 名
  • html菜鳥教程,HTML新手如何快速入門
    第一:開發工具的選擇1、Nodepad++,作為一種文本編輯器,可以通過顏色標記各種html的標籤,同時可以提示出來基本的html語法,但是缺點也比較明顯:沒有集成容器運行,同時也不支持自動補標籤的功能。但是作為新手前期的開發IDE,能夠幫助新手快速記憶打好基礎。
  • Vue.js:60分鐘組件快速入門(上篇)
    組件可以擴展HTML元素,封裝可重用的HTML代碼,我們可以將組件看作自定義的HTML元素。本文的Demo和原始碼已放到GitHub(請訪問https://github.com/keepfool/vue-tutorials查看示例匯總)由於組件的篇幅較大,我將會把組件的入門知識分為兩篇來講解,這樣也便於各位看官們快速消化。
  • 前端高效開發必備的 js 庫梳理
    作者: 徐小夕 來源:趣談前端之前有很多人問學好前端需要學習哪些 js 庫, 主流框架應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結。比如說你對移動端比較感興趣, 工作中也剛好涉及到一些技術的應用,那麼我可以專門研究移動端相關的技術和框架, 又或者你對企業後臺/中臺產品感興趣, 比較喜歡開發PC端項目, 那麼我們可以專門研究這種類型的js庫或者框架, 接下來筆者也是按照不同前端業務的需求, 來整理一份能快速應用到工作中的js庫, 以提高大家的開發效率。
  • 如何創建以EJS為模板引擎的Node.js項目
    工具WebStormnpmNode.js技術expressejsJavaScript在創建Node.js項目時,可以使用不同的JavaScript模板引擎,如Pug、EJS等。那麼,如何在Node.js項目中使用EJS模板引擎呢?下面利用實例說明:操作步驟:1、打開WebStorm工具,點擊File--->New--->Project,輸入項目名稱,然後選擇EJS模板引擎
  • HTML5 遊戲引擎深度測評
    從當前前端技術圈環境分析,未來可能很多前端框架或者引擎會推出響應的TypeScript語言分支,從AngularJS宣布將使用TypeScript開發開始,TypeScript在很大程度上被前端認可。不得不說微軟在開源圈這一仗打得漂亮。設計理念&功能架構設計是一門大學問,對於開源引擎架構的設計模式主要取決於作者的程序哲學觀點和產品定位。