前端

最新推荐文章于 2024-07-04 08:08:45 发布

会写诗的猫

最新推荐文章于 2024-07-04 08:08:45 发布

阅读量477

点赞数 14

分类专栏：前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

到底所谓的前端都应该干些什么都应该会写什么呢? 本人身边有太多的人会切几张图, 会用jQuery做个特效, 会从bootstrap里复制粘贴, 会用html游戏框架写个flappy bird, 会在Github里找各种模板自和库拼拼凑凑, 就口口声声大言不惭的称自己为前端工程师. 说什么前端好简单啊, 前端找工作好难啊, 没有出路啊, 想转行啊. 甚至有更多的人还不明白什么是HTML, 就到处问(知乎里尤其多)怎么开始学前端啊, 前端前景好不好啊. 依照本人的经验, 什么东西难不难, 什么东西好不好, 可不是这样问出来的. 我相信在这在这种网络信息资源及其丰富的年代, 花个半小时自行搜索一下你应该可以得到你想要的答案.

好了言归正传, 前端工程师真的是一个无关紧要的职位么? 我们先来看看前端工程师都要做些什么, 看看那些称自己是'所谓'的前端同学们都能走到哪一步.

这里直接跳过最基本的HTML+CSS+JS, 包括但不仅限于:
- HTML各种element怎么用什么时候用?
- Event? EventLitsener? HTML中触发event以及JS中处理event?
- DOM tree? 添加? 修改? 删除? 搜索? 遍历? 选择? children? parent? sibling?
- 什么是window? 什么是document?
- JS基本语法? function? loop&condition? scope&closure? array&object? this?
- CSS 什么是box modal? position? float? 各种选择器(*, >, ~, :nth-child)?

如果看到这里有任何一项完全没听说过没用过, 或者查各种文档后'大概'知道怎么用的同学们, 很遗憾, 你们现在算不上是一个合格的前端工程师. 如果不是, 请继续.

### 程序员的基本素质和知识

(有些人觉得前端不同于传统意义上的程序员, 这点我十分不赞同. 或许把前端工程师叫做JS程序员更加贴切, HTML和CSS就好比其他语言中的UI库)-

- 高数, 基本的概率统计 (连简单的微分方程都不会解的朋友们就不要称自己为前端人员了!)
- 基本数据结构能用JS写出linked list, stack, queue, (binary)tree, graph, hashtable么?
- 基本算法能用JS实现各种search(linear, binary..), 各种sort(bubble, insertion, merge, quick, selection), 以及树的搜索(Breadth First/Depth First)和遍历(3种顺序)么?
- 设计模式知道什么是singleton, factory, strategy, decrator么?
- Git 不要只是停留在把Github当做一个网络储存器的层面上, 知道branch, diff, merge么?
- 基本的英语能力(不要求听说, 只用来读/写文档资料)
- 基本的计算机知识知道位运算, 溢出, thread, lock, concurrency, parallelism么?
- 熟悉unix的基本命令么? 知道ssh public/private key都是干嘛的么?
- 知道正则么? 能够熟练的使用么?
- 能写出详细的注释/文档, 让阅读你代码的人知道你要干嘛么? 能短时间内快速地读懂来自你同事或者其他地方(github, blog)的代码, 知道什么东西应该写在什么地方, 以便迅速地参与其中么?
- 给你一个你从来没有接触过的库/语言, 能能够在较短的时间内在你的代码里正确使用么?
- 有一个得心应手用的熟练地编辑器/IDE么? 不要求大家都是vim/emacs大神, 但也不要做什么都是用鼠标来点.
- 基本的检索查询能力(google, stackoverflow, MDN)
- 单独思考解决问题的能力, 团队合作, 与人相处

如果以上的内容都有所了解(这里不会强调精通), 恭喜你, 你拥有了成为前端工程师的基础知识. 继续.

### 前端专业知识
- 知道什么是AMD, COMMONJS么? 知道call, apply, bind么? 知道JS中foreach, filter, some, every么? 知道怎么实现functional JS(curry等)么?
- 知道各种所谓的高级HTML的API(File, Web Audio, WebSocket)么?
- 知道各种CSS Preprocessors么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种么?
- 知道各种CSS框架么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种么?
- 知道canvas, SVG么?
- 知道怎么把你的东西做成responsive, cross-browser support么?
- 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
- 知道什么是Ajax, restful, get, post么? 知道怎么和后台交互么?
- 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种或多种么?
- 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
- 知道现在前端一般的工作流程(gulp, grunt, git, svn, npm)么?
- 知道怎么测试代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
- 知道前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用么?
- 知道npm, V8, node, express, socket么? (这里补充一点, 现在越来越多的公司都采用: '前端网页 -> 前端后台 -> 后台'这种构架来搭建东西, 也就是说, 前端工程师不仅要做传统前端的网页, 还要写自己的后台, 来跟真正的后台进行交互, 至于前端的后台用什么语言来写, 一般是node/python/ruby, 不太会用到庞大的java, 所以这里我把node列为前端工程师必须要掌握的技能之一) 知道cache, authentication么?
- (如果要用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
- 另外, 前端这个行业跟传统的c/c++/java程序员还是有一定的差别的. 由于是新兴产业, 所以各种行业标准, 框架, 库会随时随地的产生和更新 (作为一个c程序员, 十年前怎么写东西现在还是怎么写东西). 今天出了node和react, 明天又出了io和mean. 所以, 积极关注各种前端产品, 跟上变化的节奏, 也是身为一个前端程序员必备的技能之一. 知道ECMAScript 6里怎么写class么? 知道react, flux, reflux么? 知道polymer, dart么? 知道meteor么?

(暂时能想到的就这么多, 待补充..)

在从包括google, facebook, apple等各大公司的面试, 以及周围做前端小伙伴们的经历中, 发现现在在美国, 没刷过3, 4遍cc150和leetcode的同学们都只敢投投简历不敢去面试, 因为觉得铁定过不了...

附上一些之前亲身经历的面试题:

#### Facebook 1:

Puzzle Materials
Given a set of events, render the events on a single day calendar (similar to Outlook, Calendar.app, and Google Calendar). There are several properties of the layout:

1. No events may visually overlap.
2. If two events collide in time, they must have the same width.
3. An event should utilize the maximum width available, but constraint 2) takes precedence over this constraint.

Each event is represented by a JS object with a start and end attribute. The value of these attributes is the number of minutes since 9am. So {start:30, end:90) represents an event from 9:30am to 10:30am. The events should be rendered in a container that is 620px wide (600px + 10px padding on the left/right) and 720px (the day will end at 9pm). The styling of the events should match the attached screenshot.

You may structure your code however you like, but you must implement the following function in the global namespace. The function takes in an array of events and will lay out the events according to the above description.

function layOutDay(events) {}
This function will be invoked from the console for testing purposes. If it cannot be invoked, the submission will be rejected.

In your submission, please implement the calendar with the following input:

[ {start: 30, end: 150}, {start: 540, end: 600}, {start: 560, end: 620}, {start: 610, end: 670} ];

FAQ
Are frameworks such as JQuery, MooTools, etc. allowed? Yes, but please include the file with your source code.
Is there a maximum bound on the number of events? You can assume a maximum of 100 events for rendering reasons, but your solution should be generalized.
What browsers need to be supported? Your solution should work in all modern standards-compliant browsers.
Does my solution need to match the image pixel for pixel? No, we will not be testing for pixel matching.
How will you be testing my solution? We will be running tests from the browser console by invoking the layOutDay() function. Your solution should not require a local web server (e.g. run from localhost) or have any other dependencies besides your html/css/js.

#### Facebook 2:

Question: How would you flatten an array in JavaScript?

Answer: flatten of an array means, if one or more array elements are also array, you will took out those elements and you will have a plain array. For example, if you if array is like [1, 2, [3, 4], [5, [6, 7]], 8] your flatten array would be [1, 2, 3, 4, 5, 6, 7, 8]

#### APPLE:

Given a node from a DOM tree find the node in the same position from an identical DOM tree.

#### Google 1:

Question: How would you flatten an array in JavaScript?

Answer: flatten of an array means, if one or more array elements are also array, you will took out those elements and you will have a plain array. For example, if you if array is like [1, 2, [3, 4], [5, [6, 7]], 8] your flatten array would be [1, 2, 3, 4, 5, 6, 7, 8]

#### Google 2:

Alex is standing on the top left cell (1,1) of a n*m table. The table has n rows and m columns. Initially, he is facing its right cell. He moves on the table in the following way:

>He moves one step forward.
>He turns to his right
>While moving forward, if he would go out of the table or reach a visited cell, he turns to his right.

He moves in the table as much as he can. Can you find out the number of cells he visits before he stops?

For example, given a 9x9 grid, the following would be his moves. The number on each cell represents the step he would land on that particular cell.
1 2 55 54 51 50 47 46 45
4 3 56 53 52 49 48 43 44
5 6 57 58 79 78 77 42 41
8 7 60 59 80 75 76 39 40
9 10 61 62 81 74 73 38 37
12 11 64 63 68 69 72 35 36
13 14 65 66 67 70 71 34 33
16 15 20 21 24 25 28 29 32
17 18 19 22 23 26 27 30 31

Input:
The first line of the input contains two integer numbers n and m.
n and m are between 1 and 100.

Output:
Print an integer to the output being the answer of the test.

Sample input #00:
3 3

Sample output #00:
9

Sample input #01:
7 4

Sample output #01:
18

从这些面试题可以看出的是, 前端工程师也是程序员, 面试同样逃不出各种算法和数据结构的问题, 同时还会被问很多前端专业领域的东西, 引用Facebook HR给我发的一封邮件中的一句话:

The primary technical focus of these interviews will be JavaScript, HTML, and CSS, but at Facebook we are software engineers first, and web specialists second. This means that there may be a sufficient amount of focus on general computer science concepts like algorithms, design patterns, data structures, etc.

(翻译: 技术面试的主要会集中在JS, HTML和CSS. 但是在Facebook, 我们首先应该是一个软件工程师, 其次才是web的专业人员, 这意味着相当大的一部分面试会涉及到cs的知识比如算法, 设计模式和数据结构等等.)

另外想到一个之前面试Amazon的一道题, 觉得特别好. 写出来跟大家分享(大神们见笑了~):

问题: swap two integers without temp (交换两个整数, 不能用任何临时变量)

一般答案是这样的:

function swapNumb(a, b){
  console.log('before swap: ','a: ', a, 'b: ', b);
  b = b - a;
  a = a + b;
  b = a - b;
  console.log('after swap: ','a: ', a, 'b: ', b);  
}


> swapNumb(2, 3);
  a: 2 and b: 3
  a: 3 and b: 2

如果你这么写面试官会喜欢你:

function swapNumb(a, b){
  console.log("a: " + a + " and b: " + b);
  a = a ^ b;
  b = a ^ b;
  a = a ^ b;
  console.log("a: " + a + " and b: " + b);
}

> swapNumb(2, 3);
  a: 2 and b: 3
  a: 3 and b: 2

所以, 那些成天'所谓'的前端工程师们(只是针对某些朋友), 请不要再误导即将或者想要跨入这个行业的新同学们了. 那些想要涉及前端行业的同学们, 首先不要觉得跟其他语言程序员相比前端的门槛低, 更不要觉得前端是一个可有可无的存在. 前端(程序员)挣得多待遇好, 因为我们值这个价钱. 如果羡慕或有兴趣就请努力学习思考然后加入这个圈子里来.连一个花10秒钟google(baidu)一下就能知道答案的问题都要拿到知乎上来问的朋友们, 请不要毁了知乎这么好的一个平台, 另外那些什么东西都'大概明白'的朋友们, 请不要在以一个前端工程师的视角来说一些'毫无意义'的话.

咦, 气氛突然严肃了, 哈哈哈, 以上内容不针对任何人, 随便吐槽两句, 如果有不对的地方和不妥当的内容请指正, 谢谢!