实现前端开发的几个常用技巧

返回进阶

如何知道iframe下载完成

定时器轮询监听readyState的状态，如果是 complete 或者 interactive 说明文件加载完成。

let iframe = document.createElement('iframe');
iframe.src = path;
iframe.style.display = 'none';
document.body.appendChild(iframe);
const timer = setInterval(() => {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
        document.body.removeAttribute(iframe);
        clearInterval(timer);
        resolve('success');
    }
}, 1000);

常用的全屏js居中函数

//获取元素
function getElement(ele) {
  return document.getElementById(ele);
}
//自动居中函数
function autoCenter(el) {
  var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
  var bodyY = document.documentElement.offsetHeight || document.body.offsetHeight;

  var elementX = el.offsetWidth;
  var elementY = el.offsetHeight;

  el.style.left = (bodyX - elementX) / 2 + "px";
  el.style.top = (bodyY - elementY) / 2 + "px";
}

JS实现deepCopy

function getType(obj) {
    // 为啥不用typeof? typeof无法区分数组和对象
    if(Object.prototype.toString.call(obj) == '[object Object]') {
        return 'Object';
    }

    if(Object.prototype.toString.call(obj) == '[object Array]') {
        return 'Array';
    }
    return 'nomal';
};

function deepCopy(obj) {
    if (getType(obj) == 'nomal') {
        return obj;
    } else {
        var newObj = getType(obj) == 'Object' ? {} : [];
        for(var key in obj) {
            // 为啥要用hasOwnProperty？不需要从对象的原型链上进行复制
            if(obj.hasOwnProperty(key)) {
                newObj[key] = deepCopy(obj[key]);
            }
        }
    }
    return newObj;
}

var object = [
  {
    title: 'test',
    checked: false
  }
];

deepCopy(object);

生成星级评分

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => "★★★"

JS数组扁平化之简单方法实现

toString

const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.toString().split(',');
console.log(flatten);

优点：简单，方便，对原数据没有影响 缺点：最好数组元素全是数字或字符，不会跳过空位

join

const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.join(',').split(',');
console.log(flatten);

优点和缺点同toString

flat

const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.flat(Infinity);
console.log(flatten);

优点：会跳过空位，返回新数组，不会修改原数组

扩展运算符(...)

const arr = [1, 2, 3, [4, 5]];
console.log([].concat(...arr));

优点：简单，方便 缺点：只能扁平化一层

使用 :not() 来精简css代码

// 不使用:not()
.nav li {
  border-right: 1px solid #666;
}
.nav li:last-child {
  border-right: none;
}

// 使用:not()
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

// 或者使用兄弟选择符~
.nav li:first-child ~ li {
  border-left: 1px solid #666;
}

文本溢出处理

移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略。现在都用框架开发了，这种建议需求建议形成一个基础组件，方便快捷

//单行
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}