jQuery Placeholder Plugin源码分析

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/liusaint1992/article/details/78476618

最近使用一个兼容IE的plceholder组件jQuery Placeholder Plugin。
使用过程中发现它是给元素设置假值和特殊class来实现的。本来以为用这个插件需要在所有的表单提交的时候加一层单独处理的逻辑。结果一试。 document.querySelector(‘input1’).value; //”请输入”
$(‘input1’).val(); //”。感觉挺神奇的，它怎么就改变了val()方法的返回呢。是重写了val方法吗还是其他的什么黑科技？于是就去看了下源码。
组件地址

组件基本逻辑

• 当组件激活状态(非focus，value为空），添加标识类（默认.plceholder)，设置目标元素的value为它的placeholder的值。可自已给.placeholder设置样式。
• password的特殊处理。因为给它设置值，我们看到的是*符号。处理方式是克隆了一个目标元素并设置type=text。当组件激活状态，显示的是这个生成的text元素，其他时候显示的是password元素。组件中有很多逻辑是为它存在的。
• 给元素绑定focus事件，清除相关状态。
• 给元素绑定blur事件，设置相关状态。
• 给元素设置val(),prop()的钩子。这样在我们使用$.val('abc')清空值，或$.val()获取值的时候。能拿到正确的值。比如设置为空的时候，需要设置相关状态。比如取值的时候，目标元素的value可能是被组件设置的placeholder值，那么会返回处理后的”。这样的处理后我们正常的业务逻辑就不会再单独为placeholder设置逻辑了。
• 多种应用场景的处理。
  
  • 比如表单方式提交，监听了submit事件，清除状态，这样拿到的值得才正确。以及设置延时恢复状态，因为表单的submit提交可能会被js阻止，比如表单验证不通过。那么需要恢复状态。
  • beforeunload监听。离开页面的时候。清空组件相关元素的值。可能是考虑到某些情况回退到上一页的时候表单记住了上一次的值的情况。
• jQuery.placeholder源码详细注释

其他

• debug模式。编写为低版本浏览器的组件时为了方便调试可以考虑能在高版本浏览器调试的替代方案。
• jQuery的$valHooks和$propHooks钩子。可以改变jQuery原生的
  val()方法和prop()方法的值的设置及提取操作。具体怎么实现的可以看一下jQuery源码中的val()方法，prop()方法的相关逻辑。
• jQuery事件命名空间的使用。能将事件逻辑尽可能束缚在组件中。不影响其他逻辑。

• 写组件时考虑尽可能多的应用场景，以及应对方案。

  同步发表在