淺析JavaScript頁面模板化方式打賞

今天遇到一個問題,這個問題也是我以前遇到的問題,以前的方式,也是大多數人使用的方式。大家可以看看我的文章。

從前的方式——我估計也是大多數人使用的方式

比如以下的代碼——摘自新浪首頁的一段js代碼,這種方式也是大多數人使用的方式。

淺析JavaScript頁面模板化方式

上面的代碼,你看完有什么反應?你也許會把+=這種形式改成數組的push形式,有人說push比這種字符鏈接要快,但是也快不了多少。

如果這種嵌入的html代碼很多,你也要這樣處理嗎?如果修改(添加或者刪除)某個html,那么你就要不斷的翻代碼,找對應的標簽,然后在找結束標簽,你不覺得麻煩嗎?也許有人會這樣寫(這個是我早期寫的,也是我最慣于使用的方式)。

淺析JavaScript頁面模板化方式

上面的代碼,我維護起來也是非常費勁的,很多時候如果ui那邊添加了個標簽,或者修改了下html結構,那我就頭疼了。

淺析JavaScript頁面模板化方式
頁面模板化——全新的方式

這是我最近看了facebook的js代碼,偶然間發現以下的方式看起來不錯,希望與大家分享。

看我的index.html代碼

淺析JavaScript頁面模板化方式

看我的js代碼

淺析JavaScript頁面模板化方式

維護上面的html代碼我們是很容易的,下次無論html代碼結構有什么變動,改起來都很方便。

淺析JavaScript頁面模板化方式

總結

上面的代碼有很多問題,大家不要見怪,這個只是我的簡易版。

當前的模板只支持簡單的變量替換,有很多功能未開發出來,比如if標簽,for標簽,如果大家有興趣,可以試著做一下,如果做的比較成功,告知一下。如果能做個類似smarty的開源框架,呵呵,咱們也可以為開源事業做點貢獻不是。

文章來源:川山甲的博客

淺析JavaScript頁面模板化方式
文章《淺析JavaScript頁面模板化方式》二維碼
  • 微信打賞
  • 支付寶打賞

已有21條評論

  1. 康妮妃

    真精神!!!!!!

    2016-01-01 12:42 回復
  2. 藏章博客

    這個說的還是很詳細的呢啊

    2012-08-11 13:59 回復
    • 樸人博客

      這是在cnblogs轉的

      2012-08-11 16:42 回復
      • 藏章博客

        呵呵 ,已經做了你的鏈接,交換一下,好訪問你的站

        2012-08-11 17:53 回復
        • 樸人博客

          不好意思,最近權重降的厲害,暫時真不做了

          2012-08-11 18:48 回復
          • 藏章博客

            呵呵,沒關系,我幫你做就行了,我不在乎這個,主要喜歡編程交流的

            2012-08-12 09:39 回復
  3. 窮小子

    其實js很好的,所謂網頁中的匯編語言嘛。

    2012-07-12 04:59 回復
  4. 窮小子

    其實js很好的,所謂網頁中的匯編語言嘛。

    2012-07-12 04:59 回復
  5. 汽修學校

    好,技術貼,學習一下

    2012-06-26 22:12 回復
  6. 韓版女裝

    確實看到jS我就煩啊

    2012-06-25 21:21 回復
  7. 小云子

    過來支持一下

    2012-06-25 19:07 回復
  8. 珠寶網

    太技術了,看不懂

    2012-06-25 12:07 回復
  9. 游客 331

    來看看博主,一直關注著。

    2012-06-24 23:51 回復
  10. 不亦樂乎

    只看插圖漫畫的路過。。。

    2012-06-24 19:59 回復
    • 窮小子

      :neutral: 好吧。以后常插圖,你也常來看。哈哈

      2012-06-24 20:29 回復
      • 不亦樂乎

        我經常來,只是大部分時間插不上話灰溜溜的就走了。

        2012-06-24 20:31 回復
        • 窮小子

          怪不得我博客沒人留言呢。我滴錯啊。。

          2012-06-24 21:08 回復
    • Always.Life

      同上,只看圖

      2012-06-25 11:50 回復
  11. P57減肥藥

    博主的文章不錯

    2012-06-24 17:34 回復
  12. 蘑菇街包包

    學習一下 回去給我的網站 http://www.52diu.com/ 試一試

    2012-06-24 16:31 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖