最近因為資安公司要求，要把 jQuery 升級到最新版
網路查了一下，似乎 3.5 版以後, XSS 才算是改善很多

目前最新版本是 3.7.0，對於原本就使用 3 以上版本專案影響就不大，所有 function 沿用上沒有問題
但是有些舊專案使用 2.X 甚至 1.X 升級到 3.7.0 版之後就會有些功能掛掉

經測試，首當其衝的就是 $(window).load 不能使用，更精準一點應該是 .load() 不能使用
檢查 jquery 過期網頁 https://api.jquery.com/category/deprecated/
發現 .load() 是 1.8 版以後 deprecated，但我 2.2.4 用很久用爽爽
我想應該是 jquery 為了相容問題，一直到跨版本才真的拿掉
也就是 1.X 宣告 deprecated 的功能，到 3.X 才真的移除
(請看附圖)
所以我就鴕鳥的找 1.X  deprecated 然後可能會用的 function 處理
(若有 tag "Removed" 就是已移除，這樣找比較快)

.andSelf()

.live()

.die()

.error()

.load()

.unload()

.size()

.toggle()

大致上專案搜尋字串應該就能處理
但有些可能是其他第三方 jquery物件 例如 jquery-ui ，會用到以上功能
這時可能要去該物件看有無對應升級版
 

Browser:
safari in iphone 
chrome in iphone
chrome in android
in Line (APP)
in FB (APP)

HTML:
form target="_blank"
window.open
link target="_blank"

Trigger:
onclick in tag
.click with jquery
submit button

加構獨立的 API Server 時, 要使用 Cookie 認証必需有以下條件:

1. Web Server 和 API Server 有相同的父網域.
2. Cookie 的網域指定到相同的父網域.
3. 在 API 的 Application 中允許 CORS Request, 需要修改 Startup.cs

3.1 在 ConfigureServices 中要加入  AddCors, 而且要記得 AllowCredentials()

        public void ConfigureServices(IServiceCollection services)

        {

            services.AddCors(options =>

            {

                options.AddPolicy(name: "Cors(PolicyName",

                                 builder =>

                                 {

                                     builder.WithOrigins("https://web1.yourdomain.com",

                                                         "https://web2.yourdomain.com")

                                     .AllowCredentials();

                                 });

            });



            services.AddControllers()

                .AddNewtonsoftJson(opt =>

                 opt.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

3.2 在 Configure 中, 要加入 app.UseCors("Cors(PolicyName"), 記得要在  UseAuthorization() 之前.

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

        {

            app.UseExceptionMiddleware();



            app.UseHttpsRedirection();



            app.UseHttpsRedirection();



            app.UseRouting();



            app.UseCors(MyAllowSpecificOrigins);



            app.UseAuthorization();

4. 在 Client 端要加上 withCredentials: true

                            $.ajax({

                                url: apiRoot + "apiurl",

                                type: 'GET',

                                dataType: 'json', // 預期從server接收的資料型態

                                success: function (res) {

                                    console.log("success: ");

                                    console.log(res);                                    

                                },

                                xhrFields: {

                                    withCredentials: true

                                },

                                error: function (XMLHttpRequest, textStatus, errorThrown) {

                                    alert("發生錯誤");

                                }

                            });

試說明以下程式碼的功用, 以及可改進的部份.

        string EndDate = Request["EndDate"];



        DataTable qtyControls = U2.SQL.DTFromSQL("Select YA00, PD00 from QtyControl Where EndDate > '" + EndDate + "' and SoldQty >= InitQty");



        var values = qtyControls.AsEnumerable().Select(r => "('" + r.Field<string>("YA00") + "','" + r.Field<string>("PD00") + "')").ToList();



        var sqls = new List<string>();

        sqls.Add("Delete StopSaleYAP;");



        int start = 0;        

        while(start < values.Count)

        {

            var end = start + 999;

            if(end > values.Count - 1)

            {

                end = values.Count;

            }



            sqls.Add("insert into StopSaleYAP(YA00, PD00) Values" + string.Join(",", values.GetRange(start, end)) + ";");



            start = end + 1;

        }



        U2.SQL.ExecuteSQL(string.Join("\r\n", sqls));

        public static bool IsErrorOrder(Order.Input.CheckValidOrder dto)

        {

            if (dto.OrderNos == null || dto.OrderNos.Count == 0)

            {

                return false;

            }



            var orderCount = dto.OrderNos.Count();

            var orders = NpreoOrderMain.GetList(dto.OrderNos);

            if (orders.Count != orderCount || !dto.OrderNos.Any(x => orders.Select(o => o.Order_No).Contains(x)))

            {

                return true;

            }

            return false;

        }

        var fu = Request.Files[0];

        fu.SaveAs(Server.MapPath("UploadFiles/") + fu.FileName);

--

基本題:

1. 對 Linq 熟嗎.

2. 對 ASP.Net 的 Cache  熟悉嗎.

3. 用過什麼 ORM, 試說明優缺點.

4. 試說明 MVC 的架構.

資安相關問題:

1. 試說明 SQL Injection

2. 試說明 Cross Site Injection.

3. 上傳檔案要注意的事項.

4. 試說明 cookie 的安全設定 ? same site, secure, http only.


前端相關加分題:

1. jQuery 或 Vue 熟悉嗎 ?

2. 試說明 RWD

3. 試說明 bootstrap

進階問題:

1. 試說明 Reflection

2. 試說明 Dependency Injection

3.  試說明 singleton vs static

4. 試單有兩個欄位 Id, Status (付款待確認: 1.1;  已付款: 2,  訂單已出貨: 3; 訂單取消中: 5; )
狀態 1.1 和 狀態 2 的訂單可取消，取消後改為狀態 5

客人要取消訂單，訂單編號為 123, 試說明程式執行的過程。

錯誤訊息：
WebForms UnobtrusiveValidationMode 需要 'jquery' 的 ScriptResourceMapping。請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)。

解決方式：
在有用 validation 那頁的 Page_Load 加上，就恢復正常了
protected void Page_Load(object sender, EventArgs e)
{
     UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}

參考來源：
https://blog.xuite.net/tolarku/blog/63451508-VS+2012+%E5%88%9D%E9%AB%94%E9%A9%97+-+%E9%9C%80%E8%A6%81+%27jquery%27+%E7%9A%84+ScriptResourceMapping+%E9%8C%AF%E8%AA%A4
https://www.c-sharpcorner.com/UploadFile/cd7c2e/enabling-unobtrusive-validation-mode-in-Asp-Net-4-5/

過去都是使用 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 版才支援
應該可以放心使用


 

        var TotalOldQty = 0;

        $(".AdjQty_" + yano + "_" + pdno + " [type='text']").each(function () {

            TotalOldQty += parseInt($(this).data("oldqty"));

        });



        $(".AdjQty_" + yano + "_" + pdno).html($(".AdjQty_" + yano + "_" + pdno).html() + "更新中.....");



        $(".AdjQty_" + yano + "_" + pdno + " span").hide();

和 

        $(".AdjQty_" + yano + "_" + pdno).html($(".AdjQty_" + yano + "_" + pdno).html() + "更新中.....");



        $(".AdjQty_" + yano + "_" + pdno + " span").hide();



        var TotalOldQty = 0;

        $(".AdjQty_" + yano + "_" + pdno + " [type='text']").each(function () {

            TotalOldQty += parseInt($(this).data("oldqty"));

        });

出來的 TotalOldQty 會不相同..

jQuery 的參數提示總是 a, b, c 的看不懂 ? 請參考下圖:



上圖是引用 jquery-2.2.4.js 的結果.

下圖是引用 jquery.min.js 的結果.

大家會使用 jquery.min.js 的主要原因是, 主要是檔案大小"大幅縮小" 剩下 25% 左右. 但是....

減少的 75% = 270K, 而且只有第一次載入時會真的下載檔案.

所以要用哪一個呢 ? 這就留給你判斷了...

<a class="del" href="#" data-yano="1250453286" data-pdno="04360003">

    <img src="/TC/template/Shopping/images/del.png" alt="">

</a>

用 $(".del").data("pdno") 會回傳 4360003
被這個搞了好久..

要避免這個問題, 可以使用 attr  來代替 data
$(".del").attr("data-pdno")

用 Jquery 增加 Option 的漂亮寫法.

$("#select").append($("<option></option>").attr("value", "值").text("文字"));

其它更多可以參考: ​https://dotblogs.com.tw/alanjiang/2011/01/26/21061