[TOC] ## 前言 進入團隊之前，希望你對公司的前端技術棧有了一定的了解，對于自己所不熟悉的技術進行學習實踐。 ## 規范 * 代碼規范 * 產品設計規范 * 測試規范 * 流程規范 * 兼容適配規范 ## 基本：html5+css+js * html5 * es5+6 * css3 ## js框架：jq+jq插件+zepto * jq1.11.1+ * jq插件輔助 * 手機端框架zepto.js ## 構建工具：webpack+gulp * gulp基于流的構建，詳情參考前端工程化文檔 * webpack，模塊化打包配置 ## 樣式預處理器：less+sass+postcss * less，目前使用較多 * postcss，sass，處于接觸使用階段 ## 樣式命名方案 * bem * bfc * oocc ## 前后端協作 * js-resultful接口設計 ## 前端服務器：nodejs * nodejs基礎知識 * 服務器 * 路由器 ## 前端模塊化：seajs/requirejs * seajs * requirejs ## 版本管理 * git * svn ## 模塊管理：npm/cnpm * npm包管理 * cnpm企業倉庫 ## 前端資源管理 * bower * component ## 前端ui框架：bootstrap ## 主流框架：vuejs+angular * vuejs基本使用參考前端工程化 * angular基礎初步使用階段 ## 字體庫圖標 * font-awse,Iconfont,Glyphicons,alifont,Icomoon ## web安全 ## web存儲 ## web優化 ## 資源庫 * 百度cnd,bootcdn,alicdn,todomvc ## 兼容測試 screensiz,caniuse,cnzz數據中心, ## 性能測試 httpwatch,fidder,webpagetest,pagespeed ### 插件 ## 其他(第三方技術) * 前端模板引擎（推薦使用）：tmod+artTemplate * 圖表（推薦使用）：[echarts3教程](http://echarts.baidu.com/tutorial.html) * 彈出框（推薦使用）：[layer官網](http://layer.layui.com/)，[github地址](https://github.com/sentsin/layer) * 滑屏（推薦使用）：swiper * 手機滑屏：fullpage * 視頻播放器：jplayer * css3動畫：animation.css * pc端相冊（推薦使用）：photoviewer * pc+手機端相冊展示：[photoswipe.com](photoswipe.com) * 條形碼插件：barcode * 二維碼插件（推薦使用）：[qrcode](https://github.com/jeromeetienne/jquery-qrcode.git) * 時間選擇器（推薦使用）：wdatepicker * 手機端事件：touch.js * 文件上傳：uploader * 下拉框（推薦使用）：[select2官網](http://select2.github.io/)，[github地址](https://github.com/select2/select2.git) * 調試工具：devtool(谷歌開發者工具) * 懶加載（推薦使用）：[lazyload](https://github.com/tuupola/jquery_lazyload)，多用于圖片 * 樹插件（推薦使用）：http://www.treejs.cn * 復制粘貼插件：https://github.com/zeroclipboard/zeroclipboard * 分頁插件：[pagination](https://github.com/superRaytin/paginationjs) * 時間控件：[laydate](http://www.layui.com/laydate/) * 驗證：[validator.js](https://github.com/chriso/validator.js) * 彈出框：[bootbox ](http://bootboxjs.com/)， [github地址](https://github.com/makeusabrew/bootbox) ## 公司自主研發框架 * [rubiku框架](http://www.hmoore.net/yaming/center/263269) * [ weex框架](http://www.hmoore.net/tesla_1212/mrdc_tesla/243651)