[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)
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi