平板收银系统、国产系统，鸿蒙系统，小键盘的封装与应用—仙盟创梦IDE

数字小键盘封装

数组小键盘封装是指将与数组小键盘相关的功能、操作、数据等进行整合，形成一个独立的、可复用的模块。封装数组小键盘具有以下几方面重要意义：

提高代码可维护性

• 降低复杂度：数组小键盘在实际应用中，可能涉及到按键事件处理、按键状态管理、输入数据验证等一系列操作。若不进行封装，这些代码会分散在整个项目中，导致代码结构混乱，难以理解和维护。而封装后，这些代码被集中在一个模块里，代码结构变得清晰，维护起来更加容易。
• 便于修改：当小键盘的功能需要调整时，比如修改按键布局、添加新的按键功能，只需在封装模块内部进行修改，不会对项目的其他部分产生影响。例如，原本小键盘只能输入数字，现在要添加小数点输入功能，在封装模块里添加相应的按键处理逻辑即可。

增强代码复用性

• 跨项目使用：封装好的数组小键盘模块可以在多个项目中重复使用。比如，在开发多个需要数字输入的移动应用时，只需将封装好的小键盘模块引入到不同项目中，就可以快速实现小键盘功能，避免了重复编写相同代码的工作，提高了开发效率。
• 项目内复用：在同一个项目中，不同的界面可能都需要用到数组小键盘，如登录界面输入验证码、设置界面输入密码等。通过封装，只需在需要的地方调用这个模块，就可以轻松实现小键盘功能，减少了代码冗余。

提升代码安全性

• 隐藏内部实现细节：封装可以将小键盘的内部实现细节隐藏起来，只对外提供必要的接口。外部代码只能通过这些接口与小键盘模块进行交互，这样可以防止外部代码对小键盘内部数据和逻辑的非法访问和修改，提高了代码的安全性。
• 数据验证和过滤：在封装模块内部可以对用户输入的数据进行验证和过滤，防止非法数据进入系统。例如，在小键盘输入密码时，可以在模块内部验证密码长度、字符类型等，确保输入的密码符合安全要求。

便于团队协作

• 分工明确：封装后的数组小键盘模块可以由专门的开发人员负责开发和维护，其他开发人员只需按照接口文档使用该模块即可。这样可以实现开发任务的分工，提高团队开发效率。
• 减少冲突：不同开发人员在开发项目时，可能会对同一部分代码进行修改，从而产生冲突。封装后的模块可以减少这种冲突的发生，因为其他开发人员不需要了解模块内部的具体实现，只需要关注接口的使用。

 数字小键盘匿名关联事件优点

• 减少命名冲突：匿名函数无需命名，这能避免因函数命名引发的冲突问题。在一个大型项目中，代码里会存在大量的函数和变量，若为每个事件处理函数都赋予一个唯一的名称，不但耗费时间，还可能出现命名重复的状况。采用匿名关联事件，就无需操心命名的问题，降低了命名冲突的可能性。
• 代码紧凑：匿名关联事件可以直接在事件绑定的地方定义事件处理逻辑，让代码更加紧凑。以 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 仙盟样式 =`.仙盟创梦_数字键盘对话框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}`;return 仙盟样式;},getBody:function(){const 仙盟数据 = ` 
 请输入数量 ×
  
 7 8 9 退格 4 5 6 清空 1 2 3 确认 00 0 .
 
`; 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);\"