FE-interview

$HTML, HTTP,web 综合问题

常见排序算法的时间复杂度,空间复杂度

前端需要注意哪些 SEO

web 开发中会话跟踪的方法有哪些

<img>的title和alt有什么区别

doctype 是什么,举例常见 doctype 及特点

HTML 全局属性(global attribute)有哪些

什么是 web 语义化,有什么好处

HTTP method

从浏览器地址栏输入 url 到显示页面的步骤(以 HTTP 为例)

HTTP request 报文结构是怎样的

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: 2004年9月01日 13:24:52 GMT
name=qiu&age=25

HTTP response 报文结构是怎样的

HTTP/1.1 200 OK
Date: 2014年7月08日 05:28:43 GMT
Server: Apache/2
Last-Modified: 2004年9月01日 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: 2014年7月08日 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1
{"name": "qiu", "age": 25}

如何进行网站性能优化

什么是渐进增强

HTTP 状态码及其含义

$CSS 部分

CSS 选择器有哪些

css sprite 是什么,有什么优缺点

display: none;与visibility: hidden;的区别

css hack 原理及常用 hack

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno {
 color: red;
}
/* IE7 */
*:first-child + html #dos {
 color: red;
}
/* IE7, FF, Saf, Opera */
html > body #tres {
 color: red;
}
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro {
 color: red;
}
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco {
 color: red;
}
/* Safari 2-3 */
html[xmlns*=''] body:last-child #seis {
 color: red;
}
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete {
 color: red;
}
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {
 color: red;
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 #diez {
 color: red;
 }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis {
 color: red;
 }
}
/* Safari 2 - 3.1 */
html[xmlns*='']:root #trece {
 color: red;
}
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=''] #catorce {
 color: red;
}
/* Everything but IE6-8 */
:root * > #quince {
 color: red;
}
/* IE7 */
* + html #dieciocho {
 color: red;
}
/* Firefox only. 1+ */
#veinticuatro,
x:-moz-any-link {
 color: red;
}
/* Firefox 3.0+ */
#veinticinco,
x:-moz-any-link,
x:default {
 color: red;
}

/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue9円; }
/* IE7, IE8 */
#veinte { color/*\**/: blue9円; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

specified value,computed value,used value 计算方法

link与@import的区别

display: block;和display: inline;的区别

PNG,GIF,JPG 的区别及如何选

CSS 有哪些继承属性

IE6 浏览器有哪些常见的 bug,缺陷或者与标准不一致的地方,如何解决

.target {
 min-height: 100px;
 height: auto !important;
 height: 100px; // IE6下内容高度超过会自动扩展高度
}

<style type="text/css">
.outer {
 width: 215px;
 height: 100px;
 border: 1px solid red;
 overflow: auto;
 position: relative; /* 修复bug */
}
.inner {
 width: 100px;
 height: 200px;
 background-color: purple;
 position: relative;
}
</style>
<div class="outer">
 <div class="inner"></div>
</div>

<style type="text/css">
.p:hover,
.hover {
 background: purple;
}
</style>
<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>
<script type="text/javascript">
function addClass(elem, cls) {
 if (elem.className) {
 elem.className += ' ' + cls;
 } else {
 elem.className = cls;
 }
}
function removeClass(elem, cls) {
 var className = ' ' + elem.className + ' ';
 var reg = new RegExp(' +' + cls + ' +', 'g');
 elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}
var target = document.getElementById('target');
if (target.attachEvent) {
 target.attachEvent('onmouseenter', function () {
 addClass(target, 'hover');
 });
 target.attachEvent('onmouseleave', function () {
 removeClass(target, 'hover');
 })
}
</script>

.opacity {
 opacity: 0.4
 filter: alpha(opacity=60); /* for IE5-7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

 display: inline-block;
 *display: inline;
 *zoom: 1;

容器包含若干浮动元素时如何清理(包含)浮动

/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
* contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block:可以防止容器和
* 子元素top-margin折叠,这样能使清理效果与BFC,IE6/7
* zoom: 1;一致
**/
.clearfix:before,
.clearfix:after {
 content: " "; /* 1 */
 display: table; /* 2 */
}
.clearfix:after {
 clear: both;
}
/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
 *zoom: 1;
}

什么是 FOUC?如何避免

如何创建块级格式化上下文(block formatting context),BFC 有什么用

display,float,position 的关系

外边距折叠(collapsing margins)

如何确定一个元素的包含块(containing block)

stacking context,布局规则

如何水平居中一个元素

<body>
 <div class="content">
 aaaaaa aaaaaa a a a a a a a a
 </div>
</body>
<style>
 body {
 background: #DDD;
 text-align: center; /* 3 */
 }
 .content {
 width: 500px; /* 1 */
 text-align: left; /* 3 */
 margin: 0 auto; /* 2 */
 background: purple;
 }
</style>

<body>
 <div class="content">
 aaaaaa aaaaaa a a a a a a a a
 </div>
</body>
<style>
 body {
 background: #DDD;
 }
 .content {
 width: 500px; /* 1 */
 float: left;
 position: relative; /* 2 */
 left: 50%; /* 3 */
 margin-left: -250px; /* 4 */
 background-color: purple;
 }
</style>

<body>
 <div class="content">
 aaaaaa aaaaaa a a a a a a a a
 </div>
</body>
<style>
 body {
 background: #DDD;
 position: relative;
 }
 .content {
 width: 800px;
 position: absolute;
 left: 50%;
 margin-left: -400px;
 background-color: purple;
 }
</style>

<body>
 <div class="content">
 aaaaaa aaaaaa a a a a a a a a
 </div>
</body>
<style>
 body {
 background: #DDD;
 position: relative;
 }
 .content {
 width: 800px;
 position: absolute;
 margin: 0 auto;
 left: 0;
 right: 0;
 background-color: purple;
 }
</style>

如何竖直居中一个元素

<p class="text">center text</p>
<style>
.text {
 line-height: 200px;
}
</style>

$javascript 概念部分

DOM 元素 e 的 e.getAttribute(propName)和 e.propName 有什么区别和联系

offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

XMLHttpRequest 通用属性和方法

focus/blur 与 focusin/focusout 的区别与联系

mouseover/mouseout 与 mouseenter/mouseleave 的区别与联系

<div id="target"><span>test</span></div>
<script type="text/javascript">
var target = document.getElementById('target');
if (target.addEventListener) {
 target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
 target.attachEvent('onmouseout', mouseoutHandler);
}
function mouseoutHandler(e) {
 e = e || window.event;
 var target = e.target || e.srcElement;
 // 判断移出鼠标的元素是否为目标元素
 if (target.id !== 'target') {
 return;
 }
 // 判断鼠标是移出元素还是移到子元素
 var relatedTarget = event.relatedTarget || e.toElement;
 while (relatedTarget !== target
 && relatedTarget.nodeName.toUpperCase() !== 'BODY') {
 relatedTarget = relatedTarget.parentNode;
 }
 // 如果相等,说明鼠标在元素内部移动
 if (relatedTarget === target) {
 return;
 }
 // 执行需要操作
 //alert('鼠标移出');
}
</script>

sessionStorage,localStorage,cookie 区别

javascript 跨域通信

javascript 有哪几种数据类型

什么闭包,闭包有什么用

javascript 有哪几种方法定义函数

应用程序存储和离线 web 应用

CACHE MANIFEST
CACHE:
myapp.html
myapp.css
myapp.js
FALLBACK:
videos/ offline_help.html
NETWORK:
cgi/

客户端存储 localStorage 和 sessionStorage

localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x
// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
 var name = localStorage.key(i);
 var value = localStorage.getItem(name);
}
localStorage.removeItem('x'); // remove x
localStorage.clear(); // remove all data

cookie 及其操作

document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';
document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值,需要使用相同的名字、路径和域,新的值
// 来设置cookie,同样的方法可以用来改变有效期
// 设置max-age为0可以删除指定cookie
//读取cookie,访问document.cookie返回键值对组成的字符串,
//不同键值对之间用'; '分隔。通过解析获得需要的值

javascript 有哪些方法定义对象

===运算符判断相等的流程是怎样的

==运算符判断相等的流程是怎样的

对象到字符串的转换步骤

对象到数字的转换步骤

1. 如果对象有valueOf()方法并且返回元素值,javascript将返回值转换为数字作为结果
2. 否则,如果对象有toString()并且返回原始值,javascript将返回结果转换为数字作为结果
3. 否则,throws a TypeError

<,>,<=,>=的比较规则

+运算符工作流程

函数内部 arguments 变量有哪些特性,有哪些属性,如何将它转换为数组

DOM 事件模型是如何的,编写一个 EventUtil 工具类实现事件管理兼容

/**
 * 跨浏览器事件处理工具。只支持冒泡。不支持捕获
 * @author (qiu_deqing@126.com)
 */
var EventUtil = {
 getEvent: function (event) {
 return event || window.event;
 },
 getTarget: function (event) {
 return event.target || event.srcElement;
 },
 // 返回注册成功的监听器,IE中需要使用返回值来移除监听器
 on: function (elem, type, handler) {
 if (elem.addEventListener) {
 elem.addEventListener(type, handler, false);
 return handler;
 } else if (elem.attachEvent) {
 var wrapper = function () {
 var event = window.event;
 event.target = event.srcElement;
 handler.call(elem, event);
 };
 elem.attachEvent('on' + type, wrapper);
 return wrapper;
 }
 },
 off: function (elem, type, handler) {
 if (elem.removeEventListener) {
 elem.removeEventListener(type, handler, false);
 } else if (elem.detachEvent) {
 elem.detachEvent('on' + type, handler);
 }
 },
 preventDefault: function (event) {
 if (event.preventDefault) {
 event.preventDefault();
 } else if ('returnValue' in event) {
 event.returnValue = false;
 }
 },
 stopPropagation: function (event) {
 if (event.stopPropagation) {
 event.stopPropagation();
 } else if ('cancelBubble' in event) {
 event.cancelBubble = true;
 }
 },
 /**
 * keypress事件跨浏览器获取输入字符
 * 某些浏览器在一些特殊键上也触发keypress,此时返回null
 **/
 getChar: function (event) {
 if (event.which == null) {
 return String.fromCharCode(event.keyCode); // IE
 }
 else if (event.which != 0 && event.charCode != 0) {
 return String.fromCharCode(event.which); // the rest
 }
 else {
 return null; // special key
 }
 }
};

评价一下三种方法实现继承的优缺点,并改进

function Shape() {}
function Rect() {}
// 方法1
Rect.prototype = new Shape();
// 方法2
Rect.prototype = Shape.prototype;
// 方法3
Rect.prototype = Object.create(Shape.prototype);
Rect.prototype.area = function () {
 // do something
};

function Rect() {
 Shape.call(this);
}

function create(obj) {
 if (Object.create) {
 return Object.create(obj);
 }
 function f() {};
 f.prototype = obj;
 return new f();
}

$javascript 编程部分

请用原生 js 实现一个函数,给页面制定的任意一个元素添加一个透明遮罩(透明度可变,默认 0.2),使这个区域点击无效,要求兼容 IE8+及各主流浏览器,遮罩层效果如下图所示:

<style>
#target {
 width: 200px;
 height: 300px;
 margin: 40px;
 background-color: tomato;
}
</style>
<div id="target"></div>
<script>
function addMask(elem, opacity) {
 opacity = opacity || 0.2;
 var rect = elem.getBoundingClientRect();
 var style = getComputedStyle(elem, null);
 var mask = document.createElement('div');
 mask.style.position = 'absolute';
 var marginLeft = parseFloat(style.marginLeft);
 mask.style.left = (elem.offsetLeft - marginLeft) + 'px';
 var marginTop = parseFloat(style.marginTop);
 mask.style.top = (elem.offsetTop - marginTop) + 'px';
 mask.style.zIndex = 9999;
 mask.style.opacity = '' + opacity;
 mask.style.backgroundColor = '#000';
 mask.style.width = (parseFloat(style.marginLeft) +
 parseFloat(style.marginRight) + rect.width) + 'px';
 mask.style.height = (parseFloat(style.marginTop) +
 parseFloat(style.marginBottom) + rect.height) + 'px';
 elem.parentNode.appendChild(mask);
}
var target = document.getElementById('target');
addMask(target);
target.addEventListener('click', function () {
 console.log('click');
}, false);
</script>

请用代码写出(今天是星期 x)其中 x 表示当天是星期几,如果当天是星期一,输出应该是"今天是星期一"

var days = ['日','一','二','三','四','五','六'];
var date = new Date();
console.log('今天是星期' + days[date.getDay()]);

下面这段代码想要循环延时输出结果 0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果

for (var i = 0; i < 5; ++i) {
 setTimeout(function () {
 console.log(i + ' ');
 }, 100);
}

for (var i = 0; i < 5; ++i) {
 (function (i) {
 setTimeout(function () {
 console.log(i + ' ');
 }, 100);
 }(i));
}

现有一个 Page 类,其原型对象上有许多以 post 开头的方法(如 postMsg);另有一拦截函数 chekc,只返回 ture 或 false.请设计一个函数,该函数应批量改造原 Page 的 postXXX 方法,在保留其原有功能的同时,为每个 postXXX 方法增加拦截验证功能,当 chekc 返回 true 时继续执行原 postXXX 方法,返回 false 时不再执行原 postXXX 方法

function Page() {}
Page.prototype = {
 constructor: Page,
 postA: function (a) {
 console.log('a:' + a);
 },
 postB: function (b) {
 console.log('b:' + b);
 },
 postC: function (c) {
 console.log('c:' + c);
 },
 check: function () {
 return Math.random() > 0.5;
 }
}
function checkfy(obj) {
 for (var key in obj) {
 if (key.indexOf('post') === 0 && typeof obj[key] === 'function') {
 (function (key) {
 var fn = obj[key];
 obj[key] = function () {
 if (obj.check()) {
 fn.apply(obj, arguments);
 }
 };
 }(key));
 }
 }
} // end checkfy()
checkfy(Page.prototype);
var obj = new Page();
obj.postA('checkfy');
obj.postB('checkfy');
obj.postC('checkfy');

完成下面的 tool-tip

编写 javascript 深度克隆函数 deepClone

function deepClone(obj) {
 var _toString = Object.prototype.toString;
 // null, undefined, non-object, function
 if (!obj || typeof obj !== 'object') {
 return obj;
 }
 // DOM Node
 if (obj.nodeType && 'cloneNode' in obj) {
 return obj.cloneNode(true);
 }
 // Date
 if (_toString.call(obj) === '[object Date]') {
 return new Date(obj.getTime());
 }
 // RegExp
 if (_toString.call(obj) === '[object RegExp]') {
 var flags = [];
 if (obj.global) { flags.push('g'); }
 if (obj.multiline) { flags.push('m'); }
 if (obj.ignoreCase) { flags.push('i'); }
 return new RegExp(obj.source, flags.join(''));
 }
 var result = Array.isArray(obj) ? [] :
 obj.constructor ? new obj.constructor() : {};
 for (var key in obj ) {
 result[key] = deepClone(obj[key]);
 }
 return result;
}
function A() {
 this.a = a;
}
var a = {
 name: 'qiu',
 birth: new Date(),
 pattern: /qiu/gim,
 container: document.body,
 hobbys: ['book', new Date(), /aaa/gim, 111]
};
var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);

补充代码,鼠标单击 Button1 后将 Button1 移动到 Button2 的后面

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>TEst</title>
</head>
<body>
<div>
 <input type="button" id ="button1" value="1" />
 <input type="button" id ="button2" value="2" />
</div>
<script type="text/javascript">
 var btn1 = document.getElementById('button1');
 var btn2 = document.getElementById('button2');
 addListener(btn1, 'click', function (event) {
 btn1.parentNode.insertBefore(btn2, btn1);
 });
 function addListener(elem, type, handler) {
 if (elem.addEventListener) {
 elem.addEventListener(type, handler, false);
 return handler;
 } else if (elem.attachEvent) {
 function wrapper() {
 var event = window.event;
 event.target = event.srcElement;
 handler.call(elem, event);
 }
 elem.attachEvent('on' + type, wrapper);
 return wrapper;
 }
 }
</script>
</body>
</html>

网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示"×ばつ 年还剩 ×ばつ 天 ×ばつ 时 ×ばつ 分 ×ばつ 秒"

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>TEst</title>
</head>
<body>
 <span id="target"></span>
<script type="text/javascript">
 // 为了简化。每月默认30天
 function getTimeString() {
 var start = new Date();
 var end = new Date(start.getFullYear() + 1, 0, 1);
 var elapse = Math.floor((end - start) / 1000);
 var seconds = elapse % 60 ;
 var minutes = Math.floor(elapse / 60) % 60;
 var hours = Math.floor(elapse / (60 * 60)) % 24;
 var days = Math.floor(elapse / (60 * 60 * 24)) % 30;
 var months = Math.floor(elapse / (60 * 60 * 24 * 30)) % 12;
 var years = Math.floor(elapse / (60 * 60 * 24 * 30 * 12));
 return start.getFullYear() + '年还剩' + years + '年' + months + '月' + days + '日'
 + hours + '小时' + minutes + '分' + seconds + '秒';
 }
 function domText(elem, text) {
 if (text == undefined) {
 if (elem.textContent) {
 return elem.textContent;
 } else if (elem.innerText) {
 return elem.innerText;
 }
 } else {
 if (elem.textContent) {
 elem.textContent = text;
 } else if (elem.innerText) {
 elem.innerText = text;
 } else {
 elem.innerHTML = text;
 }
 }
 }
 var target = document.getElementById('target');
 setInterval(function () {
 domText(target, getTimeString());
 }, 1000)
</script>
</body>
</html>

完成一个函数,接受数组作为参数,数组元素为整数或者数组,数组元素包含整数或数组,函数返回扁平化后的数组

 var data = [1, [2, [ [3, 4], 5], 6]];
 function flat(data, result) {
 var i, d, len;
 for (i = 0, len = data.length; i < len; ++i) {
 d = data[i];
 if (typeof d === 'number') {
 result.push(d);
 } else {
 flat(d, result);
 }
 }
 }
 var result = [];
 flat(data, result);
 console.log(result);

如何判断一个对象是否为数组

/**
 * 判断一个对象是否是数组,参数不是对象或者不是数组,返回false
 *
 * @param {Object} arg 需要测试是否为数组的对象
 * @return {Boolean} 传入参数是数组返回true,否则返回false
 */
function isArray(arg) {
 if (typeof arg === 'object') {
 return Object.prototype.toString.call(arg) === '[object Array]';
 }
 return false;
}

请评价以下事件监听器代码并给出改进意见

if (window.addEventListener) {
 var addListener = function (el, type, listener, useCapture) {
 el.addEventListener(type, listener, useCapture);
 };
}
else if (document.all) {
 addListener = function (el, type, listener) {
 el.attachEvent('on' + type, function () {
 listener.apply(el);
 });
 };
}

var addListener;
if (window.addEventListener) {
 addListener = function (el, type, listener, useCapture) {
 el.addEventListener(type, listener, useCapture);
 return listener;
 };
}
else if (window.attachEvent) {
 addListener = function (el, type, listener) {
 // 标准化this,event,target
 var wrapper = function () {
 var event = window.event;
 event.target = event.srcElement;
 listener.call(el, event);
 };
 el.attachEvent('on' + type, wrapper);
 return wrapper;
 // 返回wrapper。调用者可以保存,以后remove
 };
}

如何判断一个对象是否为函数

/**
 * 判断对象是否为函数,如果当前运行环境对可调用对象(如正则表达式)
 * 的typeof返回'function',采用通用方法,否则采用优化方法
 *
 * @param {Any} arg 需要检测是否为函数的对象
 * @return {boolean} 如果参数是函数,返回true,否则false
 */
function isFunction(arg) {
 if (arg) {
 if (typeof (/./) !== 'function') {
 return typeof arg === 'function';
 } else {
 return Object.prototype.toString.call(arg) === '[object Function]';
 }
 } // end if
 return false;
}

编写一个函数接受 url 中 query string 为参数,返回解析后的 Object,query string 使用 application/x-www-form-urlencoded 编码

/**
 * 解析query string转换为对象,一个key有多个值时生成数组
 *
 * @param {String} query 需要解析的query字符串,开头可以是?,
 * 按照application/x-www-form-urlencoded编码
 * @return {Object} 参数解析后的对象
 */
function parseQuery(query) {
 var result = {};
 // 如果不是字符串返回空对象
 if (typeof query !== 'string') {
 return result;
 }
 // 去掉字符串开头可能带的?
 if (query.charAt(0) === '?') {
 query = query.substring(1);
 }
 var pairs = query.split('&');
 var pair;
 var key, value;
 var i, len;
 for (i = 0, len = pairs.length; i < len; ++i) {
 pair = pairs[i].split('=');
 // application/x-www-form-urlencoded编码会将' '转换为+
 key = decodeURIComponent(pair[0]).replace(/\+/g, ' ');
 value = decodeURIComponent(pair[1]).replace(/\+/g, ' ');
 // 如果是新key,直接添加
 if (!(key in result)) {
 result[key] = value;
 }
 // 如果key已经出现一次以上,直接向数组添加value
 else if (isArray(result[key])) {
 result[key].push(value);
 }
 // key第二次出现,将结果改为数组
 else {
 var arr = [result[key]];
 arr.push(value);
 result[key] = arr;
 } // end if-else
 } // end for
 return result;
}
function isArray(arg) {
 if (arg && typeof arg === 'object') {
 return Object.prototype.toString.call(arg) === '[object Array]';
 }
 return false;
}
/**
console.log(parseQuery('sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8'));
 */

解析一个完整的 url,返回 Object 包含域与 window.location 相同

/**
 * 解析一个url并生成window.location对象中包含的域
 * location:
 * {
 * href: '包含完整的url',
 * origin: '包含协议到pathname之前的内容',
 * protocol: 'url使用的协议,包含末尾的:',
 * username: '用户名', // 暂时不支持
 * password: '密码', // 暂时不支持
 * host: '完整主机名,包含:和端口',
 * hostname: '主机名,不包含端口'
 * port: '端口号',
 * pathname: '服务器上访问资源的路径/开头',
 * search: 'query string,?开头',
 * hash: '#开头的fragment identifier'
 * }
 *
 * @param {string} url 需要解析的url
 * @return {Object} 包含url信息的对象
 */
function parseUrl(url) {
 var result = {};
 var keys = ['href', 'origin', 'protocol', 'host',
 'hostname', 'port', 'pathname', 'search', 'hash'];
 var i, len;
 var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/;
 var match = regexp.exec(url);
 if (match) {
 for (i = keys.length - 1; i >= 0; --i) {
 result[keys[i]] = match[i] ? match[i] : '';
 }
 }
 return result;
}

完成函数 getViewportSize 返回指定窗口的视口尺寸

/**
* 查询指定窗口的视口尺寸,如果不指定窗口,查询当前窗口尺寸
**/
function getViewportSize(w) {
 w = w || window;
 // IE9及标准浏览器中可使用此标准方法
 if ('innerHeight' in w) {
 return {
 width: w.innerWidth,
 height: w.innerHeight
 };
 }
 var d = w.document;
 // IE 8及以下浏览器在标准模式下
 if (document.compatMode === 'CSS1Compat') {
 return {
 width: d.documentElement.clientWidth,
 height: d.documentElement.clientHeight
 };
 }
 // IE8及以下浏览器在怪癖模式下
 return {
 width: d.body.clientWidth,
 height: d.body.clientHeight
 };
}

完成函数 getScrollOffset 返回窗口滚动条偏移量

/**
 * 获取指定window中滚动条的偏移量,如未指定则获取当前window
 * 滚动条偏移量
 *
 * @param {window} w 需要获取滚动条偏移量的窗口
 * @return {Object} obj.x为水平滚动条偏移量,obj.y为竖直滚动条偏移量
 */
function getScrollOffset(w) {
 w = w || window;
 // 如果是标准浏览器
 if (w.pageXOffset != null) {
 return {
 x: w.pageXOffset,
 y: w.pageYOffset
 };
 }
 // 老版本IE,根据兼容性不同访问不同元素
 var d = w.document;
 if (d.compatMode === 'CSS1Compat') {
 return {
 x: d.documentElement.scrollLeft,
 y: d.documentElement.scrollTop
 }
 }
 return {
 x: d.body.scrollLeft,
 y: d.body.scrollTop
 };
}

现有一个字符串 richText,是一段富文本,需要显示在页面上.有个要求,需要给其中只包含一个 img 元素的 p 标签增加一个叫 pic 的 class.请编写代码实现.可以使用 jQuery 或 KISSY.

function richText(text) {
 var div = document.createElement('div');
 div.innerHTML = text;
 var p = div.getElementsByTagName('p');
 var i, len;
 for (i = 0, len = p.length; i < len; ++i) {
 if (p[i].getElementsByTagName('img').length === 1) {
 p[i].classList.add('pic');
 }
 }
 return div.innerHTML;
}

请实现一个 Event 类,继承自此类的对象都会拥有两个方法 on,off,once 和 trigger

function Event() {
 if (!(this instanceof Event)) {
 return new Event();
 }
 this._callbacks = {};
}
Event.prototype.on = function (type, handler) {
 this_callbacks = this._callbacks || {};
 this._callbacks[type] = this.callbacks[type] || [];
 this._callbacks[type].push(handler);
 return this;
};
Event.prototype.off = function (type, handler) {
 var list = this._callbacks[type];
 if (list) {
 for (var i = list.length; i >= 0; --i) {
 if (list[i] === handler) {
 list.splice(i, 1);
 }
 }
 }
 return this;
};
Event.prototype.trigger = function (type, data) {
 var list = this._callbacks[type];
 if (list) {
 for (var i = 0, len = list.length; i < len; ++i) {
 list[i].call(this, data);
 }
 }
};
Event.prototype.once = function (type, handler) {
 var self = this;
 function wrapper() {
 handler.apply(self, arguments);
 self.off(type, wrapper);
 }
 this.on(type, wrapper);
 return this;
};

编写一个函数将列表子元素顺序反转

<ul id="target">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>
<script>
 var target = document.getElementById('target');
 var i;
 var frag = document.createDocumentFragment();
 for (i = target.children.length - 1; i &gt;= 0; --i) {
 frag.appendChild(target.children[i]);
 }
 target.appendChild(frag);
</script>

以下函数的作用是?空白区域应该填写什么

// define
(function (window) {
 function fn(str) {
 this.str = str;
 }
 fn.prototype.format = function () {
 var arg = __1__;
 return this.str.replace(__2__, function (a, b) {
 return arg[b] || '';
 });
 };
 window.fn = fn;
})(window);
// use
(function () {
 var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
 console.log(t.format('http://www.alibaba.com', 'Alibaba', 'Welcome'));
})();

编写一个函数实现 form 的序列化(即将一个表单中的键值序列化为可提交的字符串)

<form id="target">
 <select name="age">
 <option value="aaa">aaa</option>
 <option value="bbb" selected>bbb</option>
 </select>
 <select name="friends" multiple>
 <option value="qiu" selected>qiu</option>
 <option value="de">de</option>
 <option value="qing" selected>qing</option>
 </select>
 <input name="name" value="qiudeqing">
 <input type="password" name="password" value="11111">
 <input type="hidden" name="salery" value="3333">
 <textarea name="description">description</textarea>
 <input type="checkbox" name="hobby" checked value="football">Football
 <input type="checkbox" name="hobby" value="basketball">Basketball
 <input type="radio" name="sex" checked value="Female">Female
 <input type="radio" name="sex" value="Male">Male
</form>
<script>
/**
 * 将一个表单元素序列化为可提交的字符串
 *
 * @param {FormElement} form 需要序列化的表单元素
 * @return {string} 表单序列化后的字符串
 */
function serializeForm(form) {
 if (!form || form.nodeName.toUpperCase() !== 'FORM') {
 return;
 }
 var result = [];
 var i, len;
 var field, fieldName, fieldType;
 for (i = 0, len = form.length; i < len; ++i) {
 field = form.elements[i];
 fieldName = field.name;
 fieldType = field.type;
 if (field.disabled || !fieldName) {
 continue;
 } // enf if
 switch (fieldType) {
 case 'text':
 case 'password':
 case 'hidden':
 case 'textarea':
 result.push(encodeURIComponent(fieldName) + '=' +
 encodeURIComponent(field.value));
 break;
 case 'radio':
 case 'checkbox':
 if (field.checked) {
 result.push(encodeURIComponent(fieldName) + '=' +
 encodeURIComponent(field.value));
 }
 break;
 case 'select-one':
 case 'select-multiple':
 for (var j = 0, jLen = field.options.length; j < jLen; ++j) {
 if (field.options[j].selected) {
 result.push(encodeURIComponent(fieldName) + '=' +
 encodeURIComponent(field.options[j].value || field.options[j].text));
 }
 } // end for
 break;
 case 'file':
 case 'submit':
 break; // 是否处理?
 default:
 break;
 } // end switch
 } // end for
 return result.join('&');
}
var form = document.getElementById('target');
console.log(serializeForm(form));
</script>

使用原生 javascript 给下面列表中的 li 节点绑定点击事件,点击时创建一个 Object 对象,兼容 IE 和标准浏览器

<ul id="nav">
 <li><a href="http://11111">111</a></li>
 <li><a href="http://2222">222</a></li>
 <li><a href="http://333">333</a></li>
 <li><a href="http://444">444</a></li>
</ul>
Object:
{
 "index": 1,
 "name": "111",
 "link": "http://1111"
}

var EventUtil = {
 getEvent: function (event) {
 return event || window.event;
 },
 getTarget: function (event) {
 return event.target || event.srcElement;
 },
 // 返回注册成功的监听器,IE中需要使用返回值来移除监听器
 on: function (elem, type, handler) {
 if (elem.addEventListener) {
 elem.addEventListener(type, handler, false);
 return handler;
 } else if (elem.attachEvent) {
 function wrapper(event) {
 return handler.call(elem, event);
 };
 elem.attachEvent('on' + type, wrapper);
 return wrapper;
 }
 },
 off: function (elem, type, handler) {
 if (elem.removeEventListener) {
 elem.removeEventListener(type, handler, false);
 } else if (elem.detachEvent) {
 elem.detachEvent('on' + type, handler);
 }
 },
 preventDefault: function (event) {
 if (event.preventDefault) {
 event.preventDefault();
 } else if ('returnValue' in event) {
 event.returnValue = false;
 }
 },
 stopPropagation: function (event) {
 if (event.stopPropagation) {
 event.stopPropagation();
 } else if ('cancelBubble' in event) {
 event.cancelBubble = true;
 }
 }
};
var DOMUtil = {
 text: function (elem) {
 if ('textContent' in elem) {
 return elem.textContent;
 } else if ('innerText' in elem) {
 return elem.innerText;
 }
 },
 prop: function (elem, propName) {
 return elem.getAttribute(propName);
 }
};
var nav = document.getElementById('nav');
EventUtil.on(nav, 'click', function (event) {
 var event = EventUtil.getEvent(event);
 var target = EventUtil.getTarget(event);
 var children = this.children;
 var i, len;
 var anchor;
 var obj = {};
 for (i = 0, len = children.length; i < len; ++i) {
 if (children[i] === target) {
 obj.index = i + 1;
 anchor = target.getElementsByTagName('a')[0];
 obj.name = DOMUtil.text(anchor);
 obj.link = DOMUtil.prop(anchor, 'href');
 }
 }
 alert('index: ' + obj.index + ' name: ' + obj.name +
 ' link: ' + obj.link);
});

有一个大数组,var a = ['1', '2', '3', ...];a 的长度是 100,内容填充随机整数的字符串.请先构造此数组 a,然后设计一个算法将其内容去重

 /**
 * 数组去重
 **/
 function normalize(arr) {
 if (arr && Array.isArray(arr)) {
 var i, len, map = {};
 for (i = arr.length; i >= 0; --i) {
 if (arr[i] in map) {
 arr.splice(i, 1);
 } else {
 map[arr[i]] = true;
 }
 }
 }
 return arr;
 }
 /**
 * 用100个随机整数对应的字符串填充数组。
 **/
 function fillArray(arr, start, end) {
 start = start == undefined ? 1 : start;
 end = end == undefined ? 100 : end;
 if (end <= start) {
 end = start + 100;
 }
 var width = end - start;
 var i;
 for (i = 100; i >= 1; --i) {
 arr.push('' + (Math.floor(Math.random() * width) + start));
 }
 return arr;
 }
 var input = [];
 fillArray(input, 1, 100);
 input.sort(function (a, b) {
 return a - b;
 });
 console.log(input);
 normalize(input);
 console.log(input);