當一個陣列是原始結構，例：[1,2,3,4,5]
若新增一個項目進去時，一般在html上，v-model會直接綁定那個項目的值，如以下程式

<td v-for="item in list">
      <input type="text" v-model="item" />
</td>

但這樣，在新增項目的input上改變值時，會沒辦法binding到vue值。

這時解決的方式如下，將程式加入index，v-model直接綁定到陣列的索引值，這樣就能改變vue的值

<td v-for="(item, index) in list">
      <input type="text" v-model="list[index]" />
</td>

PS. 若是陣列裡面是物件的結構，使用v-model可直接綁定物件的key值
例：[
 {
    name: "中文",
    value: 1
 },
{
    name: "英文",
    value: 2
 },
{
    name: "日文",
    value: 3
 },
]
<td v-for="item in list">
      <input type="text" v-model="item.name" />
</td>

PromiseAll: async function (array) {

    let taskList = [];

    let propList = [];

    for (let obj of array) {

        for (let prop in obj) {

            taskList.push(obj[prop]);

            propList.push(prop);

        }

    }

    let resp = await Promise.all(taskList);

    let result = {};

    let counter = 0;

    for (let prop of propList) {

        result[prop] = resp[counter];

        counter += 1;

    }

    return result;

}

PromiseAll 是將API一次發送並接收回傳值的工具
使用方法範例:

const taskList = [{

    adPosition : BannerPositionDataService.GetList(),

    big : BannerDataService.GetList(100),

    smallTop : BannerDataService.GetOne(200),

    smallBottom : BannerDataService.GetOne(300),

    section2 : BannerDataService.GetList(400),

    section3 : BannerDataService.GetList(500),

    section4 : BannerDataService.GetList(600),

    recommends : ProductDataService.GetRndList()

}];



let resps = await UJ.PromiseAll(taskList);

要特別記得TaskList中的Method不需要做await,不然就沒有意義了

DeepBinding: function (vueData, data) {



    if (Array.isArray(data)) {

        if (!Array.isArray(vueData)) {

            vueData = [];

        } else {

            vueData.splice(0);

        }

        for (let prop in data) {

            vueData.push(data[prop]);

        }

    }

    else if (typeof (data) === 'object') {

        if (Object.keys(data).length === 0) {

            return;

        }

        for (let prop in data) {

            if (vueData[prop] === undefined || data[prop] === null ||

                (!Array.isArray(vueData[prop] && vueData !== null && typeof (data) !== 'object'))) {

                vueData[prop] = data[prop];

            } else {

                this.DeepBinding(vueData[prop], data[prop]);

            }

        }

    } else {

        vueData = data;

    }

}

在資料回傳後要Binding到Vue Data上面或是任意Object的Property上可以使用這個,
不使用DeepBinding是因為瀏覽器版本限制,這個方式不受瀏覽器版本限制,但是只有提供一階,需要多階請自行改寫.
使用方法範例:

UJ.DeepBinding(this, resp);

這邊的this代表的是Vue的Data
 

程式碼上色

https://highlightjs.org/

Vue
https://github.com/highlightjs/vue-plugin

中文
https://fenxianglu.cn/highlight.html?theme=atom-one-light

 

最近發生 email 有人輸入中文可以過的狀況。測試後才發現 \w 在 C# 可以輸入中文驗證過

        string strPattern = @"^[\w\.-]{1,}@[a-zA-Z0-9][\w\.-]*\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$";

        System.Text.RegularExpressions.Regex regEx = new System.Text.RegularExpressions.Regex(strPattern);

        string email = "darrenTEST@gmail.com";

        Response.Write(email + " - > " + regEx.IsMatch(email) + "<br/>");

        email = "darren_東@gmail.com";

        Response.Write(email + " - > " + regEx.IsMatch(email) + "<br/>");



// darrenTEST@gmail.com - > True

// darren_東@gmail.com - > True

把 \w 換成 A-Za-z0-9_ 就可以驗證過

string strPattern = @"^[a-zA-Z0-9_\.-]{1,}@[a-zA-Z0-9][\w\.-]*\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$";

        System.Text.RegularExpressions.Regex regEx = new System.Text.RegularExpressions.Regex(strPattern);

        string email = "darrenTEST@gmail.com";

        Response.Write(email + " - > " + regEx.IsMatch(email) + "<br/>");

        email = "darren_東@gmail.com";

        Response.Write(email + " - > " + regEx.IsMatch(email) + "<br/>");



// darrenTEST@gmail.com - > True

// darren_東@gmail.com - > False

可是搬到 js 處理，就可以過

        const regex = /^[\w\.-]{1,}@[a-zA-Z0-9][\w\.-]*\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;

        console.log(regex.test('darrenTEST@gmail.com')); // true

        console.log(regex.test('darren_東@gmail.com')); // false

我想這是 C# 把 \w 當作 [word] 處理的關係，非符號都當作是文字
其他程式語言沒有測試過。不知是不是 c# 獨有的狀況

在後端部分，因為有uw元件，在處理url時已經很好處理了
但是在JavaScript因為我們沒有固定js在使用，
因此提供一套簡易使用網址處理工具
thisPage.ParameterByName(key) //取得網址上特定參數
thisPage.OriUrl(key) //中間一段提供修改變數的功能

    <script>

        var thisPage = {

            Init: function () {

                thisPage.InitPageInput();



                $("body")

                    ;

                thisPage.ChangeEvent();

            },

            ParameterByName: function (targetKey) {

                var res = null;

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                for (const [key, value] of Object.entries(params)) {

                    if (targetKey.trim().toLocaleLowerCase() === key) {

                        res = value;

                    }

                }

                return res;

            },

            OriUrl: function () {

                var arrayUrl = [];

                arrayUrl.push(window.location.protocol);//https:

                arrayUrl.push("//");

                arrayUrl.push(window.location.hostname);//blog.uwinfo.com.tw

                if (window.location.port.length > 0) {

                    //大多情況，不用特別指定port

                    arrayUrl.push(":");

                    arrayUrl.push(window.location.port);//80

                }

                arrayUrl.push(window.location.pathname);//post/Edit.aspx

                //換一套寫法

                //arrayUrl.push(window.location.search);//?Id=321

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                var ayyarQueryString = [];

                //這邊可以加工增加額外的key值

                for (const [key, value] of Object.entries(params)) {

                    if (value.trim().length > 0) {

                        //這邊要注意中文需要encode

                        ayyarQueryString.push(key + "=" + encodeURIComponent(value));

                    }

                }

                if (ayyarQueryString.length > 0) {

                    arrayUrl.push("?");

                    arrayUrl.push(ayyarQueryString.join('&'));

                }

                return arrayUrl.length > 0 ? arrayUrl.join('') : '';

            },

            InitPageInput: function () {

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                for (const [key, value] of Object.entries(params)) {

                    $('input[name=' + key + ']').val(value);

                    //這邊因為input有多種不同輸入方式，可以自行編輯

                    //$('select[name=' + key + ']').val(value);

                    //$('textarea[name=' + key + ']').html(value);

                }

            },

            ChangeEvent: function () {



            },

        }

        $(function () {

            thisPage.Init();

        });

    </script>

試試這個:
"20190101".replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')

取得 yyyyMMdd 的方法
var D = new Date();
D.toISOString().slice(0,10).replace(/-/g,"");

過去都是使用 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, 而且只有第一次載入時會真的下載檔案.

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

http://blog.darkthread.net/post-2012-06-09-json-net-performance.aspx

JavaScriptSerializer、DataContractJsonSerializer及Json.NET

比較

目前是使用 Json.NET >  工具 程式褲套建管理員  > Package manager console 

PM>  Install-Package Newtonsoft.Json

​就可以安裝了