AngularJS前端面试题

 

 1.xhtml和html有怎么样界别

HTML是一种为主的WEB网页设计语言,XHTML是一个依照XML的置标语言

最首要的不一致:

     XHTML 元素必须被正确地嵌套。

     XHTML 元素必须被关闭。

  
标签名必须用小写字母。

     XHTML 文档必须有所根元素

2、简述一下src与href的差异:

href
是指向网络资源所在地方,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的职位,指向的内容将会停放到文档中当前标签所在地点;在呼吁src资源时会将其针对性的资源下载并动用到文档内,例如js脚本,img图片和frame等因素。当浏览器解析到该因素时,会暂停其余资源的下载和处理,直到将该资源加载、编译、执行达成,图片和框架等因素也这么,类似于将所指向资源嵌入当前标签内。那也是为什么将js脚本放在尾部而不是底部。

3、行内元素有啥?块级元素有哪些?
空(void)元素有那一个?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

4、 form中的action属性和method属性的意义是如何?method常用值有啥?

action属性用于指定form表单提交的后台程序地址;method属性用于指定form表单提交的措施。

method的常用值有:get和post

5、 表单元素新增的品质有啥样?

required: 必填项目

placeholder:提醒新闻,点击input内容时会消失

pattern:校验正则表明式

autofocus:自动获取宗旨

autocomplete:自动已毕

6.向指定服务器交由数据的情势有怎么着?

   Ajax  表单Form  

   URL?参数 

   AngularJS的$HTTP

JQ Ajax: $.POST(,,)  $.GET(,,)
 $.Ajax({})

JS Ajax: 5步。(参考25题)

7、写一个function,清除字符串前后的空格。(包容所有浏览器)

function trim(str) {

   if (str && typeof str === “string”)
{

            return
str.replace(/(^\s*)|(\s*)$/g,””);  
//去除前后空白符

           }

8、怎样消除一个数组里面重复的元素?

var arr1
=[1,2,2,2,3,3,3,4,5,6],

 var arr2 = [ ];

    for(var i = 0; i< arr1.length;
i++){

        if(arr2.indexOf(arr1[i]) <
0){

         arr2.push(arr1[i]);

        }

}

document.write(arr2); //
1,2,3,4,5,6

9、请描述一下cookies,sessionStorage和localStorage的区分

sessionStorage用于地点存储一个对话(session)中的数据,那一个多少唯有在同一个会话中的页面才能访问并且当会话截至后数据也随着销毁。因而sessionStorage不是一种持久化的地面存储,仅仅是会话级其余蕴藏。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永久不会晚点的。

web
storage和cookie的区别

Web
Storage的定义和cookie相似,差异是它是为了更大容量存储设计的。库克ie的轻重缓急是受限的,并且每便你请求一个新的页面的时候库克ie都会被发送过去,这样平空浪费了带宽,其它cookie还索要指定作用域,不得以跨域调用。

除开,Web
Storage拥有setItem,getItem,removeItem,clear等艺术,不像cookie须求前端开发者自己封装setCookie,getCookie。不过Cookie也是不能够或缺的:Cookie的成效是与服务器举办交互,作为HTTP规范的一有些而存在
,而Web Storage仅仅是为着在地头“存储”数据而生。

10、cookie和session的分别是怎么着?

   Cookie 保存在客户端本机;

   Session保存在劳动器端;

  联系:session的id存在cookie中。

11.页面导入样式时,使用link和@import有怎么着分化?

1).link属于XHTML标签,而@import是CSS提供的;

2).页面被加载的时,link会同事被加载,而@import引用的CSS会等到页面被加载完再加载;

3).import唯有在IE5以上才能被辨认,而link是XHTML标签,无包容难点;

4).link 情势的样式的权重>@import的权重

12.简练描述下一定Position:

Relative:相对固化。相对于自我本来地点一定,原DOM空间会保留;

Absolute:绝对定位。相对于第四个非static定位的祖先元素举办一定,会去除原DOM空间;

Fixed:固定定位器窗口举行定点; 会删除DOM空间

Static: 默许值。没有永恒,元素出现在健康的流中(忽略
top, bottom, left, right z-index 申明)。

Inherit:规定从父元素继承 position 属性的值。

13.display有啥值?表达她们的效应。

  block         象块类型元素一样显示。

  none          缺省值。象行内元素类型一样突显。

  inline-block    象行内元素一样突显,但其情节象块类型元素一样呈现。

  list-item     象块类型元素一样突显,并添加样式列表标记。

  table         此元素会作为块级表格来呈现

  inherit       规定应当从父元素继承 display 属性的值

14、jquery中如何将数组转化为json字符串,然后再倒车回来?

$.parseJSON

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用:$(array).stringify();

15.JSON 的了解?

JSON(JavaScript Object Notation) 是一种轻量级的数据互换格式。

它是基于JavaScript的一个子集。数据格式不难, 易于读写, 占用带宽小

如:{“age”:”12″, “name”:”back”}

JSON字符串转换为JSON对象:

var obj =eval(‘(‘+ str +’)’);

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON对象转换为JSON字符串:

var last=obj.toJSONString();

var last=JSON.stringify(obj);

16、什么是响应式设计?响应式设计的基本原理是何许?

  
依据不一致装备的屏幕尺寸、分辨率、方向等,统一网站彰显为分歧功用。

  
移动优先。能够应用JS跳转差距手机站和PC站,可以应用MediaQuery检测分歧装备的习性呈现差别的CSS,可以接纳种种响应式前端框架。

  
优点:用户体验好,越发是手机端。

  
缺点:包涵多量冗余代码,开发费用较大(可是远小于开发手机站+PC站的形式)

17. visibility:hidden和display:none的区别?

选拔display:none隐藏将来,元素的空间被放出,其他元素得以占据空间;

选用visibility:hidden仅仅是看不见,可是元素的空中照旧占据,其他元素不可能利用。

18、 列举数组相关的常用方法

push/pop, shift/unshift, split/join,
slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列举字符串相关的常用方法

indexOf/lastIndexOf/charAt,
split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20、科普的浏览器内核有何?

Trident内核:IE,马克斯Thon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核:Netscape6及以上版本,FireFox(火狐),MozillaSuite/SeaMonkey等

Presto内核:Opera7及以上。      [Opera内核原为:Presto,现为:Blink;]

Webkit内核:Safari(苹果自带的浏览器),Chrome(谷歌(Google))等。   [ Chrome的:Blink(WebKit的分支)]

21.title与h1的区别、b与strong的区别、i与em的区别?

   title属性没有明显意义只代表是个标题,H1则表示层次鲜明的标题,对页面音信的抓取也有很大的熏陶;

  strong是标志重点内容,有口气抓实的意义,使用阅读设备阅读网络时:<strong>会重读,而<b>是展现强调内容。

  i内容显示为斜体,em表示强调的文件;

22、网页验证码是干嘛的,是为了缓解哪些安全难点。

  区分用户是计算机依旧人的公物活动程序。可以免患恶意破解密码、刷票、论坛灌水;

  有效预防黑客对某一个特定注册用户用特定程序暴力破解形式举办不断的登陆尝试。

23.对前者工程师这些职位你是何等通晓的?

a.
前端是最靠近用户的程序员,前端的能力就是能让产品从 90分进化到 100
分,甚至更好

b.
参预项目,火速高质量已毕达成效益图,精确到1px;

c.
与集团成员,UI设计,产品经营的联络;

d.
做好的页面结构,页面重构和用户体验;

e.
处理hack,兼容、写出精粹的代码格式;

f.
针对服务器的优化、拥抱最新前端技术。

24、什么是闭包(closure),为何要用它?

闭包是指有权访问另一个函数效能域中变量的函数,创设闭包的最广泛的法子就是在一个函数内创造另一个函数,通过另一个函数访问那些函数的一对变量,利用闭包可以突破意义链域,将函数内部的变量和章程传递到表面。可以把闭包不难明了成“定义在一个函数内部的函数”

闭包的表征:

1.函数内再嵌套函数

2.中间函数能够引用外层的参数和变量

3.参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能科学的弹出当前被点击的li索引

 <ul id=”test”>

    <li> index = 0</li>

    <li> index = 1</li>

    <li> index = 2</li>

    <li> index = 3</li>

</ul>

<script
type=”text/javascript”>

    var nodes =
document.getElementsByTagName(“li”);

    for(i = 0;i<nodes.length;i+=
1){

      nodes[i].onclick =
function(){

      console.log(i+1);        //不用闭包的话,值每便都是4

        }(i);

    }

</script>

25、Ajax是如何?如何创造一个Ajax?

ajax全名叫:Asynchronous javascript and XML,即异步的JavaScript和xml,也称页面无刷技术。这里的异步可以概括的知晓为:向服务器发送请求的时候,大家不必等待结果,而是可以同时做此外的政工,等到有了结果它和谐会基于设定开展继续操作,与此同时,页面是不会发生整页刷新的,升高了用户体验。

什么创设一个Ajax?

(1)创设XMLHttpRequest对象,也就是成立一个异步调用对象

(2)创造一个新的HTTP请求,并指定该HTTP请求的办法、URL及阐明新闻

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用再次回到的数额

(6)使用JavaScript和DOM达成部分刷新

26.原生JS的window.onload与Jquery的$(document).ready(function(){})有哪些两样?怎么着用原生JS落成Jq的ready方法?

window.onload()方法是必须等到页面内包蕴图片的富有因素加载完毕后才能执行。

$(document).ready()是DOM结构绘制已毕后就推行,不必等到加载完结。

27.(设计题)想完毕一个对页面某个节点的牵引?如何是好?(使用原生JS)

应对出概念即可,上面是多少个要旨

给急需拖拽的节点绑定mousedown,
mousemove, mouseup事件

mousedown事件触发后,起始拖拽

mousemove时,必要通过event.clientX和clientY获取拖拽地方,并实时更新地点

mouseup时,拖拽甘休

28、 apply, call和bind有怎么着界别?

三者都足以把一个函数应用到其他对象上,注意不是自我对象.apply,call是直接执行函数调用,bind是绑定,执行须求再行调用.

apply和call的差异是apply接受数组作为参数,而call是经受逗号分隔的极端多个参数列表,

代码演示

    function Person() {

    }

    Person.prototype.sayName() {
alert(this.name); }

    var obj = {name: ‘michaelqin’}; //
注意那是一个经常对象,它不是Person的实例

    1) apply

    Person.prototype.sayName.apply(obj,
[param1, param2, param3]);

    2) call

    Person.prototype.sayName.call(obj,
param1, param2, param3);

    3) bind

    var sn =
Person.prototype.sayName.bind(obj);    

    sn([param1, param2, param3]); //
bind需要先绑定,再实施

   sn(param1, param2, param3); //
bind需求先绑定,再履行

29、iframe有那几个缺点?

*iframe会阻塞主页面的Onload事件;

*招来引擎的探寻程序不可以解读那种页面,不便利SEO;

*iframe和主页面共享连接池,而浏览器对相同域的连日有限定,所以会影响页面的并行加载。

拔取iframe从前须要考虑那七个缺陷。假使须求接纳iframe,最好是经过javascript

动态给iframe添加src属性值,那样可以绕开以上七个难题。

30、如何化解ajax跨域难题?

jsonp、
iframe、window.name、window.postMessage、服务器上设置代理页面

和谐的做法:

jQuery中ajax的使用

AngularJS,$.ajax({

dataType:’jsonp’

})

 

 

 

 

 

 

相关文章