前端如何行內更改狀態_前端開發的基本方法

1. 怎麼用前端css實現這種樣式切換

實現兩種css樣式，默認，選中
通過js監聽點擊事件切換標簽的css樣式

2. web前端，輸入選擇框選中狀態下的css樣式如何改

CSS可以完成這個效果，但需要高版本的瀏覽器支持，兼容性不是特別好。
使用的代碼就是 input:hover 或者 input:focus 這兩個語法就可以。

3. 前端監聽服務端狀態並返回狀態怎麼實現

需要涉及一種方式能夠持續跟蹤任務的進行情況。每個監聽任務會被分配一個任務ID，在任務監聽結束後被釋放。
全局監聽器的實現
基於單例模式設置一個HashMap能被系統全局訪問用於存放任意任務的監聽數據。同時Value部分使用特殊特殊結構。

4. 如何進行前端優化

1.減少 HTTP 請求....

2.使用 HTTP2

3.使用服務端渲染

4.靜態資源使用 CDN

5.將 CSS 放在文件頭部，JavaScript 文件放 ...

6.使用字體圖標 iconfont 代替圖片圖標

7.善用緩存，不重復載入相同的資源

8.壓縮文件

9.圖片優化

(1).圖片延遲載入

(2). 響應式圖片

(3). 調整圖片大小

(4). 降低圖片質量

(5). 盡可能利用 CSS3 效果代替圖片

(6). 使用 webp 格式的圖片

10. 通過 webpack 按需載入代碼，提取第三庫代碼，減少 ES6 轉為 ES5 的冗餘代碼

11. 減少重繪重排

12. 使用事件委託

13. 注意程序的局部性

14. if-else 對比 switch

15. 查找表

16. 避免頁面卡頓

17. 使用 requestAnimationFrame 來實現視覺變化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆蓋原生方法

21. 降低 CSS 選擇器的復雜性

(1). 瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。

(2). CSS 選擇器優先順序

22. 使用 flexbox 而不是較早的布局模型

23. 使用 transform 和 opacity 屬性更改來實現動畫

24. 合理使用規則，避免過度優化

性能優化主要分為兩類：

載入時優化
運行時優化

5. 前端開發的基本方法

CSS部分

盒子邊傾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止點擊事件/滑鼠事件「穿透」

div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }

用來控制元素在移動設備上使用滾動回彈效果

.main{
-webkit-overflow-scrolling: touch;
}

可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況

文字漸變效果

.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

}

實現圓弧

clip-path: ellipse(80%60% at50%40%);

JS部分

JavaScript中檢測數組的方法

(1)、typeof操作符

這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符

這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true

(5)、Array.isArray()

常用的字元串操作

字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格

其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()，參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重

const str = '11122223333'const uniqueStr = [...new Set(str)].join('')

常用的數組操作

1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：

arr.rece(callback,[initialValue])

跳過第一個索引。如果提供initialValue，從索引0開始。

callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，

數組去重：

const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]

常用對象方法

1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型，應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性

var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})

5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf

function a(){}

var b = new a();console.log(a.prototype.isPrototypeOf(b));//true

安卓監聽可視區域變化，讓輸入框移動至可視區域

if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();

}, 0);

}

});

};

vue中平滑滾動到某個位置

this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加參數

* 向URL追加參數

* @function stringifyUrlArgs

* @param {string} url - URL路徑

* @param {object} params - 參數對象

* @return {string}

const stringifyUrlArgs = (url, params) => {

url += (/?/).test(url) ? '&' : '?'

url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url

}

解析URL參數

* 解析URL參數

* @function parseUrlArgs

* @param {string} url - 字元串

* @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {

a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a

}, {}) return args

}

好用的JavaSrcipt庫與模塊（包）

日期時間處理庫

1、monent.js
2、day.js
day相對於monent要輕量許多

高精度數學運算

number-precision

NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio

實用工具庫

Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、數字、對象、字元串等

6. 怎樣把這一行變正常有關web前端的。

外層的div加上padding-top，這樣才可以把它撐下來。
原則：父子之間的元素用padding撐開，兄弟之間用margin撐開。

7. js如何實現點擊編輯按鈕，前端table表格行內指定td可修改。（table是動態生成的）

functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX非同步載入重復生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服務名稱varalias=result[i].alias;//服務別名vartype=result[i].type;//服務類型varyear=result[i].year;//年份varurl=result[i].url;//服務地址varvisible=result[i].visible;//是否可見varid=result[i].id;//idserviceIdArray[i]=id;//此處將id塞給serviceIdArray，用於判斷是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="編輯"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}

2）

//修改table行內元素(td)functioneditTd(id){//選中編輯按鈕的時候,把這行指定的幾個td變成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟節點if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//將編輯改成保存和取消兩個按鈕b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在網上找的參考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**綁定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己寫innerText和textContent的兼容，這里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默認為單機事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//調用可編輯this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//游標聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//這里可以寫ajax內容，用於保存編輯後的內容//data:返回的數據//isSucess:方法，用於保存數據成功後，將可編輯狀態變為不可編輯狀態varflag=true;//ajax請求成功（保存數據成功），才回調isSuccess函數（修改保存狀態為編輯狀態）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失敗");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失敗");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("刪除成功");}else{alert("刪除失敗");}}});*//*//dom創建文本框varinput=document.createElement("input");input.type="text";//得到當前的單元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根據Dimmacro的建議修定下面的bug非常感謝if(currentCell.tagName=="TD"){//用單元格的值來填充文本框的值input.value=currentCell.innerHTML;//當文本框丟失焦點時調用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到當前單元格上.currentCell.appendChild(input);//根據liu_binq63的建議修定下面的bug非常感謝input.focus();}}functionlast(){//充文本框的值給當前單元格currentCell.innerHTML=input.value;}//最後為表格綁定處理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="編輯"?"確定":"編輯";$(this).val(ttr);//按鈕被點擊後，在「編輯」和「確定」之間切換$(this).parent().siblings("td").each(function(){//獲取當前行的其他單元格varobj_text=$(this).find("input:text");//判斷單元格下是否有文本框if(!obj_text.length)//如果沒有文本框，則添加文本框使之可以編輯$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已經存在文本框，則將其顯示為文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}

3）

//取消editTd編輯functionresertEditTd(){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}

//保存editTd編輯functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟節點vartd_name=a[1].children[0].value;//服務名稱vartd_alias=a[2].children[0].value;//服務別名vartd_type=a[3].children[0].value;//服務類型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己寫的，局部刷新頁面，重新載入數據
}
});
}

前端如何行內更改狀態

與前端如何行內更改狀態相關的內容