關於前端規範

来源:http://www.cnblogs.com/hmfgzy/archive/2017/05/27/6913467.html
-Advertisement-
Play Games

一個規範性強的代碼便於修改和理解,所以做出如下總結,希望少走彎路; 基礎內容,大神請繞道...................... 1.命名規範 命名一定要有意義,畢竟代碼寫下來不是給你一個人看的,在css中,在前面寫上父元素進行規範,不要偷懶 2.請不要一會寫原生,一會寫jquery 這個問題好 ...


一個規範性強的代碼便於修改和理解,所以做出如下總結,希望少走彎路;

基礎內容,大神請繞道......................

1.命名規範

 命名一定要有意義,畢竟代碼寫下來不是給你一個人看的,在css中,在前面寫上父元素進行規範,不要偷懶

2.請不要一會寫原生,一會寫jquery

 這個問題好多人覺得我寫出功能來不就行了,但是頁面被弄的亂七八糟,如果是因為不熟練,這正是個機會讓你熟練

3.縮進問題

  雖然好多編輯器已經把縮進做的完美了,但還是會有一兩個空格的差距,這個時候不要偷懶,這個空格就像趴在地上的螞蟻,趕緊清掃

4.標簽閉合問題

 雖然在HTML5當中,標簽可以不用閉合,但是為了規範,也是為了代碼的更好的避免一些錯誤,我建議各位標簽閉合

5.代碼寫完後,把不必要的註釋和空格,空標簽刪除

 很多人為了下一次的修改,添加註釋,或者修改代碼以後,為了以防萬一,不刪除原來的,但是做到後面,已經忘了註釋這回事了,這個時候在寫完代碼後,檢查一遍,把不必要的刪除掉,這樣便於更好的閱讀代碼

6.邏輯問題

 這個問題我只能對各位說,在搭建頁面的時候,多動腦筋,把結構合理規範化,還有js,請保持邏輯通順,逆向思維會讓觀看你代碼的人火大

7.不要在0後面寫px

 在webstorm中有提示,不要增加代碼的負擔

8.註意空格問題

 

  在遇到上面的結構的時候,寫在一行,不然你就會突然發現,瀏覽器莫名其妙多了一些空格

9.js獲取頁面元素,

 在JQuery中,如果只用一次這個元素,就不要定義變數占用記憶體了

10.結尾要加;

在js和css語句結尾加加  ;  在進行代碼壓縮的時候才不容易犯錯

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 談起angular2(現在已經angular4)了,個人覺得angular2的官方文檔不太適合初學者(真心吐槽..),所以每一塊弄懂都不那麼容易。 為了弄懂angular的動畫自己也是花了一番功夫,不客觀的說,angular的動畫寫起來是比較複雜的,但又必須掌握。 下麵是我結合官方文檔以及王芃老師寫 ...
  • 說明 如需求:後臺返回一個用戶列表數組,該數組可能為空,最多只可能會有10個用戶, 頁面中A,B兩處展示用戶列表,B處不管如何都會展示返回的所有用戶,A處需要展示10個用戶,不足10個展示預設用戶, 比如:返回7個,A處展示的後3個都是預設用戶 ...
  • jQuery 是一套Javascript腳本庫,註意 jQuery 是腳本庫,而不是腳本框架。"庫"不等於"框架"。jQuery 並不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事。腳本庫能夠幫助我們完成編碼邏輯,實現業務功能。使用 jQuery 將極大的提高編寫javascrip... ...
  • 書寫HTML結構的時候,對於標簽的嵌套問題,在我發現這個問題之前,都不在自己的考慮之中,還傻傻的以為標簽之間是可以進行百搭的! 其實,有些標簽是不能進行隨意嵌套,如果你沒有深受其害,你是不會發現它的存在的,更不會體會到它能帶給你的那種抓狂感! 那麼究竟是那個兩個標簽呢?請看,就是a標簽和p標簽,乍一 ...
  • 圖片上傳預覽 ...
  • 內容簡介 本書共4部分,首先簡要介紹了React Native的開發基礎知識,然後介紹了React Native的API、組件以及Native擴展和組件的封裝,接著介紹了App的動態更新和上架過程,最後通過3個案例介紹瞭如何使用React Native開發原生App。作者簡介 王利華,vczero, ...
  • IE6IE7Firefox瀏覽器不相容原因及解決辦法 一、IE6IE7Firefox瀏覽器不相容原因及解決辦法1.文字 本身的大小不相容。同樣是font-size:14px的宋體文字,在不同瀏覽器下占的空間是不一樣的,ie下實際占高16px,下留白3px,ff下實際占高17px,上留白1px,下留白 ...
  • 直接上代碼: ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...