小程序markdown文件解析和代码高亮（四）———优化篇

优化

目录 动画

• 为了美观一点，目录显示一闪一现有点突兀，考虑人的感官的舒适度，我觉得给目录加一个左移动的动画即可。
• 因为这个目录是用组件写的，小程序最近发展的比较快，18年的时候还不太支持组件开发，现在就已经有支持了，并且用过之后感觉还不错。
• 这里就不太赘叙组件的写法了，主要是如何给组件写动画的效果。
  组件的wxml

<view class="marsk" bindtap='backtoContent' animation="{{ani2}}" hidden="{{show}}"></view>
<view class='bg' style="left:-500rpx;" animation="{{ani1}}">
  <view class='top'>
    <view class='iconfont icon-back iconposition' bindtap='backtoContent'></view>
    <view class='mulu'>目录</view>
  </view>
  <scroll-view scroll-y class='directory-list'>
    <view style='width:100%;height:auto;'>
      <view wx:for="{{contentList}}" wx:key="{{item.title}}" wx:for-item='item' wx:for-index='index' data-index='{{index}}' class='directory-item {{readnow==index? "reading":""}}' bindtap="onclickList">{{index+1}}.{{item.title}}</view>
    </view>
  </scroll-view>
</view>

<view class="marsk" bindtap='backtoContent' animation="{{ani2}}" hidden="{{show}}"></view>
这个是处于背后的蒙版，为了防止目录显示的时候用户点击触发页面的其他按钮。这里也添加了一个点击蒙版就会收起目录的事件。我们就介绍下蒙版的动画效果，通明度从0到1。

      var animation2 = wx.createAnimation({
         duration: 5000,
        timingFunction: 'ease'
       });       
                       // 目录蒙板动画
       animation2.opacity(0.5).step()
               
       this.setData({ 
              // 目录蒙板动画
         ani2: animation2.export()
       });

同理我们绑定目录左移动的动画效果

        var animation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease'
      });
       let xChange = 500 / 750 * wx.getSystemInfoSync().windowWidth
       // 因为目录元素是left:-500rpx的，但是animation的值是px所以需要转换 公式为 设备宽度/750 * 500 等于每一个设备的500rpx的px的值
	    if (this.data.show) { // 需要判断状态,收起和打开是相反的方向移动
 			animation.translate(xChange, 0).step()
  		} else {          
  			animation.translate(-xChange, 0).step()
     	}

请求优化

由于每个markdown文件都是比较大的,如果文章一下子加载可能会出现卡顿,或者是闪退,所以为了防止这些情况发生,我们将每一个章节进行分页.

分析分页规则

我们通过输出通过请求的markdown文件中的res.data,就会发现其实就是markdown文章的语法.。

而每一个markdown语法中就有章节分号了,我们就选区##这个语法进行分页。
由于markdown文件中出了##之外还有#、###等，所以通过简单的string.split("##")是不行的。
这里就需要使用到正则运算，split()也支持正则，所以就可以快速得到每一章的分页内容。

     var pattern = /\s##\s/ // 只匹配以非字符结尾开头##非字符结尾这2个字符，这样就可以避免了其他#的情况
     for (var _index in allArticle) {
          if (_index === 0 || _index === '0') { // 开头不需要处理
      	} else {
          allArticle[_index] = `## ${allArticle[_index]}` // 由于split()会讲原本的##的去掉，所以需要补回
      	}
      }
  	var data = app.towxml.toJson(allArticle[0], 'markdown'); // 这样就可以通过分页加载每一章了

我们只需要添加2个ui按钮，就可以进行切换页面。

    data:{
    	allArticle:[], // 每一章的全部页面内容
        allArticleLength:0,// 每一章的页数
        characterIndex:0// 当前页数
    },
    onclickIcon: function (e){  
      debounce.debounce(()=>{
        let dir = e.target.dataset.dir
        let index = this.data.characterIndex, length = this.data.allArticleLength
        if (dir === 'right') {
          if ((index + 1) < length) {
            index = 1 + index
          } else {
            index = length - 1
          }
        } else if (dir === 'left') {
          if ((index - 1) < 0) {
            index = 0
          } else {
            index -= 1
          }
        }
        // 更新文章内容
        this.updateArticle(index)
        this.setData({
          characterIndex: index,
        })    
      },1000)  
    },
    updateArticle(index){
      let data = this.data.allArticle[index]
      data = app.towxml.toJson(data, 'markdown');
      this.setData({
        article: data,

      })
    },

防抖

由于服务器比较菜，所以为了避免因为点击多次造成的多次请求，所以需要对请求进行防抖

	onclickList(e){
      debounce.debounce(()=>{
        let index = e.detail.index
        wx.showLoading({
          title: '加载中……',
        })
        this.requireData(this.data.directoryList[index].markdownUrl, index)
      }, 1000)
    },
    function debounce(fn, gapTime) {
	  let timeout = new Date().getTime()
	  if (timeout - this.lastTIme > gapTime || !this.lastTIme) {
	    fn()
	    this.lastTIme = timeout
	  } else {
	    return
	  }
	}