Bootstarp - 源码分析 - alert.js v3.x 和 v4.x 的对比

# 预备知识 ## 1. 什么是使用 data-api 调用 就是给所有带有`data-dismiss="alert"`的元素绑定点击事件 ```js // v3.x: $(document).on("click.bs.alert.data-api", dismiss, Alert.prototype.close); // v4.x: $(document).on( Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()) ); ``` ## 2. 去冲突 调用`$.fn.alert.noConflict()`函数,将`$.fn.alert`还原为 “旧”`$.fn.alert`,并返回 “新”`$.fn.alert`(类似:[\\$.noConflict()](https://www.jquery123.com/jQuery.noConflict/)) ## 3. function 模拟类 [JS-prototype](https://www.cnblogs.com/jffun-blog/p/9110269.html) ## 4. jQuery 事件命名空间 > > > 事件名称可以添加指定的 event namespaces(命名空间) 来简化删除或触发事件。例如,"click.myPlugin.simple" 为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理,可以用. off("click.myPlugin") 或 .off("click.simple") 删除绑定到相应元素的 Click 事件处理程序,而不会干扰其他绑定在该元素上的 “click(点击)” 事件。命名空间类似 CSS 类,因为它们是不分层次的; 只需要有一个名字相匹配即可。以下划线开头的名字空间是供 jQuery 使用的。 # 对比 | 比较项 | v3.x | v4.x | | -------- | ------------ | ---------- | | 总体结构 | 闭包 | ES6 Module | | Alert“类” | function 模拟类 | ES6 Class |
posted @ 2020-03-22 15:54  zjffun  阅读(76)  评论(0编辑  收藏  举报