前端

前端面试问题-1

明天有个电话面试

看了一篇文章的一些前端问题，发现好多都不会=。=
而且明天有个电话面试，临时抱抱佛脚哈哈哈

关键字：怪异模式 CSS hack SEO 闭包 JS对象实现

浏览器的标准模式与怪异模式的设置与区分方法

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

IE（6,7,8）的标准模式和怪异模式差别较大：盒子模型的解释（宽度计算）
DTD:文档类型定义（Document Type Definition)
浏览器会通过头部声明即DTD来采用相应的渲染模式：

  • 没有doctype声明的或使用HTML4以下的使用怪异模式
  • 有doctype声明的使用标准模式
    判断使用的模式：window.top.document.compatMode，BackCompat表示怪异模式，CSS1Compat表示标准模式。
    对于IE8+，使用下面代码强制浏览器使用最新内核的标准模式：
    <meta http-equiv=" X-UA-Compatible" content="IE=edge"/>

CSS hack

参考博文：CSS hack技巧大全
最经常见到的就是IE6,7,8,和FF的CSS兼容了：

1
2
3
4
5
6
7
.hack {
    height: 22px;
    background-color:#f1ee18;/*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，此时，我们的IE8已经独立识别。
不过项目中基本没用过=。=因为可以通过其他方法来实现效果。而且用hack也确实不太好。

SEO方案

robots协议

参考文章：禁止搜索引擎收录的方法

搜索引擎使用spider程序自动访问互联网上的网页并获取网页信息。spider在访问一个网站时，会首先会检查该网站的根域下是否有一个叫做 robots.txt的纯文本文件，这个文件用于指定spider在您网站上的抓取范围。您可以在您的网站中创建一个robots.txt，在文件中声明 该网站中不想被搜索引擎收录的部分或者指定搜索引擎只收录特定的部分。
请注意，仅当您的网站包含不希望被搜索引擎收录的内容时，才需要使用robots.txt文件。如果您希望搜索引擎收录网站上所有内容，请勿建立robots.txt文件。

404页面重置

参考页面：原来404页面可以这样做

404页面是网站必备的一个页面，它承载着用户体验与SEO优化的重任。404页面通常为用户访问了网站上不存在或已删除的页面，服务器返回的404错误。如果站长没有设置404页面，会出现死链接，蜘蛛爬行这类网址时，不利于搜索引擎收录。

404页面设置方法

  1. 虚拟空间设置方法
    现在的idc提供商基本都提供404设置的功能，直接上传文件设置即可。

  2. IIS下设置404页面
    在IIS管理器中右键单击要管理的网站，打开“属性”中的“自定义错误信息”页，为“404”设定相应的错误信息页即可。不过，此处在“消息类型”中一定要选择“文件”或“默认值”，而不要选择“URL”，不然，将导致返回“200”状态码。

  3. Apache下设置404错误页面
    在.htaccess 文件中加入如下内容即可：ErrorDocument 404 /notfound.php。切记不要使用绝对URL，如果使用绝对URL返回的状态码是“302”+“200”。
    在设置好以后最好再检查一遍网页的http状态，可以用ranknow这个工具：检测你的站点404设置的是否正确。

关键字

  • 给图片设置title，alt
  • HTML结构优化：h1,h2
  • HTML头部添加<meta description=''>和keyword

网站地图

百度百科：网站地图

网站地图，又称站点地图，它就是一个页面，上面放置了网站上需要搜索引擎抓取的所有页面的链接（注：不是所有页面）。大多数人在网站上找不到自己所需要的信息时，可能会将网站地图作为一种补救措施。搜索引擎蜘蛛非常喜欢网站地图。

啊啊感觉自己在临时抱佛脚=。=后面再仔细看看

JS面向对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function jsClass (privateParam, publicParam) {
	var privateParam = privateParam; //私有变量
	this.publicParam = publicParam; //公共变量
	//私有方法
	function priMethod () {
		return "priMethod()";
	}
	//特权方法，方法能访问所有成员
	this.privilegedMethod = function () {
		return "use all Method()!";
	}
}
//公用方法，不用调用私有变量和方法
jsClass.prototype.pubMethod = function () {
	return "pubMethod()";
}
//调用实例
var jsObject = new jsClass("priMember","pubMember");
console.log(jsObject.privateParam) //失败 undefined
console.log(jsObject.publicParam) //成功
console.log(jsObject.pubMethod()) //成功
console.log(jsObject.priMethod()) //失败 “对象不支持此属性或方法”
console.log(jsObject.privilegedMethod()) //成功

JS跨域访问

参考文章：js跨域及解决方案

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.
跨域问题是由于javascript语言安全限制中的同源策略造成的.
简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

解决方法：
在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问。
但这里对返回的数据有个要求,即:服务器返回的数据不能是单纯的如{“Name”:”zhangsan”}。
这里引入了JSONP:

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而HTML的script元素是一个例外。利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

客户端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.ajax({
    async: false,
    url: "http://192.168.0.5/Web/web1.aspx",
    type: "GET",
    dataType: 'jsonp',
    //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象.
    jsonp: 'jsoncallback',
    //要传递的参数,没有传参时，也一定要写上
      data: null,
    timeout: 5000,
    //返回Json类型
      contentType: "application/json;utf-8",
    //服务器段返回的对象包含name,data属性.
    success: function (result) {
        alert(result.date);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(textStatus);
    }
});

原生方法是通过创建一个<script>,添加到DOM结构并触发函数。

闭包

面试题看到一直在问。终于认真看了一遍：
参考文章：javascript深入理解js闭包
话说脚本之家这个网站好神奇=、=虽然广告好多代码没有格式化但是好多内容啊。
闭包
这个图片好形象~

1
2
3
4
5
6
7
8
9
10
11
var name = "yes";
var object = {
	name : "my object",
	getName : function () {
		return function () {
			return this.name;
		}
	}
};
alert(object.getName()());

1
2
3
4
5
6
7
8
9
10
11
function outFun () {
	var a = 0;
	return function () {
		a++;
		alert(a);
	}
}
var a = outFun();
a(); //1
a(); //2

出于种种原因，我们有时候需要得到函数内的局部变量。但是，正常情况下，这是办不到的，只有通过闭包才能实现。

分享到