Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

以原生控件的接口形式封装组件

  原生控件的接口形式最典型的就是读或写控件上的 value 属性。这样简单的接口设计我是点赞的,然而却是有 input[type=radio]、SELECT 之类的控件其接口形式奇奇怪怪的。比如一个 SELECT 控件,由于状态由 OPTION 管理,要把一个现有的值设置到它上面就非常麻烦。
  我觉得,如果这些控件的接口形式全都统一为 value 属性的读写那就简单多了,所以在自己封装的控件中我也会倾向于使用 value 作为统一接口。比如下面这坨代码就是随手写的一个以 value 为接口的控件 demo,这里偷个懒,用了 ES6。
<style> [type=select] { background: #fff; color: #000; border: 1px solid #000; width: 100px; } [type=select] div { padding: 6px; border-top: 1px solid #000; cursor: pointer; } [type=select] div:first-child { border-top: 0px; } [type=select] .active { background: #000; color: #fff; } </style> <div type="select" name="hehe"> <div value="aa" class="active">aa</div> <div value="bb">bb</div> <div value="cc">cc</div> </div> <script> // 实现 [].forEach.call( document.querySelectorAll('[type=select]'), element => { Object.defineProperty(element, 'value', { get() { let active = element.querySelector('.active'); return active ? active.getAttribute('value') : null; }, set(value) { for (let i = element.firstElementChild; i; i = i.nextElementSibling) { if (i.getAttribute('value') === value) { i.classList.add('active'); let event = document.createEvent('Events'); event.initEvent('change', true, true); element.dispatchEvent(event); } else { i.classList.remove('active'); } } } }); element.addEventListener('click', ({ target }) => { if (target.hasAttribute('value')) { element.value = target.getAttribute('value'); } }); } ); </script> <script> // 使用 var select = document.querySelector('[type=select]'); select.addEventListener('change', () => { console.log(select.value); }); </script>   上面这坨代码其实并不好,比如扫描 DOM 替换控件简直弱爆。这里只是提供一个思想,可以把这个思想用于其他框架中封装起来,以后封装控件就不会再写得奇奇怪怪的了。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^