前端开发--经验浅谈

背景：

1、6月15号左右在学校领完毕业证，18号来到广州，出来历练一番。2、不是很记得后台逻辑代码了，就选择了我目前相对而言比较擅长，又还比较熟悉的“前端开发”（我当时对前端的理解是h5+css。面试和工作后知道，这只是最基础的）。

初步：

明确目标：前端开发后，那几天都是网上在投简历，在智联、拉勾等软件上筛选广州天河区-->前端开发-->“应届毕业生”或“1-3年工作经验”。收到一家面试通知后，在网上熟悉了一些面试、笔试题，第二天赶到广州天河。面试一共前后花了4天时间，面试了8家公司左右。

第一家是一家金融投资的，整个公司只招一个前端，因为其实这个时候的我连html和css都记不太清了，觉得怕hold不住，第一家放弃，估计也不敢招我，但是当时和我聊了好久，可能是我说话、表达方面让别人觉得我技术还不错，所以，语言表达能力也是很重要的噢，学会自我推荐，（在什么技术都记不太清、margin和padding都分不太清的水平下，多亏自己语言表达能力还不错，让我拿到现在这家公司以及其他的offer）。

第二家是广州华软科技，面试官二话不说，首先拿了一套笔试题给我做，内容大概是：1、写个算法计算一栋大楼的重量；2、9*9乘法表；3、@media的用法；4、判断下列语句是真或假，!""，!12345;88==="88"（false）;88=="88"（true）; 5、js中数组的创建、读取、增加、修改。6、实现ajax交互的代码。当时什么都不知道的我，就写了一个css+html布局的题目。后来木有音讯。（必须说明：我当时几乎没做一点准备，因为之前本来打算提前去学校。囧，技术上几乎是“裸奔”来广州。面试的那几天被虐惨，所以，学弟学妹们面试前一定要做好充分的准备，才能有更好的、更完美的展现。面试没那么很容易，因为笔试真的感觉有些还蛮难的，js我当时也不会，click方法、function函数都不知道，不过现在我已经学会啦。）

后面还面试了几家公司，他们对前端的要求，大部分都是要会原生js，而且是特别熟练的。笔试题几乎全部js题目，当时真的是挺难过，感觉自己这水平就该先学好js再出来的，然后那两天狂补js的一些知识点。功夫不负有心人，当时把自己的毕业设计项目和我的毕业论文拷贝到我的U盘里 去面试，面试的公司没有笔试题，就是面谈，聊技术。问我一些相关的问题，记不太清了，我只记得后来，我跟他说，我可以给你看看我做的项目，我有拷贝到U盘里，然后面试官好像很感兴趣，就是我现在的老大。然后我用电脑打开的我的论文，包括一些项目图片，还有之前参加服创比赛做的UI设计图，他对我非常满意，说我可塑性强，符合他们的要求，因为这家公司做的产品是学院网站、系统等等，我当时毕设项目刚好是学院网站，于是说欢迎我来他们公司。后来也面试了2家，因为不是很满意，就没有考虑了。我现在每天上班都是走路，大概10分钟左右到公司，非常方面，关键是有一群特别好的同事，身边都是大神，非常照顾我，哈哈。

开始：

24号开始第一天上班：第一个任务是做一个系统首页，包括顶部图标、顶部导航、侧边栏菜单、内容、底部这些，刚开始基本的布局都不太会，做完顶部图标和导航后，发现出现元素浮动和对齐的问题，始终解决不了，很着急，然后问老大，这个问题怎么解决。他当时就教了我网页布局的知识，做网页第一步就是要分析页面结构，搭建好最基本的框架，用不同的背景色定义最基本的几个div。然后再慢慢地往这些div里面嵌套添加标签。顿时觉得恍然大悟，第二天上午完成了任务。慢慢地自己学会了怎么规范和快速的做界面。

网站兼容：这个之前在学校并没有考虑过的问题，在公司这就是前端要负责的任务，网站不仅要制作好更要兼容各式各样的浏览器，我现在在电脑上安装有google、360、firefox、IE。基本上做完一个页面就要用这4个浏览器测试，看是不是会出现页面样式错乱的问题，最关键的是要考虑IE7及以上的兼容问题，最经常因为代码不规范出现的不兼容是浮动问题，比如一个div中包含两个子div，一个用了float之后，另一个必须也要加上float，在IE里如果不加上就会错乱。还有很多例子，老大说，只要代码写得规范不是很容易出现不兼容问题，还有可以针对不同的浏览器应用不同样式。

分辨率：这个也是之前没有考虑过，公司的电脑是1920*1680的分辨率，要保证在1360和1280等这些分辨率下，也能显示正常，一般学院网站开发就是让中间的主体部分内容水平居中:margin:0 auto，背景图片background：url(  ) center no-repeat；一般设计师设计psd页面的时候会考虑这个问题，中间主体内容宽度不会超过1200px；

Jquery：刚来公司的时候，什么jquery都不会，show（）和hide（）这种最基础的也不会，当时感觉自己太笨，就在网上买了一本书，《锋利的jquery》，在公司有时间就看一点点。主要是靠同事教我，打开了我的jquery大门，首先是用google浏览器的f12打开 开发人员选项，有个console，可以在里面进行调试，比如选取某个元素$(".class"),enter键就会输出你选的那个元素，这样可以确保jquery应用的元素不会错。后来慢慢地就会了。现在可以自己实现网站和系统基本的jquery了噢，我感觉自己的逻辑能力有了提升。

浏览器：平常经常会运用f12，打开开发人员选项，调试页面，改样式，十分方便，相当于在浏览器中预览网页效果。我一般用google。

编辑器：hbuilder or webstorm;不建议用dreamweaver，当时刚进公司，在电脑安装了一个DW，敲代码时，总监看到了，说我怎么在用DW，也不知道什么原因，反正后来让我换了编辑器，介绍的那两个都是在公司前端开发常用的编辑器。

PhotoShop：前端对PS的要求挺高的噢，还好我当时在实验室某个寒假自学了ps。前端要会切图，在公司，首先是设计师设计好psd页面，然后发给我，用ps打开把有些元素，如小图标，某些渐变头部等等，背景透明的话保存png格式，这些切好的图片都是要“存储为web所用格式”，网站图片大小不宜过大，会导致加载速度慢。

数据交互：这段时间正准备学这方面的知识，然后逐渐想过渡到后端，开发部的同事准备教我ajax和json了。

结尾：

.net开发部的人都是有5年以上工作经验的，感觉自己特别受照顾，js不懂的问旁边的同事，他几乎是我的jquery启蒙老师。这两个月没找家里要生活费，还剩了一些资金，更主要的是学到了技术，开发规范，项目开发流程，公司运营流程，人际交往等等。由于只工作了短暂的时间，经验可能不是很足，暂时就分享这些。

附上当时总结的笔试题：

1.      function printArr(){

var arr=[1,2,3];

for(i=0;i

console.log(arr[i]);

}

}

Var arr=[4,5,6];

for(var i=0;i

console.log(arr[i]);

printArr();

}

上述代码会有什么样的输出？

 

2.      function wrapElements(arr){

var result = [],I,n;

for(i=0;n=arr.length;i

result[i] = function(){return arr[i];};

}

return result;

}

var wrapped = wrapElements({10,20,30,40,50});

var f = wrapped[0];

f();

这段程序输出什么？

 

3.      

aaa

请尽可能写出上例a标签的最终样式，如overflow为hidden

 

4.      用JS实现函数：接受字符串数组作为参数，去除数组中重复字符串

5. 

优化这段代码。