[广州|内门弟子]JS-谢俊凯|2020年07月03日的日报-技能树.IT修真院

发表于： 2020-07-03 23:35:17

1 2308

今天：

计划写一些项目实现的demo：

尝试video能否根据url获取视频时长和视频封面。

然后是视频小窗口展示，且可放大，然后可下拉阅读的同时视频小窗口会一直存在于顶部。

对象数组的排序，是否能够使用sort（）进行排序一个对象数组的时间（从小到大）。

关联到公众号的时候，手机端的API下拉刷新获取更多列表详情的具体功能实现方法。

写对象数组排序的方法尝试出来了，这个sort（）参数可以放入一个函数，函数设置好进行属性对比就可以了：

写了个demo，对象数组内部的value为乱序数字排列

var array = [{ value: 5 }, { value: 2 }, { value: 3 }, { value: 1 }];

然后使用sort方法：

console.log(array.sort(compare("value")));

  // 下为排序方法，写入sort（里面）
      function compare(property) {
        return function (obj1, obj2) {
          var value1 = obj1[property];
          var value2 = obj2[property];
          return value1 - value2; // 升序
        };
      }

尝试打印出来在日志：

排序如我所期望的从小到大排序。

尝试了使用箭头函数简写：

array.sort((a,b)=>{return a.value-b.value}

也一样产生效果。尝试把简写value改变：然后添加更多的对象属性：

(array.sort((a,b)=>{return a.a-b.a}）

 var array = [
        { ss: "as", value: 5, a: "as" },
        { ss: "as", value: 2, a: "as" },
        { ss: "as", value: 3, a: "as" },
        { ss: "as", value: 1, a: "as" },
      ];

两个方法进行输出的排序还是一样：

研究了下关于字数超出限制则显示...的方法，首先实现的方式是之前使用的以div宽度进行限制，因为每一个字体大小是限制的，所以使用一个定宽进行限制，但是这个仅适合单行，若是多行字的话，需要另一个方法进行实现：

判断内容超过字数的话就截取。
比如15个字数的限制：
var text=document.getElementById("test").innerHTML;
if(text.length>15)
{ document.getElementById("test").innerHTML=text.substring(0,15)+"..."; }

写了个demo，是可行的，但是有个需要注意的点，虽然一般情况下可能不会触发这个问题：

当格式化代码，处于被分割状态下，前面的空格也是字符的占位，也许页面没有显示多个空格，但是每个空格依然会占用一个字符长度。

重新搜索一下关于懒加载图片的应用，以及为了避免懒加载监听滚动高频触发滚动事件，需要一个节流函数，定义多少秒触发一次：

 // 简单的节流函数,因为滚动监听事件是一个高频触发事件，为了节省浏览器性能，使用节流。
      //fun 要执行的函数//delay 延迟//time  在time时间内必须执行一次
      function throttle(fun, delay, time) {
        var timeout,
          startTime = new Date(); // 创建的新的时间date实例
        return function () {
          var context = this, // 指代当前事件
            args = arguments, // 类数组对象
            curTime = new Date(); // 事件格式
          clearTimeout(timeout);
          // 如果达到了规定的触发时间间隔，触发 handler
          if (curTime - startTime >= time) { // 若是当前时间对比开始时间大于等于设定的间隔时间，
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔，重新设定定时器
          } else {
            timeout = setTimeout(fun, delay); 
          }
        };
      }
      window.addEventListener("scroll", throttle(lazyload, 500, 1000));