新建指令避開 Avalon 的 ms-duplex 的問題

Ajian 發布于2019-08-19 18:26 / 509人閱讀

摘要：前端框架有一個問題，即在使用后，此在的下無法正常使用輸入法輸入中文，這個問題在中一直存在且被復現。既然無法直接修復，那么就使用自定義一個新的指令來簡單地處理雙向數據綁定。

前端框架 Avalon 有一個問題，即 在使用 ms-duplex 后，此 input 在 Windows 8.1 的 IE11 下無法正常使用輸入法輸入中文，這個問題在 Avalon 1.5.X 中一直存在且被復現。

既然無法直接修復，那么就使用 avalon.directive 自定義一個新的指令來簡單地處理雙向數據綁定。起名為 ms-model，名字來源于 Angular.

實現如下：

avalon.directive("model", {
    init: function (binding) {
        // binding 為指令初始化時注入對象.
        init(binding)();
    },

    // 此方法類似 Get / Set, 在控制器使用 $watch 監視 (binding.expr, 即 ms-model="expr") 時觸發, 可在此做一些雜七雜八的事情.
    update: function (newVal, oldVal) {
        // this 為 init 中的 bingding 對象.
        this.element.value = newVal;
    }
});


// Definition: ms-model.
function init (binding) {

    var thisElement = binding.element;  // 指令所在的節點.
    var directiveValue = binding.expr;  // 指令綁定的屬性.
    var imeIgnored = false;  // 輸入法忽略控制標識.

    // 初始化賦值. 必須推入任務隊列才生效.
    setTimeout(function () {
        thisElement.value = binding.oldValue !== undefined ? binding.oldValue : "";  // 未賦值進行清空, 防止 IE / Edge 緩存.
    }, 1);

    // Definition: Input 事件.
    var inputEvent = function (event) {
        if (imeIgnored) { return; }
        // vmodels 是指令所在的控制器的數組, 看起來是按照 [孫, 子, 父] 的冒泡順序排序, 但未肯定.
        // ms-duplex 只處理了指令所在的最近的控制器的數值, 在此也只處理 vmodels[0].
        eval("binding.vmodels[0]." + directiveValue + " = thisElement.value;");   // 使用 eval 解決多層嵌套問題.
    };


    return function () {
        // 在使用輸入法的時候不進行數據同步.
        // 進入輸入法狀態時鎖定控制標識.
        avalon.bind(thisElement, "compositionstart", function () {
            imeIgnored = true;
        });

        // 輸入法恢復時釋放控制標識.
        avalon.bind(thisElement, "compositionend", function () {
            imeIgnored = false;
            inputEvent();  // Fixing for Edge, Edge 的日語輸入法的 input 事件在 compositionend 之前執行, 而其他瀏覽器包括 IE11 全是 compositionend 之后, 需要手動觸發一次.
        });

        // 設置 Input 事件.
        avalon.bind(thisElement, "input", inputEvent, false);

        // 修復 IE 問題.
        if (window.ScriptEngine && window.ScriptEngine()) {

            // 修復 IE9 的 Backspace / Delete 剪切不觸發 Input 事件的問題.
            if (navigator.appVersion.indexOf("MSIE 9.0") > -1) {
                avalon.bind(thisElement, "cut", function () {
                    setTimeout(inputEvent, 1);  // 必須推入任務隊列中執行才生效.
                });
            }

            // IE 額外注冊 KeyUp 進行數據綁定來避免輸入法無效的問題.
            avalon.bind(thisElement, "keyup", function (event) {
                event = event || window.event;
                if (event.keyCode === 17 || event.keyCode === 18 || event.ctrlKey || event.shiftKey || event.altKey) { return; }
                inputEvent();
            });

        }
    }
}

云服務器 GPU云服務器 mvvm框架的avalon 指令的交互詳解 linux有效化新建的硬盤 php新建表的代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79593.html

avalon與masonry的結合

摘要：相關組件版本最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結果很令人沮喪，依然沒有控制節點的位置，所以應該不是這個問題。相關組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發后臺...

Kosmos 2019-08-22 10:59 評論0 收藏0
avalon2.1.16發布

摘要：也是一個版本，沒有增加任何新特征。不同的是內部源碼已經全部用重新編寫了。之前使用風格的編寫，進行合并。很好的解決這問題。隨著對的大膽嘗試的成功，以后源碼也計劃隨遷移。不過，大家放心，最后出來的框架還是形式，能運行于下。 avalon2.1.16也是一個Fix BUG版本，沒有增加任何新特征。不同的是內部源碼已經全部用es6 modules重新編寫了。之前使用nodejs風格的Commo...

oysun 2019-08-20 11:34 評論0 收藏0
avalon2初體驗

摘要：最近因項目進展需求對現有項目進行重構，由于目前項目還未實現真正意義上的前后端分離后續會循序重構實現，在時間緊產品循序迭代的情況下，想一次性實現前后端分離精力實在有限主要是前端開發人力不足。最近因項目進展需求對現有項目進行重構，由于目前項目還未實現真正意義上的前后端分離（后續會循序重構實現），在時間緊產品循序迭代的情況下，想一次性實現前后端分離精力實在有限（主要是前端開發人力不足）。所...

youkede 2019-08-01 15:51 評論0 收藏0
吐槽專用

摘要：最終選擇了兼容到的，終于使用上框架，雖然它只是個。沒有對比就沒有傷害本來想著技術棧統一，移動端也準備使用。于是，之后對移動端的技術選型上更加慎重了，最終采用了文檔更漂亮的。易用還真不易用，坑還真多。吐槽 avalon.js 歷史背景需求重大調整，所有業務推倒重來（pc端主要任務涉及管理后臺類型的網站）；開發周期很緊，過年前要上線；公司pc端業務要求兼容到ie8； 2015年前...

zxhaaa 2019-08-22 10:36 評論0 收藏0
avalon 單頁面程序（種子工程）之一用requirejs引入avalon

摘要：現在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。這篇文章是寫在公司項目結束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體...

solocoder 2019-08-19 17:27 評論0 收藏0