Front-end study day 1

Edited on Dillinger Front-end knowledge structure Github link: JacksonTian/fks · GitHub

Front-end study DAY 1

Syllabus:

1. Beginner

• html+css: W3 School 在线教程
• javascript:
  • W3 School 在线教程
  • 《javascript 语言精粹》

2. Primary

• Three basic parts of css:
  • “基础概念”
    • 盒子模型，流动，block，inline，层叠，样式优先级
  • “css2.1规范”
    • 精通CSS（第2版）
  • “css3规范”
    • CSS3实用指南
  • 浏览器兼容性： webkit 内核为主流，ie6 7 已成为历史，ie8 9 的市场份额在进一步缩小。
• Javascript
  • 简单框架
    • zepto api 简单易用， 使用 Codecademy 学习
    • 也要注重原生js 配合 pwa等浏览器最新api
  • 复杂框架
    • react vue angular等不直接操作dom的框架
    • 核心在于理解理念
  • javascript语言范式
    • 面向对象 函数式
    • 封装、继承、多态的概念
    • 参考资料：文章 JavaScript中的函数式编程实践 ，书籍 《Object Oriented Javascript》
  • javascript语言内部机制
    • js中变量的作用域
    • 变量传递方式
    • 函数的定义环境与执行环境
    • 闭包
    • 函数的四种调用方式（一般函数，对象的方法，apply, call）以及四种调用方式下，“this”指向的是谁。
  • dom编程
    • web前端工程师的核心技能之一。
    • 《dom编程艺术》 《高性能 javascript》中关于dom编程的部分
  • 网络编程
    • 关键字搜索学习。
    • fetch
    • websocket
    • jsonp
    • cors
    • formData
    • Ajax已经被Fetch Standard取代，学习fetch api即可。
  • es5，es6
    • 目前js大部分基于es5， ie8一下通过es5-shim。
    • 但利用一些工具现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统的学习。
    • 学习顺序：javascript基础——>es5——>es6。
    • 参考链接：ECMAScript 5 compatibility tableECMAScript 6入门ESS
• html5
  • 了解html都提供了哪些api，项目中用起来。
  • 使用html5解决业务问题，以及不支持html5的浏览器的降级方案。
  • 面向未来编程，尽早将新技术引入业务中来，而不是过分考虑兼容性问题，进而导致面向过去编程。