添加一些注释

demos/tabs.html

@@ -45,7 +45,7 @@
       </ol>
     </div>
   </div>
-
+  <!-- 这是dom库 -->
   <script src="../lib/dom/index.js"></script>
   <script src="view-source.js"></script>
   <script src="../lib/tabs/index.js"></script>

lib/dom/index.js

@@ -2,13 +2,18 @@ let dom = {
   on: function(element, eventType, selector, fn) {
     element.addEventListener(eventType, e => {
       let el = e.target
+      //判断用户所点击的元素是不是和允许切换的元素一样
       while (!el.matches(selector)) {
+        //如果不一样,就检查点击的元素是不是element元素
         if (element === el) {
+          //是的话,就将el设置为null,因为在这个里面并没有能允许切换的元素
           el = null
           break
         }
+        //如果不是就一直向上查找,因为要保证我只要点击的地方是这个元素的子元素就可以切换
         el = el.parentNode
       }
+      //el有值的话,执行传入的回调函数
       el && fn.call(el, e, el)
     })
     return element
@@ -44,36 +49,47 @@ let dom = {
       y0 = undefined
     })
   },
-
+  //获取元素在兄弟元素中的序号
   index: function(element) {
+    //先获取传入元素的父元素,然后在调用children得到元素类数组
     let siblings = element.parentNode.children
+    //循环比对
     for (let index = 0; index < siblings.length; index++) {
+      //兄弟元素和传入元素相等
       if (siblings[index] === element) {
+        //返回对应的下标
         return index
       }
     }
     return -1
   },
-
+  //切换class方法
   uniqueClass: function(element, className) {
+    //将每一个选项内容元素class清除
     dom.every(element.parentNode.children, el => {
       el.classList.remove(className)
     })
+    //对所点击的选项添加class 
     element.classList.add(className)
     return element
   },
-
+  //给每一个元素执行一些动作
   every: function(nodeList, fn) {
     for (var i = 0; i < nodeList.length; i++) {
+      //执行回调函数
       fn.call(null, nodeList[i], i)
     }
     return nodeList
   },
 
   // http://stackoverflow.com/a/35385518/1262580
+  //创建元素
   create: function(html, children) {
+    //创建一个dom模板片段
     var template = document.createElement('template')
+    //将传入的元素字符串去除两端空白字符后赋值
     template.innerHTML = html.trim()
+    //获取模板的内容(content)下的第一个元素(firstChild)
     let node = template.content.firstChild
     if (children) {
       dom.append(node, children)

lib/pager/index.js

@@ -1,11 +1,17 @@
 class Pager {
   constructor(options) {
     let defaultOptions = {
+      //容器元素
       element: null,
+      //可显示的分页数量
       buttonCount: 10,
+      //当前页数
       currentPage: 1,
+      //总页数
       totalPage: 1,
+      //分页url
       pageQuery: '', // 'page'
+      //动态生成的按钮元素
       templates: {
         number: '<span>%page%</span>',
         prev: '<button class=prev>上一页</button>',
@@ -14,21 +20,27 @@ class Pager {
         last: '<button class=last>末页</button>',
       },
     }
+    //合并传入的配置和默认配置
     this.options = Object.assign({}, defaultOptions, options)
+    //用来放新的分页列表
     this.domRefs = {}
+    //当前页数
     this.currentPage = parseInt(this.options.currentPage, 10) || 1
     this.checkOptions().initHtml().bindEvents()
   }
+  //检查有没有传入元素
   checkOptions() {
     if (!this.options.element) {
       throw new Error('element is required')
     }
     return this
   }
   bindEvents() {
+    //绑定事件 --> dom库
     dom.on(this.options.element, 'click', 'ol[data-role="pageNumbers"]>li', (e, el) => {
       this.goToPage(parseInt(el.dataset.page, 10))
     })
+    //各种绑定
     this.domRefs.first.addEventListener('click', () => {
       this.goToPage(1)
     })
@@ -42,40 +54,56 @@ class Pager {
       this.goToPage(this.currentPage + 1)
     })
   }
+  //分页控制
   goToPage(page) {
+    //如果点击的元素和当前页数一样的话就什么都不做 ps:这里注意看下运算符优先级
     if (!page || page > this.options.totalPage || page === this.currentPage) {
       return
     }
+    //如需要控制url才执行
     if (this.options.pageQuery) {
       bom.queryString.set(this.options.pageQuery, page)
     }
     this.currentPage = page
+    //这是自定义事件,用来控制台显示页数的,也可以去掉
     this.options.element.dispatchEvent(new CustomEvent('pageChange', { detail: { page } }))
+    //重绘分页列表
     this.rerender()
   }
+  //重绘分页列表
   rerender() {
     this._checkButtons()
+    //先获取一波新的分页列表
     let newNumbers = this._createNumbers()
+    //拿到旧的分页列表
     let oldNumbers = this.domRefs.numbers
+    //获取旧的分页列表的父元素然后替换一下
     oldNumbers.parentNode.replaceChild(newNumbers, oldNumbers)
+    //将新的分页列表赋值
     this.domRefs.numbers = newNumbers
   }
+  //初始化分页需要的HTML元素
   initHtml() {
+    //创建分页组件的nav元素
     let pager = (this.domRefs.pager = document.createElement('nav'))
     this.domRefs.first = dom.create(this.options.templates.first)
     this.domRefs.prev = dom.create(this.options.templates.prev)
     this.domRefs.next = dom.create(this.options.templates.next)
     this.domRefs.last = dom.create(this.options.templates.last)
+    //检查按钮是否符合条件可以按下
     this._checkButtons()
+    //创建分页列表 --> this._createNumbers()
     this.domRefs.numbers = this._createNumbers()
     pager.appendChild(this.domRefs.first)
     pager.appendChild(this.domRefs.prev)
     pager.appendChild(this.domRefs.numbers)
     pager.appendChild(this.domRefs.next)
     pager.appendChild(this.domRefs.last)
+    //添加到页面上
     this.options.element.appendChild(pager)
     return this
   }
+  //检查按钮是否符合条件可以按下
   _checkButtons() {
     if (this.currentPage === 1) {
       this.domRefs.first.setAttribute('disabled', '')
@@ -92,20 +120,27 @@ class Pager {
       this.domRefs.last.removeAttribute('disabled')
     }
   }
+  //创建新分页列表的方法
   _createNumbers() {
+    //获取当前的页数
     let currentPage = this.currentPage
+    //获取可显示的页数和总页数
     let { buttonCount, totalPage } = this.options
+     //用来计算当前页数有没有超过分页器显示数目的一半
+     //和防止到最后几页页数列表减少
     let start1 = Math.max(currentPage - Math.round(buttonCount / 2), 1)
     let end1 = Math.min(start1 + buttonCount - 1, totalPage)
     let end2 = Math.min(currentPage + Math.round(buttonCount / 2) - 1, totalPage)
     let start2 = Math.max(end2 - buttonCount + 1, 1)
     let start = Math.min(start1, start2)
     let end = Math.max(end1, end2)
-
+    //创建一个ol元素 --> dom库
     let ol = dom.create('<ol data-role="pageNumbers"></ol>')
     let numbers = []
+    //循环创建页数li
     for (var i = start; i <= end; i++) {
       let li = dom.create(`<li data-page="${i}">${this.options.templates.number.replace('%page%', i)}</li>`)
+      //如果是当前的页面就添加class
       if (i === currentPage) {
         li.classList.add('current')
       }

lib/tabs/index.js

@@ -1,29 +1,43 @@
 class Tabs {
   constructor(options) {
+    //这是默认的配置
     let defaultOptions = {
+      //容器元素
       element: '',
+      //选项卡元素
       navSelector: '[data-role="tabs-nav"]',
+      //选项卡内容元素
       panesSelector: '[data-role="tabs-panes"]',
+      //选中状态
       activeClassName: 'active',
     }
+    //先将传入的配置和默认配置合并 (Object.assign)
     this.options = Object.assign({}, defaultOptions, options)
     this.checkOptions().bindEvents().setDefaultTab()
   }
+  //检查是否传入元素
   checkOptions() {
     if (!this.options.element) {
       throw new Error('element is required')
     }
+    //返回自身方便链式调用
     return this
   }
+  //绑定事件
   bindEvents() {
+    //接下来就到dom库那里了
     dom.on(this.options.element, 'click', `${this.options.navSelector}>li`, (e, el) => {
+      //回来这里,拿到元素在兄弟元素中的下标
       let index = dom.index(el)
+      //获取容器元素下的要切换内容的列表
       let children = this.options.element.querySelector(this.options.panesSelector).children
+      //切换class
       dom.uniqueClass(el, this.options.activeClassName)
       dom.uniqueClass(children[index], this.options.activeClassName)
     })
     return this
   }
+  //打开页面时初始化一个选项卡被点击
   setDefaultTab() {
     this.options.element.querySelector(`${this.options.navSelector}>li:first-child`).click()
     return this