[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.kancloud.cn/yaming/center/263269) * [ weex框架](http://www.kancloud.cn/tesla_1212/mrdc_tesla/243651)