数字小键盘封装
数组小键盘封装是指将与数组小键盘相关的功能、操作、数据等进行整合，形成一个独立的、可复用的模块。封装数组小键盘具有以下几方面重要意义：
提高代码可维护性
- 降低复杂度：数组小键盘在实际应用中，可能涉及到按键事件处理、按键状态管理、输入数据验证等一系列操作。若不进行封装，这些代码会分散在整个项目中，导致代码结构混乱，难以理解和维护。而封装后，这些代码被集中在一个模块里，代码结构变得清晰，维护起来更加容易。
- 便于修改：当小键盘的功能需要调整时，比如修改按键布局、添加新的按键功能，只需在封装模块内部进行修改，不会对项目的其他部分产生影响。例如，原本小键盘只能输入数字，现在要添加小数点输入功能，在封装模块里添加相应的按键处理逻辑即可。
增强代码复用性
- 跨项目使用：封装好的数组小键盘模块可以在多个项目中重复使用。比如，在开发多个需要数字输入的移动应用时，只需将封装好的小键盘模块引入到不同项目中，就可以快速实现小键盘功能，避免了重复编写相同代码的工作，提高了开发效率。
- 项目内复用：在同一个项目中，不同的界面可能都需要用到数组小键盘，如登录界面输入验证码、设置界面输入密码等。通过封装，只需在需要的地方调用这个模块，就可以轻松实现小键盘功能，减少了代码冗余。
提升代码安全性
- 隐藏内部实现细节：封装可以将小键盘的内部实现细节隐藏起来，只对外提供必要的接口。外部代码只能通过这些接口与小键盘模块进行交互，这样可以防止外部代码对小键盘内部数据和逻辑的非法访问和修改，提高了代码的安全性。
- 数据验证和过滤：在封装模块内部可以对用户输入的数据进行验证和过滤，防止非法数据进入系统。例如，在小键盘输入密码时，可以在模块内部验证密码长度、字符类型等，确保输入的密码符合安全要求。
便于团队协作
- 分工明确：封装后的数组小键盘模块可以由专门的开发人员负责开发和维护，其他开发人员只需按照接口文档使用该模块即可。这样可以实现开发任务的分工，提高团队开发效率。
- 减少冲突：不同开发人员在开发项目时，可能会对同一部分代码进行修改，从而产生冲突。封装后的模块可以减少这种冲突的发生，因为其他开发人员不需要了解模块内部的具体实现，只需要关注接口的使用。
数字小键盘匿名关联事件优点
- 减少命名冲突：匿名函数无需命名，这能避免因函数命名引发的冲突问题。在一个大型项目中，代码里会存在大量的函数和变量，若为每个事件处理函数都赋予一个唯一的名称，不但耗费时间，还可能出现命名重复的状况。采用匿名关联事件，就无需操心命名的问题，降低了命名冲突的可能性。
- 代码紧凑：匿名关联事件可以直接在事件绑定的地方定义事件处理逻辑，让代码更加紧凑。以 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);"
扫一扫
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
