A. 前端自己模擬寫數據文件命名是 json 還是.html
可以自己寫，操作，點擊mockjs 隨機產生json數據。
代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div>
<h1 id="mockjs">mockjs</h1>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
//調用mock方法模擬數據
Mock.mock(
'http://mockjs', {
"userName": '@name', //模擬名稱
"age|1-100": 100, //模擬年齡(1-100)
"color": "@color", //模擬色值
"date": "@date('yyyy-MM-dd')", //模擬時間
"url": "@url()", //模擬url
"content": "@cparagraph()" //模擬文本
}
);
//ajax請求
$("#mockjs").click(function() {
$.ajax({
url: "http://mockjs", //請求的url地址
dataType: "json", //返回格式為json
async: true, //請求是否非同步，默認為非同步，這也是ajax重要特性
data: {}, //參數值
type: "GET", //請求方式
beforeSend: function() {
//請求前的處理
console.log('start');
},
success: function(req) {
//請求成功時處理
console.log(req);
},
complete: function() {
//請求完成的處理
console.log('end');
},
error: function(err) {
//請求出錯處理
console.log(err);
}
});
});
</script>
</body>
</html>
作者：幺加幺
鏈接：http://www.jianshu.com/p/8626d28f226f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
B. 前端開發，如何寫出優秀js代碼
每位前端工程師都喜歡易理解、可擴展、易維護的代碼，如何寫出優秀的JavaScript代碼，也是每位前端工程師的功課。如何才能寫出優秀的JavaScript代碼呢？
1.寫代碼前一定要搞清楚你要解決的問題是什麼，你的方案是否能夠解決問題。
2.擁有良好的命名規范，注意變數名區分大小寫，允許包含字母、數字、美元符號（$）和下劃線，但第一個字元不允許是數字，不允許包含空格和其他標點符號。
3.多寫代碼注釋。編寫代碼時的注釋應當盡量全面一些，這便於自己再次瀏覽代碼時好理解。
4.能不使用with語句的時候盡量不要使用with語句，盡量少使用eval ,每次使用eval需要消耗大量時間。
擁有一手好代碼的前端開發者，更具有大神風范，所以好代碼不僅要精煉，更要易讀。
C. Web前端工程師要知道的JavaScript變數命名規范
今天小編要跟大家分享的文章是關於Web前端工程師要知道的JavaScript變數命名規范，正在從事Web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
JavaScript變數命名規范：只能由英語字母、數字、下劃線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字。
下列都是非常正確的變數命名：
varhaha=250;
varxixi=300;
vara1=400;
vara2=400;
varabc_123=400;
var$abc=999;
var$o0_0o$=888;
var$=1000;
var_=2000;
var________=3000;
下列都是錯誤的命名：
vara-1=1000;//不能有怪異符號
vara@=2000;//不能有怪異符號
var2year=3000;//不能以數字開頭
vara￥=4000;//不能有怪異符號
vara*#$#$@=5000;//不能有怪異符號
varab=300;//不能有空格
下列的單詞，叫做保留字，就是說不允許當做變數名
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
需要注意大寫字母是可以使用的，並且大小寫敏感。也就是說A和a是兩個變數。
1varA=250;
2vara=888;
以上就是小編今天為大家分享的關於Web前端工程師要知道的JavaScript變數命名規范的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web培訓官網。最後祝願小夥伴們工作順利!
D. Web前端開發規范之文件命名規范
今天小編要跟大家分享的文章是關於Web前端開發規范之文件命名規范。Web前端作為開發團隊中不可或缺的一部分，需要按照相關規定進行合理編寫(一部分不良習慣可能給自己和他人造成不必要的麻煩)。不同公司不同團隊具有不同的規范和文檔。下面是根據不同企業和團隊的要求進行全面詳細的整理結果。來和小編一起看一看文件命名規范的原則吧！
基本原則
符合Web標准(UTF-8，HTML5)，語義化html(HTML5新增要求，減少div和span等無特定語義的標簽使用)，結構表現行為分離(HTML-CSS-JS代碼分離，不同行為代碼高內聚低耦合)，兼容性優良(早期版本瀏覽器兼容，移動端和PC端設備兼容).頁面性能方面(減少請求次數，例如使用精靈圖和sass語法)，代碼要求簡潔明了有序，盡可能的減小伺服器負載，保證最快的解析速度(減小repaint和reflow).
文件命名規范
1、html，css，js，lib，images文件均存放至項目的目錄中。如果使用相關前端框架，根據框架的文件格式進行合理布局。
2、所有文件夾及文件使用英文命名(避免使用中文路徑)。
3、html文件：入口文件使用index.html。如果有對應的設計組設計原稿，需要將對應的設計稿和html文件命名一致並合理存放。
4、css文件命名：後綴.css。通用initial.css，初始化base.css，首頁index.css，其他頁面按照對應的html命名。
5、Js文件命名：英文命名，後綴.js.通用common.js，初始化base.js。其他頁面按照對應的html命名。
以上就是小編今天為大家分享的關於Web前端開發規范之文件命名規范的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
E. ui切圖怎麼命名給前端
1、所有命名全部為小寫英文字母
原因是開發小哥哥的代碼裡面全是小寫的英文字母，如何切圖命名成中文的話，會導致開發小哥哥將命名全部更改，這樣會耽誤產品開發的進度。
2、所有命名不得出現大寫以及中文和空格或其他符號，單詞之間用_隔開
切圖格式：Png格式
通用切片命名格式：組件_類別_功能_狀態@2x.png
舉例：
[email protected]（中文對應的是：標簽欄_圖標_主頁_默認@2x.png）
1.工程師在實現我們效果圖的過程中，需要計算好每一個元素的位置，然後再調用我們切好的圖進行填充，那麼在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求；
2.切圖輸出應該盡可能的降低工程師的開發工作量，避免因切圖輸出而導致的不必要的工作量，養成良好的命名習慣，比如可以利用版本命名，亦或時間命名都可以更清晰地標明。
3.一個團隊之間應該統一標准，制定並遵循規范，這樣不管是後期版本的跟新迭代或者是設計師之間的交接，都會方便快捷很多。
F. web前端頁面開發一般怎麼命名
首先web前端工程師必須會的三點 HTML,CSS，js 不管是asp.net還是php都需要前三者，數據沒有好與不好之說，看公司需求，但是sql語句不同資料庫大同小異，所以先把sql語句學好吧
G. 前端html頁面id命名問題
常用id的命名
(1) 頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
(2) 導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3) 功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
H. 前端開發命名必備單詞
一、導航類
導航：nav 主導航：mainbav 子導航：subnav 頂導航：topnav
邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu
子菜單：submenu 標題：title 摘要：summary
二、頁面結構
容器：container 頁頭：header 內容：content/container 頁面主體：main
頁尾：footer 導航：nav 側欄：sidebar 欄目：column
頁面外圍控制整體布局寬度：wrapper 左右中：left right center
三、功能
標志：logo 滾動：scroll 廣告：banner 標簽頁：tab
登錄：login 文章列表：list 登錄條：loginbar 提示信息：msg
注冊：regsiter 當前的：current 搜索：search 小技巧：tips
功能區：shop 圖標：icon 標題：title 注釋：note
加入：joinus 指南：guild 狀態：status 服務：service
按鈕：btn 熱點：hot 合作夥伴：partner 新聞：news
友情鏈接：friendlink 下載：download 版權：right 投票：vote
四、p英文釋譯
標題 title 字體 font 身體 body 大小 size
列表 list 文本 text 樣式 style 對齊 align
圖像 image 修飾 decoration 資源 source 線 line
寬度 width 穿過 through 高度 height 縮進 indent
行 line 斜體 italic 鏈接 link 加粗 bold
斜體 italic 加重 weight 加粗 bold 寬 width
輸入 input 高 height 下面的 under 背景 background
頂部 top 主體 main
五、css英文釋譯
重復 repeat 填充 padding 位置 position 正常 normal
顯示類型 display 父級 parent 顯示可見 visibility 子級 children
隱藏 hidden 頂部導航topnav顯示 visible 溢出 overflow
列表 list 樣式 style 邊框 border 導航 nav
廣告圖片 banner 行高line-height邊界 margin 頁眉 header
六、樣式文件命名
主要的master.css 模塊mole.css 基本共用base.css 布局，版面layout.css
主題themes.css 專欄columns.css 文字font.css 表單forms.css
補丁mend.css 列印print.css
七、顏色釋譯
綠 green 紅 red 藍 blue 黑 black
灰 gray 黃 yellowa 紫 purple 白 white
棕 brown 卡其色 khaki
六、命名參考
登錄條loginBar 標志：logo 側邊欄：sideBar 廣告：banner
導航：nav 子導航：navBar 菜單：menu 子菜單：subMenu
搜索：search 滾動：scroll 頁面主體：main 內容：content
標簽頁：tab 文章列表：list 提示信息：msg 小技巧：tips
欄目標題：title 加入：joins 指南：guild 服務：service
熱點：hot 新聞：news 按鈕：btn 投票：vote
狀態：status 合作夥伴：partner 外套：wrap 商標：label
頂導航：topnav 左導航：leftSideBar 右導航：rightSideBar菜單內容：menuContent
菜單容器：menuContainer注釋：note 邊導航圖標：sidebarIcon版權：right
友情鏈接：friendLink容器：container 頁腳：footer 當前：current
激活：active 購物車：shop 登錄：login 注冊：regsiter
下載：download 麵包屑：breadCrumb
I. 說一下css規范
一、Css書寫順序：
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css語法：
命名一般為小寫英文字母。
為了代碼的易讀性，在每個聲明塊的左花括弧前添加一個空格。
每條聲明語句的:後應該插入一個空格。
所有聲明語句都應當以分號結尾。最後一條聲明語句後面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5代替0.5；-.5px代替-0.5px）。
十六進制值應該全部小寫，例如，#fff。
盡量使用簡寫形式的十六進制值，例如，用#fff代替#ffffff。
避免為 0 值指定單位，例如，用margin: 0;代替margin: 0px;。
減少CSS代碼。
具有清潔的HTML標記，有語義的類名，邏輯性強的層次關系。
語義標記，有助於SEO。
更好的頁面優化，更快的載入時間（因為有很多組件重用）。
可擴展的標記和CSS樣式，有更多的組件可以放到庫中，而不影響其他的組件。
能輕松構造新的頁面布局，或製作新的頁面風格。
Css常用的一些命名：
可參考：CSS 常用命名 - 彼岸時光 - 博客園。
三、Css的引入：
Css的引入一般有兩種，link和@import,一般建議使用link引入。這樣可以避免考慮@import的語法規則和注意事項，避免產生資源文件下載順序混亂和http請求過多的煩惱。
四、Css的命名規范(BEM,OOCSS)：
什麼是BEM：BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發者來說更加透明而且更有意義。
命名約定如下：
.block{} // 塊即是通常所說的 Web 應用開發中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。
.block__element{} // 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。
.block--modifier{} // 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應用不同的修飾符之後，會有不同的外觀。
優點：
BEM 的優點在於所產生的 CSS 類名都只使用一個類別選擇器，可以避免傳統做法中由於多個類別選擇器嵌套帶來的復雜的屬性級聯問題。在 BEM 命名規則中，所有的 CSS 樣式規則都只用一個類別選擇器。因此所有樣式規則的特異性（specificity）都是相同的，也就不存在復雜的優先順序問題。這可以簡化屬性值的層疊規則。代碼清單中的命名規則的好處在於每個 CSS 類名都很簡單明了，而且類名的層次關系可以與 DOM 節點的樹型結構相對應。
缺點：
這樣類名過於長，且復雜。
什麼是OOCSS（面向對象CSS）：
OOCSS 表示的是面向對象 CSS（Object Oriented CSS），是一種把面向對象方法學應用到 CSS 代碼組織和管理中的實踐。 OOCSS最關鍵的一點就是：提高他的靈活性和可重用性。這個也是OOCSS最重要的一點。OOCSS主張是通過在基礎組件中添加更多的類，從而擴展基礎組件的CSS規則，從而使CSS有更好的擴展性。
OOCSS的優點：
OOCSS的缺點：
OOCSS適合真正的大型網站開發，因為大型網站用到的可重用性組件特別的多，如果運用在小型項目中可能見不到什麼成效。所以用不用OOCSS應該根據你的項目來決定。如果沒用巧妙的使用，創建組件可能對於你來說是一堆沒用的東西，成為一爛攤子，給你的維護帶來意想不到的杯具，說不定還是個維護的噩夢。
歡迎到優就業來了解
J. 前端開發中的圖片的常規命名有哪些
所有的命名最好都小寫。
文件夾命名，盡量採取單個英語單詞描述，如login,index。
html文件名稱，當需要多個英語單詞描述時用」_」(下劃線)連接多個單詞分隔，如：user_add.html,動詞放在後面，便於相同業務模塊文件放在一起。
css，image，js文件名稱，當需要多個英語單詞描述時用」-「(分隔
線)連接多個單詞分隔，如：font-awesome.css,login-user.jpg,login-pwd.jpg。 當基於某種類型從屬關系劃分文件時，以.(點)作為單詞分隔，如：jquery.min.js,common.left-sliding.js
線)連接多個單詞分隔，如：font-awesome.css,login-user.jpg,login-pwd.jpg。 當基於某種類型從屬關系劃分文件時，以.(點)作為單詞分隔，如：jquery.min.js,common.left-sliding.jsjs變數命名
建議採取系統匈牙利命名法,因為js語言是一弱類型語言，聲明變數時，在名稱上標識其數據類型，以提高代碼的的可讀性。
變數名＝數據類型+對象描述
s: 表示字元串Stringn:表示數字i: 表示整型Int(它是Number中的整數類型)fl: 表示浮點Float(它是Number中的小數類型)b: 表示布爾Booleana: 表示數組Arrayo: 表示對象Objectfn: 表示函數Function
例如var aPerson = []; // Array數組var oBtn = document.getElementById(『btn』); //Object對象var fnName = function () {}; // function函數var sName = 「w3cplus」; // string字元串