【饥人谷前端课程】注意事项

注意事项

提问与停课

• 代码问题：将代码放到http://js.jirengu.com，按Ctrl+S保存，复制链接到班级群或大群提问并@老师
• 停课申请：https://www.wenjuan.com/s/2yERb2H/

必修课

前端入门

• 前端是什么？做什么？学哪些东西？学习方法？
• linux 基本命令行
• 从 url 输入到页面展现发生了什么
• 工具
  • 浏览器、编辑器、Git、nodejs、翻墙软件的安装
  • vscode 或者 Webstorm 的使用
  • jisbin 的使用
  • chrome 调试工具的使用
  • Git & Github 使用
  • markdown 写博客

HTML

• 页面结构
  • 一个最简单的页面结构
  • 表现与样式分离概念
• 标签属性讲解
  • doctype
  • lang
  • meta
    • charset 编码与乱码
    • viewport
    • keyword
    • description
  • 常见标签
    • 标签的使用场景
    • 标签的闭合、嵌套、大小写、id 和 class 基本规范
    • alt 与title 的区别
    • a 的target 的几种值
    • table 的写法和使用场景
  • 表单
    • 表单提交的概念
    • name 的作用
    • POST 与 GET
    • 多选提交
    • radio 分组
    • type = hidden 的作用
    • placeholder
  • html5 标签

CSS

• 样式的加载
  • CSS 引入方法
  • link 和 @import 的差别
  • 几种文件路径区别
• CSS 选择器
  • 选择器类型
  • 选择器权重计算
  • 伪类与伪元素
    • a 链接伪类选择器顺序原理
    • :first-of-type 和 :first-child
    • :before, :after 用法
• 基本样式
  • 基本概念
    • 基本样式调试
    • 浏览器默认样式
    • 块级元素 vs 行内元素
  • font
    • font 的写法
    • line-height 的用法
    • font-family 用法和原理
    • chrome 最小字体尺寸
  • 单位
    • px em rem vw
    • 百分比的用法
  • text
    • test-align 几种写法
    • 单行文本文本溢出加...
    • a 链接去除下划线
    • 列表去掉点
  • 颜色
    • 颜色的几种表示方法
    • a 链接的颜色设置
  • 背景
    • 背景色、背景图片的使用方法
    • CSS sprite 的原理和用法
    • image 标签 vs 背景图片
• 盒模型
  • 盒模型属性
  • IE 盒模型 & W3C 盒模型 & box-sizing
• 浮动
  • 浮动的定义、使用场景
  • 清除浮动 clearfix
  • 浮动与 BFC
  • 浮动与 inline-block
  • 浮动的应用
    • 菜单栏
    • 两栏布局
    • 三栏布局
• 定位
  • 定位的几种方法
  • 脱离文档流概念
  • z-index
• 布局
  • 固定宽度居中布局
  • 简单的两栏布局
  • 简单的三栏布局
  • 圣杯布局、双飞翼布局
• 浏览器兼容
  • IE6、7、8的hack写法
  • HTML条件注释
• 其他知识点
  • class命名技巧
  • inline-block使用、缝隙、对齐
  • vertical-align的用法
  • 水平居中、垂直居中的几种方式
  • 字体图标的原理和用法
  • 伪元素、边框的妙用
  • 外边框合并
  • 清除浮动的几种方法
  • 媒体查询与响应式
  • CSS Reset
  • 块级格式化上下文
  • 实现一个栅格系统
  • 前端编码规范
• 静态页面实战1-实现创意个人页面
• 静态页面实战2-实现一个企业站

Javascript

• 概念
  • URL、浏览器、服务器、网站相关概念
  • 页面渲染原理
  • 白屏、FOUC原理
• ES3 ES5
  • 数据类型
  • 运算符
  • 流程控制语句
  • 函数
  • 内置对象
    • 字符串
    • 数组、ES5数组方法
    • 日期
    • Math
    • 正则表达式
  • 定时器
    • 最小时间粒度
  • 重要概念
    • 基本类型与引用类型
    • 作用域
    • 声明前置
    • 闭包
    • 立即执行函数表达式
    • 同步与异步
    • 单线程、任务队列、时间循环
  • 实战
    • 封装一个Utill库，包括类型判断、日期格式化、正则检测、事件兼容封装、深浅拷贝等
• DOM
  • DOM遍历
  • DOM操作
  • 事件
    • 事件绑定方法
    • 常见事件介绍
    • 事件冒泡、捕获与应用
    • 事件兼容写法
    • 事件代理与应用
    • 阻止默认事件
  • 实战
    • 二级菜单
    • 登录注册表单验证
    • Tab切换效果
    • 回到顶部
• BOM
  • history
  • location
  • navigator
  • localStorage
  • cookie
    -实战
    • 封装一个cookie操作的Utill库
    • 封装一个设备类型检测的Utill库
• Ajax
  • 概念
  • ajax的使用
  • node工具搭建websever mock数据
  • 实战
    • 实现加载更多评论
    • 实现一个滚动无限加载的照片墙
    • 实现一个无刷新改变URL带分页的新闻展示页
• 跨域
  • 跨域的概念
  • jsonp的原理与封装
  • 几种跨域方式的实现
  • 实战
    • 实现瀑布流展示的滚动无限加载新浪网页
    • 实现一个天气预报页面
• jQuery
  • 选择器
  • DOM操作
  • 属性&CSS操作
  • 常用函数
  • 事件处理
  • 常用效果和动画
  • ajax
  • deferred
  • jQuery源码解析
  • 实战
    • 实现循环动画轮播
    • 实现木桶布局照片墙
• 面向对象
  • 面向对象概念
  • 构造函数创建对象
  • this
  • 原型
  • 原型链
  • 继承
  • 代码封装的方法
  • 实战
    • 封装一个轮播插件
    • 封装一个dialog组件
    • 封装一个日历组件
    • 封装图片全屏轮播展示组件
• 设计模式
  • 构造器模式
  • 模块模式
  • 单例模式
  • 发布订阅模式
  • 实战
    • 封装一个事件管理器
• 技能
  • 熟练使用console.log来debug
  • 熟练使用二分法来debug
  • 熟练使用network分析请求和响应

HTML5&CSS3

• HTML5常见标签使用
• html5shiv
• CSS3 背景、边框、阴影
• CSS3 2D 3D 转换
• CSS3 渐变、动画
• flex 布局
• 实战
  • 实现几种loading动画
  • 实现一个3D滚动的slides效果

模块化

• 模块化的价值
• CommonJS、AMD、CMD、UMD规范
• RequireJS的使用
• webpack的使用
• 模块化实战
• 实战
  • 在个人项目中使用RequireJS或者webpack

NPM&Node

• NodeJS介绍
• NPM使用
• 实战
  • 开发个人Node包

工程化

• Gulp打造自动化流程
  • 图片压缩
  • CSS压缩合并autoprefixer自动版本号
  • JS lint压缩合并自动版本号
  • Less转CSS
  • HTML资源定位
  • livereload
• NMP Scripts 使用
• 实战
  • 在个人项目中使用gulp做工程化

综合

• 性能优化
• HTTP
  • HTTP介绍
  • 缓存控制
• Web安全
  • XSS攻击
  • CSPF攻击
• 移动端特性介绍
• MVC介绍

项目（选1）

• Express搭建完整的企业站
• node开发个人命令行脚手架
• 实现个性UI组件库
• 个人FM电台

需要看哪些书

看目录、略读个别正在学习的章节，作为知识的补充巩固，可以做读书笔记，尽信书不如无书

• 《JavaScript 高级程序设计》
• 《JavaScript权威指南》
• 《高性能网站建设指南》
• 《JavaScript设计模式》
• 《图解HTTP》

学习建议

1. 定个目标，抬头看路、低头走路
2. 别瞎想，别听别人瞎说，只需要坚定地执行
3. 1.5倍效率？适度深挖。
4. 课程以外知识定个小目标
5. 自信能提高30%的战力

预习内容

• 从URL到页面展现的相关文章
• 了解W3C、ECMA