【从html到算法框架】科技白学习计划书

一、学习计划

根据对Web知识层次的梳理，我觉得可以把它分别以技术和思想两个维度进行分类。从技术维度上讲，Web知识有内容、结构、样式、操作（静态的修改与动态的修改（动态，例如使用定时器））、交互（与浏览器以及硬件设备）、数据处理（增删改查、算法使用）、请求与通信、BUG调试这些层面。只有讲这些掌握，才能完成开发需求。而从思想维度上讲，完成技术维度中的种种过程，可以使用不同的方法完成，高级的编程思想以库和框架的形式被封装备用。这些库和框架可以将写好的代码提升开发效率、优化开发逻辑、大幅提升性能。

二、Web知识层次

• 技术维度
  
  　
  • 内容、结构以及相关操作
    • 静态内容与结构：
      • Html:Html语言，是超文本标记语言，使用标记标签标记纯文本。它不是编程性语言，它决定了一个网页的内容而不是功能。该语言构建了网页的结构和内容。
    • 动态内容与操作：
      • DOM（文档对象模型）：DOM 是一个 可以访问和修改当前文档的 API。DOM 提供了一种表述形式——将文档作为一个结构化的节点组（Node和Element）以及包含属性和方法的对象。它所提供的API可以为JS等语言提供能力去访问和操作这些节点（Node和Element）的属性和方法。HTML，XML 和 SVG 都扩展了基本的 DOM 接口来操作它们各自私有的元素类型。（本文特指用JS去操作HTML）
        • 图形化编程：在文档中建立一个相应标签（canvas、svg），可通过DOM API直接生成图像，通过JS定时器以及API操作，可以生成强大的Web动画；
      • 模板引擎（本文特指JS）：是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
        • 描述：模板引擎不属于特定技术，是跨领域的技术。PHP、.ASP、C#、Javascript等都有属于自己的模板引擎。由于本文背景只涉及JS一种编程语言，所以本文中模板引擎将特指Js模板引擎。
        • 实现方式：
          • 置换型：模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。
          • 其他：置换型模板引擎实现简单，但其效率低下，无法满足高负载的应用需求（比如有海量访问的网站），因此还出现了“解释型”模板引擎和“编译型”模板引擎等。
  • 样式
    • 静态样式：
      • CSS：CSS样式表（除C3动画外的部分用来控制页面内容展示的样式，可通过选择器选中HTML元素，并为他设置样式）
    • 动态样式：
      • C3样式动画：可根据样式变化生成补间动画；
      • JS定时器：可利用定时器操作DOM，生成样式的变化；
  • 浏览器以及硬件接口访问与交互
    • 例如触控事件、全屏、地理位置访问、浏览器滚动等与浏览器以及硬件设备的交互行为；
    • 事件冒泡
    • 事件委托
  • 内容数据与状态数据的处理
    • 利用JS算法对内容数据和状态数据进行有目的的增删改查；
  • 内容数据与状态数据输入与输出
    • 本地：利用JS与本地数据（用户输入数据、缓存数据）控制内容数据与状态数据的更新；
    • 云端请求与通信：利用HTTP请求与后端进行交互，进行内容数据与状态数据的更新；
  • 调试
    • 利用调试工具（例如浏览器调试工具）对样式与功能进行调试；
• 思想维度
  
  　
  • 普通
    • 原生原理的理解与原生代码驾驭
    • API使用
    • 算法实现
  • 方法的升级与性能的优化
    • JS高级（函数封装）
    • 库与框架的使用
    • 库与框架的封装

参考资料：

（1）超文本标记语言Html详解：

　　　　上：http://blog.csdn.net/a464057216/article/details/52226285

　　　　下：http://blog.csdn.net/a464057216/article/details/52332548

（2）HTML5：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5