數字小鍵盤封裝

數組小鍵盤封裝是指將與數組小鍵盤相關的功能、操作、數據等進行整合，形成一個獨立的、可復用的模塊。封裝數組小鍵盤具有以下幾方面重要意義：

提高代碼可維護性

• 降低復雜度：數組小鍵盤在實際應用中，可能涉及到按鍵事件處理、按鍵狀態管理、輸入數據驗證等一系列操作。若不進行封裝，這些代碼會分散在整個項目中，導致代碼結構混亂，難以理解和維護。而封裝后，這些代碼被集中在一個模塊里，代碼結構變得清晰，維護起來更加容易。
• 便于修改：當小鍵盤的功能需要調整時，比如修改按鍵布局、添加新的按鍵功能，只需在封裝模塊內部進行修改，不會對項目的其他部分產生影響。例如，原本小鍵盤只能輸入數字，現在要添加小數點輸入功能，在封裝模塊里添加相應的按鍵處理邏輯即可。

增強代碼復用性

• 跨項目使用：封裝好的數組小鍵盤模塊可以在多個項目中重復使用。比如，在開發多個需要數字輸入的移動應用時，只需將封裝好的小鍵盤模塊引入到不同項目中，就可以快速實現小鍵盤功能，避免了重復編寫相同代碼的工作，提高了開發效率。
• 項目內復用：在同一個項目中，不同的界面可能都需要用到數組小鍵盤，如登錄界面輸入驗證碼、設置界面輸入密碼等。通過封裝，只需在需要的地方調用這個模塊，就可以輕松實現小鍵盤功能，減少了代碼冗余。

提升代碼安全性

• 隱藏內部實現細節：封裝可以將小鍵盤的內部實現細節隱藏起來，只對外提供必要的接口。外部代碼只能通過這些接口與小鍵盤模塊進行交互，這樣可以防止外部代碼對小鍵盤內部數據和邏輯的非法訪問和修改，提高了代碼的安全性。
• 數據驗證和過濾：在封裝模塊內部可以對用戶輸入的數據進行驗證和過濾，防止非法數據進入系統。例如，在小鍵盤輸入密碼時，可以在模塊內部驗證密碼長度、字符類型等，確保輸入的密碼符合安全要求。

便于團隊協作

• 分工明確：封裝后的數組小鍵盤模塊可以由專門的開發人員負責開發和維護，其他開發人員只需按照接口文檔使用該模塊即可。這樣可以實現開發任務的分工，提高團隊開發效率。
• 減少沖突：不同開發人員在開發項目時，可能會對同一部分代碼進行修改，從而產生沖突。封裝后的模塊可以減少這種沖突的發生，因為其他開發人員不需要了解模塊內部的具體實現，只需要關注接口的使用。

?數字小鍵盤匿名關聯事件優點

• 減少命名沖突：匿名函數無需命名，這能避免因函數命名引發的沖突問題。在一個大型項目中，代碼里會存在大量的函數和變量，若為每個事件處理函數都賦予一個唯一的名稱，不但耗費時間，還可能出現命名重復的狀況。采用匿名關聯事件，就無需操心命名的問題，降低了命名沖突的可能性。
• 代碼緊湊：匿名關聯事件可以直接在事件綁定的地方定義事件處理邏輯，讓代碼更加緊湊。以 JavaScript 為示例，在綁定數字小鍵盤按鍵點擊事件時，使用匿名函數可以讓代碼看起來更加簡潔

代碼?

/*
仙盟 創夢 數字鍵盤
2024-5-8
*/// 檢查頁面中是否存在 CyberWin_Dialog 對象if (typeof window.CyberWin_Dialog === 'undefined') {// 如果不存在，創建一個空的 CyberWin_Dialog 對象window.CyberWin_Dialog = {};} else {/*// 如果存在，為其添加一個類屬性if (!CyberWin_Dialog.仙盟創夢_小鍵盤) {CyberWin_Dialog.仙盟創夢_小鍵盤 = {play: function (靈體obj) {console.log("靈體obj"); console.log(靈體obj); },contains: function (className) {return !!this[className];}};}*/// CyberWin_Dialog.classList.add('new-class');}// 如果存在，為其添加一個類屬性if (!CyberWin_Dialog.仙盟創夢_小鍵盤) {CyberWin_Dialog.仙盟創夢_小鍵盤 = {add: function (className) {if (!this[className]) {this[className] = true;}},// this.仙盟創夢_數字鍵盤_靈體obj=null,constructor() {this.仙盟創夢_cpu=this},仙盟創夢_cpu:this,仙盟創夢_數字鍵盤_靈體_指針obj:null,仙盟創夢_數字鍵盤_靈體_指針id:null,getStyle:function(){const 仙盟樣式 =`<style>.仙盟創夢_數字鍵盤對話框dlg{    z-index: 999999;border:0px;flex-direction:column;margin:0 !important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100% - 30px);max-width:calc(100% - 30px)}.仙盟創夢_數字鍵盤容器{width:300px;border:1px solid #ccc;border-radius:10px;overflow:hidden}.keypad-header{background-color:#4CAF50;color:white;padding:10px;display:flex;justify-content:space-between;align-items:center}.keypad-header span{font-size:18px}.close-btn{background:none;border:none;color:white;font-size:20px;cursor:pointer}.input-display{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;background-color:#f2f2f2}.input-display input{width:80%;padding:5px;border:1px solid #ccc;border-radius:3px}.keypad-body{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:5px;padding:10px}.仙盟創夢-keypad{color: #000;padding:10px;font-size:18px;border:none;border-radius:5px;background-color:#f2f2f2;cursor:pointer}.仙盟創夢_樣式_鍵盤{padding:10px;font-size:18px;border:none;border-radius:5px;background-color:#f2f2f2;cursor:pointer}.仙盟創夢_小鍵盤_關閉,.仙盟創夢_小鍵盤_退格,.輸入確定{background-color:#e0e0e0}</style>`;return 仙盟樣式;},getBody:function(){const 仙盟數據 = ` <dialog id="仙盟創夢_數字鍵盤對話框dlg" class="仙盟創夢_數字鍵盤對話框dlg"><div class="仙盟創夢_數字鍵盤容器"><div class="keypad-header"><span>請輸入數量</span><button class="仙盟創夢_小鍵盤_關閉">×</button></div><div class="input-display"><input type="text" id="仙盟創夢_數字鍵盤_輸入數字" readonly></div><div class="keypad-body"><button class="仙盟創夢-keypad" data-value="7">7</button><button class="仙盟創夢-keypad" data-value="8">8</button><button class="仙盟創夢-keypad" data-value="9">9</button><button class="仙盟創夢_樣式_鍵盤 仙盟創夢_小鍵盤_退格" data-value="backspace">退格</button><button class="仙盟創夢-keypad" data-value="4">4</button><button class="仙盟創夢-keypad" data-value="5">5</button><button class="仙盟創夢-keypad" data-value="6">6</button><button class="仙盟創夢_樣式_鍵盤  仙盟創夢_小鍵盤_清空">清空</button><button class="仙盟創夢-keypad" data-value="1">1</button><button class="仙盟創夢-keypad" data-value="2">2</button><button class="仙盟創夢-keypad" data-value="3">3</button><button class="仙盟創夢_樣式_鍵盤 輸入確定 "   >確認</button><button class="仙盟創夢-keypad" data-value="00">00</button><button class="仙盟創夢-keypad" data-value="0">0</button><button class="仙盟創夢-keypad" data-value=".">.</button></div></div></dialog>`;return 仙盟數據;},init: function (靈體obj) {console.log("靈體obj"); console.log(靈體obj); var 仙盟數據 = this.getBody();var 仙盟樣式 = this.getStyle();//document.write(仙盟樣式);const 仙盟鍵盤容器 = document.getElementById('仙盟創夢_小鍵盤block');仙盟鍵盤容器.innerHTML=仙盟樣式+仙盟數據;this.loadeventcommon();//const dialog = new Dialog(仙盟數據);},play: function (靈體obj,靈體id) {console.log("靈體obj"); // console.log(靈體obj); console.log("仙盟創夢_cpu==仙盟創夢_cpu"); console.log(this.仙盟創夢_cpu); this.仙盟創夢_數字鍵盤_靈體_指針obj=靈體obj;this.仙盟創夢_數字鍵盤_靈體_指針id =靈體id;console.log('關閉小鍵盤2');console.log(this.仙盟創夢_數字鍵盤_靈體obj);var 仙盟數據 = this.getBody();// console.log(仙盟數據); var p = document.createElement('dialog');p.innerHTML =仙盟數據;element.classList.add("newClass");element.setAttribute("id", "newID");document.body.append(p);p.show();this.loadevent(靈體obj,靈體id);仙盟創夢_數字鍵盤對話框dlg.show();var 仙盟創夢_數字鍵盤_輸入數字 = document.getElementById('仙盟創夢_數字鍵盤_輸入數字')仙盟創夢_數字鍵盤_輸入數字.value=全局仙盟創夢_數字鍵盤_靈體obj.value;//const dialog = new Dialog(仙盟數據);},loadeventcommon: function () {var buttons = document.querySelectorAll('.仙盟創夢-keypad');buttons.forEach(button => {button.addEventListener('click', function () {const value = this.dataset.value;if (value === 'backspace') {仙盟創夢_數字鍵盤_輸入數字.value = 仙盟創夢_數字鍵盤_輸入數字.value.slice(0, -1);} else if (value === 'cancel') {仙盟創夢_數字鍵盤_輸入數字.value = '';} else if (value === 'confirm') {// 這里可以添加確認后的處理邏輯，比如提交數據等console.log('確認輸入的數字:', 仙盟創夢_數字鍵盤_輸入數字.value);} else {仙盟創夢_數字鍵盤_輸入數字.value += value;}});});},loadevent: function () {console.log("靈體obj"); console.log('關閉小鍵盤2loadevent');var 仙盟創夢_cpu = this.仙盟創夢_cpu;var 仙盟創夢_數字鍵盤_靈體id=this.仙盟創夢_數字鍵盤_靈體_指針id;var 仙盟創夢_數字鍵盤_靈體obj = this.仙盟創夢_數字鍵盤_靈體_指針obj;//靈體obj;var 仙盟創夢_數字鍵盤對話框 = document.getElementById('仙盟創夢_數字鍵盤對話框dlg');var 仙盟創夢_數字鍵盤_輸入數字 = document.getElementById('仙盟創夢_數字鍵盤_輸入數字');var 仙盟創夢_小鍵盤_關閉 = document.querySelector('.仙盟創夢_小鍵盤_關閉');var 仙盟創夢_小鍵盤_清空 = document.querySelector('.仙盟創夢_小鍵盤_清空');var 輸入確定 = document.querySelector('.輸入確定');var 仙盟創夢_小鍵盤_退格 = document.querySelector('.仙盟創夢_小鍵盤_退格');仙盟創夢_數字鍵盤_輸入數字.value = 全局仙盟創夢_數字鍵盤_靈體obj.value;console.log("仙盟創夢_數字鍵盤_靈體obj",仙盟創夢_數字鍵盤_靈體obj);輸入確定.innerHTML = 輸入確定.innerHTML;console.log('事件監聽器已清空');輸入確定.addEventListener('click', function () {// 這里可以添加關閉小鍵盤的邏輯，比如隱藏元素等console.log('關閉小鍵盤');全局仙盟創夢_數字鍵盤_靈體obj.value =仙盟創夢_數字鍵盤_輸入數字.value;//仙盟創夢_數字鍵盤_輸入數字.value = '';仙盟創夢_數字鍵盤對話框dlg.close();console.log('關閉小鍵盤2');});仙盟創夢_小鍵盤_清空.addEventListener('click', function () {仙盟創夢_數字鍵盤_輸入數字.value = '';console.log('關閉小鍵盤');});仙盟創夢_小鍵盤_關閉.addEventListener('click', function () {仙盟創夢_數字鍵盤_輸入數字.value = '';仙盟創夢_數字鍵盤對話框dlg.close();console.log('關閉小鍵盤');});仙盟創夢_小鍵盤_退格.addEventListener('click', function () {var  text = 仙盟創夢_數字鍵盤_輸入數字.value;//$('#'+cwpd_current_sel_id).val();if (text == "0" || text == "") {//$(this).parents('.counter').find('.text').val('');仙盟創夢_數字鍵盤_輸入數字.value = '';} else {var last_value = text.substr(-2, 1);if (last_value == '.') {仙盟創夢_數字鍵盤_輸入數字.value = text.substr(0, text.length - 2);} else {仙盟創夢_數字鍵盤_輸入數字.value = text.substr(0, text.length - 1);}}//$('#'+cwpd_current_sel_id).focus();
});//const dialog = new Dialog(仙盟數據);},contains: function (className) {return !!this[className];}};}

調用

	var 仙盟創夢_小鍵盤new = CyberWin_Dialog.仙盟創夢_小鍵盤;//CyberWin_Dialog.仙盟創夢_小鍵盤.init();仙盟創夢_小鍵盤new.init();
function 仙盟創夢_數字鍵盤_打開(靈體obj){全局仙盟創夢_數字鍵盤_靈體obj=靈體obj;仙盟創夢_小鍵盤new.play(靈體obj,"");// 仙盟創夢_數字鍵盤對話框.show();}

平板網頁移動收銀

onclick="仙盟創夢_數字鍵盤_打開(this);"