實現前端開發幾個經常使用技巧

如何知道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; //指定行數
}

Git Flow工做流程

master主分支

伴隨整個項目週期的分支

功能分支（feature branch）

從master切，顧名思義，開發每個功能的分支，開發完的功能合併到release分支。

補丁分支（hotfix branch）

從master切，修復BUG分支，測試完直接合併到master。

預發分支（release branch）

從master切，須要測試的功能都合併到該分支上進行測試。

一旦開發完成，就會把release分支合併到master分支，並刪除原分支。

JS實現列表操做

常用列表，好比待辦事項列表、購物車等，若是數據不太多的話，列表就顯得尤其有用

function list() {
    this.dataStore = []; //初始化數組
    this.clear = clear; //清除列表
    this.remove = remove; //移除列表中的元素
    this.find = find; //尋找列表中的元素
    this.length = length; //返回列表的長度
}

function find(element) {
    for (var i = 0, len = this.dataStore.length; i < len; i++) {
        if (this.dataStore[i] === element) {
            return i;
        }
    }
    return -1;
}

function remove(element) {
    for (var i = 0, len = this.dataStore.length; i < len; i++) {
        if (this.dataStore[i] === element) {
            this.dataStore.splice(i, 1);
        }
    }
    return this.dataStore;
}

function length() {
    return this.dataStore.length;
}

function clear() {
    this.dataStore = [];
}