经验

未分类

前端面试，阿里。

• 关于原型对象，prototype.
• 关于原型对象的继承与拓展（重点）
• 从底层开始编写幻灯片效果(很重要，注重实现行为的 思路)
• 控制布局：左边固定宽，右边自适应
• GIS 地图工具栏 浮动在上层，可自由拖动！（如果做到）

Ajax 和后台交互。
有个问题：
gdal这类dll可以直接用在server端。然而依赖gdal.dll的模块暂时无法 在server端成功运行。有以下几种原因，IIS没有权限获取gdal所依赖的dll，IIS并未设定在32位CPU下运行。

研究所面试，后端开发问题：
对委托的理解 Delegate (代理)
面向对象编程的理解，多态与接口。
软件开发的流程： ？？？

戴尔GUI笔试题

计算div在page中的绝对坐标，垂直水平布局
什么是闭包
OSI七层模型

closure 实现了

function f1(){
    var n = 999;
    nAdd = function(){
        n += 1;
    }
    function f2(){
        alert(n);
    }
    return f2;
}
// result refer to f2.
var result = f1();
result();
nAdd();
result();
//匿名函数包装不想暴露的变量
//tabview.js.  
(function(){
    var abc = 5;
    function TabView(cfg){
        this.a = cfg.a;
        this.b = cfg.b;
    }
    //这是一个简单的闭包。
    TabView.prototype = {
        c :function(){abc++;console.log(abc);},
        d :function(){abc--;console.log(abc);}
    }
    // 通过这样的做法，将TabView类暴露。变量和方法通过类来调用。。 
    window.TabView = TabView;
})()
var cfg = {a:11,b:22};
tab = new TabView(cfg);
tab.a --> 11
tab.c() --> 6  //实现了闭包，通过内部函数打印出了abc。在匿名函数执行之后 Tabview 函数还在内存中，匿名也没有消失，所以abc的值还可以操作。
//模块化和require.js( define 和 require方法 )
//定义模块mod1.js
define(function(){
    return {a:1};
}
//定义mod2.js
define(['mod1'],function(m1){
    var a,b=2,c=3;
    a = c*m1.a;
    return {a:a,b:b};
});
//js程序从require开始执行
//main.js
require(['mod2'],function(m2){
    alert(m2.a*m2.b);
})
//index.html 在html通过require.js来加载执行所有js文件，require会加载main所依赖的所有项。
<script src="js/require.js" data-main="js/main"></script>
//window自带弹窗的问题：阻塞进程。用模块化实现
//window.js
define(['jquery'],function($){
    function Window(){}
    Window.prototype = {
        alert:function(){},
        confirm:function(){},
        prompt:function(){}
    }
    return {
        Window:Window
    }
    //export Window类。
});
//main.js
require.config({
    paths:{
        jquery:'jquery-1.11.0.min.js'
    }
});
require(['jquery','window'],function($,w){
    $("#a").click(function(){
        new w.Window().alert();
    });
});

百度面试题

主要涉及到鼠标事件，获取对象在浏览器中的位置属性(left,top)，鼠标点击的位置(clientX,clientY)，跟踪mousemove事件的位置，实时计算div的位置变化和偏移。
原生js做过哪些东西? 鼠标拖动div，移动端优先大图浏览。。。

判断变量数据类型的方法
考察JS基本类型，事件代理（delegate实现过程），为啥要用代理，解决兼容性，IE和FF等事件绑定的差异？？，
模块化 requireJs，如何动态加载js
写代码：
可复用的事件绑定函数，并且控制事件捕捉。

var alertgreen = function(){
        alert("you click green");
    }
    function addEvent(element, evnt, funct){
      if (element.attachEvent)
       return element.attachEvent('on'+evnt, funct);
      else
        // capture 设置为true ，就是事件按照 捕捉形式传递？？
       return element.addEventListener(evnt, funct, true);
    }
    function cancelPropagation (event){ 
        event = window.event||event; 
        if( document.all){ 
            event.cancelBubble = true; 
        }else{ event.stopPropagation(); } 
    }
    addEvent($('.btn-green')[0],"click",alertgreen);
	// 对于同一个 button，先执行该执行的函数，再执行cancel函数，由此第一次click会触发 cancel，阻止传递！！！
	addEvent($('.btn-green')[0],"click",function(evt){cancelPropagation(evt)});

原型继承，扩展。
数组洗牌（遍历数组，循环内用随机数生成一个索引，交换两个数），数组去重复。

网站优化：
压缩css，js，合并文件（sprite），合并请求。利用缓存
缓存的问题：
第一级，浏览器缓存,最省资源的一种，减少请求（用header控制，expire，Etag，max-age）
第二层级，CDN缓存-静态页面， proxy缓存（动态页面，代理服务器支持缓存，Nginx，Apache，直接读缓存，都不需要执行动态脚本，使用方法：配置proxy_cache）
第三层级 文件缓存，分布式缓存（memcache，redis搭建集群）详情

彭晨贡献的百度三面题

JS:闭包?，数组操作，异步?（哪些地方用到异步了）；
HTML&CSS：position，display，css hack，HTML5新特性，语义化，存储，cookies和session，两列三列布局，水平垂直居中，盒子模型；
其他：输入URL浏览器和服务器发生什么（考了三次!）,前端性能优化（同样很重要！），打包，HTTP状态码。

PC贡献：滴滴前端面试：
一面
基础知识：原型链，闭包，事件模型
toString和ValueOf区别
实现一个动画效果，圆球先加速移动，然后匀速移动
页面没有加载成功怎么办
性能优化
项目中遇到了哪些问题

二面
CSS3的高级特性有哪些
CSS实现动画效果
使用CSS3实现一个钟的动画
AngularJS和JQuery什么区别，分别是什么思想？
移动端和PC端自适应的问题，怎么解决的？
实现一个3列布局，第一列50%，第二列和第三列分别是25%(百分比，表格，flexbox...其他的没有回答出来)
项目中遇到的什么难以解决的问题，怎么解决的

三面(HR面)
为什么要来滴滴？和一些国企和外企有什么区别？

在拉取到文档资源（document）后，需要构建dom树，并且开始渲染dom（这个时候样式文件可能还没有生效），在渲染之前浏览器还要知道html文档是什么编码的，可以在以下几个地方指定：
    HTTP 协议中
    <meta> 中的 charset 属性值

• HTTP缓存如何工作的，介绍下ETag
• eChart源码，如何使用原生JS实现一个图表
• 实现一个地图应用的难点在哪里，怎么优化
• JSONP的原理以及实现

jQuery如何工作：

原生JS中选择dom元素，注册事件，方式很多。。在jQuery或者其他js库中做了许多封装，例如jQuery中用 $('#btn-canvas').on('click',function(){ // do something！ }); Dom 2 level 的注册方式比如 addEventListener 相比在html里面直接写 可以对同一个事件多次响应，而不是覆盖前一个响应函数。 。

//jQuery 的一些api
$htmlCanvas.css({'width':100px,'height':50px});
$canvas.attr('width', pixelWidth);//设置元素属性
$form.on('submit', function formSubmit(evt) {
    evt.preventDefault();
    changeHash("");
});
$('#btn-save').on('click',function save(evt){
    var url = $canvas[0].toDataURL();
    if('download' in document.createElement('a')){
        this.href = url;
    }else {
        evt.preventDefault();
        window.open(url,'_blank','width=500,height=300,menubar=yes');
    }
});
//用构造函数声明对象
function Tune(song,artist){
    //只有通过this.name = song 才能将属性绑定到对象，供外部操作调用。
    var title = song;
    var artist = artist;
    this.getTitle = function(){
        return title;
    }
}
window.onload = function(){
    var hsong = new Tune("greeting","alex");
    Tune.prototype.newAtt = function(categoryName){
        this.category = categoryName;
    }
}
function newTune(song,artist,date){
    var date = date;
    this.getDate = function(){
        return date;
    }
    Tune.apply(this,arguments);
    this.getTuneParam = function(){
        return this.getTitle()+" was published in "+ this.getDate();
    }
}
window.onload = function(){
    newTune.prototype = new Tune();
    var t1 = new newTune("greeting","alex","1999");
}
//apply 是继承于Function的方法，函数内部有两个特殊对象，arguments 类数组对象（有callee属性）,callee属性是指针，指向拥有arguments对象的函数。
//so:
function facto(num){
    if(num<=1){
        return 1;
    }else{
        return num*arguments.callee(num-1);
    }
}
// 除了arguments，this引用的是函数执行的环境对象。
// 除了递归，可用循环实现. 输出fibonacci数列的第 n 项
function fibonacci(n){
    var arr = [0,0,1];
    if( n<3) return arr[n];
    else{
        for(var i = 3; i<=n;i++){
            arr[i] = arr[i-1] + arr[i-2];
        }
        return arr[n];
    }
}

大图列表展示：

主要是如何布局，一排四张图片，保持padding=2,计算 picWidth

<style>
       .img-container li {overflow:hidden;float:left;}
       .large{width:100%;height:100%;position:absolute;top:0px;left:0px;background-color:black}
    </style>
<ul class="img-container clearfix" id="container">
</ul>
<div class="large animated fadeInDown" id="large_container" style="display:none;">
<img id="large_img">
</div>
<script>
var render = function(){
    var tmpli = "";
    var winWidth = $(window).width();
    var picWidth = Math.floor（（winWidth-padding*3-scrollBarWidth）/4);
    for(){
        //生成图片列表
        tmpli += '<li data-id="i" class = ""  ><img src ="img/'+i+'.jpg"></li>';
    }
    $("#container").html(tmpl);
}
render();
//写一个load大图事件
var cid;
var wImage = $("#large_img");
var domImage = wImgae[0];
var zWin = $(window);
var loadImg = function(id,callback){
    $("#container").css({heigth:zWin.height(),'overflow':'hidden'});
    $('#large_container').css({
            width:zWin.width(),
            height:zWin.height()
            //top:$(window).scrollTop()
        }).show();
    var imgsrc = 'img/'+id+'.large.jpg';
    var ImageObj = new Image();
    ImageObj.src = imgsrc;
    ImageObj.onload = function(){
        var w = this.width;
        var h = this.height;
        var winWidth = zWin.width();
        var winHeight = zWin.height();
        //检测load 的图像宽高，如果是竖立的，则对height设定winHeight，width自动。
    }
}
//jQuery 的事件绑定 bind live delegate 。 为什么用delegate，因为可能存在li还没有生成，我事先需要绑定事件。delegate 是对父元素进行绑定,这是性能较好的做法。delegate函数的几个参数(selector,evttype,callback).
$('#container').delegate('li','tap',function(){
    //获取当前tap 的li，拿到data-id属性，传递给loadImg函数
    var _id = cid = $(this).attr('data-id');
    loadImg(_id);
});
//隐藏大图
$('#large_container').tap(function(){
	$('#container').css({height:'auto','overflow':'auto'})
	$('#large_container').hide();
});
//
$('#large_container').mousedown(function(e){
    e.preventDefault();
});
// 题外话： JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数
$('a').live('click', function() { alert("That tickles!") }); 
</script>

基于公司产品与平台二次开发。编写所属模块的设计配置文档。
熟练掌握 C# ，熟悉VS，熟练掌握JavaEE ?? 掌握html、ajax。 熟练掌握SQL server，复杂的存储过程，sql编写和调试？？
熟练掌握git？？？ 面向对象分析设计能力，uml表达软件设计思路和软件架构？？UML 概念？？
SOA架构？？
只用过server。。

面试准备

从个人经历来看，研究生期间所做的项目以及找工作过程中所做的准备很重要。
第一就是研究生期间所做的项目，包括科研项目和系统开发项目。科研项目即涉及到科学数据处理，预处理、统计分析，算法实现等等，不要以为科研过程对于找工作没用。例如出租车数据的预处理，地图匹配的实现（泰为），OD的提取。R软件、Matlab的运用，对于数据分析的岗位都有加分。

第二是找工作过程中的准备：包括制作更新简历（根据职位描述完善），做题保持智商（根据笔试内容重点刷，总结解题思路），网申合适的岗位（看花眼，广撒网or定点），面试技巧（准备面试材料，技术基本概念，阐述项目经历，讨论项目细节）

简历制作：不用多说，直接找个例子说。

笔试面试，微软题很难，算法类，需要逻辑思维能力很强，实现能力很强，锲而不舍的精神，至少4、5轮。百度笔试题不难，面试层层递进，至少三轮技术面，需要对问题深入的理解，刨根问底。阿里题不难，但是没过。。
GIS类别的公司，问项目经验，泰为：道路交通相关的，拓扑、地图匹配、数据简化、数据库SQL，与专业紧密相关，需要一定的语言基础和能力；
不要随意放弃笔试的机会，在招聘季合理安排在校学习和外出面试的时间。和导师沟通好科研学习和找工作之间平衡。
保持学习状态、笔试、面试状态，做题，更新简历，强化基础知识

• nihao
• hello
• nimei