艾小莫的梦-CSDN博客

原创前端面试之算法题

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。Q1 判断一个单词是否是回文？回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回

2017-09-30 10:46:59 1895 2

你可能知道，Javascript语言的执行环境是”单线程”（single thread）。所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascri

2017-09-30 10:31:08 526

转载 Javascript 严格模式详解

一、概述除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立”严格模式”的目的，主要有以下几个：消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; 消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未

2017-09-28 11:25:33 691

原创前端面试中常见的数据结构题

一、链表1、如何判断一个链表里有没有环思路：快慢指针，一个走的快，一个走的慢，那么若干步以后，快慢指针会相遇。/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } */var hasCycle = funct

2017-09-20 14:33:21 2994

原创 CSS——选择器的优先级

1、引言span{ color:red;}.plantext{ color:blue;}<span class="plantext"></span>上面代码中，css中的两个选择器都是针对的，而且两个设置的颜色不一样，这里的到底听从谁的命令？上面还是比较简单的，下面在来一个复杂的：#div1 li{ color: blue;}.content .list li{

2017-09-20 10:54:21 724

转载用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别？

对于setTimeout()跟setIntervl()之间的区别，你真的了解么？有时候看似简单的东西，往往隐藏一些你不知道的细节。setTimeout(fn,time)是超时调用，它在大于等于time之后调用fn；而setIntervl(fn,time)是间歇调用；每隔time调用一次。下面我要讲的是：用setTimeout()方法来模拟setInterval()与setInterval()之间的什

2017-09-19 10:32:33 631

原创 JS中的map、reduce

Array.prototype.map()map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以

2017-09-18 12:17:37 1076

原创 JS map的简单实现

/* * MAP对象，实现MAP功能 * * 接口： * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素（key, value) * remove(key) 删除指定KEY的元素

2017-09-13 17:29:44 697

原创 JS中自定义sleep函数

js中不存在自带的sleep方法，要想休眠要自己定义个方法，现将自己使用的方法整理如下，后续如果有更优雅的方法，我会再来补充，也欢迎大家多提意见。1、for循环法function sleep(d){ for(var t = Date.now();Date.now() - t <= d;);}sleep(5000); //当前方法暂停5秒利用for循环的这种写法是最简单也最糟糕的方法，如上的代码

2017-09-12 16:07:44 1136

原创 JS如何判断一个对象为空

昨天面试的时候被问到的问题。只怪自己根基不牢，没有回答好。然后面试官提示用for in，突然恍然大悟，然后又查询了网上的一些方法，对这个问题做一下整理。1、最常见的思路，for…in…遍历属性，为真则为“非空数组”；否则为“空数组”var judgeObj = function(obj){ for(var item in obj){ return true; }

2017-09-12 15:08:00 1359

原创伪类和伪元素的区别

伪类和伪元素经常用来向某些选择器设置特殊效果。那么他们之间到底有哪些区别呢？伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。伪类的种类：伪元素的种类：

2017-09-12 14:46:41 414

原创 JS数组去重的多种实现

js数组去重是平时我们经常遇见的问题，也是前端面试中比较受面试官青睐的一个算法问题，现将几种方法整理如下：1.遍历数组法最简单的去重方法，实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码，源码如下：var unique = function(arr){

2017-09-07 14:37:50 504

原创进程和线程的区别

一、先看一个很形象的比喻：1、计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。2、假定工厂的电力有限，一次只能供给一个车间使用。也就是说，一个车间开工的时候，其他车间都必须停工。背后的含义就是，单个CPU一次只能运行一个任务。3、进程就好比工厂的车间，它代表CPU所能处理的单个任务。任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。4、一个车间里，可以有很多工人。他

2017-09-05 17:41:04 417

原创面试中常见的计算机网络问题

最近面试被问到了很多计算机网络的知识，现在把相关的知识系统的整理一下。一、七层模型与TCP/IP四层模型可以参考我整理的这篇文章二、TCP这篇文章整理的很好，可以看看三、请简述TCP\UDP的区别TCP和UDP是OSI模型中的运输层中的协议。TCP提供可靠的通信传输，而UDP则常被用于让广播和细节控制交给应用的通信传输。两者的区别大致如下：TCP面向连接，UDP面向非连接即发送数据前不需要建立链接

2017-09-04 16:19:47 665

原创 OSI七层模型与TCP/IP四层模型

一、OSI七层模型开放系统互连参考模型 (Open System Interconnect 简称OSI）是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型，为开放式互连信息系统提供了一种功能结构的框架。它从低到高分别是：物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。1、物理层物理层并不是物理媒体本身，它只是开放系统中利用物理媒体实现物理连接的

2017-09-04 15:57:23 819

原创输入一个URL到页面呈现的过程

输入一个URL到页面呈现的过程这是一个面试中老生常谈的问题，在百度、小米、美团等面试中均问到了这个问题。这几天读了一篇还不错的文章，现根据自己的理解做一下整理。1、我们输入一个域名:www.facebook.com，然后点击确认；2、浏览器查找该域名的IP；具体的查找过程如下：（1）首先是浏览器缓存。各大浏览器默认开启了DNS缓存功能，大多数浏览器有独立于操作系统的自己的cache。只要浏览器在自

2017-09-04 10:13:01 608

原创从Promise来看JavaScript中的Event Loop、Tasks和Microtasks

前几天面试的时候，碰到了这样一个题：说出下列代码的执行结果：setTimeout(function () { console.log(1)}, 0);new Promise(function executor(resolve) { resolve();}).then(function () { console.log(2);}); //2,1(functio

2017-08-22 14:20:59 1169

原创 JS中this关键字详解

this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，　　function test(){　　　　this.x = 1;　　}随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。下面分六种情况，详细讨论this的用法。普通函数调用作为方法来调用作为构造函数来调用使用ap

2017-08-21 16:07:27 369

原创从一道面试题看ES6箭头函数

前几天头条面试碰到了这样一道面试题，让我写出每行代码的运行结果：var f = x => x; f(1); //return 1var f = x => {x}; f(1); //function(x)={x};var f = x => ({x}) ;f(1);//return {1}(返回一个对象)ES6 允许使用“箭头”（=>）定义函数。var f = v => v;上面的箭头函数等同于：

2017-08-21 10:46:21 1563

原创浅谈js中==、!=、===、!==

==与===1、对于string,number等基础类型，==和===是有区别的1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等===如果类型不同，其结果就是不等；原始类型的数据会转换成数值类型再进行比较。字符串和布尔值都会转换成数值，所以题主的问题中会有第二个string输出。2）同类型比较，直接进行“值”比较，两者结果一样2、对于Array,Object等高级类型，==

2017-08-21 10:06:57 373

转载纯css实现自适应正方形

在处理移动端页面时，我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果，如Flipbord的移动页面：方案一：CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；

2017-08-20 18:44:56 1814

原创校招提前批之今日头条一面

今天上午面了头条校招提前批，感觉考的比较基础，也有一些知识点没有答出来，现凭着记忆总结一些知识点。CSS1、inline间隙问题问了下inline-block间隙的原因，以及去掉的方案，这个打算重新开一篇博客总结。2、margin合并问题外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一

2017-08-20 18:38:20 1614

原创 CSS Transform / Transition / Animation 属性的区别

CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明:一、transform通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是

2017-08-18 17:36:13 685

原创 React：虚拟DOM Diff算法解析

React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心虚拟DOM是如何运作的。然而，理解其运行机制不仅有助于更好的理解React组件的生命周期，而且对于进一步优化React程序也会有很大帮助。

2017-07-27 16:50:56 1395

原创从一个demo引发的对import、require的思考

这两天在学react的时候，用自己搭建的react全家桶封装了一个echart图表组件，在引包的时候，写了这样的代码。。。。但是只是参考网上各种材料，写出了这种包的引入。写完以后不禁心中生出了很多疑问，通过查阅资料现整理如下：一、import跟require这两种方式有什么区别？1、遵循的模块化规范不一样模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初

2017-07-27 14:28:41 1146

转载 React中state与props比较

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的

2017-07-24 18:41:40 498

原创网站SEO优化中tilte与h1的区别、b与strong的区别、i与em的区别

一、tilte与h1的区别从搜索引擎角度来说，title标签是用来描述这个页面的主题的，是一个网页权重的最高点。但title标签并不出现在文章的正文中。而h1标签一般出现在文章的正文中，是展示给访问者的文章的标题。所以说这两个标签不仅不冲突的，而是合作的关系。一篇文章既要有title又要有h1标签，既突出了文章的主题，又突出了标题和关键字，达到双重优化网站的效果。一般会把title和h1标签的内容写

2017-07-18 18:14:36 1644

原创雅虎军规——前端优化的35条建议

无论是在工作中，还是在面试中，web前端性能的优化都是很重要的，那么我们进行优化需要从哪些方面入手呢？yohoo关于性能优化的35条的军规，web2.0的设计与视觉，用户越来越注重用户体验，但用户体验的前提就是网站的访问速度，对于一个大型网站的yahoo来说，处理性能优化是不可缺少的，他是怎么制定性能优化呢，相比很多朋友都想了解下，YaHoo把性能优化作为他们不可触犯的军规，具体怎样优化呢，且看他们

2017-07-14 10:42:33 1147

转载 webpack-dev-server不能自动刷新问题

使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题；寻找多方答案后明白了一些；下面有一些需要注意的点：1.webpack-dev-server并不能读取你的webpack.config.js的配置output！！你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用2.webpa

2017-07-11 16:06:03 5598 2

原创 react环境配置

前言前几天学习react，看了阮一峰的react入门博客，参考链接： http://www.ruanyifeng.com/blog/2015/03/react。在这篇博客中，所有的例子都是通过引入三个相关的js文件来实现react。下面看下第一个demo代码：<!DOCTYPE html><html> <head> <script src="../build/react.js"></

2017-07-11 14:56:31 599

原创使用webpack合并js文件

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前，先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法模块化，让我们可以把复杂的程序细化为小

2017-07-10 11:11:26 15377

原创 JavaScript里的循环方法之forEach，for...in，for...of

JavaScript诞生已经有20多年了，我们一直使用的用来循环一个数组的方法是这样的：for (var index = 0; index < myArray.length; index++) {console.log(myArray[index]);}一、 forEach自从JavaScript5起，我们开始可以使用内置的forEach 方法：，forEach方法中的function回调有三个

2017-07-05 11:18:00 712

原创 nodeJS创建第一个应用

最近开始了解nodeJS。做了如下的一个功能：使用nodeJS开启一个服务，然后调用XXX后台接口的数据，返回的数据格式如下，然后以表格的形式在页面中展示出来。代码如下：var http = require('http');var request = require('request');function handleData(arr){ var content = '';

2017-07-05 09:55:45 509

原创用纯CSS实现三角形

网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的，如果用纯css实现这个效果，其源代码如下：.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid;border-right: 4px solid t

2017-06-26 19:27:50 502

原创 GET和POST区别

http请求中get和post的区别是面试中老生常谈的问题，网上也看了好多文章，觉得很多都是复制粘贴，也不是很全。现在将我看到的一些资料整理一下，以便更加清楚的明白这两者的区别。首先是w3cSchool上，列出了一个表格，很形象的展示了get和post的区别也就是说：1、GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，

2017-06-23 12:29:35 506

转载深入浅出妙用Javascript中apply、call、bind

这篇文章实在是很难下笔，因为网上相关的文章不胜枚举。巧合的是前些天看到阮一峰老师的一篇文章的一句话： “对于我来说，博客首先是一种知识管理的工具，其次才是传播工具。我的技术文章，主要用来整理我还不懂得知识。我只写那些我还没有完全掌握的东西，那些我精通的东西，往往没有动力写。炫耀从来不是我的动机，好奇才是。”对于这句话，不能赞同更多，也让我下定决心好好写这篇，网上虽然文章很多，但是大多复制粘贴，且晦

2017-06-22 15:11:43 709

转载一道常被人轻视的前端JS面试题

前几天读文章，偶尔读到了一篇挺不错的文章，用来考核面试者的JavaScript的综合能力，先整理分享一下。题目如下：function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName =

2017-06-22 12:21:10 413

转载你应该知道的 setTimeout 秘密

计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。语法：setTimeout(code, millisec, args);注意：如果code为字符串，相当于执行eval()方法来执行code。当然，这一篇文章并不仅仅告诉你怎么用setTimeout，而且理解其是如何执行的。1、setTimeout原理先来看一段代码：var start = new Date()

2017-06-22 11:54:44 1300

转载 BFC原理及其应用

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Form

2017-06-21 18:34:27 2360

原创 js中的事件委托

简介利用冒泡的原理，把事件加到父级上，触发执行效果。在介绍事件委托例子之前，先看一个传统做法的例子：实现功能是点击li，弹出123：<ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li></ul>window.onload = function(){ var oUl = docum

2017-06-21 18:03:13 392

空空如也

空空如也