一、学习计划

根据对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

随机推荐

  1. Java的位运算符详解实例——与(&)、非(~)、或(|)、异或(^)

    位运算符主要针对二进制,它包括了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.下面 ...

  2. 安装 Oracle P6 EPPM 16 R1 database for 12C

    . 打开命令提示符(Windows)或 终端(如果UNIX)和连接数据库使用以下命令: sqlplus sys/password@dbservicename as sysdba 连接到: sqlplu ...

  3. bzoj 1821: [JSOI2010]Group 部落划分 Group

    #include<cstdio> #include<iostream> #include<cmath> #include<algorithm> #def ...

  4. 基于ZooKeeper的分布式Session实现(转)

    1.   认识ZooKeeper ZooKeeper—— “动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始丛林里,心惊胆颤的被 ...

  5. vaddin使用技巧

    添加外部jar包的方法: 在项目目录下建立lib文件夹,把外部jar包复制到该文件夹底下.右键该jar包-构建路径-添加至构建路径即可.也可以配置构建路径-库-添加jar.

  6. Java多线程编程&lt;一&gt;

    怎样做到线程安全? 1.不要跨线程共享变量: 2.使状态变量为不可变的: 3.或者在任何访问状态变量的时候使用同步 同步synchronized //静态的synchronized方法从Class对象 ...

  7. MicroPython开发板:TPYBoard v102 播放音乐实例

    0x00前言 前段时间看到TPYBoard的技术交流群(群号:157816561,)里有人问关于TPYBoard播放音乐的问题.最近抽空看了一下文档介绍,着手做了个实验.更多MicroPython的教 ...

  8. 使用Kazoo操作ZooKeeper服务治理

    单机服务的可靠性及可扩展性有限,某台服务宕机可能会影响整个系统的正常使用:分布式服务能够有效地解决这一问题,但同时分布式服务也会带来一些新的问题,如:服务发现(新增或者删除了服务如何确保能让客户端知道 ...

  9. Candies POJ - 3159 (最短路+差分约束)

    During the kindergarten days, flymouse was the monitor of his class. Occasionally the head-teacher b ...

  10. 解决 Unknown action buyram in contract eosio 错误