天天看點

Nancy之靜态檔案處理

Nancy之靜态檔案處理

Nancy中關于靜态檔案(Js、css等)的處理

今天我們來談談Nancy中的靜态檔案(JavaScript,CSS等)該如何處理。

在前面的Demo中,我們也已經用到了這一塊的内容,

但并沒有深入了解,隻是停留在使用的層面上。

在進入今天的正題之前,我們先來簡單看看我們熟悉的ASP.NET MVC中是如何管理我們項目中的這些靜态檔案呢?

其實當我們建立一個MVC的項目時,已經生成了一個“模闆”讓我們參考,

這個“模闆”就是App_Start下面的 BundleConfig.cs

其中的ScriptBundle和StyleBundle分别是用于管理js和css的類,這兩個類都是繼承了Bundle這個類!

它位于System.Web.Optimization程式集,如果想要用這個功能,記得添加引用喔!

那我們要怎麼使用這個呢?

現在假設在根目錄下面有css和js兩個檔案夾,裡面分别存放着Style1.css、Style2.css和js1.js、js2.js

下面就來看看怎麼把它交于Bundle管理

 其中的“~

/bundles/js”和"~/bu

ndles/css"是虛拟路徑!

 然後就是在頁面中使用(就是用我們剛才的虛拟路徑)

是不是很友善呢!更多關于Bundle的内容可以參考

http://www.asp.net/mvc/overview/performance/bundling-and-minification

因為它不是我們今天的主要内容,隻是拿來與Nancy中的靜态檔案處理形成對比,便于我們的了解。

下面就來看看Nancy中的靜态檔案怎麼處理。

為了示範的友善,這裡僅使用css。

先看看具體的使用,然後再簡單分析其内部的實作。

在這個應用程式中添加我們需要的引用,這裡可以根據前面介紹的,

按自己喜歡的方式、方法來添加Nancy相關的引用

老規矩:Modules檔案夾、HomeModule.cs

content下面的sytle.css内容如下

assets和other下面的style.css内容如下

assets/sub下面 的style.css内容如下

老規矩:Views檔案夾、Home檔案夾

添加 index.html、default.html、custom.html、other.html、sub.html 五個頁面

Nancy之靜态檔案處理
Nancy之靜态檔案處理

index.html

Nancy之靜态檔案處理
Nancy之靜态檔案處理

default.html

Nancy之靜态檔案處理
Nancy之靜态檔案處理

custom.html

Nancy之靜态檔案處理
Nancy之靜态檔案處理

other.html

Nancy之靜态檔案處理
Nancy之靜态檔案處理

sub.html

建立DemoBootstrapper.cs,使其繼承DefaultNancyBootstrapper并且override我們的ConfigureConventions

Nancy之靜态檔案處理

1、default.html 用的樣式是在content下面的,能正常加載樣式!

2、custom.html用的樣式是在assets下面的,能正常加載樣式!

3、other.html用的樣式是在other下面的,不能正常加載樣式!!

4、sub.html用的樣式是在assets/sub下面的,能正常加載樣式!

很明顯,結果有點出乎我們的意料,我們在Convetion的配置中,隻配置了一項!

就是對assets檔案夾進行了處理。其他都沒有手動配置!

但是在content下面的樣式是能夠正常顯示的!!而other下面的是不能正常顯示的!!assets的子檔案夾sub的樣式也正常顯示!!

這個給人貌似不是很合理的感覺。

看看Network的内容會發現other下面的樣式表不是不能正常加載那麼簡單,而是直接給個404!!!

Nancy之靜态檔案處理

那我們就深入的去看看這裡面到底發生了什麼事吧!

fork一份Nancy的源碼,clone到本地,來看看個是以然。(其實上面的例子我就是在源碼上面添加的一個Demo)

首先看看我們今天的主題Conventions下面的東西

Nancy之靜态檔案處理

其中從名字就可以看出跟我們今天的主題靜态檔案,相關的就有7個!!

但這并不是我們的出發點,我們的出發點是下面這個!

Convention的配置指引着我們要先去看看NancyConvetions這個類

在其構造方法中調用了 BuildDefaultConventions 這個方法

這就很明顯的告訴我們,無論如何,它都會有預設的Conventions!!而且看了裡面的實作

會發現,預設的Convention還不僅僅是一個!!而是包含多個。這裡我們僅探讨關于靜态檔案的。

現在我們就該去找關于靜态檔案的預設Convetion

發現剛才的7個相關中,有一個DefaultStaticContentsConventions

它實作了IConvention接口(Nancy中基本都是接口化程式設計,很Nice!!)。

其中的初始化方法中

是不是跟我們自定義配置幾乎相差無幾!!我想看到AddDirectory的參數"Content",大家也應該都知道了

為什麼我們的content下面的樣式,沒有配置都能正常加載(我去,它預設都是content,能不正常加載麼。。)

裡面的StaticContentConventionBuilder又是何方神聖呢?

這個是靜态基于目錄的幫助類

Nancy之靜态檔案處理

裡面有兩個主要的方法 AddDirectory和AddFile ,都是傳回Func<NancyContext, string, Response>類型的東東。

看名字都已經知道大概實作了什麼東西,一個基于某個目錄,一個基于某個單獨的檔案。

這裡需要注意一下這兩個方法的參數!

還有一些其他的東西是用于拼接目錄和處理Cache的。

把這幾個重要的類看了一下,是不是對這個靜态檔案的預設配置也清晰了不少呢?

然後對自定義Convetion配置的了解也是類似的,是以這裡就不再累贅了。

從"引導程式"的ConfigureConventions中可以知道,無論我們自定義多少個Convetion,

都是要添加到StaticContentsConventions這個集合中的。

ConfigureConventions 與 BundleConfig 都是用于處理靜态檔案的,有相同之處,也有各自的特點。

在項目開發過程中,我們可能會根據習慣把css、javascript這些靜态檔案放在自己喜歡的位置,

但是在Nancy中這個的處理需要十分注意的是,隻要我們沒有将css和javascript檔案放在content中時,就一定要記得在Convention中進行配置!

否則頁面死活不是我們期待的那樣。。。。

是以我個人感覺這塊内容不是很友好,一旦不小心忘了配置,而且發現頁面樣式不對,首先想到的是不是樣式的路徑寫錯了

而不會直接考慮到Nancy的Convention配置這一層面。

為此,提醒各位使用Nancy的朋友,并建議各位:隻要您的項目用到了靜态檔案,請務必要override我們的ConfigureConventions !!

Nancy之靜态檔案處理

如果您認為這篇文章還不錯或者有所收獲,可以點選右下角的【推薦】按鈕,因為你的支援是我繼續寫作,分享的最大動力!

作者:Catcher Wong ( 黃文清 )

來源:http://catcher1994.cnblogs.com/

聲明:

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。如果您發現部落格中出現了錯誤,或者有更好的建議、想法,請及時與我聯系!!如果想找我私下交流,可以私信或者加我微信。

繼續閱讀