FluentAPI — 用C#寫的JS代碼產生器asp.net webForm也可以這樣用Ajax — My Ajax Framework

      一接觸FluentAPI，就被它的流暢編碼和良好可讀性吸引，園子裡有很多介紹FluentAPI的文章，我也忍不住把自己最近寫的一個小類庫放在這裡來補充一下流暢API的應用情境。

      我寫這個小型的類庫來源於我昨天的發表的文章<asp.net webForm也可以這樣用Ajax -- My Ajax Framework>一文後面網友 “、Dark”對我的一個建議，是否可以用架構動態產生JS檔案，這樣直接類似AjaxPro的方式，仔細考慮感覺是很好的建議，於是就寫了一下，結果發現向Response中寫入一些JS資料流是多麼亂，又很容易出錯。

我起初的代碼是這樣的：（為了產生一段Js代碼我這樣做）：

Response.Output.WriteLine("<script>");
Response.Output.WriteLine("var PowerAjax = function () { };");
Response.Output.WriteLine("PowerAjax.__Private = function () { };");
Response.Output.WriteLine("PowerAjax.AsyncAjax = function (methodName, paramArray, success, failure) { PowerAjax.__Private.Ajax(methodName, paramArray, success, failure, true);}");
Response.Output.WriteLine("PowerAjax.SyncAjax = function (methodName, paramArray, success, failure) { PowerAjax.__Private.Ajax(methodName, paramArray, success, failure, false); };");
Response.Output.WriteLine("PowerAjax.__Private.Ajax = function(methodName, paramArray, success, failure,isAsync) {");
Response.Output.WriteLine(" var data = {};");
Response.Output.WriteLine(" switch (paramArray.length) {");
Response.Output.WriteLine(" case 0:data = { 'isAjaxRequest': true, 'MethodName': methodName };break;");
Response.Output.WriteLine(" case 1:data = { 'isAjaxRequest': true, 'MethodName': methodName, 'param0': paramArray[0] }; break;");
Response.Output.WriteLine(" }");
Response.Output.WriteLine(" var url = document.location.href;");
Response.Output.WriteLine("};");
Response.Write("</script>");

感覺這樣太不靠譜了，經常性的就會寫錯了，尤其是對於 “{" 和 ”}“這兩個符號的對應，實在糾結，一個不留神不是忘記{就是忘記},結果會導致Javascript根本無法開啟。有些語句還經常忘記加一個“；”，那麼就因為語句的這一個小“；”，代碼就無法執行。

於是我就做了一個簡單的改進，寫了一個簡單的小類庫來產生：

我的想法是：  把所有js代碼分為兩類 ”一般語句“ 和 ”由“{.......}”組成的兩種語句, 大括弧裡可以繼續寫一般語句和{.....} 。就好比函數裡可以繼續套N個函數和N條語句，於是就有了以下API。

先看看改善之後的代碼是什麼樣的：

ScriptFactory.CreateScript(                    new ScriptSentence("var PowerAjax = function () { }"),                    new ScriptSentence("PowerAjax.__Private = function () { }"),                    new ScriptContainer("PowerAjax.AsyncAjax = function (methodName, paramArray, success, failure)",                        new ScriptSentence("PowerAjax.__Private.Ajax(methodName, paramArray, success, failure, true)")),                    new ScriptContainer("PowerAjax.SyncAjax = function (methodName, paramArray, success, failure)",                        new ScriptSentence("PowerAjax.__Private.Ajax(methodName, paramArray, success, failure, false)")),                    new ScriptContainer("PowerAjax.__Private.Ajax = function(methodName, paramArray, success, failure,isAsync)",                        new ScriptSentence("var data = {}"),                        new ScriptContainer("switch (paramArray.length)",                            new ScriptSentence("case 0:data = { 'isAjaxRequest': true, 'MethodName': methodName };break"),                            new ScriptSentence("case 1:data = { 'isAjaxRequest': true, 'MethodName': methodName, 'param0': paramArray[0] }; break"),new ScriptSentence("var url = document.location.href"))));

     有感覺好看一些嗎？主要是現在所有的語句我都不需要管；，也不需要加個什麼{和}的對應關係了。

     敏銳的朋友可能已經感覺到，這種API正是LinqToXML產生一段XML一樣類似的代碼，如：

 XDocument doc = new XDocument(                new XDeclaration("1.0", "utf-8", "yes"),                new XElement("xxxConfig",                    new XElement("a", s_LDAPEnabled),                    new XElement("b", s_ServerPath),                    new XElement("c", s_BaseDN),                    new XElement("d", s_UserCN)));

這種結構的優勢：不容易出錯，寫起來很舒服，排版很嚴謹，很容易就容易從代碼中看出整個文檔的結構特點。同樣我的輸出的JS代碼也能很清晰的看出這個在C#的中產生的JS檔案是什麼樣子的?

示範就到這裡，把整個ＡＰＩ發出來，大家互相學習：

********ScriptFactory類********

目的：方便前台調用。因為本身載入起來的是一個樹形的結構，所以需要使用遞迴來解析資料，產生JS代碼。

    public sealed class ScriptFactory    {        private static string CreateScriptTrue(params IScriptBase[] scriptBases)        {            StringBuilder sb = new StringBuilder();            foreach (var scriptBase in scriptBases)            {                if (scriptBase is ScriptSentence)                {                    sb.Append(scriptBase.ScriptContent + ";");                }                if (scriptBase is ScriptContainer)                {                    sb.Append(scriptBase.ScriptContent);                    sb.Append("{");                    sb.Append(CreateScriptTrue(((ScriptContainer)scriptBase).Children.ToArray())); // 遞迴調用產生JS樹形結構                    sb.Append("};");                }            }            return sb.ToString();        }        public static string CreateScript(params IScriptBase[] scriptBases)        {            return string.Format("<script>{0}</script>",ScriptFactory.CreateScriptTrue(scriptBases));        }    }

********IScriptBase介面********

目的：提供內容規範

    public interface IScriptBase    {        string ScriptContent { get; set; }    }

********ScriptContainer ： IScriptBase********

目的：承載包含{}結構的語句，{}中還可能包含語句和各種，所以會有一個m_ScriptBases來儲存所有結構

    public sealed class ScriptContainer : IScriptBase    {        private List<IScriptBase> m_ScriptBases = new List<IScriptBase>();        public IEnumerable<IScriptBase> Children        {            get { return this.m_ScriptBases; }        }        public string ScriptContent { get; set; }        public ScriptContainer(string content, params IScriptBase[] scriptBeses)        {            this.ScriptContent = content;            this.m_ScriptBse = scriptBeses.ToList();        }    }

 

********Scriptesentence ： IScriptBase********

目的：承載一般性質的語句，語句本身內部不具備資料結構，僅僅是內容而已。

    public sealed class ScriptSentence : IScriptBase    {        public string ScriptContent { get; set; }        public ScriptSentence(string content)        {            this.ScriptContent = content;        }    }

OK，以上就是全部代碼,是不是很簡單呢？而代碼有極為簡單呢？

此API要點：介面繼承，params用法，樹形結構，遞迴。請注意建構函式中參數的用法，這個流暢API的秘密就在這裡（大牛可以繞過了，呵呵）

 

以上是試水的東西，意在示範這種類LinqToXML產生方式的流暢API，如果有什麼不對的地方請各位指正，很感謝。從上一篇文章中，各位的指正讓我明白了很多東西，拋磚引玉了。

如果感覺此文對您有協助，請頂一下了^_^