链接: https://pan.baidu.com/s/1d6YONkCi4u7T1ZBm1yZLYg 提取码: iamh
作者-\/ 307570512

WEB前端如何系统化学习

第一阶段 ：html+div+css+ps切图+ftp网站上传（网站上线）阿里图标+html5标签+css3动画+手机网站开发+swiper.js+iscroll.js

前端开发：制作网页 ，HTML是内容，CSS是格式，JavaScript是动作。CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

第二个阶段：JavaScript+jQuery+Ajax

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

第三个阶段：2D+3D应用+移动触屏事件touch+Canvas+Svg+多媒体技术+地理信息+本地存储+H5拖拽api+跨域操作+多线程+highcharts图表+bootstrap

移动端触屏事件touch滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

第四阶段：node.js+vue.js+react.js

WEB前端coderwhy学习指南

观点一：

如果你只希望做一个普通的码页面的前端，一点一点的积累一些经验和技巧以谋求生活，那么是不需要的。

如果你热爱代码，热爱前端，希望让自己的工作越来越有趣，越来越有意义，那么非常有用的。

随着时代的变革，前端的职能已经不仅仅只是简单的切图制作页面了。前端工程师的职能也开始越大越全越深入，而且前端技术的发展也迫使我们需要有更高的职业素养。这个时候的前端工程师，首先，是一名工程师。

观点二：

『基础决定你可能达到的高度，而业务决定了你的最低瓶颈』，两者不可偏废。

前端的发展非常快，以至于你今天关注的新东西，明年再看可能就截然不同甚至被废弃了。所以保持高的学习力来应对这种变化非常重要。高的学习力在很大程度上和你的计算机基础紧密相关(先抛开智力等不可抗因素)。

不要盲目的去学

当初我在对于web前端这个行业什么都不了解的情况下，比如：不知道未来发展趋势，不知道学习web前端应该注意哪些初始问题，不知道具体的学习规划学习路线等等，一味的买书看书，看视频，到了中期阶段萌生放弃的想法，和主要是因为觉得自己越学越迷茫，也知道自己这样学找不到工作，这是初学者最大的误区。

不要孤军奋战

当初在学web前端的时候，从来都没有跟别人交流过，就感觉活在自己的世界里，总认为自己什么都可以搞定，而且很多知识不会了，直接就过去了，并没有深究，而这种学习态度也注定了我的学习是失败，学习前端一定要有讨论的过程，只有跟不同的交流才能了解到你自己不知道的东西

WEB前端如何进阶到20k+标准

Vue
Vue 方面的话，我主要是师从黄轶老师，跟着他认真走，基本上在 Vue 这方面你可以做到基本无敌。
熟练运用

对于 Vue 你必须非常熟练的运用，官网的 api 你基本上要全部过一遍。并且你要利用一些高级的 api 去实现巧妙的封装。举几个简单的例子。

你要知道怎么用slot-scope去做一些数据和 ui 分离的封装。
以vue-promised这个库为例。
Promised 组件并不关注你的视图展示成什么样，它只是帮你管理异步流程，并且通过你传入的slot-scope，在合适的时机把数据回抛给你，并且帮你去展示你传入的视图。

<template>
  <Promised :promise="usersPromise">
    <!-- Use the "pending" slot to display a loading message -->
    <template v-slot:pending>
      <p>Loading...</p>
    </template>
    <!-- The default scoped slot will be used as the result -->
    <template v-slot="data">
      <ul>
        <li v-for="user in data">{{ user.name }}</li>
      </ul>
    </template>
    <!-- The "rejected" scoped slot will be used if there is an error -->
    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

你需要熟练的使用Vue.extends，配合项目做一些命令式api的封装。并且知道它为什么可以这样用。（需要具备源码知识）
confirm 组件

export const confirm = function (text, title, onConfirm = () => {}) {
  if (typeof title === "function") {
    onConfirm = title;
    title = undefined;
  }
  const ConfirmCtor = Vue.extend(Confirm);
  const getInstance = () => {
    if (!instanceCache) {
      instanceCache = new ConfirmCtor({
        propsData: {
          text,
          title,
          onConfirm,
        },
      });
      // 生成dom
      instanceCache.$mount();
      document.body.appendChild(instanceCache.$el);
    } else {
      // 更新属性
      instanceCache.text = text;
      instanceCache.title = title;
      instanceCache.onConfirm = onConfirm;
    }
    return instanceCache;
  };
  const instance = getInstance();
  // 确保更新的prop渲染到dom
  // 确保动画效果
  Vue.nextTick(() => {
    instance.visible = true;
  });
};

源码深入

你不光要熟练运用 Vue，由于 Vue 的源码写的非常精美，而且阅读难度不是非常大，很多人也选择去阅读 Vue 的源码。视频课这里推荐黄轶老师的 Vue 源码课程。这里也包括了 Vuex 和 vue-router 的源码。
Vue.js 源码全方位深入解析 （含 Vue3.0 源码分析）

推荐 HcySunYang 大佬的 Vue 逐行分析，需要下载 git 仓库，切到 elegant 分支自己本地启动。
Vue 逐行级别的源码分析

当然，这个仓库的 master 分支也是宝藏，是这个作者的渲染器系列文章，脱离框架讲解了 vnode 和 diff 算法的本质
组件的本质