越来越多的小伙伴开始进入前端这个职业，有很多0起点的跨专业跨行业的人经过简单的培训就摇身一变成了前端工程师，拿着不菲的收入。

我不得不说，确实不错哦，不过你离称职的前端，专业的前端还有一点点距离，除了页面看似完成效果，还有我们对效果对代码的执着，对产品的认知，这些是培训班或者没有行业背景是学不到的。

关于框架以及一些技术前沿

从最开始的jq，到适应手机端的zepto，再到今天的三大js框架，会框架已经不是什么难事，然会与你写的好不好，这完全是两回事。

稍微有点自学能力的人都可以按照demo复制粘贴，然后做一些东西，这不是本事，更没有值得吹嘘的东西。

那什么是可以拿来吹嘘的呢？经验，除了经验还是经验，你使用框架的经验，与其他人交流的结果，你做产品的经验，对代码复用改进的经验，你对知识点透彻的理解，你对产品的认知专业与校验标准等。

完成页面效果

基本每个人都可以按照设计稿，完成页面，现在更先进，可以直接设计师导出的产品中就有前端代码。那么有几点我要提醒大家的：

1 区分哪些是资源图，哪些是静态图，那些是纯色图标，哪些是多色图标，他们分别的处理方式以及线上方式是什么。我曾经看见有人把样例的图片也放到项目静态图片里，这种不属于默认图，没有任何意义的图片裁下来做什么呢？还有很多小伙伴，对于一些页面中图片的类型该用jpg还是png混淆不清，对于背景图或者雪碧图模棱两可的状态。像这些就属于基础功不扎实，任凭你会vue框架也说明不了你的实际水平。

2 区分静态文字与动态文字，区分效果文字与变化文字。静态文字是指文字内容不会变的，固定长度固定文本的，而动态文字则是不确定的，很可能会变化内容，包括多少有无都是有可能的。很多时候看到前端把某个标题限定宽高就不管了，当标题缺失或者过长折行的时候就导致与ui效果不一致。这种就属于低级错误。另外效果文字就是指通过前端字体语法实现或者实现成本很高的特效文字，这类一般也是建议用图片形式实现或者svg或者画布，不建议用css样式修饰html文本，而且有些是必然性做不到的。

3 产品意识
无论你做的是pc还是手机的页面，你都需要对他的用户界面有着基础的认识和常识，其用户操作习惯是怎样的。大部分的产品在这样的场景是如何交互的。

比如现在ui针对手机端可能只有一稿，那么针对不同手机的适配效果以及适配方案就是由你来考虑和完成的。如果你做了一款产品页面，在6上各种完美，在安卓整个布局很卡顿或者错位，那就说明你布局策略是错误的。还有就是充分利用空间，把握设计与规则的严谨性，也许有时候设计不注意，会出个13字号，那作为前端需要明确正文，标题，小标题，提示字一般是多大字号的，有必要提醒对方，共同完成一款标准，友好的app。

说到交互，手机与pc交互原理是完全不同的，也许你曾经以为用了自适应布局，pc的页面手机完全可以用，那只是最粗陋的产品体验，除了手机端有着特定的手势支持之外，两者可以设定的动画，菜单以及控件的交互方式是完全不同的呢。而这里如何交互是合理的，符合以用户为中心的选择，你比设计或者产品更有发言权，有更精准的更具体的实际效果可以体验。

4 推进ued
在你有足够的项目以及ui积累之后，可以完全和设计沟通好已有的资源，当遇到类似需求时，直接指定ui模板以及前端模板，这对于提升工作效率，提升专业水平是质的飞跃。

用框架用的是什么

一般都会说vue很简单，webpack很简单，然后一打的人，开始按照vue-cli开始聒噪的搭建前端框架，过了一周马马虎虎的硬着头皮按照官网请求数据完成了请求列表数据甚至还完成了注册登录。这样就算会了。
然，这样还远远不够，还差什么呢？给大家举些例子。

1 vue支持组件，那团队内的公用组件如何管理，如何支持较好的拓展性，针对各种异常情况，你的组件是怎么处理的
2针对http请求，是否有统一封装中间函数，对后端的错误字段做归整处理，抛错处理，错误的标准类型是什么，对错误的处理是什么
3 针对组件的生命周期，什么代码建议写在什么阶段，为什么
4 对于公用组件公用的样式是如何处理
5 es.6有哪些可以使用，可以经过转化，解决多大的兼容性
6 vue原型对象有哪些内置方法，如何拓展，与非原型方式拓展的区别
7 如果我想改引入框架的样式，怎么去管理这部分的样式和脚本
8不同人对同一模块的操作怎么维护

css，html，js有什么好问的

经常会碰到看不起html5和css2的人，他们觉得那个太简单了，没啥需要看的。
那么就一起来理下如果你没有特别精通这两个，你的页面代码会写成什么样吧。
1 通篇都是div布局，没有任何可读性语义化标签，对一个盒模型用块还是行很随意
2 写样式杂乱，没有任何思想，看到一个补一个，曾经有人量盒子宽度，然后写背景色，发现没颜色，原来高度没写的低级错误。如果你有按照位置，盒模型，修饰，css3这样的顺序写怎么会有这样的低级失误
3 通篇class，什么时候想用class就用class，与dom结构，父子关系，可复用性一点考虑没有，甚至于很多时候污染覆盖了全局样式。
4 全量样式，现在有了软件导出代码，越来越多的人开始把代码直接照过来，这里面有很多冗余代码，比如宽高，字号，很多都是父元素和默认就有的，实在多此一举。
5 可维护性差。很多人写代码只顾自己方式需求，完全不考虑代码复用性，比如一个标题字的样式，左右布局样式等，在另一个需求的时候完全自己重新写，费时费力
6 忽略流布局。默认元素都是流布局的，继承部分可用属性，而很多人直接把某些可复用的元素和样式定死，导致页面完全失去了流布局的优势。
7 还有很多小伙伴对js基础知识不以为然，觉得我都会koa，node的人了，做项目蛮可以的了，其他的还有啥好学的。所以就有的人完全不懂设计模式，会出现if else面条代码，对数组，json 基本的操作以及变形都不会，还有些数据类型常见的真值表不知道，明明空字符串就是flase还要用等号去判断，诸如此类。

JS知识点

1 JS高级面试

  • 扎实的基础会让你高效学习新技术
  • 项目经验 -> 高级工程师
  • 解决方案 -> 架构师
  • 学习反馈，阅读，学习的收益，和体会，提升
  • 业务能力和技术能力是息息相关的，可以统称为解决问题的能力
    • 前端工程师的自我修养
    • 有自我查询知识的能力，主动获取知识的欲望
      • 有欲望去学习知识，而不是被动的等待别人告诉你
      • 基础很重要，基础没到话，不要去学习太多新知识
      • 有自我查询知识的能力，主动去查询信息
    • 并且我还没见过做纯粹的框架和工具，
      • 和纯粹的产品业务的同学
      • 不要聊一些你用起来很熟悉，但是不知道原理的技术
    • 自我受限要不得

2 JS知识点

  1. ES6 常用语法

    1. Module 模块化的使用和编译环境
    2. Class 与 JS 构造函数的区别
    3. Promise的用法，Promise的标准
    4. ES6的其他功能

  2. 原型高级应用 prototype

    1. 结合 jQuery 和 Zepto源码
    2. 原型如何实际的应用
    3. 原型如何满足扩展

  3. 异步全面讲解

    1. 从原理到 jQuery再到 Promise
    2. 什么是单线程，和异步的关系
    3. 什么是 event-loop？
    4. 目前解决异步的方案有哪些
      1. 只用 jquery如何解决异步
      2. async / await的用法

  4. 框架原理

    1. 虚拟DOM 存在价值，如何使用
      1. 什么是 VDOM，为何要用 VDOM
    2. Virtual DOM如何使用，核心函数有哪些
    3. 了解 diff算法吗
    4. MVVM Vue
      1. Vue响应式，模板解析，渲染，框架实现的原理
      2. 之前使用 jQuery和现在使用 Vue | React的区别
      3. 如何理解 MVVM
        1. Vue如何实现响应式
        2. Vue 如何解析模板
        3. Vue的实现流程
    5. 组件化 React
      JSX，VDOM，setState，对比 Vue，框架选型有主见，自圆其说
    6. 对组件化的理解
      1. JSX是什么
      2. JSX 和 Virtual DOM的区别
    7. 简述 React 和 setState
      1. 技术选型，如何比较 React 和 Vue

  5. 混合开发

    1. Hybrid
      基础，和 H5对比，上线流程
    2. Hybrid VS H5
      1. Hybrid原理和应用
    3. Hybrid 是什么，为何要用 Hybrid
      1. Hybrid如何更新上线
      2. Hybrid和 H5的区别
    4. 前端客户端通信
      1. 前端通信原理，JS-Bridge封装
      2. JS如何与客户端通信

  6. APP混合开发，热爱编程

    1. 读书，写博客，如何写博客
    2. 开源项目
    3. 通过问题 | 题目引出知识点，深度和广度扩充知识体系，
    4. 学会如何高效学习，全部有实际的工作经验总结而来