MVC下的客戶端模板技術

2022-09-13 17:48:09 字數 1709 閱讀 8936

在web程式設計中,我們有時經常需要使用ajax來訪問服務端的介面,然後使用這些返回的資料(一般格式都是json)來展示客戶端的相關資訊。例如:在乙個商品列表,我們點選某一樣的商品,檢視該商品的資訊資訊。這時通過指定的id來獲取商品詳細資訊後,我們很多時候都是講html和j**ascript結合起來。通過構造html標籤和js的填充來展示相關的介面。這樣大量的標籤拼接,一來不容易維護,二來也導致在編碼過程中容易出現錯誤。今天我給大家做一下客戶端模板技術的簡單介紹。希望可以通過這個技術在一定程度上可以緩解類似的問題。

mustache 是乙個 logic-less templates,原本是基於j**ascript 實現的模板引擎,類似於 freemark和valicity ,但是比freemark和valicity更加輕量級更加容易使用,經過拓展目前支援js,j**a,.net,php,c++等多種平台下開發!官方位址是:下面就來介紹使用mustache進行簡單的一些應用。

private listgetuserlist()

;users.add(user);

user = new

usermodel

;users.add(user);

user = new

usermodel

;users.add(user);

user = new

usermodel

;users.add(user);

user = new

usermodel

;users.add(user);

user = new

usermodel

;users.add(user);

return

users;

}

在控制器中我們可以提供這樣的方法

public actionresult index(string username = ""

)

//使用j**ascript客戶端模版技術

if(request.isajaxrequest())

return

view(list);

}

在介面第一次執行的時候我們我們看到執行的介面如下:

我們需要按照地域進行搜尋,例如搜尋出徐州的使用者。這時我們可以使用ajax進行訪問index方法。然後將返回的json使用模板技術進行填充。注意:這個例子只是作為簡單的介紹而已,不具有代表性。

首先我們來看下模板的定義。在script標籤中我們可以定義乙個模板。然後json值需要填充的位置是有mustache.js的語法進行定義(佔位)

$("#search").click(function

() $.ajax(,

success:

function

(data) );}},

error:

function

(xhr, ajaxoptions, thrownerror)

});});

可以看到在**中通過伺服器返回的json,客戶端一行行的進行遍歷填充。然後追加到指定的位置。搜尋後效果如下:

客戶端檢測技術

按優先順序降序 能力檢測 怪癖檢測 使用者 檢測 能力檢測 一種客戶端檢測形式 又稱特性檢測 目的不是識別特定的瀏覽器,而是識別瀏覽器的能力 兩個概念 1.先檢測最常用的特性可以保證 最優化 2.必須測試實際要用到的特性 在可能的情況下,盡量使用typeof進行能力檢測 使用者 檢測 通過檢測使用者...

客戶端deeplink技術

四 標準 生態 url schemes從技術雖然可以解決應用間跳轉這個問題,但是,仍有諸多問題,以下列舉幾個 1 跨平台,不同系統間的無縫鏈結 2 資料傳輸標準 3 url schemes命名規範 4 傳參與解析標準 除了巨頭以外,還有一些公司也在做一些api sdk deeplink.me bra...

模板引擎 art template 客戶端

js template web.js script 準備 art template 模板 tpl type text html script 告訴模板引擎將哪個模板和哪個資料進行拼接 3.告訴模板引擎將哪個資料和哪個模板進行拼接 1 模板id 2 資料 物件型別 方法的返回值就是拼接好的html字串...