在学习了 JavaScript 的面向对象的知识后，造一些简单的轮子来检验自己的学习效果。 取名叫 ZakasUI 是因为刚才想名字时发现摆在桌子上的几本 JavaScript 书的作者都是 Nicholas C.Zakas，也就是被称做 JavaScript 红宝书的《JavaScript 高级程序设计》一书的作者。在学习的过程中对我帮助很大，所以就有了这个名字 ZakasUI(
- Tab 组件
- Sticky 组件
- Dialog 组件
- Suggestion 组件
- Slides 组件
- 拖拽组件
- EventHub 组件
内部实现依赖于 jQuery 库，在使用前需安装 jQuery
- 引入
Tab.css文件 - 在页面添加如下 HTML 代码
<div class="tabs">
<ol class="tabs-bar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ol class="tab-content">
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content3</li>
</ol>
</div>- 添加 JavaScript 代码
new Tab('.tabs')- 添加 CSS 代码
.sticky {
position: fixed;
top: 0;
left: 0;
}- 添加 JavaScript 代码
new Sticky(selector,val)第一参数为需要设置为 Sticky 的元素选择器，第二个参数为距离视窗顶部的高度值
- HTML
<div class="slides">
<ol>
<li><img src="https://picsum.photos/500/400/?image=008" alt=""></li>
<li><img src="https://picsum.photos/500/400/?image=020" alt=""></li>
<li><img src="https://picsum.photos/500/400/?image=010" alt=""></li>
</ol>
</div>- 引入 CSS 文件
slides.css - JavaScript 代码
var slides = new Slides({
element: '.slides',
autoPlay: true
})- 导入 JavaScript 文件
<script src='https://raw.githubusercontent.com/code661/ZakasUI/master/Drag.js'></script>- 使用示例 给构造函数传入字符传
var drag = new Drag('.drag-element')或者传入 DOM 对象
var elem = document.querySelector('.drag-element')
var drag = new Drag(elem)学习和理解 Redux 的过程中，先理解事件中心的方案实现组件通讯。 代码照抄了 mqyqingfeng/EventEmitter: 一个简单的 EventEmitter，可在浏览器中使用，帮助你实现事件的订阅和发布。
var emitter = new EventEmitter();添加一个事件监听器，支持链式调用
emitter.on(eventName, listener)- eventName 事件名称
- listener 监听器函数
删除一个事件监听器，支持链式调用
emitter.off(eventName, listener)- eventName 事件名称
- listener 监听器函数
添加一个只能触发一次的事件监听器，支持链式调用
emitter.once(eventName, listener)- eventName 事件名称
- listener 监听器函数
触发事件，支持链式调用
emitter.emit(eventName, args)- eventName 事件名称
- arg 数组形式，传入事件监听器的参数