README.md

###珠峰培训2017年新版课程大纲 2016年，我们对近千名从珠峰培训毕业的老学员，进行回访和沟通(很多都是BAT等一线互联网企业的前端负责人)，探索目前“前端”市场上最热最火的技术形态，打造中国最具权威的 <前端-全栈-工程化开发> 课程体系，继续在课程体系、教学质量、就业薪资上领跑中国前端教育市场。

####一、课程大纲概括 #####1、零基础轻松入门

• HTML/CSS基础知识讲解，以及各浏览器兼容问题处理
• HTML5/CSS3基础知识讲解，以及响应式布局开发
• 项目综合练习与实战开发(搭建静态页面)

#####2、JS基础知识公开课

• JavaScript核心基础知识：变量、数据类型、操作语句、函数、数组及算法、DOM、String、Math、Date...
• BAT公司的经典面试题分析
• 项目中常用案例实战开发：选项卡、随机验证码等

#####3、最深入的原生JS课程体系及全面的webApp开发

• 原生JS从基础到深入：作用域、闭包、THIS、面向对象、CALL/APPLY、DOM兼容处理、DOM性能优化、回调函数编程、事件基础及兼容处理、常用类库和组件封装...
• 常用设计模式：高级单例模式、构造函数(原型)模式、发布订阅模式、promise模式...
• AJAX同源策略 和 JSONP跨域策略 核心讲解，以及前后端分离项目实战练习
• HTML5/CSS3深入讲解及实战练习、hybrid混合模式开发、webApp实战开发...
• 常用类库组件讲解：jQuery、Zepto、bootstrap、less(sass)、swiper、iscroll...
• git/gitHub讲解，模拟真实项目团队配合开发流程方式；markdowm编写技术文档，沉淀技术资料等

#####4、最具权威的框架实战课程

• ES6 / ES7 基础知识到项目应用
• React / Vue / Angular 从基础知识到实战练习
• MVVM框架模式的核心原理及源码解读
• 使用 gulp / webpack 搭建自动化工作平台
• 实战案例开发

#####5、专业的NODE课程体系，打造全栈开发工程师

• NODE基础知识：核心原理、buffer数据处理、npm包管理...
• 深入讲解Express框架：路由控制及路由原理、ejs / jade 模板引擎开发、cookie和session的应用...
• 最主流的非关系型数据库Mongodb
• 实时通信解决方案websocket和socket.io
• 实用的网络资源抓取工具-珠峰爬虫
• 珠峰博客案例开发

#####6、站在前端市场最前沿

• 我们时刻保持和市场的沟通，最先了解新的技术，然后开展公开课程
• 微信小程序开发课程
• 微信公众号开发课程
• React Native开发课程 ...

####二、珠峰的课程优势 首先声明：以下课程优势我们欢迎不服者过来PK挑战 #####1、八年专注，打造中国最具权威的 <前端-全栈-工程化开发> 课程体系

2013年09月30日，Node.js 0.10.20 发布，此时Node才被大部分人认知，珠峰培训是2013年中旬就开始探索和培训NODE课程，所以我们绝对是中国第一家。

2015年，中国的前端培训市场还没有人做框架(Angular/React/Vue)培训的时候，珠峰培训就增加了C模块课程，旨在打造中国最权威的框架开发培训

珠峰培训的原生JS课程体系，绝对是中国前端培训领域中最具权威和深入的，因为我们从2009年就专注做前端，每年的课程体系都会根据市场需求进行调整...

#####2、多套完整的实战案例，全线贯穿整个课程体系

从基础班开始，我们就会带着学生完成多套(包含PC端和移动端)实战案例的静态页面搭建，部署公司实战开发的环境平台；

在JS和移动端深入课程中，我们带领学生逐步去完成案例中的相关功能，完成前后端数据的交互；

在NODE课程中，带领学生完成实战案例的后台开发

在框架课程中，把我们的案例用 React / Vue / Angular 做一遍，对比框架之间的区别和优势

在分享公开课程中，把我们的案例嵌入到微信公众号或者微信小程序开发中

#####3、课程环环相扣，从基础到深入再到实战，逐层递进，零基础也可以学很好

珠峰培训课程体系在规划的时候，注重零基础学员的接受和感受，我们的课程体系从基础到深入，从易到难，是逐层递进的，零基础学员只要踏踏实实跟着学习，也能很好的掌握前端开发比较核心深入的技术

在最开始，我们就按照市场上项目工程化开发模式，带着大家把需要的环境搭建出来(gulp/git/node/ajax等)，前期我们不讲深入原理，只是简单介绍使用，这样大家对工程化开发理念深入骨髓，后期我们讲解每一个知识点的深入原理及核心，全程下来工程化开发彻底掌握

#####4、理论和实战相结合，面试工作都能轻松搞定

授课过程中，先给大家讲解基础核心知识，然后有很多经典的小案例可以供大家练习，也会整理很多的经典面试题供大家研究；以下是部分课堂案例：

• 选项卡
• 花瓣网 ( 瀑布流效果 )
• 轮播图 ( 腾讯视频案例 )
• 放大镜 ( 京东商城案例 )
• 无限级折叠菜单 ( 淘宝商城案例 )
• 百度模糊搜索
• 3D魔方
• H5场景应用
• QQ音乐
• 网络蜘蛛爬虫
• 珠峰书店
• 珠峰博客 ......

#####5、随时融入最新的市场技术，始终站在中国前端教育最前沿

珠峰培训与近千名前端领域开发者保持联系和沟通，也与百度、腾讯、用友、京东、滴滴等一线互联网公司的前端技术总监们树立良好的合作关系，所以我们能在第一时间发现市场上即将火爆的技术和框架，然后快速融入到我们的课程体系中；例如：微信小程序还没有公开的时候，我们就找到了小程序第一批内测者共同探讨和研究，当小程序刚刚公开，我们的课程就开始了，论对新技术的把控，谁敢过来和我们PK!

####三、部分实战案例展示 #####珠峰课堂PC端

#####珠峰课堂webApp

#####珠峰课堂响应式开发宣传页面

#####珠峰培训H5交互场景开发

#####珠峰培训博客案例

#####QQ音乐案例

#####花瓣网瀑布流效果

####第一阶段：零基础培训班

面向人群：对前端开发有兴趣，想要从事前端开发的零基础学员(HTML/CSS都不会的)

学习流程：共计三周的课程，第一天可以试听，一周之内感觉学不会都可以申请退学(退还全部学费)，三周结束后可以自己搭建一个完整项目的静态页面

#####第一周第一天

• 了解前端，对前端有整体认识
• 介绍项目流程【打包上线流程】
• 网页、网站、站群概念
• 编辑工具
• HTML基础
  • 标签
  • 标签属性
  • 元素及元素分类，常用HTML4元素
  • 基本结构【文档声明】
  • 标签语义化
  • 综合练习【珠峰故事】

#####第一周第二天

• markdowm的安装使用
• CSS基础
  • CSS引入方式
  • 选择器
  • 权重
  • CSS属性继承
  • CSS实战练习【用css属性美化第一天的例子】
• 介绍浏览器 F12的使用

#####第一周第三天

• 盒子模型
• 盒子模型的兼容问题
• BFC
• 基线对齐方式
• overflow
• ps的使用
• 综合实战

#####第一周第四天

• 浮动
  • 浮动的影响
  • 清除浮动的几种方式
• 定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 层级关系
• 综合实战【浮动、清除浮动、绝对定位、滤镜】

#####第一周第五天

• 背景background属性
• 雪碧图的制作和使用
• 网格布局
• 轮廓线
• margin的负值技巧

一周综合练习

#####第二周第一天

• 设计图解析
• 导航练习
  • 浮动
  • 定位
  • hover的使用
  • margin负值
  • 盒子模型的计算
  • css属性继承
  • 关系选择器的应用场景
  • 居中
    • 文字居中【水平和垂直居中】
    • 盒子居中
  • 复习border 实现三角形效果

#####第二周第二天

• banner练习
  • background的实际应用
  • 定位的实际应用及其层级关系的比较

#####第二周第三天

• 网格布局
• 结构复用
• 综合练习
  • CSS3属性
  • 复习滤镜

#####第二周第四天

• 网站底部收尾
  • 文字排版
  • 版权特殊符号
  • 页面优化

#####第二周第五天

• 表单
  • 表单的基础知识
  • 模拟表单综合练习
• CSS3动画

第二周综合练习

#####第三周第一天

• HTML5 标签：header、 footer、nav、article...及兼容处理
• CSS3 属性
  • border-radius
  • box-shadow
• CSS3 选择器

#####第三周第二天

• 移动端页面设计规范及分析
• 移动端视口概念
• 媒体查询
• rem 及 百分比布局
• 综合实战 -- QQ音乐

#####第三周第三天

• 弹性盒模型
• 弹性盒模型综合实战

#####第三周第四天+第五天 移动端综合实战案例，将之前学到的知识点综合应用 总结及讲解面试题

####第二阶段：JavaScript基础知识免费课

面向人群：有一定的HTML/CSS基础(可以搭建静态页面)，但是对于JS方面零基础或者基础薄弱者

学习流程：两周的培训课程，此课程是免费学习，先学习然后参加我们的基础知识考试(基础知识笔试题、选项卡、99乘法表、数组去重、冒泡排序、插入排序、快速排序)，考试通过后才可以继续学习 “前端全栈工程化开发课程”

#####第一周第一天

• js的引入方式
• js的输出方式
• js的组成
• 命名规范
• 变量
• 数据类型
• 数据类型详解
  • number
  • boolean
  • object
    • 数组
    • 对象
• 检测数据类型
• 数据类型的比较
• js的基本语句
  • 判断
  • 判断的应用
  • 元素绑定事件

#####第一周第二天

• js的基本语句
  • 循环
• DOM获取元素
• 函数
• 隔行变色
  • 自定义属性
  • 内置属性
  • onmouseover
  • onmouseout
• 综合实战
  • 99乘法表
  • 选项卡

#####第二周第一天

• DOM
  • 获取元素
  • 节点
  • 节点关系属性
  • 动态创建元素
• Math
  • 获取随机数
• 字符串
  • 获取四位不重复的验证码

#####第二周第二天

• 数组的常用方法
• 算法
  • 去重
  • 快速排序
  • 插入排序
  • 冒泡排序
• 定时器
• Date
  • 倒计时

####第三阶段：JavaScript及移动端开发核心课程(正式课)

面向人群：有一定的HTML和CSS基础，参加过珠峰培训JS免费课并且考试通过的学员

开课流程：八周课程，前两周可以无条件申请退学费；从JS基础到深入，再到移动端综合实战开发，以及前后端数据交互，结束后学员可以开发任何自己喜欢的网站或者webApp了; #####第一周

• git基础操作、markdown使用
• 预解释
• 闭包作用域及堆栈内存释放
• this
• 面向对象编程
• 单例模式实现模块化开发
• 构造原型模式
• ES6、ES6中的类和继承

#####第二周

• this及面向对象深入
• call和apply
• 珠峰课堂APP表格排序以及DOM性能优化
• 正则基础到实战
  • 元字符
  • 常用正则编写
  • 正则捕获exec和match
  • replace实战案例
  • 正向预查和负向预查
• 初识前后端交互模型和简单ajax动态绑定数据

#####第三周

• JS盒子模型常用属性及实战案例
• 同步异步编程
• 图片延迟加载
• 花瓣网实战案例
• 编写兼容所有浏览器的DOM库
• 选项卡组件的封装

#####第四周

• 定时器和回调函数深入解读
• 轮播图案例的实现以及组件封装
• jQuery常用方法使用及源码解读
• 使用JQ完成一些经典的案例

#####第五周

• 事件对象及基础知识
• 事件冒泡传播
• 事件委托
• DOM2事件核心解读及兼容处理
• 经典实战案例练习
  • 京东放大镜
  • 拖拽案例
  • 多级菜单案例
  • 商城导航案例
  • 抛物线动画案例
  • ...

#####第六周

• 设计模式之发布订阅模式
• 照片墙拖拽案例
• 移动端TOUCH事件及常用事件库
• gulp 自动化开发平台讲解及部署

#####第七周

• 综合实战开发
  • 珠峰课堂PC端项目
  • 珠峰课堂移动端webApp项目
  • 珠峰课堂H5场景介绍页面
• 在综合案例讲解的过程中，完成对以下技术的讲解
  • hybrid模式
  • iscroll
  • swiper
  • less
  • ejs模板引擎
  • ...
• 分享案例：珠峰培训H5交互型简历开发

#####第八周

• 前后端交互开发深入解读
• HTTP事物及HTTP报文
• AJAX基础知识
  • GET系列请求和POST系列请求的对比
  • AJAX状态码分析
  • 网络状态码分析：200、301、302、304、404、500...
  • AJAX中的同步和异步
  • AJAX兼容处理
  • URL解析及常用的编码方式
• AJAX库的封装和JQ中的AJAX解读
• JSONP非同源策略处理及更多的跨域方式
• 百度模糊搜索案例开发
• NODE基础
  • 常用内置模块：HTTP、FS、URL...
  • 简单的NPM操作
  • 静态资源文件的请求处理
  • API接口的请求处理
• 综合全栈案例开发：CRM客户管理系统

####第四阶段：NODE全栈开发+前端框架开发

面向人群：有一定的JS和移动端开发经验，尤其是需要掌握原生JS

学习流程：总共六周的课程，周二、三、四属于框架开发培训课程，周六日属于NODE后台开发培训课程；学完后就可以出去挑战12K+的高薪了；

特殊声明：框架主要是在React/Vue/Angular中选择一个作为重点去深入讲解，剩余的两个辅助讲解(提供视频)，三个框架都是MVVM模式开发，学精一个另外的两个很容易就会了，以后在有其它新的框架也可以自己去学习了。

####[NODE体系] #####NODE基础

• Node概述、非阻塞IO及事件环原理
• Node安装、版本切换、开发环境和调试技巧
• Node应用的编写与启动运行
• 控制台的log、error、dir、time和timeEnd等方法
• Node中的全局作用域
• 讲解filename变量和dirname变量
• 事件处理机制及事件环机制
• 模块与npm包管理工具
• 使用Buffer类处理二进制数据
• 定时器的基础知识：setTimeout、setInterval...
• 在Node中操作文件和文件流

#####NODE服务器开发

• 创建和使用http和https服务器
• 获取客户端请求中的参数如查询字符串、请求头和请求体
• 使用http客户端向Web服务器请求资源

#####最经典的NODE快速开发框架Express

• 路由控制以及路由原理
• 获取请求的方法、查询字符串、请求头和请求体等参数
• Node中间件的原理和常用中间件的使用
• 通过send和sendFile发送响应
• 如何在Express中使用ejs和jade模板以及模板的原理实现
• 如何使用静态文件中间件
• 通过重定向实现页面跳转
• 用户管理系统的项目实战
• cookie和session原理以及在项目中的应用

#####最主流的非关系型数据库Mongodb

• Mongodb的基本概念、安装和启动
• 如何创建、删除和查看数据库
• 如何创建、删除和查看数据库集合
• 增删改查集合中的文档
• 对文档进行限定条数、排序、和分页等高级查询
• 使用Mongoose操作mongodb
• 定义操作集合的骨架和模型
• 使用模型对集合文档进行增删改查操作以及高级查询
• 数据库集群和灾容处理

#####主流的实时通信解决方案websocket和socket.io

• 实时通信的历史解决方案如轮询、长轮询和iframe流等方法
• 如何建立websocket服务器和客户端
• 如何在网页中使用websocket客户端
• 跨平台的websocket库socket.io
• 如何发送消息和接收消息
• 进行广播和划分房间

#####实用的网络资源抓取工具-珠峰爬虫

• 发出HTTP请求获取指定URL中的内容
• 使用jQuery的语法操作网页元素，提取需要的元素
• 将数据保存到数据库中
• 建立web服务器显示这些数据
• 使用计划任务自动执行更新任务
• 布署项目到阿里云Linux服务器中并配置反向代理

####[React体系] #####babel-强大的编译器

• babel介绍
• 如何在babel中使用预设
• 如何使用babel插件
• 如何使用babel转换react语法
• 如何在gulp中使用babel

#####ES6深入知识

• 什么是ES6
• 箭头函数的定义和用途
• 类的定义和继承
• 对象和继承
• 模板字符串的原理和用法
• 解构赋值
• 默认、其余和展开参数
• let和const定义变量
• 模块的定义和使用

#####使用webpack搭建完整前端工作流

• webpack介绍
• 创建项目目录
• 使用webpack跑通基本开发环境
• 支持es6语法
• 自动产出html文件
• 在本地启动服务
• 支持react
• 使用css样式
• 使用karma-mocha搭建测试环境
• 使用chai测试框架
• 使用eslint进行代码检查
• 打包完成后自动打开浏览器
• 使用uglify-js进行代码压缩
• 自动插入banner
• 将css单独加载
• 为文件添加hash值

#####业界最流行的前端框架React

• React基础
• JSX语法
• 如何给组件添加样式
• 如何添加自定义组件
• 创建无状态组件
• 学习render方法
• 组件的属性
• 组件的状态
• 理解react中的this
• 使用refs操作DOM元素
• 子组件children属性
• 组件的生命周期之创建
• 组件的生命周期之销毁
• 高阶组件

#####使用React-router玩转路由管理

• react路由介绍
• 跑通基本的开发环境
• 跑通基本路由
• 使用Link组件进行导航切换
• 路由的嵌套使用
• 设置路由激活状态
• 路由参数
• 默认路由
• indexlink
• 路由重定向
• browser history
• webpack后端服务器
• 路由切换
• 钩子函数

#####深入浅出redux应用

• Redux课程介绍
• 什么是Redux
• 搭建开发环境
• 理解action-store-reducer
• 理解dispatch
• subscribe订阅
• action-creator
• react-redux介绍
• 实现计数器应用
• Redux中间件
• logger中间件
• thunk中间件实现异步action
• 超棒的调试工具
• 区分开发和生产环境
• react-router-redux
• 中间件优化

####[Vue课程体系] #####快速上手vue

• 了解渐进式框架vue
• 了解vue中的基础指令v-model,v-for,v-on,v-bind....

#####vue中的数据交互

• 使用第三方模块vue-resource、axios实现数据交互
• 使用nodejs+vue实现珠峰留言板
• jsonp跨域实现完整百度搜索框案例

#####vue进阶

• 了解vue的生命周期(beforeCreate,created,beforeMount,mounted...)
• vue中自定义指令，通过自定义指令实现拖拽，扩展功能
• vue中自定义过滤器，创建日期过滤器、数据过滤等
• vue中创建组件
• 父子组件的数据传递

#####vue全家桶

• 使用vue-router搭建单页应用
• 应用webpack手动搭建vue项目并使用vue-loader
• vue-cli快速生成项目，并集成vue-router,vue-resource
• 使用vuex实现数据状态的统一管理
• 应用mintUI elementUI

####[Angular课程体系] #####Angular基础

• 了解MVC，MVVM，掌握angular核心特性
• 掌握angular安装以及基础使用
• angular中常用的指令,ng-app,ng-model,ng-bind,ng-repeat,ng-click,ng-class...
• angular中的作用域以及模块的使用
• angular与bootstrap结合完成购物车案例

#####angular指令

• 创建自己定义指令,装饰型指令以及组件式指令
• 自定义指令实现拖拽、轮播图的封装
• 封装panel组件，以及opener组件
• 深入剖析指令中的作用域，模板，指令之间的依赖
• 实现双向数据绑定(ng-model),以及watch和apply的原理

#####angular过滤器

• angular中常用过滤器(date,uppercase,filter,orderBy...)
• 编写自定义过滤器
• 用过滤器实现数据的筛查以及数据展示

#####angular中的服务

• 什么是服务，服务能干什么
• angular自带服务，$http、$timeout、$trustAsHtml...
• 深入剖析依赖注入的实现原理和服务的实现
• 使用provider,factory,service,value,constant定义angular中的服务，并解析其差异

#####angular中常用模块

• 应用angular中的RESTful风格模块ngResource
• 应用angular中的ngRoute开发单页应用
• 更加灵活的uiRouter实现路由嵌套
• 使用ngResource+ngRoute+nodejs实现书店案例

#####angular搭建app

• 使用angular+ionic开发app项目
• 应用phonegap打包app项目

####综合案例开发

• 珠峰书店
• 珠峰博客
• 珠峰聊天室
• 珠峰百度电影搜索风云榜爬虫
• ...

####第五阶段：珠峰最新技术公开课

面向人群：所有前端开发爱好者和工作者

开课流程：根据市场需求，不定期开展免费或者收费的公开课程；收费课程，珠峰老学员报名从优，成为珠峰培训VIP学员就有机会免费学习哦~

#####涉及的课程

• 微信小程序开发
• 微信公众号二次开发
• React Native课程开发
• .....

对以上课程体系如果存在疑问，可以咨询我们的客服：

• 联系QQ：1144709265
• 官方座机：400-180-6960
• 技术交流群：463043394 (2017年珠峰培训交流群)
• 微信公众号：zhufeng-peixun