js下 Day14、面向对象案例

一．软键盘拖拽

效果图:


功能思路分析:

1. 面向对象框架

\1. 构造函数中: 获取案例上需要用到的元素及数据相关信息

\2. 原型对象中：写好结婚证，初始化方法，事件监听方法

3. 实例对象中: 以对象的形式传参，如数据，选择器名等

2. 键盘显示隐藏

\1. 给两个文本框绑定点击事件，点击文本框显示键盘

\2. 给页面document绑定点击事件，点击页面空白区域隐藏键盘

\3. 给文本框的点击事件阻止冒泡(e.stopPropagation())，以免点击文本框触发document的点击事件

3. 键盘拖拽

\1. 鼠标按下: 为了避免跟键盘按下时的冲突，只给键盘上方空白区域做拖拽，获取鼠标到元素的位置，开启开关

\2. 鼠标移动: 判断开关是否为真， 键盘位置 = 鼠标到页面距离 - 鼠标到键盘距离

\3. 鼠标抬起: 关闭开关

4. 输入内容

\1. 给键盘绑定点击事件

\2. 阻止冒泡(e.stopPropagation())，避免与document的点击事件冲突

\3. 利用事件委托判断每一个按键,将按钮的内容innerHTML，拼接给文本框的value

\4. 特殊功能按键，额外判断： 拼接空格 += ‘ ’ > 清空value > 大小写转换( toUpperCase() toLowerCase() )

#二．今日小结

1. 面向对象三部曲: 构造函数 原型对象 实例化

prototype => 构造 找 原型

constructor => 原型 找 构造

proto => 实例找原型

\2. 隔了函数this指向会发生改变，需要在函数外保留this指向

\3. 实例化时以对象的形式传参

#三．作业 -- 数据筛选

效果图:

功能思路分析:

1. 默认渲染所有数据

封装一个渲染方法，根据传递过来的参数进行渲染，默认渲染所有的数据

2. 选中下拉列表筛选数据

给下拉列表绑定change事件，拿到下拉列表的value值，根据value值筛选不同的数据，使用数组的filter()方法筛选。

3. 文本框搜索数据

根据文本框输入的内容筛选数据，使用indexOf（）做筛选条件