1.你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
2.知道css有个content属性吗?有什么作用?有什么应用?
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
==after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现==
3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
4.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗
5.Quirks模式是什么?它和Standards模式有什么区别
6.div+css的布局较table布局有什么优点
7.img的alt与title有何异同? strong与em的异同
8.你能描述一下渐进增强和优雅降级之间的不同吗
9.为什么利用多个域名来存储网站资源会更有效
10.请谈一下你对网页标准和标准制定机构重要性的理解
11.简述一下src与href的区别
12.知道的网页制作会用到的图片格式有哪些
13.知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗
14.你如何理解HTML结构的语义化
16.谈谈以前端角度出发做好SEO需要考虑什么
17.有哪项方式可以对一个DOM设置它的CSS样式
18.CSS都有哪些选择器
19.CSS选择器的优先级是怎么样定义的
20.CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内
21.超链接访问过后hover样式就不出现的问题是什么?如何解决
22.什么是Css Hack?ie6,7,8的hack分别是什么
#test{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px)
{ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /*chrome and safari*/
23.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗
24.什么是外边距重叠?重叠的结果是什么
25.rgba()和opacity的透明效果有什么不同
26.css中可以让文字在垂直和水平方向上重叠的两个属性是什么
27.如何垂直居中一个浮动元素
// 方法一:已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
28.px和em的区别
29.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处
30.display:none与visibility:hidden的区别是什么
31.CSS中link和@import的区别是
32.简介盒子模型
33.为什么要初始化样式
34.html语义化是什么
35.Doctype的作用?严格模式与混杂模式的区别
36.IE的双边距BUG:块级元素float后设置横向margin,ie6显示的margin比设置的较大
37.HTML与XHTML——二者有什么区别
38.html常见兼容性问题
IE5-8不支持opacity,
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
IE6不支持PNG透明背景,解决办法: IE6下使用gif图片
39.对WEB标准以及W3C的理解与认识
40.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义
41.CSS的盒子模型
42.如何居中div,如何居中一个浮动元素
43.列出display的值,说明他们的作用
44.position的值, relative和absolute定位原点是
45.absolute的containing block计算方式跟正常流有什么不同
1.CSS3有哪些新特性
2.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
3.本地存储(Local Storage)和cookies(储存在用户本地终端上的数据)之间的区别是什么?
4.如何实现浏览器内多个标签页之间的通信?
5.什么是响应式设计?
6.新的 HTML5 文档类型和字符集是?
HTML5文档类型:
HTML5使用的编码<meta charset=”UTF-8”>
7.HTML5 Canvas 元素有什么用?
8.HTML5 存储类型有什么区别?
9.CSS3新增伪类有那些?
元素的每个
元素
元素的每个
元素
元素的每个
元素
元素
元素
10.请描述一下cookies,sessionStorage和localStorage的区别?
11.如何在 HTML5 页面中嵌入音频
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
audio>
13.HTML5 引入什么新的表单属性
14.cookie在浏览器和服务器间来回传递,sessionStorage和localStorage区别
1.移动端常用类库及优缺点
2.Zepto库和JQ区别
1.javascript 的 typeof返回那些数据类型?
2.列举3种强制类型转换和2种隐式类型转换?
3.split()、join的区别
4.数组方法 pop、push、unshift、shift
5.事件绑定和普通事件有什么区别?
普通事件的方法
var btn = document.getElementById('hello');
btn.onclick = function(){
alert('hello');
}
btn.onclick = function(){
alert('2')
}
//输出 2
==执行上面的代码弹窗2==
事件绑定方式添加事件:
var btn = document.getElementById('hello');
btn.addEventListener('click',function(){
alert(1);
},false)
btn.addEventListener('click',function(){
alert(2);
},false);
==执行上面的代码会先 alert1 再 alert2 普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。addEventListener 不兼容低版本IE,普通事件无法取消,addEventLisntener 还支持事件冒泡+事件捕获==
6.IE 和 DOM 事件流的区别
7.IE 和标准下有哪些兼容性写法
var ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement || ev.target;
8.call 和 apply 的区别
9.b 继承 a 的方法
function A( age, name ){
this.age = age;
this.name = name;
}
A.prototype.show = function(){
alert('父级方法');
}
function B( age , name ,job ){
A.apply(this,arguments);
this.job = job;
}
B.prototype = new A();
var b = new A(14,'遐客行');
var a = new B(15,'朗霞','侠客');
//阻止事件冒泡
function stopBubble(e){
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ){
//因此它支持W3C的stopPropagation()
e.stopPropagation();
}else{
//否则,我们需要使用IE的方式来取消冒泡
window.event.cancelBubble = true;
}
}
function stopDefault(e){
//w3c
if ( e && e.preventDefault ){
e.preventDefault();
}else{
//IE
window.event.returnValue = false;
}
return false;
}
11.添加、删除、替换、插入到某个节点的方法
12.javascript 的本地对象,内置对象和宿主对象
13.window.onload 和 document ready 的区别
14.“= =” 和 “===”的不同
15.javascript 的同源策论
16.javascript 是一门什么样的语言,它有哪些特点?
17.javascript 的数据类型都有什么?
if ( typeof Array.isArray === 'undefined' ){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg) === "[object Array]";
}
}
18.希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;//缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
19.javascript 的事件流模型都有什么?
20.看下列代码输出为何?解释原因
var a;
alert(typeof a);//undefind
alert(b);//报错
21.看下面代码输出什么?解释原因
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
执行完后foo的值为111,foo的类型为Number。
undefined与null相等,但不恒等(=\=\=)
一个是number一个是string时,会尝试将string转换为number
尝试将boolean转换为number,0或1
尝试将Object转换成number或string,取决于另外一个对比量的类型
所以,对于0、空字符串的判断,建议使用 “=\=\=” 。“\=\=\=”会先判断两边的值类型,类型不匹配时为false。
那么问题来了,看下面的代码,输出什么,foo的值为什么?
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
执行完后foo的值为111,foo的类型为Number
22.看代码给答案
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value)
23.26. 已知数组 var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert 出 This is Baidu Campus
24.27. 已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法 ”getElementById”
function combo(msg){
var arr=msg.split("-");
for(var i=1;i0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
numberArray.reverse()
numberArray.sort(function(a,b){return b-a})
26.输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26
var d = new Date();
// 获取年,getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月,月份比较特殊,0是1月,11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
27.将字符串”{id}
{$id}</td> {$id}_{$name} ></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony')
28.为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将<, >, &, “进行转义
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
29.32. foo = foo||bar ,这行代码是什么意思?为什么要这样写?
- if(!foo) foo = bar;如果foo存在,值不变,否则把bar的值赋给foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。
30.看下列代码,将会输出什么?(变量声明提升)
var foo = 1;
(function(){
console.log(foo);
var foo = 2;
console.log(foo);
})()
==答案:输出undefined 和 2。上面代码相当于:==
var foo = 1;
(function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
})()
==函数声明与变量声明会被 javscript 引擎隐式地提升到当前作用域的顶部,但是只是提升名称不会提升赋值部分==
31.用 js 实现随机选取 10 - 100 之间的10个数字,存入一个数组,并排序
function randomNub(aArray, len, min, max) {
if (len >= (max - min)) {
return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
}
if (aArray.length >= len) {
aArray.sort(function (a, b) {
return a - b
});
return aArray;
}
var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
for (var j = 0; j < aArray.length; j++) {
if (nowNub == aArray[j]) {
randomNub(aArray, len, min, max);
return;
}
}
aArray.push(nowNub);
randomNub(aArray, len, min, max);
return aArray;
}
var arr = [];
console.log(randomNub(arr, 10, 10, 100));
- 32.把两个数组合并,并删除第二个元素
var array1 = ['a','b','c'];
var array2 = ['d','e','f'];
var array3 = array1.concat(array2);
array3.splice(1,1);
33.怎样添加、移除、移动、复制、创建和查找节点(原生JS,)
- createDocumentFragment():创建新节点,创建一个 DOM 片段
- createElement():创建一个具体元素
- createTextNode():创建一个文本节点
- appendChild():添加节点
- removeChild():删除节点
- replaceChild():替换节点
- insertBefore():插入节点
- getElementsByTagName():通过标签名称查找节点
- getElementsByName():通过元素的 Name 属性值查找
- getElementById():通过元素Id,唯一性
34.有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}
function serilizeUrl(url) {
var urlObject = {};
if (/\?/.test(url)) {
var urlString = url.substring(url.indexOf("?") + 1);
var urlArray = urlString.split("&");
for (var i = 0, len = urlArray.length; i < len; i++) {
var urlItem = urlArray[i];
var item = urlItem.split("=");
urlObject[item[0]] = item[1];
}
return urlObject;
}
return null;
}
var obj= serilizeUrl('http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e');
- 35.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?
- 答案:当使用RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要双反斜杠(即\表示一个\)。使用正则表达字面量的效率更高。
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
- 36.看下面代码,给出输出结果
for (var i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 0);
};
==输出:4 4 4==
==原因:Javascript事件处理器在线程空闲之前不会运行。追问,如何让上述代码输出1 2 3?==
for (var i = 1; i <= 3; i++) {
setTimeout((function (a) { //改成立即执行函数
console.log(a);
})(i), 0);
};
- 37.写一个function,清除字符串前后的空格。(兼容所有浏览器)
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+/, "").replace(/\s+$/, "");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
- 38.javascript 中 callee 和 caller 的作用?
- caller 是返回一个函数的引用,该函数调用了当前函数
- callee 是返回正在被执行的 function 函数,也就是所指定的 function 对象的正文
==那么问题来了!如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成==
//典型的斐波那契数列
var result = [];
function fn(n) {
if (n == 1) {
return 1;
} else if (n == 2) {
return 1;
} else {
if (result[n]) {
return result[n];
} else {
//argument.callee()表示fn()
result[n] = arguments.callee(n - 1) + arguments.callee(n - 2);
return result[n];
}
}
}
39.Javascript中, 以下哪条语句一定会产生运行错误?
A、var _变量=NaN;
B、var 0bj = []; //命名不对,报错,不用以数字开头
C、var obj = //; //运行undefind
D、var obj = {};
==答案BC,注意:C在有些浏览器上会报错,chrome运行fundefind ==
40.以下两个变量a和b,a+b的哪个结果是NaN?
A、var a=undefined; b=NaN
B、var a= ‘123’; b=NaN
C、var a =undefined , b =NaN
var a=NaN , b='undefined'
41.var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的?
A、34 B、35 C、36 D、37
==答案:B==
42.将页面中所有文本框的表单,并将他们全部清空
//方法1
for (vari = 0; i < form1.elements.length; i++) {
if (form1.elements.type == 'text')
form1.elements.value = '';
}
//方法2
for (vari = 0; i < document.forms.length; i++) {
if (forms[0].elements.type == 'text')
forms[0].elements.value = '';
}
//方法3
if (document.form.elements.type == 'text')
form.elements.value = '';
//方法4
for (vari = 0; i < document.forms.length; i++) {
for (var j = 0; j < document.forms.elements.length; j++) {
if (document.forms.elements[j].type == 'text')
document.forms.elements[j].value = '';
}
}
- 43.分析代码,得出正确的结果
var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);//77
- 44.写出函数 DateDemo 的返回结果,系统时间假定为今天
function DateDemo() {
var d, s = "今天日期是:";
d = new Date();
s += d.getMonth() + 1 + "/";
s += d.getDate() + "/";
s += d.getFullYear();
return s;
}
- 45.写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将以下字符串中的html标签去除掉
var str = ' 这里是div 里面的段落
';
var reg = /<\/?\w+\/?>/gi;
alert(str.replace(reg,''));
- 46.完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框
//js代码
function foo() {
//在此处添加代码
var rdo = document.form1.radioGroup;
for (var i = 0; i < rdo.length; i++) {
if (rdo.checked) {
alert(“您选择的是第” + (i + 1) + ”个单选框”);
}
}
}
//html代码
47.列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个
- 对象:window,document,location,screen,history,navigator
- 方法:alert(),confirm(),prompt(),open(),close()
48.希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)
var domList = document.getElementsByTagName('input')
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == 'checkbox') {
checkBoxList.push(domList[len]);
}
}
- 49.简述创建函数的几种方式
//第一种(函数声明):
function sum1(num1,num2){
return num1+num2;
}
//第二种(函数表达式):
var sum2 = function(num1,num2){
return num1+num2;
}
//第三种(函数对象方式):
//var sum3 = new Function("num1","num2","return num1+num2");
50.iframe 的优缺点
- 优点
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- Security sandbox
- 并行加载脚本
- 缺点
- iframe会阻塞主页面的Onload事件
- 即时内容为空,加载也需要时间
- 没有语意
51.请你谈谈Cookie的弊端?
- Cookie 数量长度的限制。每个 domain 最多只能有20条cookie,每个cookie长度不能超过 4KB,否则会被截掉
- 安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了
- 有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用
52.js延迟加载的方式有哪些?
- defer 和 async
- 动态创建 DOM 方式(创建script,插入到DOM中,加载完毕后callBack)
- 按需异步载入js
53.哪些操作会造成内存泄漏?
- 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
- 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象),或对该对象的唯一引用是循环的,那么该对象的内存即可回收
- setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏
- 闭包
- 控制台日志
- 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
54.判断一个字符串中出现次数最多的字符,统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if (!json[str.charAt(i)]) {
json[str.charAt(i)] = 1;
} else {
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for (var i in json) {
if (json[i] > iMax) {
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
- 55.写一个获取非行间样式的函数
function getStyle(obj, attr, value) {
if (!value) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
window.getComputedStyle(obj, attr)[value];
}
} else {
obj.style[attr] = value;
}
}
56.事件委托是什么
- 让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
57.闭包是什么,有什么特性,对页面有什么影响
- 我的理解是,闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
function outer() {
var num = 1;
function inner() {
var n = 2;
alert(n + num);
}
return inner;
}
outer()();
58.解释 jsonp 的原理,以及优缺点
- 动态创建 script 标签,回调函数
- Ajax 是页面无刷新请求数据操作
- ==优点==
- 1.它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制,JSONP 可以跨越同源策略
- 2.它的兼容性更好,在更加古老的浏览器中都可以运行,不需要 XMLRequest 或 ActiveX的支持
- 3.在请求完毕后可以通过调用 Callback 的方式回传结果。将回调方法的权限给了调用方。这个就相当于将 controller 层和 view 层终于分开了。
- ==缺点==
- 1.它只支持 GET 请求而不支持 POST 等其他类型的请求
- 2.它只支持跨域 HTTP 请求这种情况,不能解决不同域的两个页面之间如何进行 javascript 调用问题
- 3.jsonp 在调用失败的时候不会返回各种 HTTP 状态码
- 4.安全性。万一假如提供jsonp 的服务器在页面注入漏洞,即它返回的 javascript 的内容被人控制的。那么结果是什么?所有调用这个jsonp 的网站都会存在漏洞。于是无法把危险控制在一个域名下,所有在使用jsonp的时候必须保持使用的jsonp服务器必须是安全可信的
59.字符串反转,如将 ‘12345678’ 变成 ‘87654321
- 思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 jion() 转换为字符
var str = '12345678';
str = str.split('').reverse().join('');
- 60.将数字 12345678 转化成 RMB形式 如: 12,345,678
function re(str) {
str += '';
return str.split("").reverse().join("");
}
function toRMB(num) {
var tmp = '';
for (var i = 1; i <= re(num).length; i++) {
tmp += re(num)[i - 1];
if (i % 3 == 0 && i != re(num).length) {
tmp += ',';
}
}
return re(tmp);
}
console.log(toRMB('12345678'));
- 61.生成5个不同的随机数
//思路:5个不同的数,每生成一次就和前面的所有数字相比较,如果有相同的,则放弃当前生成的数字!
var num1 = [];
for (var i = 0; i < 5; i++) {
num1[i] = Math.floor(Math.random() * 10) + 1; //范围是 [1, 10]
for (var j = 0; j < i; j++) {
if (num1[i] == num1[j]) {
i--;
}
}
}
62.去掉数组中重复的数字
//数组去重
var arr = [1, 1, 2, 2, 1, 2, 2, 1, 3, 2, 4, 3, 4, 1, 2, 3, 7, 8, 9];
var j;
//需求:根据arr,取出所有不重复的元素[1,2,3,4,7,8,9];
//1 声明结果数组
var resultArr = [arr[0]];//可以先将arr[0]放入到结果数组中(因为结果数组中现在是空的,不可能重复)
//2 获取arr中的每个元素,到resultArr中进行比較,如果在resultArr中不存在arr[i],放入即可
for (var i = 1; i < arr.length; i++) {
//取出了arr[i],需要与resultArr中每一个元素进行比較,还需要遍历resultArr
for (j = 0; j < resultArr.length; j++) {
//使用arr[i]与resultArr[j]进行比較,如果每一次比较均不相等,放入即可
//如果有一个项相等,阻止放入,设置假设条件为false
if (arr[i] == resultArr[j]) {
break;//提高效率,找到一个相等的,后面的就没必要看了
}
}
//所以,需要在所有的比較完成后,在判断是否放入
if (j == resultArr.length) {
resultArr[resultArr.length] = arr[i];
}
}
console.log(resultArr);
- 63.求质数
//假设成立法:
var num = 4;
//1 检测一个数是不是质数,不太确定是不是,可以通过假设的方式
var flag = true;
//2 对假设进行要进行验证
for (var i = 2; i <= num / 2; i++) {
//3 找到可以是假设失败的情况
if (num % i == 0) {
//4 假设失败,设置假设条件为false
flag = false;
//可以添加break,单纯的为了减少执行次数,提高效率(可以省略)
break;
}
}
//5 根据假设判断是否是质数
if (flag == true) {
alert("是质数");
} else {
alert("不是质数");
}
- 64.反转数组
var arr = [1,2,3,4,5,6,7];
var temp=[];
for (var i = arr.length-1; i>=0; i--) {
temp[temp.length] = arr[i];
}
console.log(temp);
65.冒泡排序
//第1版
var arr = [1, 2, 3, 5, 4];
var temp
//外层循环控制轮数
for (var i = 0; i < arr.length - 1; i++) {
//内层循环控制每一轮的比較次数
for (var j = 0; j < arr.length - 1 - i; j++) {
//每一次要做的事情,比較当前项和后项的大小
if (arr[j] > arr[j + 1]) {
//交换两个位置的值
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
//第2版
var arr = [1, 2, 3, 5, 4];
var temp, flag;
//外层循环控制轮数
for (var i = 0; i < arr.length - 1; i++) {
//不确定的是,哪一轮的比較是可以结束的(排好了)
flag = true;
//内层循环控制每一轮的比較次数
for (var j = 0; j < arr.length - 1 - i; j++) {
//每一次要做的事情,比較当前项和后项的大小
if (arr[j] > arr[j + 1]) {
//交换两个位置的值
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
//设置假设不成立的条件,如果if被进入,说明排序没有完成
flag = false;//阻止跳出
}
}
//根据flag,验证假设是否成立
if (flag == true) {//==true可以省略,原因是flag本身就是bool值
break;
}
}
console.log(arr);
66.window.location.search() 返回的是什么?
- 查询(参数)部分。除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
- 返回值:?ver=1.0&id=timlq 也就是问号后面的!
67.window.location.hash 返回的是什么?
- 锚点,返回值:#love
68.javascript 中的垃圾回收机制?
- 在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再 被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么 函数a执行后不会被回收的原因。
69.看代码写结果
function changeObjectProperty(o) {
o.siteUrl = "http://www.csser.com/";
o = new Object();
o.siteUrl = "http://www.popcg.com/";
}
var CSSer = new Object();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl); //http://www.csser.com/
==如果CSSer参数是按引用传递的,那么结果应该是”http://www.popcg.com/“,但实际结果却仍是”http://www.csser.com/“。事实是这样的:在函数内部修改了引用类型值的参数,该参数值的原始引用保持不变。我们可以把参数想象成局部变量,当参数被重写时,这个变量引用的就是一个局部变量,局部变量的生存期仅限于函数执行的过程中,函数执行完毕,局部变量即被销毁以释放内存。
(补充:内部环境可以通过作用域链访问所有的外部环境中的变量对象,但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链,以查询变量和函数名,反之向下则不能)==
70.代码题
var a = 6;
setTimeout(function(){
alert(a);
var a = 66;
}, 1000);
a = 666;
alert(a);
// 666, undefined;
==异步处理,一切声明提前==
71.什么事同源策略
- 同协议、端口、域名的安全策略,由王景公司提出来的安全协议!
72.为什么不能定义1px左右的div容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:
overflow:hidden | zoom:0.08 | line-height:1px
72.计算字符串字节数
new function(s){
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;iif(s.charCodeAt(i)>255) l+=2; else l+=1; //charCodeAt()得到的是unCode码
} //汉字的unCode码大于 255bit 就是两个字节
alert(l);
}("hello world!");
- 73.请用代码实现 outerHTML
Object.prototype.outerHTML = function () {
var innerCon = this.innerHTML, //获得里面的内容
outerCon = this.appendChild(innerCon); //添加到里面
alert(outerCon);
}
function $(id) {
return document.getElementById(id);
}
alert($('outer').innerHTML);
alert($('outer').outerHTML);
- 74.JS中简单继承 call 方法
function Parent(name, money) {
this.name = name;
this.money = money;
this.info = function () {
alert('姓名: ' + this.name + ' 钱: ' + this.money);
}
}
//定义孩子类
function Children(name) {
Parent.call(this, name); //继承 姓名属性,不要钱。
this.info = function () {
alert('姓名: ' + this.name);
}
}
//实例化类
var per = new Parent('parent', 800000000000);
var chi = new Children('child');
per.info();
chi.info();
75.jquery 中的bind(),live(),delegate()的区别
- bind:绑定事件,对新添加的事件不起作用,方法用于将一个处理程序附加到每个匹配元素的事件上并返回jquery对象。
- live:方法将一个事件处理程序附加到当前选择器匹配的所有元素(包含现有的或将来添加的)的指定事件上并返回jQuery对象。
- delegate:方法基于一组特定的根元素将处理程序附加到匹配器的所有元素(现有的或将来的)的一个或多个事件上
76.你如何优化自己的代码
- 代码重用
- 避免全局变量(命名空间,封闭空间,模块化mvc)
- 拆分函数避免函数过于臃肿
- 注释代码
77.怎么样实现两栏等高
<div id="container" style="display: table;width: 100%;">
<div id="left" style="background-color: red;display: table-cell;">
内容<br/>
内容<br/>
内容<br/>
内容<br/>
内容<br/>
内容<br/>
div>
<div id="right" style="background-color: blue;display: table-cell">
内容
div>
div>
- 78.使用js实现这样的效果:在文本域里输入文字时,当按下enter键时不换行,而是替换成“{{enter}}”,(只需要考虑在行尾按下enter键的情况).
function back(ele,event){
event = event || window.event;
if(event.keyCode==13){
event.returnValue = false;
ele.value+="{{enter}}"
return false;
}
}
world’
79.specify(‘hello,)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数
function specify(str) {
var tempArray = Array.prototype.filter.call(str, function (value, index, array) {
return value >= 'A' && value <= 'z' && value != "_";
});
return tempArray.join(",");
}
console.log(specify("hedd____df*(%$#a !!!))))))llo,Wo@@@r ld"));
80.简述readyonly与disabled的区别
- ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容
- Readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等
- 在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去
81.为什么扩展 javascript 内置对象不是好的做法
- 因为你不知道哪一天浏览器或javascript本身就会实现这个方法,而且和你扩展的实现有不一致的表现。到时候你的javascript代码可能已经在无数个页面中执行了数年,而浏览器的实现导致所有使用扩展原型的代码都崩溃了
82.什么是三元表达式?“三元”表示什么意思?
- 三元如名字表示的三元运算符需要三个操作数。语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2
83.浏览器标准模式和怪异模式之间的区别是什么?
- 所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式
84.如何判断一个js变量是数组类型
- ES5:Array.isArray();
- [] instanceof Array;
- 调用数组的 slice 方法:
Object.prototype.toString.call([]);
//[object Array]
85.请列举 js 数组类型中常用的方法
- concat():连接两个或更多的数组,并返回结果
- join(): 把数组的所有元素放入一个字符串,元素通过指定分隔符进行分隔
- pop():删除并返回数组的最后一个元素
- push():向数组的末尾添加一个或更多元素,并返回新的长度
- reverse():颠倒数组中元素的顺序
- shift():删除并返回数组的第一个元素
- slice():从某个已有的数组返回选定的元素
- sort():对数组的元素进行排序
- splice():删除元素,并向数组添加新元素
- toSource():返回该对象的源代码
- toString():把数组转换为字符串,并返回结果
- toLocaleString():把数组转换为本地数组,并返回结果
- valueOf():返回对象的原始值
86.下面这段代码想要循环输出结果01234,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
==会输出5个5,因为定时器解析到最后执行(js事件队列==
for (var i = 0; i < 5; ++i) {
setTimeout((function (i) {
console.log(i);
})(i), 100 * i);
}
==利用局部作用域可以解决这样的问题==
87.变量的命名规范以及命名推荐
- 变量,函数,方法:小写开头,以后的每个单词首字母大写(驼峰)
- 构造函数,class:每个单词大写开头
- 基于实际情况,以动词,名词,谓词来命名。尽量言简意骇,以命名代替注释
88.只允许使用 + - * / 和 Math.* ,求一个函数 y = f(x, a, b);当x > 100 时返回 a 的值,否则返回 b 的值,不能使用 if else 等条件语句,也不能使用|,?:,数组。
// Math的 max 和min 方法 可以差文档,temp 返回的值要么是1 要么是0
function f(x, a, b) {
var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));
alert(temp);
return a * temp + b * (1 - temp);
}
console.log(f(105, 101, 2));
89.JavaScriptalert(0.4*0.2);结果是多少?和你预期的一样吗?如果不一样该如何处理?
- 有误差,应该比准确结果偏大。现将小数转换成整数进行处理
90.主流浏览器内核
- IE trident、火狐gecko、谷歌苹果 webkit、Opera-》presto
-
- 列出3条以上ff和IE的脚本兼容问题
- window.event:表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象
- 获取事件源:IE 用 srcElement 获取事件源,而FF 用target获取事件源
- 添加,去除事件:IE->element.attachEvent(‘onclick’,function),element.detachEvent(‘onclick’,function)
- FF:element.addEventListener(‘click’,function,true); element.removeEventlistener(‘click’,funciton,true);
- 获取标签的自定义属性:IE->div1.value 或 div1[‘value’],FF:div1.getAttribute(‘value’)
-
- 用正则表达式,写出由字母开头,其余由数字、字母、下划线组成的6~30的字符串?
^[a-zA-Z]{1}[\w]{5,29}$
93.在Javascript中什么是伪数组?如何将伪数组转化为标准数组?
- 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象
94.删除与某个字符相邻且相同的字符,比如”fdaffdaaklfjklja”==>”fdafdaklfjklja”
var str = "fdafffdaaklfjklja";
var arr = [];
for (var i = 0; i < str.length; i++) {
arr[i] = str[i]; //考虑到字符串的不可操作性,没有也能实现
};
for (var i = 0; i < arr.length; i++) {
if (arr[i] === arr[i + 1]) {
arr.splice(i, 1);
i--;
}
};
str = arr.join("");
console.log(str);
95.请写出三种以上的Firefox有但InternetExplorer没有的属性和函数
- 在IE下可通过document.frames[“id”];得到该IFRAME对象,而在火狐下则是通过document.getElementById(“content_panel_if”).contentWindow;
- IE的写法: _tbody=_table.childNodes[0],在FF中,firefox会在子节点中包含空白则第一个子节点为空白”“, 而ie不会返回空白 可以通过if(“” != node.nodeName)过滤掉空白子对象
- 模拟点击事件,if(document.all){ //ie下document.getElementById(“a3”).click();}
96.将字符串”{id}
{name}
”中的{id}替换成10,{name}替换成Tony (使用正则表达式 '<tr><td>{$id}td><td>{$id}_{$name}td>tr>'
.replace(/{\$id}/g, '10')
.replace(/{\$name}/g, 'Tony')
typeof 1; "number"
typeof "hello"; "string"
typeof /[0-9]/; "object"
typeof {}; "object"
typeof null; "object"
typeof undefined; "undefined"
typeof [1,2,3]; "object"
typeof function(){}; //"function"
parseInt(3.14); //3
parseFloat("3asdf"); //3
parseInt("1.23abc456");
parseInt(true);//"true" NaN
99.Ajax的最大的特点是什么
100.ajax的缺点
101.Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是
102.对 JSON 的了解
103.js 延迟加载的方式有哪些
//?categoryid=112&pageid=1
function getQueryStringArge(){
//categoryid=112&pageid=1
var qs = location.search.length > 1?location.search.substr(1):"";
//[categoryid=112,pageid=1]
var items = qs.length > 0?qs.split("&"):[];
var obj={},key,value,item;
for ( var i = 0;i item = items[i].split("=");
key = item[0];
value = item[1];
obj[key] = value;
}
return obj;
}
2.请用原生js实现jquery的get\post功能,以及跨域情况下
window.$ = {};
/*在$下面申明一个ajax*/
$.ajax = function (options) {
/*options 参数对象*/
/*如果没有传参 或者 传了但是不是对象*/
/* 如果判断之后是一句代码 括号可以省略*/
if (!options || typeof options != 'object') {
return false;
}
/*options 里面的参数 需要处理*/
var type = options.type === 'post' ? 'post' : 'get';
/*location 可以获取地址栏相关信息*/
var url = options.url || location.pathname;
var async = options.async === false ? false : true;
var data = options.data || {}; /*{name:xgg,age:18}*/
/*转换成 xhr 的数据格式*/
var dataStr = '';
for (var key in data) {
dataStr += key + '=' + data[key] + '&';
}
/*name=xgg&age=10&*/
dataStr = dataStr && dataStr.slice(0, -1);
/*beforeSend*/
/* options.beforeSend && options.beforeSend();*/
if (options.beforeSend) {
var flag = options.beforeSend();
if (flag === false) {
return false;
}
}
/*ajax编程*/
var xhr = new XMLHttpRequest();
/*1.请求*/
/*1.1 请求行*/
xhr.open(type, type == 'get' ? (url + '?' + dataStr) : url, async);
/*1.2 请求头*/
if (type == 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
/*1.3 请求主体 发送*/
xhr.send(type == 'get' ? null : dataStr);
/*2.响应*/
xhr.onreadystatechange = function () {
/*通讯完成*/
if (xhr.readyState == 4) {
/*1.响应成功*/
if (xhr.status == 200) {
/*获取数据*/
var result = null;
/*获取什么数据*/
/*怎么判断去获取什么数据*/
/*可以根据响应的类型去判断获取什么数据*/
var contentType = xhr.getResponseHeader('Content-Type');
/*如果返回的类型包含 字符串 xml */
if (contentType.indexOf('xml') > -1) {
result = xhr.responseXML;
}
/*如果返回的类型包含 字符串 json */
else if (contentType.indexOf('json') > -1) {
result = JSON.parse(xhr.responseText);
}
/*如果返回的类型包含 字符串 text */
else {
result = xhr.responseText;
}
/*调用用户传的 成功回调函数*/
options.success && options.success(result);
}
/*2.响应失败*/
else {
/*调用用户传的 失败回调函数*/
var msg = {
status: xhr.status,
statusText: xhr.statusText
};
options.error && options.error(msg);
}
/*通讯完成回调*/
options.complete && options.complete();
}
}
};
$.get = function (options) {
options.type = 'get';
$.ajax(options);
}
$.post = function (options) {
options.type = 'post';
$.ajax(options);
}
//jsonp
function jsonp(options){
//1. 拼接查询字符串
var url = options.url || location.pathname;
var params = options.data||{};
var queryString = '';
for ( key in params ){
queryString += '&'+key +'='+params[key];
}
var callback = 'itcast_'+(Math.random()*Math.random()).toString().substr(2);
url = url+queryString+'&callback='+callback;
// 动态创建callback name
//2.动态创建script标签,添加到页面上
var scriptElement = document.createElement('script');
scriptElement.src = url;
document.body.appendChild(scriptElement);
//3.回调 数据
window[callback] = function(data){
options.success && options.success(data);
document.body.removeChild(scriptElement);
}
}
3.简要描述web前端性能需要考虑哪方面,你的优化思路是什么?
4.写出3个 this 的典型应用
做为对象方法调用
var point = {
x: 0,
y: 0,
moveTo: function (x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1) //this 绑定到当前对象,即 point 对象
作为构造函数调用
function Point(x, y){
this.x = x;
this.y = y;
}
使用 apply 或 call 调用
function Point(x, y) {
this.x = x;
this.y = y;
this.moveTo = function (x, y) {
this.x = x;
this.y = y;
}
}
var p1 = new Point(0, 0);
var p2 = {
x: 0,
y: 0
};
p1.moveTo(1, 1);
p1.moveTo.apply(p2, [10, 10]);
5.请尽可能详尽解释 ajax 的工作原理
6.业界常用的优化WEB页面加载速度的方式(可以分别从页面元素展现,请求连接,css,js,服务器等方面介绍)
7.列举常用的 web 页面开发,调试以及优化工具
8.解释什么是sql注入,xss漏洞
9.js 中如何实现一个 map
let arr = [1,2,3,4,5];
Array.prototype.myMap = function(fn){
var newArr = [];
for ( var i = 0; i<this.length;i++ ){
newArr.push( fn(this[i],i,this));
}
return newArr;
}
var newArr = arr.myMap(function(x){
return x * 2;
});
10.js可否实现面向对象编程,如果可以如何实现js对象的继承
11.如何获取对象a拥有的所有属性(可枚举的、不可枚举的,不包括继承来的属性)
12.同步和异步的区别
13.如何解决跨域问题
14.页面编码和被请求的资源编码如果不一致如何处理
15.简述ajax 的过程
16.阐述一下异步加载
17.请解释一下 JavaScript 的同源策略
18.GET和POST的区别,何时使用POST
19.什么是Ajax和JSON,它们的优缺点
20.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
21.JQuery一个对象可以同时绑定多个事件,这是如何实现的
22.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制
// 方法一:
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
//方法二:
/**
* 克隆一个对象
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = [];//创建一个空的数组
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {};//创建一个空对象
for (var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{ //普通变量直接赋值
return Obj;
}
}
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);
});
}
}
function addEvent(elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
} else if (elem.attachEvent) {
elem['temp' + type + handler] = handler;
elem[type + handler] = function () {
elem['temp' + type + handler].apply(elem);
};
elem.attachEvent('on' + type, elem[type + handler]);
} else {
elem['on' + type] = handler;
}
}
24.用原生JS实现jquery的ready方法
function ready(fn) {
if (document.addEventListener) { //标准浏览器
document.addEventListener('DOMContentLoaded', function () {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
fn(); //执行函数
}, false);
} else if (document.attachEvent) { //IE
document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn(); //函数执行
}
});
};
};
}
25.(设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS
26.Javascript作用链域
27.谈谈This对象的理解
28.eval是做什么的
29.关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡
30.new操作符具体干了什么呢
31.模块化开发怎么做
32.ECMAScript6 怎么写class么,为什么会出现class这种东西
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
33.JavaScript中的作用域与变量声明提升
34.javascript对象的几种创建方式
35.javascript 继承的6种方法
36.简述一下Sass、Less,且说明区别
37.验证邮箱的正则表达式
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
38.谈谈浏览器的内核,并且说一下什么事内核
39.javascript 原型、原型链?有什么特点?
40.写一个通用的事件侦听器函数
// event(事件)工具集,来源:https://github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent: function (fn) {
if (fn == null) {
fn = document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function () {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent: function (element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function () {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent: function (element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
stopPropagation: function (ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget: function (event) {
return event.target || event.srcElement;
},
// 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
getEvent: function (e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
41.如何判断一个对象是否属于某个类
//使用instanceof (待完善)
if(a instanceof Person){
alert('yes');
}
42.模块化怎么做
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
43.php inset和empty的区别,举例说明
44.javascript 怎么实现事件捕获
45.js实现深拷贝
// 当第二次调用的时候, source 是 obj1.subObj
// target obj.subObj
// obj.subObj.arr = []
function deepExtend(source, target) {
for (var key in source) {
if (Object.prototype.toString.apply(source[key]) === '[object Object]') {
// target.subObj = {}
target[key] = {}
deepExtend(source[key], target[key])
// for (var k in source[key]) {
// target[key][k] = source[key][k]
// }
} else if (Object.prototype.toString.apply(source[key]) === '[object Array]') {
target[key] = []
deepExtend(source[key], target[key])
// for (var i = 0; i < source[key].length; i++) {
// target[key].push(source[key][i])
// }
} else {
console.log(++count)
target[key] = source[key]
}
}
}
deepExtend(obj1, obj)
46.说说你对 WebSocket 的了解
1.前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用
2.简述一下 Handlebars 的基本用法
3.AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别
4.requireJS 的核心原理是是什么?
5.让你自己设计实现一个requireJS,你会怎么做
6.谈一谈你对ECMAScript6的了解
7.require.js 特性
8.jquery 与 jqueryUI 有啥区别
9.jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this
10.jquery.extend 与 jquery.fn.extend的区别
11.对 jQuery 的优化方法
12.Zepto的点透问题如何解决
13.Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法
14.angular、vue、react 的熟悉度
15.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件
16.对 BFC 规范的理解
17.WEB应用从服务器主动推送Data到客户端有那些方式
1.HTTP协议中,GET和POST有什么区别?分别适用什么场景?
2.HTTP 状态消息 200 302 304 403 404 500 分表表示什么?
3.HTTP协议中,header信息里面,怎么控制页面失效时间(last-modified,cache-control,Expires分别代表什么)
4.HTTP协议目前常用的有哪几个?KEEPALIVE从哪个版本开始出现的?
5.http和https
1.对Node的优点和缺点提出了自己的看法
2.Node.js的适用场景
3.对Node的优点和缺点提出了自己的看法
js快速排序算法
写一个multiply 方法支持一下两种调用方式打印出两个数字乘积: multiply(2,3);multiply(2)(3);
function multiply(x,y){
var x = x;
if(arguments.length == 2){
return x * y;
}else{
return function(y){
return x * y;
}
}
}
console.log( multiply(2)(10));