平板收银系统、国产系统，鸿蒙系统，小键盘的封装与应用—仙盟创梦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 仙盟样式 =``;

								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);"