ホームページ > ウェブフロントエンド > jsチュートリアル > jsを使ってテンプレートを作成する方法

jsを使ってテンプレートを作成する方法

一个新手
リリース: 2017-10-01 07:43:37
オリジナル
1461 人が閲覧しました


jsテンプレートの簡単な説明

基本的な説明

在开发中如果某块数据需要在多个地方使用(比如一个很长的段落或者是有格式的字符串)那么可以考虑使用简单模板。
因为某块数据在多个地方都要用到,势必需要把这份数据拷贝多次,而这样会造成冗余度过高的问题,且不方便维护。
假如后期需要对这块数据进行修改,那么所有用到的地方都要进行修改比较麻烦,因此建议使用模板来处理。
ログイン後にコピー

関連コード例:

    <script type="text/template" class="test">

        听说白雪公主在逃跑 小红帽在担心大灰狼
        听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅
        听说彼得潘总长不大 杰克他有竖琴和魔法
        听说森林里有糖果屋 灰姑娘丢了心爱的玻璃鞋
        只有睿智的河水知道 白雪是因为贪玩跑出了城堡    
    </script>
    <script>
        //01 获取模板中的内容
        var oScript = document.getElementsByClassName("test")[0];        
        var oString = oScript.innerText;    
    </script>
ログイン後にコピー

テンプレートフレームワークの使用法

1)有的时候模板中的内容结构是相同的,但是具体的细节可能并不一样,这时候需要对模板进行传参处理。
2)使用示例:
001 下载模板框架(github上面搜索模板引擎)
002 在页面中包含必要的js文件:<script src="dist/template-native.js"></script>
003 提供并设置模板:
ログイン後にコピー
<script id="demo" type="text/html">
        <h1><%=title%></h1>
        <ul>
            <% for(var i = 0, len = list.length; i < len; i++){ %>
                <li><%=list[i]%></li>
            <% } %>
        </ul>
        </script>
ログイン後にコピー
rreerree

Weiboプロジェクトでのテンプレートフレームワークの使用

れーれー

以上がjsを使ってテンプレートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート