• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. JavaScript入門參考

        時間:2024-07-27 23:19:52 JavaScript 我要投稿
        • 相關推薦

        有關JavaScript模板入門參考

          比如要在一個列表中利用ajax插入一個li的時候,我會直接把數據跟html標簽拼接成一句完整的html,然后插入到ul中。無論數據是從服務器端拿回的,或者是從用戶的input輸入中拿到的——無論哪種方法都是一樣。

          這個拼接過程放在JavaScript文件中,顯得非常不優雅。如果還把style也放在JavaScript中,那數據、結構還有樣式整個就是一鍋粥了,要維護這樣的代碼會讓人想自殺。最過分的就是把頁面上最終要生成的HTML都直接放在服務器端,ajax吐出數據就包含了

          標簽,這樣的頁面幾乎不存在擴展性了,修改一個前臺樣式都要涉及后臺代碼的修改。

          后來我們知道了不要在JavaScript中對DOM進行style定制,而是只需要在CSS文件中定義好對應的class,然后在JavaScript中使用這個class就好。

          接下來我們要做的就是用JavaScript模板把HTML結構(在這個案例中,是

          標簽)也從JavaScript中分離。

          市面上的JavaScript模板很多了,以handlebars這個優秀的模板為例吧:

          我們在頁面的html中定義模板:

          復制代碼 代碼如下:

          {{title}}

          然后在我們的邏輯JavaScript代碼中可以把數據拼接到這一模版中:

          復制代碼 代碼如下:

          var source = $("#list-template").html(); //模板源,一般放在html的script中,這里我們使用jQuery,也可以使用其它方法直接獲得內容字符串

          var template = Handlerbars.compile(source); //編譯生成一個模板template

          var context = {title:"This is a todo item"} //獲得數據,數據一般從ajax或者input中取得

          var html = template(context); //數據+模板=新的html

        【JavaScript入門參考】相關文章:

        JavaScript fontcolor方法入門實例07-07

        對javascript的理解08-08

        常用的JavaScript模式09-22

        Javascript的this用法簡述08-15

        JavaScript學習筆記08-24

        JavaScript 基礎教學09-29

        JavaScript的課堂講解09-03

        JavaScript常用方法匯總10-25

        JavaScript數組常用方法介紹09-04

        JavaScript中的with關鍵字07-24

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 欧美国产日韩亚洲精品 | 欧美另类激情在线播放 | 日本老熟女久久久久久久久 | 亚洲中文字幕乱码影院在线 | 亚洲国产第一站精品蜜芽 | 中文字幕日产乱码乱偷在线 |