项目实际开发中知识点整理

一、css篇

1. 对于text-overflow:ellpisis；在flex布局下不生效；

2. @import  '../out.less' 这样引入的样式会作用于全局，尽管是写在当前文件的scoped下的

解决办法：在less文件中的最外面套一层自己自定义的唯一的样式，这样里面重名的样式就不会应用到其他页面组件了

3.pointer-events 属性为none,点击事件不生效

二、js篇

1. for in 循环用来遍历对象，可以遍历数组，但最好不要，因为遍历数组时会遍历数组原型链的属性；

ForEach中if里面的return 只能跳出循环，但是不能跳出函数

2. ParseInt(str) 字符串转数字

3.实现一个虚拟列表

原理：(1)取到当前页面展示的10个元素，并且把这个10个元素渲染到页面上;

           (2)监听滚动事件，滚动的时候同步获取当前滚动去的高度，重新translate3D去展示数据

   $scope.renderList = $scope.serviceLogDatas.slice(0, 11);
       $scope.serviceLogDatas.forEach(function(item){
         //替换traceId为跳转样式
         var myPattern = /\[\{traceid=([^\,]+)/i;
         var traceId = myPattern.exec(item.content) && myPattern.exec(item.content)[1];
         var result = item.content.split(traceId);
         item.content0= result[0];
         item.content1= traceId
         item.content2= result[1];
        })
           
        let _scroll = document.getElementById('outer');
         _scroll.addEventListener('scroll', (lab) => {
              let scrollTop = document.getElementById('outer').scrollTop;
               if (scrollTop >= ($scope.scrollHeight - 500)) {
                   return
               }
               let start = Math.floor(scrollTop / 50);
               let end = Math.floor(scrollTop / 50 + 11 + 1)
               $scope.renderList = [];
               $scope.serviceLogDatas.map((item, index) => {
                   if (index >= start && index <= end) {
                       let showOffset = scrollTop + scrollTop % 50;
                       item.translateAttr = 'translate3d(0px,' + showOffset + 'px,0px)';
                       $scope.renderList.push(item);
                      $scope.$apply();
                  }
              })
         })

4.实现复制当前行数据，深拷贝

 //复制当前行数据
            $scope.copyMapping = function(index){
                var copyItem = JSON.parse(JSON.stringify($scope.activeService.ipList[index]));
                $scope.activeService.ipList.push(copyItem)
            }