iT邦幫忙

2023 iThome 鐵人賽

DAY 26
0
自我挑戰組

保健食品建議量查詢網頁功能系列 第 26

在自由開放中當個善良守序的工程師

  • 分享至 

  • xImage
  •  

HTML/JS 是一個很自由的世界(X)語法(O),自由到很多人覺得混亂(X)隨便(O),沒有條理,無法控制。不過有時後就是要自由,才會有各派支持者的活躍生存空間,從另一個角度看,能發展出這麼豐富的生態,產生這麼多的職缺(吃飽飯是最基本的需求阿),是個有趣的地方。

JS後來有了的ES5,ES6(參考:https://www.w3schools.com/js/js_versions.asp ),不過還是很空泛。所以就出現了 type script (ts,wiki:https://zh.wikipedia.org/wiki/TypeScript ),type script 可以用強型別,但這是非必要選項,開發時要怎麼用,記得開發前先講好規則,不然分出去寫還是亂成一團。

只是type script 需要編譯才能變成瀏覽器能讀的js,所以目前大都是被包在前端框架語言的基礎內(前端語言整個被 npm綁,也等於被 nodejs 綁架,所以在市場搶得先機很重要,佔有率高就是贏者全拿)。

當然還有萬惡的eval,一定要喊一下,eval evil!(mozilla: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval ),太過於強大的eval(),因為資安議題而被封印的力量XD。但是當年可以用 function 寫動態function呼叫,function 都不function了,真的是覺得超有意思的!

而在HTML方面,有基本的參數定義(https://www.w3schools.com/tags/ref_attributes.asp ),這些主要是主流規格,但內容還是看瀏覽器的實作,基本上都不會出問題,不過…要注意safari有時後會有出人意表的行為(所以可以的話,專案最好都限定使用瀏覽器,不然就是多測safari)…而Windows上現在已經沒有官方safari 了,Windows safari 最後一版是 Safari 5.1.7 (2012年),參照:https://en.wikipedia.org/wiki/Safari_version_history 。

不過若是看到aria-label,aria-current,aria-xxxx的參數,其實那個是有意義的 Accessible Rich Internet Applications(ARIA),參照wiki: https://en.wikipedia.org/wiki/WAI-ARIA , mozilla: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

aria第一個重點在於是看實作(JS)有沒有支援,沒有就不要寫了,寫了也是佔空間的垃圾,再來是不要改變原始定義的用途,不要亂填內容,要是有用到碰到衝突,也是麻煩。

不過可以借用這個概念,避開已有定義的關鍵保留字(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes ),利用自訂的參數(像Boostrap 5 用data-bs-target,Bootstrap 4 用data-target 就可以做出區別),搭配自訂的JS,就可以創造出很多應用。例如有一個網頁元件用 myinput-min,myinput-max 之類的參數,搭配自製的檢核JS function,就可以做到通用的輸入欄位的數值範圍檢查,不用去看該欄位的id或name,一個一個去實作。

總之這些額外的限制,或者是自訂參數用途,記得在開發之前講清楚,看是要列入「程式開發規範」,或者定成開發通用規則,先對前端開發的工程師們防呆一下,以免因為太過於自由的語言寫法,造成後續維護太過於雜亂。


上一篇
自己覺得沒有想像力,還是有更沒想像力的人
下一篇
風格由工程師定義,也是一種選擇性困難
系列文
保健食品建議量查詢網頁功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言