定時器輪詢監聽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=[];
}
成都WEB前端開發