過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用


 

A下拉霸
 <div class="col-md-6">
                                        <label for="contact:fromlan">Source Language <span class="red">*</span></label>
                                        <div class="bfh-selectbox" data-name="From_Language_Id" id="FromLanItemParent">
                                            <!--FromLanItem S-->
                                            <div data-value="{Id}"><img src="assets/images/_smarty/flags/{Image}" alt="{Abbreviation}"> {LanguageName}</div>
                                            <!--FromLanItem E-->
                                        </div>
                                    </div>

自動生成的下拉霸
1 name 要用 data-name=""來設定
2 完全沒有選擇的時候可能會回傳空值

套件來源
http://bootstrapformhelpers.com/select/

B電話號碼
<label for="contact_department">Your Phone Number </label>
                                        <div>
                                            <input id="phone" name="phone" type="tel">

                                        </div>
                                        <div style="display:none">
                                            <input id="PhoneCountry" name="PhoneCountry" type="">
                                        </div>


                                        <script src="/assets/build/js/intlTelInput.js"></script>
                                        <script>
                                            var input = document.querySelector("#phone");
                                            var iti1 = window.intlTelInput(input, {
                                                // allowDropdown: false,
                                                // autoHideDialCode: false,
                                                // autoPlaceholder: "off",
                                                // dropdownContainer: document.body,
                                                // excludeCountries: ["us"],
                                                // formatOnDisplay: false,
                                                // geoIpLookup: function(callback) {
                                                //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                                                //     var countryCode = (resp && resp.country) ? resp.country : "";
                                                //     callback(countryCode);
                                                //   });
                                                // },
                                                // hiddenInput: "full_number",
                                                // initialCountry: "auto",
                                                // localizedCountries: { 'de': 'Deutschland' },
                                                // nationalMode: false,
                                                // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
                                                placeholderNumberType: "MOBILE",
                                                // preferredCountries: ['cn', 'jp'],
                                                separateDialCode: true,
                                                utilsScript: "/assets/build/js/utils.js",
                                            });
                                            input.addEventListener("countrychange", function () {
                                                $('#PhoneCountry').val(JSON.stringify(iti1.getSelectedCountryData()))
                                                // do something with iti.getSelectedCountryData()
                                            });
                                        </script>

需要用另一個欄位來記錄電話號碼的國家資料 

套件的來源
https://github.com/jackocnr/intl-tel-input
 

SELECT e.name, e.protocol_desc, e.type_desc, e.role_desc, e.state_desc, 
       t.port, e.is_encryption_enabled, e.encryption_algorithm_desc, 
       e.connection_auth_desc 
FROM   sys.database_mirroring_endpoints e JOIN sys.tcp_endpoints t
ON     e.endpoint_id = t.endpoint_id;


--這個步驟要看前一步驟出現的 Name , 修改 'DBMirroringEndPoint'
IF  EXISTS (SELECT * FROM sys.endpoints e WHERE e.name = N'DBMirroringEndPoint')
DROP ENDPOINT  DBMirroringEndPoint; 

IF NOT EXISTS (SELECT * FROM sys.endpoints e WHERE e.name = N'DBMirroringEndPoint') 
CREATE ENDPOINT DBMirroringEndPoint
    STATE = STARTED
    AS TCP ( LISTENER_PORT = 5023 )
    FOR DATABASE_MIRRORING (
       AUTHENTICATION = WINDOWS NEGOTIATE,
       ENCRYPTION = REQUIRED,
       ROLE=ALL);

修改完畢, 在做 Security 設定時會看到新的 port "5023"

 

UW -> DB 物件產生器會產生兩個function
GetAllDataFromBaseTableWithCache(string OrderFields = "_Default", bool IsCopy = true )
以及
Get物件名稱FromCachedDT(string Key)
-----------------------------------------------------------
設計上是希望將所有資料Cache在記憶體，然後前端直接抓出資料，不須到資料庫抓資料
理論上網頁速度應該比較佳，實際上卻發現是效能殺手

原因在於 GetAllDataFromBaseTableWithCache 是抓出整個table的資料放到 Cache
然後又做了一件事，當有人要資料時，會把整個 DataTable 做 Copy() 再 return
也就是說，當DataTable有數千筆資料列時
每叫用一次 "Get物件名稱FromCachedDT(string Key)" 就會把數千筆資料整個複製一次
再從複製出來的DataTable Select 出一列 return
------------------------------------------------------------
解決方法:
Get物件名稱FromCachedDT(string Key)  --> 改成一筆一筆資料做 Cache，這樣 Copy() 只會Copy一筆
實測上，原本頁面要跑1.8秒，調整後可以 0.4 秒就完成
-----------------------------------------------------------
結論:
PG產生器就把 GetAllDataFromBaseTableWithCache 拿掉吧

目標收集 SEO 的 10 個最重要的原則. 10 個就好....

1. 每一頁都要有 title, description. 但不可以有 keyword.

2. 使用 URL Rewrite.

3. 產品說明: https://developers.google.com/search/docs/data-types/product

4. 圖片加上 title 和 alt

5. Description 中, 重點關鍵字要出現兩次.

6. 使用 canonical 集合積分統計統果.

        public void TEST(SEPM.SEPMDataContext oDC)

        {

            //一般 LINQ 寫法, 欄位只能寫死, 如:

            var Q = query.OrderBy(r => r.statusId).ToList();



            //若 OrderBy 的欄位不是固定的



            //方法一：條列

            var orderBy = "XXX";

            if (orderBy == "ownerId")

            {

                Q = Q.OrderBy(r => r.ownerId).ToList();

            }

            else if (orderBy == "endDate")

            {

                Q = Q.OrderBy(r => r.endDate).ToList();

            }



            //方法二：

            Q = Q.OrderBy(r => GetPropertyValue(r, orderBy)).ToList();

        }



        private object GetPropertyValue(object obj, string property)

        {

            System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);

            return propertyInfo.GetValue(obj, null);

        }

參考：http://coderemind.blogspot.tw/2013/10/linq.html

程式碼 1:

        foreach (DataRow oRow in DT.Rows)

        {

            var oSP = new DB.StorePointRecord(oRow);

            :

            :

        }

程式碼 2:

        var oSP = new DB.StorePointRecord();

        foreach (DataRow oRow in DT.Rows)

        {

            oSP.row = oRow;

            :

            :

        }

以前年輕不懂事, 寫了一些很遜的程式碼, 例如:

舊的程式碼:

        public static DataTable DTFromSQL(string Sql, string DBC = null, Int32 timeout = 0)

        {

            SqlDataAdapter DA = new SqlDataAdapter(Sql, GetDBC(DBC));



            DataTable DT = new DataTable();

            try

            {

                DA = new SqlDataAdapter(Sql, DBC);

                if (timeout > 0)

                {

                    DA.SelectCommand.CommandTimeout = timeout;

                }



                DA.Fill(DT);

            }

            catch (Exception ex)

            {

                throw new Exception(ex.ToString());

            }

            finally

            {

                DA.Dispose();

            }



            return DT;

        }

新的程式碼:

        public static DataTable DTFromSQL(string Sql, string DBC = null, Int32 timeout = 30)

        {

            using (var DA = new SqlDataAdapter(Sql, GetDBC(DBC)))

            {

                //不可為 null

                DataTable DT = new DataTable();



                DA.SelectCommand.CommandTimeout = timeout;



                DA.Fill(DT);



                return DT;

            }

        }

可以參考:
https://dotblogs.com.tw/yc421206/archive/2012/01/03/64154.aspx
 

試分析以下兩個 function..

        public static void WriteText1(string FileName, List<string> ltData)

        {

            foreach(string data in ltData)

            {

                System.IO.File.AppendAllText(FileName, data);

            }

        }



        public static void WriteText2(string FileName, List<string> ltData)

        {

            var Res = "";

            foreach (string data in ltData)

            {

                Res += data;

            }



            System.IO.File.WriteAllText(FileName, Res);

        }

抓出每個 Block_Id 中, End_Date 最小的資料.

語法 A:
With TempBlock as (
Select *, 
ROW_NUMBER() OVER(PARTITION BY B.Block_Id ORDER BY B.End_Date, B.Id) AS rk 
from BlockData B Where IsDelete = 'N' and End_Date >= getDate())
Select * from TempBlock Where rk = 1

語法 B:
Select * from (
Select *, 
ROW_NUMBER() OVER(PARTITION BY B.Block_Id ORDER BY B.End_Date, B.Id) AS rk 
from BlockData B Where IsDelete = 'N' and End_Date >= getDate()) TempBlock 
Where rk = 1