扎实的基础才是王道

# go go go…

1.JavaScript包括哪些数据类型,并写出判断函数,如isString()?

String、Number、Boolean、Null、Undefined、Object

  var a;
  console.log(typeof a); // String、Number、Boolean、Undefined

2.实时显示当前时间,格式’年-月-日 时-分-秒’

  setInterval(function () {
    var date = new Date();
    var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + 
    date.getDate() + ' ' + date.getHours() + '-' + date.getMinutes() + '-'      +date.getSeconds();
    console.log(time);
  }, 1000);

3.如何显示或隐藏一个DOM元素

display:none/block;
visibility: hidden/show;
document.getElementById('el').style.display = ''; // 显示
document.getElementById('el').style.display = 'none'; // 隐藏

4.如何添加html元素的事件处理

window.addEventListener(action, function () {}, true/false);
document.getElementById('el').onclick = function () {};
onclick="action";

5.如何控制alert中的换行

alert('line1\r\nline2'); // IE浏览器
alert('line1\nline2'); // 其他浏览器

6.判断一个字符串中出现次数最多的字符,统计这个次数

var s = 'jfiefjfi3ifji3f';

7.判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20

function checkString(s) {
  if (s.length < 5 || s.length > 20) {
    return false;
  } else if (/^[a-z|A-Z]/.test(s[0])) {
    return false;
  } else {
    return true;
  }
}
var s = 'ddddddiwei293'
var regExp = /^[a-z|A-Z]{1}[/w|_|a-z|A-Z]{4,19}/;
regExp.test(s);

8.获取url参数

function parseQueryString() {
  var param = location.search;
  var params = new Object();
  if (param.indexOf('?') != -1) {
    var str = param.substr(1);
    strs = str.split('&');
    for (var i = 0; i < strs.length; i++) {
      params[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]);
    }
  }
  return params;
}
function getUrlSearch() {
  var search = location.search.substring(1);
  if (search.length > 0) {
    var obj = {}, arr = [], item, val;
    arr = search.split('&');
    for (var i = arr.length; --i >= 0;) {
      item = arr[i].split('=');
      val = item[1];
      if (val.indexOf('/') != -1) {
        val = val.substring(0, val.indexOf('/'));
      }
      obj[item[0]] = val;
    }
    return obj;
  }
  return null;
}

9.用闭包方式写一个js从文本框中取出值并在标签span中显示出来

(function () {
  var a = document.getElementById('input').value;
  document.getElementById('span').innerHTML = a;
})()

10.IE6浏览器不支持position:fixed,请写一个js使div#box固定在页面的右下角

#box {
  _position: absolute;
  _bottom: auto;
  _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10) || 0)));
  _margin: 0 0 0 100%;
}
window.onscroll= window.onresize = window.onload = function (){
  var getDiv = document.getElementById('box');
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  getDiv.style.left = document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
  getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight + scrollTop +'px';

11.鼠标移动到页面中的任意标签,显示出这个标签的基本矩形轮廓

window.onmouseover = function (e) {
  setTimeout(function () {
    e.preventDefault();
    var el = e.target ? e.target : e.srcElement;
    console.log(el);
    el.style.border = "1px solid red";
  }, 500)
}
window.onmouseout = function (e) {
 setTimeout(function () {
    e.preventDefault();
    var el = e.target ? e.target : e.srcElement;
    console.log(el);
    el.style.border = "";
 }, 500)
}

12.window和document的常用方法和属性,js的基础对象有哪些?

window
方法:alert()/confirm()/prompt()/open()/close()
属性:defaultStatus/status/frames/parent/self/top/window

document
方法:write()/creatElement()/getElementById()/getElementsByTagName()/body.appendChild();
属性:title/bgColor/fgColor/alinkColor/vlinkColor/url/fileCreateDate/fileModifiedDate/fileSize/cookie/charset

13.js中如何对一个对象进行深度clone

var obj = {
  a: 1,
  b: {
    c: 1
  }
};
var s = JSON.stringify(obj);
var o = JSON.parse(s);
  详见:深度克隆和浅克隆的区别
  深度克隆的对象可以完全脱离原对象,我们队新对象的任何修改都不会反映到原对象中,这样深度克隆就实现了

14.js中如何定义class,如何扩展prototype?

function Cat() {
  this.name = "喵喵";
}
var cat1 = new Cat();
console.log(cat1.name);

15.ajax是什么,ajax的交互模型?同步和异步的区别?如何解决跨域问题?

通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.启动,获取XMLHttpRequest对象
2.open,打开url通道,并设置异步传输
3.send发送数据到服务器
4.服务器接受数据并处理,处理完成后返回结果
5.服务端接收服务端返回的结果
同步:脚本会停止并等待服务器返回结果然后再继续
异步:脚本允许页面继续加载并处理返回的结果
1.iframe + document.domain跨域(仅限主域相同,子域不同的跨域应用场景)
2.通过jsonp跨域
3.nginx代理跨域
4.nodejs中间件代理跨域
5.后端在头部信息里面设置安全域名

16.列出异步加载js方案

1.script标签添加属性async
2.script标签添加属性defer(IE浏览器)
创建script,插入到DOM中

17.多浏览器检测通过什么?

多浏览器测试工具:selenium

18.讲述一下前端开发的优化方式

1.禁止使用iframe(阻塞父文档onload时间)
2.禁止使用gif图片实现loading效果(降低CPU消耗,提升渲染性能)
3.使用CSS代替js动画(避免重绘重排以及回流)
4.对于一些小图标,可以使用base64位编码,以减少网络请求
5.页面头部的style会阻塞页面
6.页面头部的script会阻塞页面
7.页面中空的href和src会阻塞页面其他资源的加载
8.前端模板,js+数据,减少由于HTML标签导致的带宽浪费
9.减少DOM操作
10.js设置样式时设置className而不是直接操作style
11.图片预加载,将样式表放在顶部,将脚本放在底部
12.避免使用CSS表达式
13.网页gzip,CDN托管,数据缓存,图片服务器

发表评论

电子邮件地址不会被公开。 必填项已用*标注