数字小键盘封装

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

提高代码可维护性

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

增强代码复用性

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

提升代码安全性

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

便于团队协作

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

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

• 减少命名冲突：匿名函数无需命名，这能避免因函数命名引发的冲突问题。在一个大型项目中，代码里会存在大量的函数和变量，若为每个事件处理函数都赋予一个唯一的名称，不但耗费时间，还可能出现命名重复的状况。采用匿名关联事件，就无需操心命名的问题，降低了命名冲突的可能性。
• 代码紧凑：匿名关联事件可以直接在事件绑定的地方定义事件处理逻辑，让代码更加紧凑。以 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);"