大妞面试宝典

大妞 面试

这是给单小猴量身定制的前端面试宝典
下面会涉及到很多知识点,类库,工具等. 要认真看!

一. 工具篇

把这个写在最前面是因为这个最简单咯, 没太多学习成本, 但好的工具可以很大程度的提高工作效率和工作水平, 要善于积累和收藏...

常用的代码编辑器

1. Sublime Text

   简称sublime, 是一款很轻巧的代码编辑器, 支持多种语言, 扩展丰富(比如可以安装 jslint 扩展来检测JS语法, 安装 jsFormat 来格式化JS等等 ), 也是我个人在工作中最长使用的编辑器
   

2. WebStorm

   WebStorm: The Smartest JavaScript IDE
   俗称`Web前端开发神器`, 是一款功能强大的IDE, 所有IDE就是`集成开发环境`, 有很多的设置和用法, 我的建议是以这个IDE来开始你的前端开发, 因为IDE有比简单的编辑器(sublime) 更全的功能, 熟悉后效率会提升很大, 去网上多搜罗一些相关的用法.
   

3. vim

   之所以提到`vim`, 不是要求非常会用这个, 而是它太著名了, 这是linux系统自带的代码编辑器, 如果以后你涉及到linux 系统, 必须要知道vim的一些简单操作, 因为他不支持鼠标操作, 所以要知道简单的插入(a/i/o),保存(w),退出(q)命令, 简单了解即可.
   

其他的我就不推荐了, Dreamwaver 我个人不太喜欢用, 有点古老而臃肿, 虽然功能也挺全的. 主力的开发工具不求多但要用的顺手, 要配上常用的扩展(代码压缩/代码格式化/语法检测/语法提示/代码高亮/漂亮的主题和字体等等), 也要记住常用的快捷键(比如复制行,删除行,多选等等平时常用的 )

设计相关的工具

下面的两款设计工具都是Adobe 其他的工具, 也是最主流的设计工具, 要了解简单的操作方法.
同时也要懂涉及到的设计图格式: (去分别百度一些)
1. PSD
2. PNG
3. JPG
4. GIF

1. Photoshop
2. Fireworks

常用版本控制工具

这可能对于你来说又是一个新的名词, 但在团队协作开发中是必备的, 版本控制工具的官方解释是: "版本控制软件提供完备的版本管理功能，用于存储、追踪目录（文件夹）和文件的修改历史，是软件开发者的必备工具."
可用于版本控制的工具现在流行的是 git, 古老一些的有 svn

1. Git

   Git 是目前主流的版本控制工具, 详细一点说就是分布式的版本控系统, 简单的工作流程就是: 本地编写代码 -> 提交到本地git仓库 -> 推送到远程的 git仓库, Git的工作流有很多, 不同的公司可能采取的不同, 主流的比如 gitflow的git工作流. 好吧, 我知道你没明白~~ 先去百度一些git是个啥东西, 然后在看看下面链接的教程, 有点长, 你可以先看看git的简介,安装和简单的操作. 并记住这个东西是干嘛的, 以后工作中必须要学会它的用法!
   

   • Git教程

2. SVN

   对于介个东西就不多说了, 是一个中心化的版本控制工具, 知道他是个中心化的版本控制就好了, 虽然很多公司还在用, 但是去了现学就行了...
   

3. FTP

   注: FTP不是版本控制工具!!!!
   之所以和 git 和 svn 这俩货放一起, 是因为很多公司还是在FTP连在内网直接开发或上传测试的. 那就暂且把它当做一些常用的管理代码的方式吧 ^_^
   那啥事FTP嘞, 这是个 "文件传输协议", 你可以联想到 HTTP, 它是超文本传输协议, 不明白先记住这俩词儿. 通常就是用一些 FTP的管理工具(如`FlashFXP`等), 通过IP地址+端口号+用户名+密码 直接登录到远程的服务器或内网的服务器来管理远程的文件或目录(比如下载一个index.html,本地修改完,在上传上去替换原来的, 你本地的 wamp实际就是一个远程服务器的概念)
   

个人知识管理工具

1. 印象笔记/有道笔记

   不多说, 管理好分类, 把工作和学习中遇到的知识点记录下来
   

2. markdown

   这是一个以 .md或 .markdown 结尾的文档格式, 是github 默认支持的文档格式, 这个格式的文档可以通过一些简单的标签或符号(标记)来书写格式简介切美观的文档. 也是程序员们比较钟爱的一种文档格式. windows下可以下载 MarkdownPad 这个工具来书写
   

   • 注1: 本篇文章就采用markdown 来书写
   • 注2: MarkdownPad 下载链接

产品原型图工具/脑图工具

原型图工具就是将想法和构思化成草图的工具
脑图工具就是将构思和想法化成流程图的工具
这两类工具主要是产品经理用的, 你只需了解即可, 脑图工具也可以用来梳理思路等

• 原型图工具
  
  • Axure
• 脑图工具
  
  • Xmind
  • 百度脑图

需注册的网站

这里说的并不是社交网站啦, 而是一些社区网站以及代码分享和托管的网站

1. Github: https://github.com/

   首先,马上去注册一个账号..
   github 是一个远程的代码仓库,代码分享和托管的社区. 几乎所有的编程语言和知名的类库等都托管在这里, 当然你也可以通过github来存放你自己的代码, 也可以star或fork别人的代码等等. 但是前提是你得会git. 是不是有点眼熟, 在上一个分类里有提到这个. 我会给你口述一些这个的工作流程. 我们公司的项目代码也是通过github来托管的
   

2. 去注册一个域名吧, 自己做个博客啊还是什么的, 我给你提供后端的接口..

   我已经悄悄的给你注册了一个: eowyn.xyz
   

二. 基础篇

三. 前端框架/类库篇

虽然现在我们学了前端的HTML+CSS+JS, 这是前端的基础, 但目前流行的一些开源类库可以大大提高开发效率, 避免重复的造轮子, 一定要了解并且可以简单应用.

前端构建工具

所谓前端构建工具, 也可以理解为自动化工具. 就是通过简单的配置, 实现一系列的自动化的操作, 比如代码合并/代码压缩/图片压缩/less或sass的编译等等一些列流程都自动帮你搞定. 虽然上手要学习要配置过流稍有曲折或者概念不太理解, 但应用起来之后可以大大的改善整个的前端开发流程. 下面列举的三个工具可以按正序选择一个了解并学习. 暂时也只需要了解它能实现的功能和简单应用.

• Webpack

  前端项目工程化解决方案, 也是目前最新开始流行的工具, 社区活跃, 使用也不复杂. 参考下面的文章了解一下它的工作流程.
  

  • 基于webpack搭建前端工程解决方案探索

• gulp

  Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。
  网上有很多关于gulp的介绍, 暂时只要知道这个东西就可以, 知道它可以干嘛用.
  

• grunt

  应该是最早兴起的前端构建工具, 我没有具体看过, 据说要比gulp复杂一些. 功能也很强大.
  

包管理工具

• bower

  包管理工具在众多语言里都很常见, 不给你列举太多. 只要知道 bower是web 前端的包管理工具, 所谓包就是一系列的类库和插件等的集合. 应用bower 来安装应用非常简单, 只需要在命令行下执行: bower install jquery 就可以将jquery 库引入进来. 然后在 html 内可以:

  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  

模块化工具

前端的开发要有模块化开发思想, 所谓的模块化工具, 其实可以理解为"模块加载器", 改变了传统的开发思路和流程.
下面两种应该是主流的两种模块化的工具, 虽然遵循的规范不同, 但共同的推广了模块化开发的进程, 使用也是各有喜爱, 可以看看社区里的讨论 , 选择一个入手即可. 但务必要学会其原理和用法!

• sea.js

  遵循的是 CMD （通用模块定义）规范

• require.js

  遵循AMD（异步模块定义）规范

CSS预处理工具

这是一个css编写的一个神器, 它扩展了 CSS 语言，增加了变量、函数等特性，使 CSS 更易维护和扩展。

• sass
• less

主流UI框架

所谓UI框架, 就是框架中包含了常用的页面样式,CSS组件和JS组件; 开发者可以通过UI框架快速的拼出一个高质量的网站.只需要简单的配置和粘贴. 当然也可以对框架进行深度定制来整合出一套属于自己的框架. 下面两个框架是最为流行的也是应用广泛的. 在一些不要求自定义样式的场景可以迅速入手使用. 也可以多参考一下这些框架中优秀的编码规范,文件组织方式等. 大概了解一下就好咯~

• bootstrap
• Foundation

为了你查看, 上面两个项目的链接都是中文网的地址, 也可以去看看他们的官网.

主流JS框架

下面的几个库其中有几个你应该听说过或者用过. 以下的库也可能是工作中主要应用的开源项目.

• react

  • React 入门实例教程

    React是facebook开源的前端框架, 也是当前前端社区最为火热的一个项目. 我没有学过, 在这里也不多介绍. 看看上面的介绍, 在以后的工作中或者业余时间, 非常值得一学的!
    

• Angular

  Angular 是google开源的一个前端框架, 目前很多产品都在应用的. 它的数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入等等特性都解决了HTML在构建应用上的不足. 是第一个需要熟悉的框架, 因为应用很广泛. 学习曲线稍陡, 理解他的一些新概念新模式和工作方式, 将会很愉快的用于各种大小项目中去并有高大上的感觉. 因为很大程度上只有借助这些优秀的工具, 才能真正的加速前端的开发和实现前后端分离. 目前的话也无法真正的去应用, 那就先跟着官网的DEMO敲一遍了解一下他的开发模式. 学会它, 就迈进了前端门槛的一大步..
  

• Vue.js

  数据驱动的组件，为现代化的 Web 界面而生
  

• jQuery

• Zepto.js

主流工具库

工具库的作用就是对一些常用方法的封装, 比如数组的排序,筛选; 字符串的处理; 数字的处理; 对象的处理等等. 在平日的开发中省去了很多时间去单独处理. 也可以很好的配合jQuery 等Dom 操作库来完成工作.

• underscore.js
• Lo-Dash

举一个Lo-Dash处理数组的例子:

_.uniq([2, 1, 2]); //实现对数组的去重
// → [2, 1]

主流模板库

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。通俗的说就是为了避免在js里面"拼"页面, 而是将页面独立成模板文件, 通过分配数据进入模板引擎来驱动模板引擎解析数据并生成响应的HMTL...

• mustache.js
• Handlebars.js

举一个mustache的例子

<html>
<body onload="loadUser">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
</body>
</html>

function loadUser() {
  var template = $('#template').html();
      Mustache.parse(template);
      var rendered = Mustache.render(template, {name: "Luke"});
      $('#target').html(rendered);
}

主流插件及其他类库

具体参考: 前端组件库

• 各种轮播图插件
• 各种弹窗/提示层/通知组件
• 各种动画库
• 各种UI Icon 库

四. 进阶篇(开发模式)

静态文件的组织方式

CSS 相关

JS 相关

• js 性能

HTML 相关

• 语义化的标签
• 有意义的class和id

调试工具

• Chrome console
• Firebug

其他

• 组件化
• 通用性/复用性
• 响应式/自适应
• 浏览器兼容性

五. 性能优化篇

工程内的常用做法

• 代码压缩

  将html代码, css代码, js代码中多余的空格去除, 减小文件的大小从而减少网络传输, 可以通过一些工具或者前端构建工具手动或自动化进行    
  

• 代码合并

  加载一个页面时可能会引入多个CSS文件, JS文件. 那么我们就可以通过一些工具或前端构建工具手动或自动的将多个JS文件合并为一个JS文件, 将多个CSS文件合并为一个CSS文件.
  合并前:
  <script src="header.js"></script>
  <script src="footer.js"></script>
  <script src="btn.js"></script>
  合并后:
  <script src="application.js"></script>
  

• 图片合并

  就是所谓的雪碧图(CSS Sprites), 将一些小的图标/LOGO等合并为一个图片, 然后通过定位来显示某一个图标, 这样做的好处是减少网络的请求数, 因为浏览器对同一域名进行请求的并发连接数是有限制的, 从而加快了请求速度
  

• 图片压缩

  在切图, 就是把PSD分层图的一些banner图, 图标, 背景图保存下来之后, 因为是原图所有图片都很大, 不需要透明的图片可以保存为jpg, 需要透明的图片保存为png 32. 质量可以设为80-90%, 尽量减小图片的大小, 这样会很大程度上加快页面加载速度(因为一个图片可能好几兆, 压缩后可能才几十K或几百K)
  

  可以通过以下在线工具进行图片压缩:

  • 智图
  • TinyPNG

• 图片按需加载

  按需加载的场景比如一个商品的海报图(800*800px), 而如果在列表页显示可能只需要一个缩略图(200*200px), 如果此时在列表页同样显示原图的话会增加大量的网络传输量. 优化的方式就是需要展示多大尺寸的图片就输出多大尺寸的图片. 当然, 这也需要后端的配合对图片进行不同尺寸的处理.

• Loading 效果

  这不是性能优化的手段, 但当页面加载慢页面长时间空白或排版混乱是对用户体验不友好的, 加上一个loading的等待效果, 是一种很友好的方式, 比如放在页面加载时, 放在ajax 异步请求时等等...

• 延时请求(延时执行)

  这种方式常用在异步请求时, 一个常用的场景比如:
  一个搜索框, 输入文字当keyup后即显示出搜索结构. 这是不是很常见的一种场景(如百度搜索). 那么你想象一下, 我要搜索"我爱北京天安门", 那么每一个keyup都会发送一个异步的请求, 当你完整的输入完不知不觉的已经发送20次请求, 而最后一个请求的结构才是你想用的. 面对这样的问题, 你需要做延时的搜索, 一个简单的例子:

  $('input').on('keyup', function(){
              if ($.trim($(this).val()) != '') {
          var t = setTimeout(function(){
              // ajax request...
          },500);
      }
  });
  

• DNS预加载

  当我们访问一个网站如 www.eowyn.xyz 时，需要将这个域名先转化为对应的 IP 地址，这是一个非常耗时的过程。
  DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。
  
  以上就是理论的解释, 而实际的操作非常简单, 只要把你的页面内链入的切访问频繁的非本站域名的其他域名放在如下的 `link` 标签内即可, 然后放在 <head></head> 标签内就好了, 剩下的事情浏览器就会替你做了...
  
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <link rel="dns-prefetch" href="http://image.eowyn.xyz" />
  <link rel="dns-prefetch" href="http://image.jingwentian.com" />
  

工程外的常用做法

• CDN

  CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
  简单的来说，就是把原服务器上静态资源发布到CDN提供商，用户访问这个静态文件时，访问到的是离用户最近的节点上的资源。CDN加速优点是成本低，速度快。适合访问量比较大的网站.
  

六. 工作流程篇

这个流程是我工作的过程中经历的一些方式, 没有真正干过前端岗也不知道太具体的工作方式或者大公司流程化的工作流. 有的术语是我自编的, 大致了解一些前端的一些不同的工作方式

工作模式分类:

• 传统型

  现在还很多公司采用传统的开发流程, 即前端几乎只负责切图(页面制作), 然后交给后端来套页面, 这是一种混编的前后端配合模式, 大部分的业务逻辑等都交给了后端来负责. 
  

• 前后端半分离型

  所谓前后端分离就是使不同的岗位各司其责, 加速产品开发和迭代. 而往往大部分中小公司可能前后端分得并不是很彻底, 即后端的开发依赖依赖前端的进度, 前端的开发依赖后端的进度. 
  这里之所以说半分离, 就是将一部分的业务逻辑放在了前端来处理, 相互有些约定的接口规范, 又不是完全分离的状态.
  

• 前后端分离型

  这个名词可能很多公司都没有做到真正的分离, 看了很多大公司的做法也较为复杂. 尤其是开发者数量众多, 业务线多而并行或交替的情况下做到前后端分离会大大加快开发进度. 那就简单一点说: 所谓的分离, 就是前后端在开始时约定好一套接口规范, 然后完全并行的进行开发; 后端按照业务需要和约定好的接口规范, 输出对应的数据; 前端在后端未完成接口时先按照接口的规范模拟数据进行开发; 待前后端均完工后前端再替换掉测试数据变为正式的接口; 然后大家在一起测试. 这是理想的状态.
  

工作大致流程:

• 浏览原型图

  了解大致的业务, 即都有哪些页面, 每个页面都有哪些元素, 大体布局, 都需要哪些插件等

• 浏览设计图

  在上一步的基础上, 细过设计图, 整理出此套UI中的公共部分和所需的通用元素

  • 公共头部/尾部
  • 公共的导航栏

  • 通用的按钮组(不同颜色不同尺寸的button, 这些buttun之间有通用的样式, 有单独可配置的样式)

    <a class="btn btn-default">默认按钮</a>
    <a class="btn btn-large">大按钮</a>
    <a class="btn btn-small">小按钮</a>
    <a class="btn btn-small btn-red">红色小按钮</a>
    

  • 通用的弹窗/提示框

  • 通用的图标(把所有小图标都汇总到一个雪碧图上,通过不同class来展示不同的图标)
  • 全局的字体/局部的字体/全局的字体大小/局部的字体大写/全局的颜色/局部的颜色

  • 整体的布局方式(或叫做网格系统, 即左右布局,上下布局, 两等分, 三等分, 四等分等等, 通过全局的网格样式在设置)

    <div class="grid-row-12">
        <div class="grid-row-3">左侧</div>
        <div class="grid-row-9">右侧</div>
    </div>
    

  • 等等整理出所有通用的部分, 了解了整体的布局在开始下手, 切记不能流水线式的从头写到位, 这样会重复的写很多代码, 乱而不可维护

• 页面制作

  这一步就开始真正的开始着手开发, 把从设计图中整理的开始分目录分文件, 先把目录划分出来:

  app
  | - index.html
  | - page
      | - header.html
      | - footer.html
      | - nav.html
  | - assets
      | - js
          | - app.js
      | - css
          | - reset.css
          | - header.css
          | - footer.css
          | - nav.css
          | - btn.css
          | - grid.css
          | - icon.css
          | - app.css
      | - img 
          | - icon-sprites.png
          | - header-logo.png
      | - shared
          | - jquery.js
  

  这个目录结构只是一个简单的示例, 意思就是为了让你明确一个概念, 要把所有可以独立出来的组件/样式/模块抽象出来, 这样的话任何一个页面想用按钮就可以直接引进 btn.css 就可以用. 有没有接的比所有东西都堆在一起要清晰了很多呢?

  接下来就开始coding啦, 对照着设计图把静态页面实现出来, 同时在开发的过程中还要考虑到真正场景的应用以及动态数据的渲染的边界. 比如一个左右布局的列表:
  
  在写布局的时候要尽可能的考虑到在动态的数据遍历(循环)渲染页面时最方便的是

  <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
  </ul>
  

  而不是

  <ul>
      <li>1111</li>
      <li>2222</li>
  </ul>
  <ul>
      <li>3333</li>
      <li>4444</li>
  </ul>
  

  同样可以实现设计图中的效果, 但后者在渲染动态数据的时候就需要再调整样式, 比如接口一次性获取了10条数据, 那么最方便的就是可以直接循环<li>{{data.item}}</li> 10次就搞定了, 思想和眼光要以实际的情景为基础哦~

• 业务逻辑/数据渲染

  这时候静态页面搞定了, 数据接口也有了, 那就可以实现真实的业务逻辑了, 此时就需要按照业务要求, 进行前端的事件绑定, 逻辑判断, 获取或推送( GET / POST )数据, 渲染数据了, 这部分就是水平高一点的前端才能搞定的咯, 妞儿写ajax , jsonp 以及 DOM 操作都很熟练了, just do it!

• 补充上一步

  单独拿出来说明才更清晰一点, 这也是在逻辑处理过程中比较重要的一些环节

  • 数据验证

    比如"数据验证",在表单中就是表单验证, 检测字段是否为空, 字段长度是否符合规定, 注册的手机号是否已存在, 上传的图片格式是否允许, 图片尺寸和大小是否合格等等, 将有问题的请求挡在前端处理, 从而减轻后端的压力.
    

  • 通过设定html行内属性来协助js脚本进行逻辑处理

    当然这也是一种方式, 也可以通过在js里统一输出配置, 举例说明:

    <a class="submit" href="javascript:;" data-available="false" data-tips="已售罄">购买</a>
    <scripit>
    // 应用jquery
    $('.submit').on('click', function(e){
                    e.preventDefault();
                    var _this = $(this);
        var available = _this.data('available');
        var tips = _this.data('tips');
        if (!available) {
            alert(tips);
            return false;
        }
        // to do sth ...
    });
    </script>
    

• 真实数据测试

  你已经按照开始时的设计图/接口规范完成了前端的开发工作, 等后端的童鞋完成了接口的输出, 你就可以将模拟的测试数据(json格式的数据)替换为正式的后端接口, 然后在进行功能性的测试, 保证之前约定好的接口无误或逻辑有问题.

• enjoy your work~

• 补充1: 关于交互

  关于前后端数据交互

七. 面试篇

面试的过程大概在30分钟-1个小时左右, 如果有面试题的话可能会给40分钟的笔试时间, 然后面试官会根据你的简历和面试题来问一些问题. 态度谦和如实回答即可

有关心态

公司招人比较关注现有的技能, 项目经验, 工作态度以及学习能力, 一张白纸更好培养. 所以不必有太大压力, 一定要表现出虽然有的东西现在虽然不会, 但会积极的去学习和沟通. 在面试前一定要先去试图了解一个公司的现有业务等, 以及对这个行业的热情和热爱...

有关简历

有关面试题

1. 前端开发面试题

七. 实战篇

上面介绍了那么多名词那么多知识点等最终还是要落地, 做几个小项目来练练手, 所以有针对性的分成了三类, 也代表了主流的前端所要面临的三类开发方式

PC站

传统的PC浏览器所浏览的页面

移动站

手机浏览器所浏览的页面

响应式站

PC和浏览器浏览同一个页面, 所展示的样式不同

名词术语

• vim
• lamp
• linux
• ftp
• host
• nodejs

需关注的网站

1. 开发者头条
2. 稀土掘金
3. segmentfault
4. Stack Overflow
5. 知乎

一些扩展阅读

1. 前端组件库
2. 关于程序员求职简历
3. 关于前端面试
4. 大公司或专业团队目前流行的前端工具有什么？

前端技能树