### 我想放點html模板代碼
很多時候我們需要放點模板代碼在頁面中,比如我們在使用` layer.js` 的時候需要使用`html`,但又不想創建一個影響頁面的`div`,那么此時我們有很多解決方法, `layer.mobile.js`有個實例是這樣做的:
```html
<textarea id="demo5a" style="display:none;">
// html
</textarea>
```
但是這樣有一個問題,那就是如果我模板里面有`textarea`標簽的話,那么就不能使用這種方式了。
`artTemplate.js`包裝模板的方式是將模板包在script標簽中:
```html
<script id="tpl-goods-container" type="text/html">
// html 模板
</script>
```
這樣可以通過
```javascript
$('#ID').html();
```
拿到模板內容
而一般在模板里面沒有`script`標簽吧,所以還是用`script`標簽來包裹模板比較合適。
### 擴展
頁面中需要用到模板,這種需求其實很常見,最簡單的一種方式就是自己拼接,但是這樣實在是太累了,太繁瑣,簡單的結構還好,要是遇上復雜的結構使用拼接字符串的方式那簡直是噩夢,并且這種方式不好維護,代碼也不好看。
其實深入的看,拼接字符串生成的`html`,用這種的方式創建`DOM`在編程的思想中是叫做**聲明式編程**,比如還有`react`的`JSX`也可以看做是聲明式編程,與之對應的是**命令式編程**,命令式編程不利于我們書寫大段的頁面結構和樣式等,其實`JSX`最終是會編譯成命令式的。
這樣來看的話,我們寫的`.html`、`.css`文件其實就是一個聲明式編程的文件了。
對于頁面和樣式的編寫,顯然聲明式編程效率的更高(這是說我們寫代碼時的效率,不是代碼最終執行的性能效率)。而模板引擎就是這個作用,讓我們用聲明式的方式寫模板,因為拼接實在是太麻煩了(還嫌拼接麻煩那么命令式創建`DOM`那真是要人命)。
> 有人可能說寫個模板根本算不上編程,還說是聲明式編程,好吧,寫html、css不叫編程,你說不叫就不叫,不過我想說的是,其實編程這東西本身就不存在,是人們創造出來的,C語言叫編程嗎,也是人們創造出來的,編程的目的是為了解決問題的,所有的東西并不是憑空有的,php也是基于C的,html又是基于瀏覽器解析的,一些編程的概念也是人們設計總結出來的,所以當你說html不配叫編程時,那么你寫php的立場又在哪里?
### 參考
- [淘寶詳情頁的 BigRender 優化與存放大塊 HTML 內容的最佳方式](https://lifesinger.wordpress.com/2011/09/23/bigrender-for-taobao-item/)
- [layer](http://layer.layui.com/)
- [layer.mobile](http://layer.layui.com/mobile/)
- [artTemplate](http://aui.github.io/artTemplate/)
- [如何在 JS 中嵌入 HTML 代碼?](https://www.zhihu.com/question/20240397)
- [函數式編程入門教程](http://www.ruanyifeng.com/blog/2017/02/fp-tutorial.html?hmsr=toutiao.io)
- [函數式編程和命令式編程](http://blog.csdn.net/bruno231/article/details/6425710)
- [聲明式編程和命令式編程的比較](http://kb.cnblogs.com/page/181030/)
[React 是怎樣煉成的](https://mp.weixin.qq.com/s/6i7x8ZgOBU5EijGweXfqdA)
[tmodjs/why-tmodjs.md at master · aui/tmodjs](https://github.com/aui/tmodjs/blob/master/doc/why-tmodjs.md)
> 它使用一個特殊的<script type="text/html"></script>標簽來存放模板(由于瀏覽器不支持這種類型的聲明,它存放的代碼不會當作 js 運行,代碼也不會被顯示出來)。使用模板引擎渲染模板的示例:
* * * * *
update:2017-3-3 13:57:26
- 開始
- 微信小程序
- 獲取用戶信息
- 記錄
- HTML
- HTML5
- 文檔根節點
- 你真的了解script標簽嗎?
- 文檔結構
- 已經落后的技術
- form表單
- html實體
- CSS
- css優先級 & 設計模式
- 如何編寫高效的 CSS 選擇符
- 筆記
- 小計
- flex布局
- 細節體驗
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物語
- js函數定義
- js中的數組對象
- js的json解析
- js中數組的操作
- js事件冒泡
- js中的判斷
- js語句聲明會提前
- cookie操作
- 關于javascript你要知道的
- 關于innerHTML的試驗
- js引擎與GUI引擎是互斥的
- 如何安全的修改對象
- 當渲染引擎遇上強迫癥
- 不要使用連相等
- 修改數組-對象
- 算法-函數
- 事件探析
- 事件循環
- js事件循環中的上下文和作用域的經典問題
- Promise
- 最佳實踐
- 頁面遮罩加載效果
- 網站靜態文件之思考
- 圖片加載問題
- 路由及轉場解決方案
- web app
- 寫一個頁面路由轉場的管理工具
- 談編程
- 技術/思想的斗爭
- 前端技術選型分析
- 我想放點html模板代碼
- 開發自適應網頁
- 后臺前端項目的開發
- 網站PC版和移動版的模板方案
- 前后端分離
- 淘寶前后端分離
- 前后端分離的思考與實踐(一)
- 前后端分離的思考與實踐(二)
- 前后端分離的思考與實踐(三)
- 前后端分離的思考與實踐(四)
- 前后端分離的思考與實踐(五)
- 前后端分離的思考與實踐(六)
- 動畫
- 開發小技巧
- Axios
- 屏幕適配
- 理論基礎
- 思考
- flexible.js原理
- 實驗
- rem的坑,為什么要設置成百分比,為什么又是62.5%
- 為什么以一個標準適配的,其它寬度也能同等適配
- 自適應、響應式、彈性布局、屏幕適配
- 適配:都用百分比?
- 番外篇
- 給你看看0.5px長什么樣?
- 用事實證明viewport scale縮放不會改變rem元素的大小
- 為什么PC端頁面縮放不會影響rem元素
- 究竟以哪個為設備獨立像素
- PC到移動端初試
- 深入理解px
- 響應式之柵格系統
- 深入理解px(二)
- 一篇搞定移動端適配
- flex版柵格布局
- 其他
- 瀏覽器加載初探
- 警惕你的開發工具
- JS模塊化
- webpack
- 打包原理
- 異步加載
- gulp
- 命名規范
- 接口開發
- sea.js學習
- require.js學習
- react學習
- react筆記
- vue學習
- vue3
- 工具、技巧
- 臨時筆記
- 怎么維護好開源項目
- 待辦
- 對前端MVV*C框架的思考
- jquery問題
- 臨時
- 好文
- 節流防抖