當前位置:首頁 » 網頁前端 » 前端控制按鈕顯示的條件特別多
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端控制按鈕顯示的條件特別多

發布時間: 2023-07-23 14:50:21

❶ 為什麼有些前端一直用div當按鈕,而不是用button

w3c標准其實有時候挺坑的,為了這個標准,這不能用,那不能用。

還有就是各種標簽眼花繚亂,反正多而砸,很多標簽可以相互替代。在一定程度上對開發者不友好,增加學習成本。

雖然標准統一是好事,但是太標准也,有時也是一件麻煩事。

比如button,就是按鈕,綁定事件的。可是呢現在看來樣式太丑,你要美化它,還得去邊框等等。還有就是button,你嵌套一張圖進去,然後添加事件。先不說是否符合標准,一看就覺得別扭,不是button該乾的事。

所以使用button在當下不方便,反正事件大多元素都可以加,而且比button好用。

所以用p模擬也是可以的

因為button按鈕的樣式一般不符合ui需求。需要重寫或覆蓋原有樣式比較麻煩。

其實按正常來說是應該用button來寫按鈕,但實際開發過程中每個人的喜好不同,再加上在代碼規范上也沒有那麼多的條條框框,所以就用p來寫按鈕也是ok的。

在很多人的開發習慣中,塊級元素都可用p來實現,行內元素都可用span來實現,畢竟除了特定的標簽之外通過css+js都可以實現同樣的功能。

其實開發人員不用糾結是用那些標簽去實現功能,包括在定義class名的時候也是千奇百怪,我們做不到讓每個人都共用一套模式,對於自己而言不管是怎麼寫的,最後保證不報錯並且兼容主流瀏覽器這就夠了。

現在越來越多的前端框架層出不窮,來我公司面試的前端人員甚至只會通過框架去做項目,連最基本的html+css+js基礎都不牢固,在實現一些網頁特效上顯得一頭霧水,不是我說掌握更多的主流框架不好,而是在不斷學習框架的前提下應該把基本功掌握牢固,當然這也是和當前的培訓機構有關系,很多的培訓機構都是為了讓學員能夠最快的去找到工作而忽略了基礎知識。

當下前端也在不斷地擴寬自己的行業領域,除了vue、小程序之外,有的還要去了解mysql以及php等等,這也是為了在面試中能夠找到一個更好的工作。

綜上所述按鈕用不用button都無傷大雅,主要的是功能的實現以及瀏覽器的兼容性。

以上是我的一些看法,感謝大家的觀看。

Button適合在表單內自動觸發比如type="submit",有時候前端需要更多的控制,所以可以使用p,span,a都行。

不過我們現在還是盡量用button表達按鈕,type設置為button,仍然用js監聽觸發或者有的地方直接用onclick。

因為發展到了H5的地步,button的功能完全能用p覆蓋了。

1.現在都用自定義樣式,button的樣式需要寫css覆蓋。

2.button如果在form元素下的的話,不加type="button",會直接提交表單,這樣每次都加很麻煩。

樣式容易控制,行為容易控制。直接用原生button,可能會出現想不到的樣式行為問題[機智]。

主要因為兩點:

其實從語義化思想來看,按鈕不該使用,而應該使用 或 。p 雖然具備 onclick 事件響應,但本意是 html 用來布局的;而 和 本身就是 html 按鈕。試一下:在一個純 html 文檔(無任何css和js內容和引用)寫上 p 和 button 標簽,瀏覽器都會有默認的渲染效果和交互方式。




主要還是 方便。

button是自帶 樣式 事件 的。

比如默認的巨 按鈕和在表單中點擊會submit 提交 表單。

而p就是一個塊元素,乾乾凈凈不用重寫,想怎麼定義就怎麼定義。

對比之下,有什麼理由不用p呢?[奸笑]




個人感覺最重要的p可以直接自定義樣式,button要消除原有樣式很煩。




這個問題不應該問前端開發 應該問一下那些制度W3C為什麼這么坑 這么反人類 但凡他們規范制定合理一點好用一點 也不至於前端用p來代替 我們也想好好用button啊

❷ 前端許可權控制

前端許可權控制分為四個方面的控制

第一點界面控制:用戶還未登入就能通過url訪問到系統頁面,該問題比較好解決通過路由守衛即可判斷。

如果用戶登入以後用url訪問不是屬於自己的菜單頁,如我沒有系統管理這個界面,我去地址欄輸入系統管理這個頁面的url,前端因該阻止它訪問頁面。輸入url能訪問到頁面的原因是你的路由配置了這個地址,所以控制界面的方式就是從路由入手,前期我們配置大家都有的路由,其他的路由根據登入系統時後台返回的許可權列表數據,動態添加路由。

在登入時我們把許可權數據存入vuex中並本地化,通過路由對象可以獲取到路由的配置,把那個用戶的路由單獨添加到路由列表中,使用addroutes添加更改後到路由配置,添加動態路由的方法調用在app.vue的created中,因為每次載入頁面都會調用該方法。

第二菜單控制:

根據用戶的不同菜單欄也不同,該問題跟動態路由類似登入時拿到數據存入vuex中並本地化,之後在菜單組件列表循環遍歷出對應的菜單欄,過於簡單就不截圖了。

第三按鈕控制:

這個控制可以採用自定義組件的方式,例如這個用戶沒有添加人員的按鈕,他只有查看這個人員菜單的許可權。在頁面上按鈕都添加上,但是是否能顯示則根據後端傳過來的許可權數據,該數據在動態路由作為meta數據添加在路由上了,也就是用路由的meta的數據去判斷這個按鈕是否顯示或者禁用或是可用,在頁面我們添加按鈕我們就加一個action屬於為add,我們或者add去比較如果沒有add這個許可權如果處理。上圖

第四請求攔截

請求攔截並不簡單的做一個token,而是每個用戶對應可以操作的請求放行,不是他可以操作的攔截,如他沒有添加的請求則要攔截,前面不是做了按鈕的控制嗎,為啥還要做這個攔截,按鈕控制並不安全,其實他可以通過瀏覽器直接修改按鈕的屬性,有人又說有token了不是可以攔截了嗎,對,可以攔截不過那時後台攔截,你請求還是發過去了,請求影響系統性能,所以做這個還是有必要的。

請求攔截,根據名字就知道他是在請求攔截器里設置的,在攔截器中可以獲取請求方式,根據請求方式與路由中的mate許可權對比有就發送請求,如果沒有則不發請求

❸ 關於後台控制前端div顯示的問題

//看見runat,你應該就是用C#,asp.net了吧。
//實現這種其實還有有方法的,給你提供幾個方法,你衡量一下選擇著用吧。
//1、最簡單的,直接在aspx頁面上,使用代碼完成
<%stringu="show";
if(u=="show"){
%>
<label>我是show,我被顯示了</label>
<%}%>
//2、使用ajax提交到後台去判斷是否要展示,引用jquery
$.post("你進行判斷並且返回數據的一般處理程序.ashx",function(data){
//這里的data就是.ashx中的輸出數據
if(data=="show"){
//如果返回是show,則把id=conid的控制項show()出來
$("#conid").show();
}else{
//否則隱藏
$("#conid").hide();
}
});
//3、在aspx的後台頁面,可以直接輸出<script></script>代碼,對控制項進行隱藏
Response.Write("<script>document.getElementById('conid').style.display='none;';</script>")