xml地图|网站地图|网站标签 [设为首页] [加入收藏]
整理总结的一些前端面试题,是真的美澳门新葡
分类:web前端

闭包,是真的美

2018/04/11 · JavaScript · 闭包

原文出处: 张建成   

欢迎评论和star

写这篇文章时的心情是十分忐忑的,因为对于我们今天的主角:闭包,很多小伙伴都写过关于它的文章,相信大家也读过不少,那些文章到底有没有把JS中这个近似神话的东西讲清楚,说实心里,真的有,但为数不多。

写这篇文章的初衷:让所有看到这篇文章的小伙伴都彻彻底底的理解闭包 => 提高JS水平 => 能够写出更高质量的JS代码。

开文之所以说心情是忐忑的,就是怕达不到我写该文的初衷,但是我有信心同时我也会努力的完成我的目标。如行文中有丝毫误人子弟的陈述,欢迎大家指正,在这感激不尽。

我们开始吧:

相信众多JS的lovers都听说过这句话:闭包很重要但是很难理解

我起初也是这么觉得,但是当我努力学习了JS的一些深层的原理以后我倒觉得闭包并不是那么不好理解,反倒是让我感觉出一种很美的感觉。当我彻底理解闭包的那一刹那,心中油然产生一种十分愉悦感觉,就像**”酒酣尚醉,花未全开”**那种美景一样。

整理总结的一些前端面试题

2016/09/22 · 基础技术 · 4 评论 · CSS, HTML, Javascript, 面试

本文作者: 伯乐在线 - Damonare 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

你不可不知的 HTML 优化技巧

2016/09/12 · 基础技术 · 2 评论 · HTML

本文作者: 伯乐在线 - 葡萄城控件 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。

很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大。

如何有效的降低HTML 代码的复杂度和页面元素的数量,本文主要解决了这个问题,从多个方面介绍了如何编写简练,清晰的HTML 代码,能够使得页面加载更为迅速,且能在多种设备中运行良好。

拨开闭包神秘的面纱

我们先看一个闭包的例子:

function foo() { let a = 2; function bar() { console.log( a ); } return bar; } let baz = foo(); baz();

1
2
3
4
5
6
7
8
9
10
11
12
13
function foo() {
    let a = 2;
 
    function bar() {
        console.log( a );
    }
 
    return bar;
}
 
let baz = foo();
 
baz();

大家肯定都写过类似的代码,相信很多小伙伴也知道这段代码应用了闭包,but, Why does the closure be generated and Where is closure?

来,我们慢慢分析:

首先必须先知道闭包是什么,才能分析出闭包为什么产生和闭包到底在哪?

当一个函数能够记住并访问到其所在的词法作用域及作用域链,特别强调是在其定义的作用域外进行的访问,此时该函数和其上层执行上下文共同构成闭包。

需要明确的几点:

  1. 闭包一定是函数对象(wintercn大大的闭包考证)
  2. 闭包和词法作用域,作用域链,垃圾回收机制息息相关
  3. 当函数一定是在其定义的作用域外进行的访问时,才产生闭包
  4. 闭包是由该函数和其上层执行上下文共同构成(这点稍后我会说明)

闭包是什么,我们说清楚了,下面我们看下闭包是如何产生的。

接下来,我默认你已经读过我之前的两篇文章 原来JavaScript内部是这样运行的 和 彻底搞懂JavaScript作用域 , 建议先进行阅读理解JS执行机制和作用域等相关知识,再理解闭包,否则可能会理解的不透彻。

现在我假设JS引擎执行到这行代码

let baz = foo();

此时,JS的作用域气泡是这样的:

澳门新葡亰手机版 1

这个时候foo函数已经执行完,JS的垃圾回收机制应该会自动将其标记为”离开环境”,等待回收机制下次执行,将其内存进行释放(标记清除)。

但是,我们仔细看图中粉色的箭头,我们将bar的引用指向baz,正是这种引用赋值,阻止了垃圾回收机制将foo进行回收,从而导致bar的整条作用域链都被保存下来

接下来,baz()执行,bar进入执行栈,闭包(foo)形成,此时bar中依旧可以访问到其父作用域气泡中的变量a。

这样说可能不是很清晰,接下来我们借助chrome的调试工具看下闭包产生的过程。

当JS引擎执行到这行代码let baz = foo();时:

澳门新葡亰手机版 2

图中所示,let baz = foo();已经执行完,即将执行baz();,此时Call Stack中只有全局上下文。

接下来baz();执行:

澳门新葡亰手机版 3

我们可以看到,此时bar进入Call Stack中,并且Closure(foo)形成。

针对上面我提到的几点进行下说明:

  1. 上述第二点(闭包和词法作用域,作用域链,垃圾回收机制息息相关)大家应该都清楚了
  2. 上述第三点,当函数baz执行时,闭包才生成
  3. 上述第四点,闭包是foo,并不是bar,很多书(《you dont know JavaScript》《JavaScript高级程序设计》)中,都强调保存下来的引用,即上例中的bar是闭包,而chrome认为被保存下来的封闭空间foo是闭包,针对这点我赞同chrome的判断(仅为自己的理解,如有不同意见,欢迎来讨论)

HTML面试题

1.XHTML和HTML有什么区别

  • HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
    最主要的不同:
  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

2.前端页面有哪三层构成,分别是什么?作用是什么?

  • 结构层 Html 表示层 CSS 行为层 js;
    3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
  • Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto),Safari(wbkit)

4.什么是语义化的HTML?

  • 直观的认识标签 对于搜索引擎的抓取有好处,用正确的标签做正确的事情!
  • html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
    在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

5.HTML5 为什么只需要写 !DOCTYPE HTML?

  • HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

6.Doctype作用?标准模式与兼容模式各有什么区别?

  • !DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  • 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和
HTML5?

  • HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素,比如 article、footer、header、nav、section
  • 表单控件,calendar、date、time、email、url、search
  • 新的技术webworker, websockt, Geolocation
    移除的元素
  • 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  • 对可用性产生负面影响的元素:frame,frameset,noframes;
    支持HTML5新标签:
  • IE8/IE7/IE6支持通过document.createElement方法产生的标签,
  • 可以利用这一特性让这些浏览器支持HTML5新标签,
  • 浏览器支持新标签后,还需要添加标签默认的样式:

8.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

  • cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
  • sessionStorage和localStorage的存储空间更大;
  • sessionStorage和localStorage有更多丰富易用的接口;
  • sessionStorage和localStorage各自独立的存储空间;

9.如何实现浏览器内多个标签页之间的通信?

  • 调用localstorge、cookies等本地存储方式

在设计和开发过程中需要遵循以下原则:

  • 结构分离:使用HTML 增加结构,而不是样式内容;
  • 保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式
  • 学习新语言:获取元素结构和语义标记。
  • 确保可访问: 使用ARIA 属性和Fallback 属性等
  • 测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。

澳门新葡亰手机版 4

闭包的艺术性

我相信这个世界上最美的事物往往就存在我们身边,通常它并不是那么神秘,那么不可见,只是我们缺少了一双发现美的眼睛。

生活中,我们抽出一段时间放慢脚步,细细品味我们所过的每一分每一秒,会收获到生活给我们的另一层乐趣。

闭包也一样,它不是很神秘,反而是在我们的程序中随处可见,当我们静下心来,品味闭包的味道,发现它散发出一种艺术的美,朴实、精巧又不失优雅。

澳门新葡亰手机版 5

细想,在我们作用域气泡模型中,作用域链让我们的内部bar气泡能够”看到”外面的世界,而闭包则让我们的外部作用域能够”关注到”内部的情况成为可能。可见,只要我们愿意,内心世界和外面世界是可以相通的

CSS面试题

1.简要说一下CSS的元素分类

  • 块级元素:div,p,h1,form,ul,li;
  • 行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法(至少说出三种)

  • Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
  • Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
  • Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
  • Position:不会影响布局,能让元素保持可以操作;
  • Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

3.CSS清除浮动的几种方法(至少两种)

  • 使用带clear属性的空元素
  • 使用CSS的overflow属性;
  • 使用CSS的:after伪元素;
  • 使用邻接元素处理;

4.CSS居中(包括水平居中和垂直居中)

内联元素居中方案

水平居中设置:
1.行内元素

  • 设置 text-align:center;

2.Flex布局

  • 设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)

垂直居中设置:
1.父元素高度确定的单行文本(内联元素)

  • 设置 height = line-height;

2.父元素高度确定的多行文本(内联元素)

  • a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;
  • b:先设置 display:table-cell 再设置 vertical-align:middle;

    ### 块级元素居中方案

    水平居中设置:
    1.定宽块状元素

  • 设置 左右 margin 值为 auto;

2.不定宽块状元素

  • a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;
  • b:给该元素设置 displa:inine 方法;
  • c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

  • 使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
  • 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
  • 利用display:table-cell属性使内容垂直居中;
  • 使用css3的新属性transform:translate(x,y)属性;
  • 使用:before元素;

5.写出几种IE6 BUG的解决方法

  • 双边距BUG float引起的 使用display
  • 3像素问题 使用float引起的 使用dislpay:inline -3px
  • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
  • Ie z-index问题 给父级添加position:relative
  • Png 透明 使用js代码 改
  • Min-height 最小高度 !Important 解决’
  • select 在ie6下遮盖 使用iframe嵌套
  • 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

6.对于SASS或是Less的了解程度?喜欢那个?

  • 语法介绍

7.Bootstrap了解程度

  • 特点,排版,插件的使用;

8.页面导入样式时,使用link和@import有什么区别?

  • link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
  • 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  • import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

9.介绍一下CSS的盒子模型?

  • 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

  • id选择器( # myid)
  • 类选择器(.myclassname)
  • 标签选择器(div, h1, p)
  • 相邻选择器(h1 + p)
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器( * )
  • 属性选择器(a[rel = “external”])
  • 伪类选择器(a: hover, li: nth – child)
  • 可继承的样式: font-size font-family color, UL LI DL DD DT;
  • 不可继承的样式:border padding margin width height ;
  • 优先级就近原则,同权重情况下样式定义最近者为准;
  • 优先级为:

    JavaScript

    !important > id > class > tag important 比 内联优先级高

    1
    2
    !important >  id > class > tag
    important 比 内联优先级高

11.CSS3有哪些新特性?

  • CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),
    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
  • transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
    增加了更多的CSS选择器 多背景 rgba

HTML、CSS 和JavaScript三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容,也不能在头标签中输入文本内容,使代码变得冗长和复杂,相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的,如在Chrome中h1标签元素会渲染成32px的Times 粗体。

三条通用设计规则:

  1. 使用HTML 来构造页面结构,CSS修饰页面呈现,JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。
  2. 如果能用CSS或JavaScript实现就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

闭包的应用的注意事项

闭包,在JS中绝对是一个高贵的存在,它让很多不可能实现的代码成为可能,但是物虽好,也要合理使用,不然不但不能达到我们想要的效果,有的时候可能还会适得其反。

  • 内存泄漏(Memory Leak)JavaScript分配给Web浏览器的可用内存数量通常比分配给桌面应用程序的少,这样做主要是防止JavaScript的网页耗尽全部系统内存而导致系统崩溃。因此,要想使页面具有更好的性能,就必须确保页面占用最少的内存资源,也就是说,我们应该保证执行代码只保存有用的数据,一旦数据不再有用,我们就应该让垃圾回收机制对其进行回收,释放内存。

    我们现在都知道了闭包阻止了垃圾回收机制对变量进行回收,因此变量会永远存在内存中,即使当变量不再被使用时,这样会造成内存泄漏,会严重影响页面的性能。因此当变量对象不再适用时,我们要将其释放。

    我们拿上面代码举例:

function foo() { let a = 2; function bar() { console.log( a ); }
return bar; } let baz = foo(); baz();
//baz指向的对象会永远存在堆内存中 baz = null;
//如果baz不再使用,将其指向的对象释放

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da5441991997-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6bea87da5441991997-15">
15
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6bea87da5441991997-1" class="crayon-line">
 function foo() {
</div>
<div id="crayon-5b8f6bea87da5441991997-2" class="crayon-line crayon-striped-line">
     let a = 2;
</div>
<div id="crayon-5b8f6bea87da5441991997-3" class="crayon-line">

</div>
<div id="crayon-5b8f6bea87da5441991997-4" class="crayon-line crayon-striped-line">
     function bar() {
</div>
<div id="crayon-5b8f6bea87da5441991997-5" class="crayon-line">
         console.log( a );
</div>
<div id="crayon-5b8f6bea87da5441991997-6" class="crayon-line crayon-striped-line">
     }
</div>
<div id="crayon-5b8f6bea87da5441991997-7" class="crayon-line">

</div>
<div id="crayon-5b8f6bea87da5441991997-8" class="crayon-line crayon-striped-line">
     return bar;
</div>
<div id="crayon-5b8f6bea87da5441991997-9" class="crayon-line">
 }
</div>
<div id="crayon-5b8f6bea87da5441991997-10" class="crayon-line crayon-striped-line">

</div>
<div id="crayon-5b8f6bea87da5441991997-11" class="crayon-line">
 let baz = foo();
</div>
<div id="crayon-5b8f6bea87da5441991997-12" class="crayon-line crayon-striped-line">

</div>
<div id="crayon-5b8f6bea87da5441991997-13" class="crayon-line">
 baz(); //baz指向的对象会永远存在堆内存中
</div>
<div id="crayon-5b8f6bea87da5441991997-14" class="crayon-line crayon-striped-line">

</div>
<div id="crayon-5b8f6bea87da5441991997-15" class="crayon-line">
 baz = null; //如果baz不再使用,将其指向的对象释放
</div>
</div></td>
</tr>
</tbody>
</table>

关于内存泄漏,推荐
[阮一峰老师博客](http://www.ruanyifeng.com/blog/2017/04/memory-leak.html)。

JavaScript面试题

1.javascript的typeof返回哪些数据类型

  • Object number function boolean underfind;

2.例举3种强制类型转换和2种隐式类型转换?

  • 强制(parseInt,parseFloat,number)隐式(== – ===);

3.数组方法pop() push() unshift() shift()

  • Push()尾部添加 pop()尾部删除
  • Unshift()头部添加 shift()头部删除

4.ajax请求的时候get 和post方式的区别?

  • 一个在url后面 一个放在虚拟载体里面
    有大小限制
  • 安全问题
    应用不同 一个是论坛等只需要请求的,一个是类似修改密码的;

5.call和apply的区别

  • Object.call(this,obj1,obj2,obj3)
  • Object.apply(this,arguments)

6.ajax请求时,如何解释json数据

  • 使用eval parse,鉴于安全性考虑 使用parse更靠谱;

7.事件委托是什么

  • 让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

8.闭包是什么,有什么特性,对页面有什么影响?简要介绍你理解的闭包

  • 闭包就是能够读取其他函数内部变量的函数。

9.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下什么是javascript的同源策略?

  • 一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合

11.编写一个b继承a的方法;

JavaScript

function A(name){ this.name = name; this.sayHello = function(){alert(this.name+” say Hello!”);}; } function B(name,id){ this.temp = A; this.temp(name); //相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)}; }

1
2
3
4
5
6
7
8
9
10
11
function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;      
     this.id = id;  
    this.checkId = function(ID){alert(this.id==ID)};
}

12.如何阻止事件冒泡和默认事件

JavaScript

function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true } return false

1
2
3
4
5
6
7
8
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
return false

13.下面程序执行后弹出什么样的结果?

JavaScript

function fn() { this.a = 0; this.b = function() { alert(this.a) } } fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); } } var myfn = new fn(); myfn.b(); myfn.c();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14.谈谈This对象的理解。

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象

15.下面程序的结果

JavaScript

function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3);

1
2
3
4
5
6
7
8
9
10
11
function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案:

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下面程序的输出结果

JavaScript

var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();

1
2
3
4
5
6
7
8
9
var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

17.了解Node么?Node的使用场景都有哪些?

  • 高并发、聊天、实时消息推送

18.介绍下你最常用的一款框架

  • jquery,rn,angular等;

19.对于前端自动化构建工具有了解吗?简单介绍一下

  • Gulp,Grunt等;

20.介绍一下你了解的后端语言以及掌握程度

文档结构方面也可以做优化,如下:

  • 使用HTML5 文档类型,以下是空文件:

<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
<title>Recipes: pesto</title>
</head>
 
<body>
 
  <h1>Pesto</h1>
 
  <p>Pesto is good!</p>
 
</body>
</html>
  • 在文档起始位置引用CSS文件,如下:

<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>

1
2
3
4
5
6
7
<head>
  <title>My pesto recipe</title>
 
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">
 
</head>

使用这两种方法,浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

在页面底部body结束标签之前输入JavaScript代码,这样有助于提升页面加载的速度,因为浏览器在解析JavaScript代码之前将页面加载完成,使用JavaScript会对页面元素产生积极的影响。

<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>

1
2
3
4
5
6
7
8
<body>
 
  ...
 
  <script src="/js/global.js">
  <script src="js/local.js">
 
</body>

使用Defer和async属性,脚本元素具有async 属性无法保证会按顺序执行。

可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中,比如下面的代码则容易导致错误且不易于维护:

index.html:

<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  
  ...
 
  <script src="js/local.js">
 
</head>
 
<body onload="init()">
 
  ...
 
  <button onclick="handleFoo()">Foo</button>
 
  ...
 
</body>

下面的写法比较好:

index.html:

<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
 
  ...
 
</head>
 
<body>
 
  ...
 
  <button id="foo">Foo</button>
 
  ...
 
  <script src="js/local.js">
 
</body>

js/local.js:

init(); var fooButton = document.querySelector('#foo'); fooButton.onclick = handleFoo();

1
2
3
4
init();
var fooButton =
    document.querySelector('#foo');
fooButton.onclick = handleFoo();

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:整理总结的一些前端面试题,是真的美澳门新葡

上一篇:创建对象的,来看看机智的前端童鞋怎么防盗 下一篇:没有了
猜你喜欢
热门排行
精彩图文