定時器輪詢監聽readyState的狀態,若是是 complete 或者 interactive 說明文件加載完成。css
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);
複製代碼
//獲取元素
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";
}
複製代碼
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 => "★★★"
複製代碼
const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.toString().split(',');
console.log(flatten);
複製代碼
優勢:簡單,方便,對原數據沒有影響 缺點:最好數組元素全是數字或字符,不會跳過空位web
const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.join(',').split(',');
console.log(flatten);
複製代碼
優勢和缺點同toString數組
const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.flat(Infinity);
console.log(flatten);
複製代碼
優勢:會跳過空位,返回新數組,不會修改原數組markdown
const arr = [1, 2, 3, [4, 5]];
console.log([].concat(...arr));
複製代碼
優勢:簡單,方便 缺點:只能扁平化一層app
// 不使用: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; //指定行數
}
複製代碼
伴隨整個項目週期的分支函數
從master切,顧名思義,開發每個功能的分支,開發完的功能合併到release分支。測試
從master切,修復BUG分支,測試完直接合併到master。ui
從master切,須要測試的功能都合併到該分支上進行測試。this
一旦開發完成,就會把release分支合併到master分支,並刪除原分支。
常用列表,好比待辦事項列表、購物車等,若是數據不太多的話,列表就顯得尤其有用
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 = [];
}
複製代碼