前端基礎規(guī)范
開發(fā)IDE
1.webstorm 下載地址酿箭，需破解激活或直接下載破解版馏艾，功能全能強大，自帶git版本管理工具歼捐；
2.vscode
3.sublime text
環(huán)境
本地環(huán)境：windows10 nodejs v8.0.0+
線上：centos7 / ubuntu14.04 nginx v1.12.0+
主開發(fā)框架
服務端渲染框架
vue -- nuxt
react -- next
打包工具
配套UI
VUE PC
1.iview
2.element
3.ant design
VUE h5
1.vant
2.nut ui 京東開發(fā)的移動端UI
React
小程序
iview-weapp https://weapp.iviewui.com/
vant-weapp https://youzan.github.io/vant-weapp/#/intro
weui https://weui.io/ 微信官方UI氓拼，設計風格同微信app
其他
bootstrap
基礎開發(fā)模板框架
開箱即用
1.webpack4 + jquery多頁開發(fā) https://github.com/HEJIN2016/webpack4-template
2.vue-cli3 + iview https://github.com/HEJIN2016/vue-iview-template-3
3.vue-cli2 + iview https://github.com/HEJIN2016/vue-iview-template
4.nuxt + iview https://github.com/HEJIN2016/nuxt-iview-template
CMS后臺管理框架
1.vue-element-admin https://github.com/PanJiaChen/vue-element-admin
2.**iview-admin **https://github.com/iview/iview-admin
3.d2-admin https://github.com/d2-projects/d2-admin
4.vue-manage-system https://github.com/lin-xin/vue-manage-system
5.（react） ant-design pro https://pro.ant.design/index-cn
常用函數(shù)庫
lodashjs https://www.lodashjs.com/
rx.js 響應式異步編程庫你画，在vue中需引入vue-rx
jquery
常用前端插件
1.工具庫函數(shù) https://github.com/HEJIN2016/js-utils
2.富文本編輯器 https://github.com/HEJIN2016/ushare-editor
3.輪播插件 swiper https://www.swiper.com.cn/
4.可視化圖表插件
echarts https://www.echartsjs.com
vcharts https://v-charts.js.org/#/
g2 http://g2.alipay.com/
d3.js https://d3js.org/
highcharts https://www.highcharts.com.cn/
5.http請求 axios
6.圖片裁切 cropperjs
7.前端div轉canvas生成圖片 html2canvas
8.cookie操作 js-cookie
9.時間操作 moment
10.頁面加載進度條 nprogress
11.移動端開發(fā) px轉rem或者vw、vh postcss
12.數(shù)字滾動效果 jquery.countup.js vue-count-to
13.前端加密 crypto-js
14.代碼高亮 highlight.js
- markdown文本轉html marked.js
- 前端二維碼 qrcode
- 防止 xss攻擊 xss
- 前端多語言切換 i18n
- 移動端click點擊事件優(yōu)化 fastclick
- meta操作 vue-meta
- js前端簽名 jsignature
前端基礎動畫
1.animate.css
2.animejs
nodejs開發(fā)框架
1.express
2.koa
3.egg https://eggjs.org/zh-cn/index.html
版本控制工具git
github：https://github.com/
文件/資源命名
在 web 項目中桃漾，所有的文件名應該都遵循同一命名約定坏匪。
1.以可讀性而言，減號（-）是用來分隔文件名的不二之選撬统。同時它也是常見的 URL 分隔符
2.確保文件命名總是以字母開頭而不是數(shù)字适滓。而以特殊字符開頭命名的文件，一般都有特殊的含義與用處
3.資源的字母名稱必須全為小寫恋追，這是因為在某些對大小寫字母敏感的操作系統(tǒng)中凭迹，當文件通過工具壓縮混淆后罚屋，或者人為修改過后，大小寫不同而導致引用文件不同的錯誤嗅绸，很難被發(fā)現(xiàn)脾猛。
4.還有一些情況下，需要對文件增加前后綴或特定的擴展名（比如 .min.js, .min.css）朽砰，抑或一串前綴（比如 3fa89b.main.min.css）尖滚。這種情況下，建議使用點分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)瞧柔。
5.避免使用中文名作為文件名
不推薦
MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css
天河.zip
推薦
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
tianhe.zip
協(xié)議
不要指定引入資源所帶的具體協(xié)議。
當引入圖片或其他媒體文件睦裳，還有樣式和腳本時造锅，URLs 所指向的具體路徑，不要指定協(xié)議部分（http:, https:）廉邑，除非這兩者協(xié)議都不可用哥蔚。
不指定協(xié)議使得 URL 從絕對的獲取路徑轉變?yōu)橄鄬Φ模谡埱筚Y源協(xié)議無法確定時非常好用蛛蒙，而且還能為文件大小節(jié)省幾個字節(jié)糙箍。
不推薦
<script src="http://cdn.com/foundation.min.js"></script>
推薦
<script src="http://cdn.com/foundation.min.js"></script>
不推薦
.example {
background: url(http://static.example.com/images/bg.jpg);
}
推薦
.example {
background: url(//static.example.com/images/bg.jpg);
}
文本縮進
一次縮進兩個空格（非tap，tap在不同編輯器或者操作系統(tǒng)下解釋不一致）牵祟。
<ul>
<li>Fantastic</li>
<li>Great</li>
<li>
<a href="#">Test</a>
</li>
</ul>
注釋
注釋是你自己與你的小伙伴們了解代碼寫法和目的的唯一途徑深夯。
特別是在寫一些看似瑣碎的無關緊要的代碼時，由于記憶點不深刻诺苹，注釋就變得尤為重要了咕晋。
代碼注釋，則是永遠也不嫌多收奔。
當你寫注釋時一定要注意：不要寫你的代碼都干了些什么掌呜，而要寫你的代碼為什么要這么寫，背后的考量是什么坪哄。當然也可以加入所思考問題或是解決方案的鏈接地址质蕉。
不推薦
var offset = 0;
if(includeLabels) {
// Add offset of 20
offset = 20;
}
推薦
var offset = 0;
if(includeLabels) {
/* If the labels are included we need to have a minimum offset of 20 pixels
We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1*/
offset = 20;
}
代碼檢查
對于比較寬松自由的編程語言來說，嚴格遵循編碼規(guī)范和格式化風格指南就顯得極為重要翩肌。遵循規(guī)范固然很好模暗，但是有自動化流程來確保其執(zhí)行情況，豈不更佳摧阅。Trust is good, control is better.
對于 JavaScript汰蓉，建議使用 JSLint 或 JSHint。
