卡卡

卡卡 查看完整档案

杭州编辑河南大学  |  网络工程 编辑卡卡  |  研发 编辑 www.kaka996.com 编辑
编辑

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃;
菩提本无树,明镜亦非台,本来无一物,何处惹尘埃。

个人动态

卡卡 赞了文章 · 9月14日

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望

总结

截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:

搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项

这几件必须做好的关键事项就是到目前为止每个章节聊到的各个内容,为方便查阅整理成以下表格:

序号标题代码
第零章静态服务00-static
第一章接口与分层01-api-and-layering
第二章校验02-validate
第三章中间件03-middleware
第四章异常处理04-exception
第五章数据库访问05-database
第六章会话06-session
第七章认证登录07-authentication
第八章网络安全08-security
第九章配置项09-config
第十章日志10-log
第十一章定时任务11-schedule
第十二章远程调用12-rpc
第十三章断点调试与性能分析13-debugging-and-profiling
第十四章自动化测试14-testing
第十五章总结与展望-

本文已同步收录于 Github 示例代码仓库 host1-tech/nodejs-server-examples,可以 Star 或 Fork 收藏。

感谢一路以来读者朋友们的关注与支持,给了我坚持的动力。感谢指出不足并给出改进建议的朋友们,让本文更加的严谨。

展望

有些 Java 背景的开发者会对 Node.js 持有怀疑,其实大可不必。能否建成强大稳定的企业级 Web 服务器的症结不在于业务逻辑是运行在 Node.js 还是 JVM 上,而在于企业级 Web 服务器的关键事项能否得到妥当处理。Node.js 经过十余年的发展,具备了非常完善的社区储备与方案沉淀来解决企业级 Web 服务器的各种问题,Netflix、PayPal、Uber、阿里、腾讯等大中型企业规模化使用 Node.js 开发服务器已有多年,再加上 Node.js 高性能 IO 设计与 JS 人才复用带来的成本节省,许多初创小微企业也开始纷纷首选 Node.js 进行开发服务器。随着云原生技术的发展,通用能力逐渐下沉,单个节点技术栈的影响一点点被淡化,使用老技术栈实现业务逻辑变得不再必要,为 Node.js 技术栈的应用与发展进一步带来更多的机会。

笔者十分看好 Node.js 的当下与未来,通过本文希望更多的人能够了解 Node.js、接受 Node.js、使用 Node.js、喜欢 Node.js。本文只着重表述了 Web 后端技术本身内容,更全面的实践我会尝试以开源项目的方式沉淀下来,届时还希望读者朋友们不吝赐教,也欢迎有兴趣的朋友们共同参与。

更多阅读

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
从零搭建 Node.js 企业级 Web 服务器(二):校验
从零搭建 Node.js 企业级 Web 服务器(三):中间件
从零搭建 Node.js 企业级 Web 服务器(四):异常处理
从零搭建 Node.js 企业级 Web 服务器(五):数据库访问
从零搭建 Node.js 企业级 Web 服务器(六):会话
从零搭建 Node.js 企业级 Web 服务器(七):认证登录
从零搭建 Node.js 企业级 Web 服务器(八):网络安全
从零搭建 Node.js 企业级 Web 服务器(九):配置项
从零搭建 Node.js 企业级 Web 服务器(十):日志
从零搭建 Node.js 企业级 Web 服务器(十一):定时任务
从零搭建 Node.js 企业级 Web 服务器(十二):远程调用
从零搭建 Node.js 企业级 Web 服务器(十三):断点调试与性能分析
从零搭建 Node.js 企业级 Web 服务器(十四):自动化测试
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望

查看原文

赞 54 收藏 37 评论 16

卡卡 收藏了文章 · 7月31日

总结了17年初到18年初百场前端面试的面试经验(含答案)

我是一名刚毕业的程序媛,面试的岗位是前端开发工程师,从17年初找实习开始,先后面试了50多家公司,加上123面,总共经历了上百场面试,其中包括百度,腾讯,阿里,滴滴,网易,美团等等,也面了一些中小公司的社招。

总结一下面试遇到的问题,希望对大家助,本文很长很长很长(省略n个很长),但是看完的话,确实可以加深前端基础知识的理解,原文链接可以跳转(如果对您有帮助,请帮我点个star,定时更新):

同时我的博客地址是:https://github.com/forthealll... 会定时更新一些学习心得,也欢迎star和fork

🌱 文章列表

一、基础javascript篇

1. get请求传参长度的误区

误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。为了明确这个概念,我们必须再次强调下面几点:

  • HTTP 协议 未规定 GET 和POST的长度限制
  • GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度
  • 不同的浏览器和WEB服务器,限制的最大长度不一样
  • 要支持IE,则最大长度为2083byte,若只支持Chrome,则最大长度 8182byte

2. 补充get和post请求在缓存方面的区别

post/get的请求区别,具体不再赘述。

补充补充一个get和post在缓存方面的区别:

  • get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。
  • post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。

3. 闭包

一句话可以概括:闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用,子函数所在的父函数的作用域不会被释放。

4. 类的创建和继承

(1)类的创建(es5):new一个function,在这个function的prototype里面增加属性和方法。

下面来创建一个Animal类:

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};

这样就生成了一个Animal类,实力化生成对象后,有方法和属性。

(2)类的继承——原型链继承

--原型链继承
function Cat(){ }
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
  • 介绍:在这里我们可以看到new了一个空对象,这个空对象指向Animal并且Cat.prototype指向了这个空对象,这种就是基于原型链的继承。
  • 特点:基于原型链,既是父类的实例,也是子类的实例
  • 缺点:无法实现多继承

(3)构造继承:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
  • 特点:可以实现多继承
  • 缺点:只能继承父类实例的属性和方法,不能继承原型上的属性和方法。

(4)实例继承和拷贝继承

实例继承:为父类实例添加新特性,作为子类实例返回

拷贝继承:拷贝父类元素上的属性和方法

上述两个实用性不强,不一一举例。

(5)组合继承:相当于构造继承和原型链继承的组合体。通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
  • 特点:可以继承实例属性/方法,也可以继承原型属性/方法
  • 缺点:调用了两次父类构造函数,生成了两份实例

(6)寄生组合继承:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
  • 较为推荐

5. 如何解决异步回调地狱

promise、generator、async/await

6. 说说前端中的事件流

HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

什么是事件流:事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段

addEventListeneraddEventListener 是DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡

7. 如何让事件先冒泡后捕获

在DOM标准事件模型中,是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓执行,直到冒泡事件被捕获后再执行捕获之间。

8. 事件委托

  • 简介:事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。
  • 举例:最经典的就是ul和li标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。
  • 好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。

9. 图片的懒加载和预加载

  • 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
  • 懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

10. mouseover和mouseenter的区别

  • mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡的过程。对应的移除事件是mouseout
  • mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleave

11. js的new操作符做了哪些事情

new 操作符新建了一个空对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象。

12.改变函数内部this指针的指向函数(bind,apply,call的区别)

  • 通过apply和call改变函数的this指向,他们两个函数的第一个参数都是一样的表示要改变指向的那个对象,第二个参数,apply是数组,而call则是arg1,arg2...这种形式。
  • 通过bind改变this作用域会返回一个新的函数,这个函数不会马上执行。

13. js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?

  • clientHeight:表示的是可视区域的高度,不包含border和滚动条
  • offsetHeight:表示可视区域的高度,包含了border和滚动条
  • scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分。
  • clientTop:表示边框border的厚度,在未指定的情况下一般为0
  • scrollTop:滚动后被隐藏的高度,获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

14. js拖拽功能的实现

  • 首先是三个事件,分别是mousedown,mousemove,mouseup

当鼠标点击按下的时候,需要一个tag标识此时已经按下,可以执行mousemove里面的具体方法。

  • clientX,clientY标识的是鼠标的坐标,分别标识横坐标和纵坐标,并且我们用offsetX和offsetY来表示元素的元素的初始坐标,移动的举例应该是:

    鼠标移动时候的坐标-鼠标按下去时候的坐标。

    也就是说定位信息为:

    鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的offetLeft.

  • 还有一点也是原理性的东西,也就是拖拽的同时是绝对定位,我们改变的是绝对定位条件下的left
    以及top等等值。

补充:也可以通过html5的拖放(Drag 和 drop)来实现

二、进阶javascript篇

1.自己实现一个bind函数

原理:通过apply或者call方法来实现。

(1)初始版本

Function.prototype.bind=function(obj,arg){
  var arg=Array.prototype.slice.call(arguments,1);
  var context=this;
  return function(newArg){
    arg=arg.concat(Array.prototype.slice.call(newArg));
    return context.apply(obj,arg);
  }
}

(2) 考虑到原型链

为什么要考虑?因为在new 一个bind过生成的新函数的时候,必须的条件是要继承原函数的原型

Function.prototype.bind=function(obj,arg){
  var arg=Array.prototype.slice.call(arguments,1);
  var context=this;
  var bound=function(newArg){
    arg=arg.concat(Array.prototype.slice.call(newArg));
    return context.apply(obj,arg);
  }
  var F=function(){}
  //这里需要一个寄生组合继承
  F.prototype=context.prototype;
  bound.prototype=new F();
  return bound;
}

2.用setTimeout来实现setInterval

(1)用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?

首先来看setInterval的缺陷,使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。这个问题在于:如果定时器代码在代码再次添加到队列之前还没完成执行,结果就会导致定时器代码连续运行好几次。而之间没有间隔。不过幸运的是:javascript引擎足够聪明,能够避免这个问题。当且仅当没有该定时器的如何代码实例时,才会将定时器代码添加到队列中。这确保了定时器代码加入队列中最小的时间间隔为指定时间。

这种重复定时器的规则有两个问题:1.某些间隔会被跳过 2.多个定时器的代码执行时间可能会比预期小。

下面举例子说明:

假设,某个onclick事件处理程序使用啦setInterval()来设置了一个200ms的重复定时器。如果事件处理程序花了300ms多一点的时间完成。

<img width="626" alt="2018-07-10 11 36 43" data-original="https://user-gold-cdn.xitu.io...;h=498&f=png&s=326047">

这个例子中的第一个定时器是在205ms处添加到队列中,但是要过300ms才能执行。在405ms又添加了一个副本。在一个间隔,605ms处,第一个定时器代码还在执行中,而且队列中已经有了一个定时器实例,结果是605ms的定时器代码不会添加到队列中。结果是在5ms处添加的定时器代码执行结束后,405处的代码立即执行。

function say(){
  //something
  setTimeout(say,200);
}
setTimeout(say,200)

或者

setTimeout(function(){
   //do something
   setTimeout(arguments.callee,200);
},200);

3.js怎么控制一次加载一张图片,加载完后再加载下一张

(1)方法1

<script type="text/javascript">
var obj=new Image();
obj.data-original="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img data-original='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

(2)方法2

<script type="text/javascript">
var obj=new Image();
obj.data-original="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img data-original='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>

3.代码的执行顺序

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

为什么呢?具体请参考我的文章:[
从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue](https://github.com/forthealll...

4.如何实现sleep的效果(es5或者es6)

(1)while循环的方式

function sleep(ms){
   var start=Date.now(),expire=start+ms;
   while(Date.now()<expire);
   console.log('1111');
   return;
}

执行sleep(1000)之后,休眠了1000ms之后输出了1111。上述循环的方式缺点很明显,容易造成死循环。

(2)通过promise来实现

function sleep(ms){
  var temple=new Promise(
  (resolve)=>{
  console.log(111);setTimeout(resolve,ms)
  });
  return temple
}
sleep(500).then(function(){
   //console.log(222)
})
//先输出了111,延迟500ms后输出222

(3)通过async封装

function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(1111)
  return temple
}
test();
//延迟1000ms输出了1111

(4).通过generate来实现

function* sleep(ms){
   yield new Promise(function(resolve,reject){
             console.log(111);
             setTimeout(resolve,ms);
        })  
}
sleep(500).next().value.then(function(){console.log(2222)})

5.简单的实现一个promise

首先明确什么是promiseA+规范,参考规范的地址:

primiseA+规范

如何实现一个promise,参考我的文章:

实现一个完美符合Promise/A+规范的Promise

一般不会问的很详细,只要能写出上述文章中的v1.0版本的简单promise即可。

6.Function.__proto__(getPrototypeOf)是什么?

获取一个对象的原型,在chrome中可以通过__proto__的形式,或者在ES6中可以通过Object.getPrototypeOf的形式。

那么Function.proto是什么么?也就是说Function由什么对象继承而来,我们来做如下判别。

Function.__proto__==Object.prototype //false
Function.__proto__==Function.prototype//true

我们发现Function的原型也是Function。

我们用图可以来明确这个关系:

<img width="646" alt="2018-07-10 2 38 27" data-original="https://user-gold-cdn.xitu.io...;h=1028&f=png&s=183106">

7.实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)

通过递归可以简单实现对象的深度克隆,但是这种方法不管是ES6还是ES5实现,都有同样的缺陷,就是只能实现特定的object的深度复制(比如数组和函数),不能实现包装对象Number,String , Boolean,以及Date对象,RegExp对象的复制。

(1)前文的方法

function deepClone(obj){
    var newObj= obj instanceof Array?[]:{};
    for(var i in obj){
       newObj[i]=typeof obj[i]=='object'?  
       deepClone(obj[i]):obj[i];    
    }
    return newObj;
}

这种方法可以实现一般对象和数组对象的克隆,比如:

var arr=[1,2,3];
var newArr=deepClone(arr);
// newArr->[1,2,3]

var obj={
   x:1,
   y:2
}
var newObj=deepClone(obj);
// newObj={x:1,y:2}

但是不能实现例如包装对象Number,String,Boolean,以及正则对象RegExp和Date对象的克隆,比如:

//Number包装对象
var num=new Number(1);
typeof num // "object"

var newNum=deepClone(num);
//newNum ->  {} 空对象

//String包装对象
var str=new String("hello");
typeof str //"object"

var newStr=deepClone(str);
//newStr->  {0:'h',1:'e',2:'l',3:'l',4:'o'};

//Boolean包装对象
var bol=new Boolean(true);
typeof bol //"object"

var newBol=deepClone(bol);
// newBol ->{} 空对象

....

(2)valueof()函数

所有对象都有valueOf方法,valueOf方法对于:如果存在任意原始值,它就默认将对象转换为表示它的原始值。对象是复合值,而且大多数对象无法真正表示为一个原始值,因此默认的valueOf()方法简单地返回对象本身,而不是返回一个原始值。数组、函数和正则表达式简单地继承了这个默认方法,调用这些类型的实例的valueOf()方法只是简单返回这个对象本身。

对于原始值或者包装类:

function baseClone(base){
 return base.valueOf();
}

//Number
var num=new Number(1);
var newNum=baseClone(num);
//newNum->1

//String
var str=new String('hello');
var newStr=baseClone(str);
// newStr->"hello"

//Boolean
var bol=new Boolean(true);
var newBol=baseClone(bol);
//newBol-> true

其实对于包装类,完全可以用=号来进行克隆,其实没有深度克隆一说,

这里用valueOf实现,语法上比较符合规范。

对于Date类型:

因为valueOf方法,日期类定义的valueOf()方法会返回它的一个内部表示:1970年1月1日以来的毫秒数.因此我们可以在Date的原型上定义克隆的方法:

Date.prototype.clone=function(){
  return new Date(this.valueOf());
}

var date=new Date('2010');
var newDate=date.clone();
// newDate->  Fri Jan 01 2010 08:00:00 GMT+0800 

对于正则对象RegExp:

RegExp.prototype.clone = function() {
var pattern = this.valueOf();
var flags = '';
flags += pattern.global ? 'g' : '';
flags += pattern.ignoreCase ? 'i' : '';
flags += pattern.multiline ? 'm' : '';
return new RegExp(pattern.source, flags);
};

var reg=new RegExp('/111/');
var newReg=reg.clone();
//newReg->  /\/111\//

8.简单实现Node的Events模块

简介:观察者模式或者说订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。

node中的Events模块就是通过观察者模式来实现的:

var events=require('events');
var eventEmitter=new events.EventEmitter();
eventEmitter.on('say',function(name){
    console.log('Hello',name);
})
eventEmitter.emit('say','Jony yu');

这样,eventEmitter发出say事件,通过On接收,并且输出结果,这就是一个订阅模式的实现,下面我们来简单的实现一个Events模块的EventEmitter。

(1)实现简单的Event模块的emit和on方法

function Events(){
this.on=function(eventName,callBack){
  if(!this.handles){
    this.handles={};
  }
  if(!this.handles[eventName]){
    this.handles[eventName]=[];
  }
  this.handles[eventName].push(callBack);
}
this.emit=function(eventName,obj){
   if(this.handles[eventName]){
     for(var i=0;o<this.handles[eventName].length;i++){
       this.handles[eventName][i](obj);
     }
   }
}
return this;
}

这样我们就定义了Events,现在我们可以开始来调用:

 var events=new Events();
 events.on('say',function(name){
    console.log('Hello',nama)
 });
 events.emit('say','Jony yu');
 //结果就是通过emit调用之后,输出了Jony yu

(2)每个对象是独立的

因为是通过new的方式,每次生成的对象都是不相同的,因此:

var event1=new Events();
var event2=new Events();
event1.on('say',function(){
    console.log('Jony event1');
});
event2.on('say',function(){
    console.log('Jony event2');
})
event1.emit('say');
event2.emit('say');
//event1、event2之间的事件监听互相不影响
//输出结果为'Jony event1' 'Jony event2'

9.箭头函数中this指向举例

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//输出22

定义时绑定。

三、http、html和浏览器篇

1.http和https

https的SSL加密是在传输层实现的。

(1)http和https的基本概念

http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。

https: 是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。

https协议的主要作用是:建立一个信息安全通道,来确保数组的传输,确保网站的真实性。

(2)http和https的区别?

http传输的数据都是未加密的,也就是明文的,网景公司设置了SSL协议来对http协议传输的数据进行加密处理,简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议,比http协议的安全性更高。
主要的区别如下:

  • Https协议需要ca证书,费用较高。
  • http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
  • 使用不同的链接方式,端口也不同,一般而言,http协议的端口为80,https的端口为443
  • http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

(3)https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤,如图所示。

  • 客户使用https url访问服务器,则要求web 服务器建立ssl链接。
  • web服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),返回或者说传输给客户端。
  • 客户端和web服务器端开始协商SSL链接的安全等级,也就是加密等级。
  • 客户端浏览器通过双方协商一致的安全等级,建立会话密钥,然后通过网站的公钥来加密会话密钥,并传送给网站。
  • web服务器通过自己的私钥解密出会话密钥。
  • web服务器通过会话密钥加密与客户端之间的通信。

(4)https协议的优点

  • 使用HTTPS协议可认证用户和服务器,确保数据发送到正确的客户机和服务器;
  • HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全,可防止数据在传输过程中不被窃取、改变,确保数据的完整性。
  • HTTPS是现行架构下最安全的解决方案,虽然不是绝对安全,但它大幅增加了中间人攻击的成本。
  • 谷歌曾在2014年8月份调整搜索引擎算法,并称“比起同等HTTP网站,采用HTTPS加密的网站在搜索结果中的排名将会更高”。

(5)https协议的缺点

  • https握手阶段比较费时,会使页面加载时间延长50%,增加10%~20%的耗电。
  • https缓存不如http高效,会增加数据开销。
  • SSL证书也需要钱,功能越强大的证书费用越高。
  • SSL证书需要绑定IP,不能再同一个ip上绑定多个域名,ipv4资源支持不了这种消耗。

2.tcp三次握手,一句话概括

客户端和服务端都需要直到各自可收发,因此需要三次握手。

简化三次握手:

<img width="487" alt="2018-07-10 3 42 11" data-original="https://user-gold-cdn.xitu.io...;h=1038&f=png&s=94703">

从图片可以得到三次握手可以简化为:C发起请求连接S确认,也发起连接C确认我们再看看每次握手的作用:第一次握手:S只可以确认 自己可以接受C发送的报文段第二次握手:C可以确认 S收到了自己发送的报文段,并且可以确认 自己可以接受S发送的报文段第三次握手:S可以确认 C收到了自己发送的报文段

3.TCP和UDP的区别

(1)TCP是面向连接的,udp是无连接的即发送数据前不需要先建立链接。

(2)TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UDP尽最大努力交付,即不保证可靠交付。 并且因为tcp可靠,面向连接,不会丢失数据因此适合大数据量的交换。

(3)TCP是面向字节流,UDP面向报文,并且网络出现拥塞不会使得发送速率降低(因此会出现丢包,对实时的应用比如IP电话和视频会议等)。

(4)TCP只能是1对1的,UDP支持1对1,1对多。

(5)TCP的首部较大为20字节,而UDP只有8字节。

(6)TCP是面向连接的可靠性传输,而UDP是不可靠的。

4.WebSocket的实现和应用

(1)什么是WebSocket?

WebSocket是HTML5中的协议,支持持久连续,http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接,HTTP1.1中的keep-alive,将多个http请求合并为1个

(2)WebSocket是什么样的协议,具体有什么优点?

  • HTTP的生命周期通过Request来界定,也就是Request一个Response,那么在Http1.0协议中,这次Http请求就结束了。在Http1.1中进行了改进,是的有一个connection:Keep-alive,也就是说,在一个Http连接中,可以发送多个Request,接收多个Response。但是必须记住,在Http中一个Request只能对应有一个Response,而且这个Response是被动的,不能主动发起。
  • WebSocket是基于Http协议的,或者说借用了Http协议来完成一部分握手,在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现,基本是2个属性,upgrade,connection。

基本请求如下:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

多了下面2个属性:

Upgrade:webSocket
Connection:Upgrade
告诉服务器发送的是websocket
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

5.HTTP请求的方式,HEAD方式

  • head:类似于get请求,只不过返回的响应中没有具体的内容,用户获取报头
  • options:允许客户端查看服务器的性能,比如说服务器支持的请求方式等等。

6.一个图片url访问后直接下载怎样实现?

请求的返回头里面,用于浏览器解析的重要参数就是OSS的API文档里面的返回http头,决定用户下载行为的参数。

下载的情况下:

  1. x-oss-object-type:
         Normal
  2. x-oss-request-id:
         598D5ED34F29D01FE2925F41
  3. x-oss-storage-class:
         Standard

7.web Quality (无障碍)

能够被残障人士使用的网站才能称得上一个易用的(易访问的)网站。
残障人士指的是那些带有残疾或者身体不健康的用户。

使用alt属性:

<img data-original="person.jpg"  alt="this is a person"/>

有时候浏览器会无法显示图像。具体的原因有:

  • 用户关闭了图像显示
  • 浏览器是不支持图形显示的迷你浏览器
  • 浏览器是语音浏览器(供盲人和弱视人群使用)

如果您使用了 alt 属性,那么浏览器至少可以显示或读出有关图像的描述。

8.几个很实用的BOM属性对象方法?

什么是Bom? Bom是浏览器对象。有哪些常用的Bom属性呢?

(1)location对象

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamd... 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash -- 返回URL#后面的内容,如果没有#,返回空
location.host -- 返回URL中的域名部分,例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分,例如dreamdu.com
location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面

(2)history对象

history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

(3)Navigator对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

9.HTML5 drag api

  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发,。
  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发

10.http2.0

首先补充一下,http和https的区别,相比于http,https是基于ssl加密的http协议
简要概括:http2.0是基于1999年发布的http1.0之后的首次更新。

  • 提升访问速度(可以对于,请求资源所需时间更少,访问速度更快,相比http1.0)
  • 允许多路复用:多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了:在http1.1中,浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制(连接数量),超过限制会被阻塞。
  • 二进制分帧:HTTP2.0会将所有的传输信息分割为更小的信息或者帧,并对他们进行二进制编码
  • 首部压缩
  • 服务器端推送

11.补充400和401、403状态码

(1)400状态码:请求无效

产生原因:

  • 前端提交数据的字段名称和字段类型与后台的实体没有保持一致
  • 前端提交到后台的数据应该是json字符串类型,但是前端没有将对象JSON.stringify转化成字符串。

解决方法:

  • 对照字段的名称,保持一致性
  • 将obj对象通过JSON.stringify实现序列化

(2)401状态码:当前请求需要用户验证

(3)403状态码:服务器已经得到请求,但是拒绝执行

12.fetch发送2次请求的原因

fetch发送post请求的时候,总是发送2次,第一次状态码是204,第二次才成功?

原因很简单,因为你用fetch的post请求的时候,导致fetch 第一次发送了一个Options请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的请求。

13.Cookie、sessionStorage、localStorage的区别

共同点:都是保存在浏览器端,并且是同源的

  • Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 (key:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)
  • sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)
  • localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)

补充说明一下cookie的作用:

  • 保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等。
  • 跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了 cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便
  • 定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。

14.web worker

在HTML页面中,如果在执行脚本时,页面的状态是不可相应的,直到脚本执行完成后,页面才变成可相应。web worker是运行在后台的js,独立于其他脚本,不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了。

如何创建web worker:

  • 检测浏览器对于web worker的支持性
  • 创建web worker文件(js,回传函数等)
  • 创建web worker对象

15.对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容,结构良好,便于阅读,比如nav表示导航条,类似的还有article、header、footer等等标签。

16.iframe是什么?有什么缺点?

定义:iframe元素会创建包含另一个文档的内联框架
提示:可以将提示文字放在<iframe></iframe>之间,来提示某些不支持iframe的浏览器

缺点:

  • 会阻塞主页面的onload事件
  • 搜索引擎无法解读这种页面,不利于SEO
  • iframe和主页面共享连接池,而浏览器对相同区域有限制所以会影响性能。

17.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

Doctype声明于文档最前面,告诉浏览器以何种方式来渲染页面,这里有两种模式,严格模式和混杂模式。

  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  • 混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。

18.Cookie如何防范XSS攻击

XSS(跨站脚本攻击)是指攻击者在返回的HTML中嵌入javascript脚本,为了减轻这些攻击,需要在HTTP头部配上,set-cookie:

  • httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。
  • secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的:Set-Cookie=<cookie-value>.....

19.Cookie和session的区别

HTTP是一个无状态协议,因此Cookie的最大的作用就是存储sessionId用来唯一标识用户

20. 一句话概括RESTFUL

就是用URL定位资源,用HTTP描述操作

21.讲讲viewport和移动端布局

可以参考我的这篇文章:

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)

22. click在ios上有300ms延迟,原因及如何解决?

(1)粗暴型,禁用缩放

 <meta name="viewport" content="width=device-width, user-scalable=no"> 

(2)利用FastClick,其原理是:

检测到touchend事件后,立刻出发模拟click事件,并且把浏览器300毫秒之后真正出发的事件给阻断掉

四、css篇

1.css盒模型

简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

border-sizing(有3个值哦):border-box,padding-box,content-box.

  • 标准盒子模型:

<img width="624" alt="2018-07-10 4 24 03" data-original="https://user-gold-cdn.xitu.io...;h=686&f=png&s=963248">

  • IE盒子模型:

<img width="620" alt="2018-07-10 4 24 12" data-original="https://user-gold-cdn.xitu.io...;h=656&f=png&s=1023920">

区别:从图中我们可以看出,这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子模型中,width表示content+padding+border这三个部分的宽度,故这使得在计算整个盒子的宽度时存在着差异:

标准盒子模型的盒子宽度:左右border+左右padding+width
IE盒子模型的盒子宽度:width

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型

最后,前面我们还提到了,box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆,包含什么,width就从什么开始算起。

2.画一条0.5px的线

  • 采用meta viewport的方式

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  • 采用 border-image的方式
  • 采用transform: scale()的方式

3.link标签和import标签的区别

  • link属于html标签,而@import是css提供的
  • 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
  • link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
  • link方式样式的权重高于@import的。

4.transition和animation的区别

Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from .... to,而animation可以一帧一帧的。

5.Flex布局

文章链接:
http://www.ruanyifeng.com/blo...(语法篇)
http://www.ruanyifeng.com/blo...(实例篇)

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

简单的分为容器属性和元素属性
容器的属性:

  • flex-direction:决定主轴的方向(即子item的排列方法)

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

  • flex-wrap:决定换行规则

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

  • flex-flow:

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

  • justify-content:对其方式,水平主轴对齐方式
  • align-items:对齐方式,竖直轴线方向

项目的属性(元素的属性):

  • order属性:定义项目的排列顺序,顺序越小,排列越靠前,默认为0
  • flex-grow属性:定义项目的放大比例,即使存在空间,也不会放大
  • flex-shrink属性:定义了项目的缩小比例,当空间不足的情况下会等比例的缩小,如果定义个item的flow-shrink为0,则为不缩小
  • flex-basis属性:定义了在分配多余的空间,项目占据的空间。
  • flex:是flex-grow和flex-shrink、flex-basis的简写,默认值为0 1 auto。
  • align-self:允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items,默认属性为auto,表示继承父元素的align-items

比如说,用flex实现圣杯布局

6.BFC(块级格式化上下文,用于清楚浮动,防止margin重叠等)

直译成:块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则。

  • BFC区域不会与float box重叠
  • BFC是页面上的一个独立容器,子元素不会影响到外面
  • 计算BFC的高度时,浮动元素也会参与计算

那些元素会生成BFC:

  • 根元素
  • float不为none的元素
  • position为fixed和absolute的元素
  • display为inline-block、table-cell、table-caption,flex,inline-flex的元素
  • overflow不为visible的元素

7.垂直居中的方法

(1)margin:auto法

css:

div{
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

html:

<div>
 <img data-original="mm.jpg">
</div>

定位为上下左右为0,margin:0可以实现脱离文档流的居中.

(2)margin负值法

.container{
  width: 500px;
  height: 400px;
  border: 2px solid #379;
  position: relative;
}
.inner{
  width: 480px;
  height: 380px;
  background-color: #746;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -190px; /*height的一半*/
  margin-left: -240px; /*width的一半*/
 }

补充:其实这里也可以将marin-top和margin-left负值替换成,
transform:translateX(-50%)和transform:translateY(-50%)

(3)table-cell(未脱离文档流的)

设置父元素的display:table-cell,并且vertical-align:middle,这样子元素可以实现垂直居中。

css:
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

(4)利用flex

将父元素设置为display:flex,并且设置align-items:center;justify-content:center;

css:
.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

8.关于js动画和css3动画的差异性

渲染线程分为main thread和compositor thread,如果css动画只改变transform和opacity,这时整个CSS动画得以在compositor trhead完成(而js动画则会在main thread执行,然后出发compositor thread进行下一步操作),特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别:

  • 功能涵盖面,js比css大
  • 实现/重构难度不一,CSS3比js更加简单,性能跳优方向固定
  • 对帧速表现不好的低版本浏览器,css3可以做到自然降级
  • css动画有天然事件支持
  • css3有兼容性问题

9.块元素和行元素

块元素:独占一行,并且有自动填满父元素,可以设置margin和pading以及高度和宽度
行元素:不会独占一行,width和height会失效,并且在垂直方向的padding和margin会失
效。

10.多行元素的文本省略号

 display: -webkit-box
-webkit-box-orient:vertical
-web-line-clamp:3
overflow:hidden

11.visibility=hidden, opacity=0,display:none

opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。

12.双边距重叠问题(外边距折叠)

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠

折叠的结果为:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。

查看原文

卡卡 发布了文章 · 2019-12-16

js算法之选择排序

 选择排序

 简介


数组长度为N, 

第一次循环将0到N-1位置上最小的数和0位置上的数交换

第二次循环将1到N-1位置上最小的数和1位置上的数交换

...

 代码


  const select = function(arr) {

    if (arr.length < 2) {

      return false;

    }

  

    const indexEnd = arr.length - 1;

    for (let i = 0; i < indexEnd; i++) {

      for (let j = i + 1; j <= indexEnd; j++) {

        if (arr[i] > arr[j]) {

          const tmp = arr[j];

          arr[j] = arr[i];

          arr[i] = tmp;

        }

      }

    }

    return arr;

  };

  const newArr = select([3, 5, 7, 1, 4, 2]);

  console.log(newArr);

 时间复杂度


O(N^2)
查看原文

赞 0 收藏 0 评论 2

卡卡 发布了文章 · 2019-12-12

js算法之冒泡排序

冒泡排序

简介

数组长度为N, 
第一次循环将0到N-1位置上最大的数放在N-1的位置, 
第二次循环将0-N-2位置上最大的数放在N-2的位置,
...

代码

  const maopao = function(arr) {
    if (arr.length < 2) {
      return false;
    }
    let indexEnd = arr.length - 1;
    for (indexEnd; indexEnd > 0; indexEnd--) {
      for (let i = 0; i < indexEnd; i++) {
        if (arr[i] > arr[i + 1]) {
          const tmp = arr[i + 1];
          arr[i + 1] = arr[i];
          arr[i] = tmp;
        }
      }
    }
    return arr;
  };
  const newArr = maopao([3, 5, 7, 1, 4, 2]);
  console.log(newArr);

时间复杂度

O(N^2)
查看原文

赞 0 收藏 0 评论 0

卡卡 发布了文章 · 2019-11-15

免费图床,auxpi 集合多家 API 的新一代图床

前言:我们在写博客或者文档或者工作中的时候,经常需要上传图片获取图片地址,这时候,就需要用到图床,本次发布一个开源的auxpi免费图床,使用体验非常好,请尝试。

注:每周会上架1~2款新应用,持续更新

dapps是什么?

dapps是一个应用程序商店,包含丰富的软件,一键安装程序;多版本共存。

使用

官网文档:dapps应用商店

  1. 应用商店中安装 auxpi
  2. 使用说明:查看

效果

20191113105517.png
20191113103848.png
20191113104443.png
20191113105847.png

目前包含的软件

查看原文

赞 1 收藏 1 评论 0

卡卡 赞了文章 · 2019-11-13

如何快速部署容器化应用

摘要:容器化推行的过程中,研发、运维学习及使用成本都非常高,那有没有一款简单易用的平台呢?本文介绍基于Kubernetes的应用管理平台-开普勒云平台。

一、背景

为了快速适应和满足市场需求,小而快的应用越来越多,“这些零碎的应用如何部署、管理?”成为让大家头疼的问题。若全部上虚拟机,资源消耗太大。这时,将应用容器化,显然是一个非常不错的选择,但很多公司又都面临着一个同样的问题,那就是容器化推行难。

容器化推行的过程中,研发、运维学习及使用成本都非常高,那有没有一款简单易用的平台呢?

开普勒云平台是 宜人金科-财富技术部 开源的一款基于Kubernetes的应用管理解决方案。致力于解决公司的上容器难、上Kubernetes难、运维成本高等问题。应用只需要加一个非常简单的Dockerfile文件通过开普勒云台就能将应用部署在Kubernetes上,大大降低了使用的难度。

二、开普勒云平台

之前的一篇文章Kubernetes+Docker+Istio 容器云实践对开普勒平台做了一些基本介绍。

经过一段时间的调整,我们终于把这个平台开源了: https://github.com/kplcloud/kplcloud

开普勒云平台是一款面向研发、运维等人群的平台,只需要具备简单知识就可以快速将应用部署到Kubernetes上,以下是平台的基础架构:

开普勒平台既可以通过容器的方式跑在Kubernetes上,也可以独立部署。

在kubernetes master节点上执行即可完成部署,当然,在此之前需要增加app.cfg配置文件。

$ git clone github.com/kplcloud/kplcloud && cd kplcloud/
$ kubectl apply -f install/kubernetes/kpaas/

下图是开普勒云平台所对接的平台及流程。

开普勒云平台通过调用Jenkins、Gitlab(Github)、Kubernetes等API的方式对应用进行操作。

将Consul的KV功能作为配置中心来使用,在开普勒云平台上可以直接调用Consul API进行操作,可以在配置文件决定是否启用Consul KV功能。

Jenkins目前只担任代码编译及将Docker镜像上传仓库的功能。开普勒通过调用JenkinsAPI来创建Job或Build Job,并监听Job状态。

开普勒平台还可调用Github或Gitlab API获取项目的分支及需要上线的tags。并将相关信息传给jenkins,Jenkins拉取代码并执行相关构建过程。

三、使用

平台调用Kubernetes API的资源及Jenkins API或告警都是以模版的方式进行处理,管理员可以根据自己公司所处的环境随意调整相关资源的模版。

除了对生产最基本的需求外,还增加了对测试环境测试人员的需求支持。

  • 应用克隆: 测试人员可能需要做到一个版本多套环境的场景。在平台可以假设一个空间就是一种场景,在一个空间下部署完所有应用之后,需要在其他空间下也生成一样的应用,为了方便操作,可以直接使用“工具集-克隆”功能完成一键克隆。
  • 调整容器时间: 金融产品应该都会遇到调整时间的问题。通常测试一个功能需要对服务的时间进行修改,由于Docker使用的是宿主机的内核时间,容器无法对内核时间进行调整,那就需要借助其他工具来完成这项工作。推荐使用一款开源的工具https://github.com/wolfcw/libfaketime,我们将该工具编译到宿主机上,通过挂载的方式挂入容器里,就能对单个容器进行调整而不影响其他容器了。

开普勒云平台功能众多,下面挑几个大家比较关心、常用的功能进行简单介绍。(更多的功能介绍请查看文档https://docs.nsini.com

  • 创建应用
  • 发布新版本
  • 日志采集
  • 监控告警
  • 持久化存储

3.1 创建应用

创建一个应用的流程非常简单,只需要填写一些简单的信息,管理员审核之后就会执行构建。应用升级只需要选择tags,然后执行构建就可以完成。

以创建一个Go应用为例:

Dockerfile:

FROM golang:latest as build-env

ENV GO111MODULE=on
ENV BUILDPATH=github.com/kplcloud/hello
RUN mkdir -p /go/src/${BUILDPATH}
COPY ./ /go/src/${BUILDPATH}
RUN cd /go/src/${BUILDPATH} && CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go install -v

FROM alpine:latest

COPY --from=build-env /go/bin/hello /go/bin/hello

WORKDIR /go/bin/
CMD ["/go/bin/hello"]

将以上Dockerfile放入项目目录,填写相关信息:

一个应用就创建完成了,管理员审核提交的信息是否合格,不合格便驳回;合格了就直接通过并进行部署。

部署应用会根据用户所提交的信息获取我们事先定义好的基础模版,再根据基础模版生成Kubernetes所能识别的资源,然后调用Kubernetes API创建这些资源。创建完成后再调用Jenkins API创建Job,最后执行构建。

Jenkins完成构建,并将Docker Image 上传完仓库之后,开普勒才会更新Kubernetes相关应用的版本。

在这个过程中若想加入更多操作,可以修改JenkinsCommand模版。

3.2 发布新应用

构建应用的流程是通过创建应用提交一些信息进行处理。

  • 从git 仓库获取tags列表。
  • 调用jenkins API 将应用的相关参数及版本信息传给它并进行构建。
  • Jenkins Job执行Shell命令,执行docker build并上传至Docker Image仓库。
  • 平台监听到job已经成功执行,调用kubernetes API更新应用的Image地址。
  • 监听升级情况。
  • 发送通知。

以上是构建应用的后端流程,而前端就比较简单了,只需要在应用详情页点击"Build"按钮,在弹出的对话框中选择想应用的tags版本并提交就行了,如下图:

点击详情页的build日志选项卡,会显示最近的构建记录,点击左侧相应的版本,可以查看该版本的构建情况,也可以对正在构建的应用进行中断,如下图:

3.3 日志采集

我们的日志收集采用的是低耦合、扩展性强、方便维护和升级的方案。

  • 每个节点Filebeat收集宿主机日志。
  • 每个Pod注入Filebeat容器收集业务日志。

Filebeat会跟应用容器部署在一起,应用也不需要知道它的存在,只需要指定日志输入的目录就可以了。Filebeat所使用的配置是从ConfigMap读取,只需要维护好收集日志的规则。

如果配置了上面的采集器,那么它会向服务所在的Pod注入一个Filebeat采集器对应用服务的业务日志进行采集。把采集到的日志注入到kafka集群,然后logstash进行消息处理及格式化。

处理完后入到ES集群,最终我们就可以通过kibana查询到业务日志了。

Filebeat容器及filebeat的ConfigMap也可以通过模版的方式进行参数调整。

3.4 监控告警

应用监控告警也是非常重要的一个环节,我们采用Prometheus+Grafana的方案进行监控,Prometheus+AlertManager进行告警的处理。

AlertManager所抛出的告警信息会发送至开普勒云平台进行处理,若你在平台订阅了告警类型的消息则会发送至所订阅类型的相关工具。

我们可以在“个人设置-消息订阅设置”里选择需要订阅的类型及接收的工具:

以下是微信接收到的操作通知:

更多的教程请查阅我们提供的文档。https://docs.nsini.com

3.5 持久化存储

Kubernetes集群管理员通过提供不同的存储类,可以满足用户不同的服务质量级别、备份策略和任意策略要求的存储需求。动态存储卷供应使用StorageClass来实现,允许存储卷按需被创建。
如果没有动态存储供应,Kubernetes集群的管理员将不得不通过手工的方式来创建新的存储卷。
通过动态存储卷,Kubernetes能够按照用户的需求,自动创建其需要的存储。

在菜单找到“配置与存储”->"持久化存储卷声明",选择应用的空间,并点击“创建”按钮,先创建一个存储卷,然后我们找到需要挂载持久化存储盘应用并进入详情页,找到“持久化存储”选项卡,挂载刚刚所创建的持久化存储卷就好了。

四、尾巴

开普勒平台目前已开源,并且已有演示平台可使用,提供完整文档供参考。文档详细地介绍了相关服务的搭建过程,同时,提供了多种部署方案。

作者:王聪

宜信技术学院

查看原文

赞 21 收藏 17 评论 3

卡卡 发布了文章 · 2019-11-13

Dapps 上架 baidupcs-web,百度网盘 Web 版

前言:之前上架过一个命令行版本的百度客户端,但大部分用户不知道怎么使用,本期上架一个带界面的易使用版本

dapps是什么?

dapps是一个应用程序商店,包含丰富的软件,一键安装程序;多版本共存。

使用

官网文档:dapps应用商店

  1. 应用商店中安装 BaiduPCS-web
  2. 使用说明:查看

效果

QQ截图20191106095853.png
QQ截图20191106102409.png

目前包含的软件

  • 注:每周会上架一款新应用,持续更新
  • 百度网盘web版:下载速度比官方快很多 ------ 查看效果
  • AriaNg高速下载器:2倍迅雷速度,迅雷无法下载的资源,也能下载 ------ 查看效果
  • 百度网盘下载器(命令行) ------ 查看效果
  • wordpress ------ 查看效果
  • py12306抢票 ------ 查看效果
  • magnetw: 种子搜索神器 ------ 查看效果
  • PhpMyAdmin:mysql管理工具 ------ 查看效果
  • adminmongo: mongo管理工具 ------ 查看效果
  • PHP: 世界上最好的语言(版本:5.6,7.1,7.2,7.3)------ 查看效果
  • Mysql:数据库(版本:5.6,5.7,,8.0)------ 查看效果
  • Nginx:服务器(版本:1.16)------ 查看效果
  • redis:nosql数据库(版本:5.0)------ 查看效果
  • mongo:是一个基于分布式文件存储的数据库(版本:3.4,4.0)------ 查看效果
  • gogs版本控制 ------ 查看效果
  • rabbitmq3.7队列服务 ------ 查看效果
  • 2048游戏 ------ 查看效果
  • 等......
查看原文

赞 0 收藏 0 评论 0

卡卡 发布了文章 · 2019-11-05

docker安装AriaNg下载器

AriaNg是一个非常优秀的下载工具,基于aria2。个人感觉可以替代迅雷。

效果图:
QQ截图20191104151923.png

代码:
docker-compose.yml

version: '3'
services:
  ariang:
    image: wahyd4/aria2-ui:latest
    container_name: dapps-ariang
    ports:
      - "${ARIANG_HOST_PORT}:80"
    volumes:
      - ${ARIANG_DATA_DIR}:/data
    restart: always

.env文件

# app info
AUTHOR_UID=10000000
AUTHOR_NAME=kaka
APP_ID=ariang
APP_NAME=ariang高速下载器
APP_INTRODUCTION=2倍迅雷下载速度
APP_UPDATE_CONTENT=
APP_VERSION=1.0.0
APP_PORT=8011/ui

# environment config file
SOURCE_DIR=./www

# Timezone
TZ=Asia/Shanghai

# environment config
ARIANG_HOST_PORT=8011
ARIANG_DATA_DIR=./downloads

对docker不太熟悉的同学,可以使用dapps应用商店,一键安装。

Dapps项目:使用

查看原文

赞 0 收藏 0 评论 0

卡卡 发布了文章 · 2019-10-22

跨平台应用商店 Dapps 发布,nodejs编写

dapps是什么?

  它是基于docker的应用程序商店,包含丰富的软件,因为基于docker,使你本机电脑有云开发的效果。 一键安装程序;多版本共存,完善的使用说明,且不影响本机环境。 前端、服务端、运维、站长可以直接使用,效率提高非常多。普通用户亦可使用其中部分软件。

官网文档:dapps应用商店


github:https://github.com/wallace5303/dapps

gitee: https://gitee.com/wallace5303/dapps

目前包含的软件

  1. PHP : 世界上最好的语言(版本:5.6,7.1,7.2,7.3)
  2. Mysql : 数据库(版本:5.6,5.7,,8.0)
  3. Nginx : 服务器(版本:1.16)
  4. PhpMyAdmin: mysql管理工具
  5. redis nosql数据库(版本:5.0)
  6. mongo 是一个基于分布式文件存储的数据库(版本:3.4,4.0)
  7. py12306抢票软件
  8. gogs版本控制
  9. mysql-8.0.16
  10. mongo-4.0.13
  11. magnetw 2.1 磁力种子聚合搜索下载
  12. php 5.6、 7.1、 7.3

开始使用

# 下载
git clone https://gitee.com/wallace5303...

安装

cd dapps
npm install --registry=https://registry.npm.taobao.org

启动

npm run start

注:# 请确保已经安装了nodejs,下载地址:http://nodejs.cn/download/

效果图

  1. 访问: http://localhost:8000/

特性

1.使用对象:普通用户前端服务端运维

2.支持多版本共存php,mysql, mongo, redis等

3.兼容OneinStack的配置文件,完善的配置说明

4.支持绑定多个域名

5.清晰的文件结构

6.支持php扩展安装

7.程序是基于docker最新stable版,并从官方仓库下载

8.持续不断更新,支持交互、无人值守安装

9.支持系统版本:Linux、MacOs、Windows

查看原文

赞 0 收藏 0 评论 0

卡卡 赞了文章 · 2019-10-16

纯手写Promise,由浅入深

在我的上一篇文章里着重介绍了async的相关知识,对promise的提及甚少,现在很多面试也都要求我们有手动造轮子的能力,所以本篇文章我会以手动实现一个promise的方式来发掘一下Promise的特点.

简单版Promise

首先我们应该知道Promise是通过构造函数的方式来创建的(new Promise( executor )),并且为 executor函数 传递参数:

function Promi(executor) {
  executor(resolve, reject);
  function resolve() {}
  function reject() {}
}

再来说一下Promise的三种状态: pending-等待, resolve-成功, reject-失败, 其中最开始为pending状态, 并且一旦成功或者失败, Promise的状态便不会再改变,所以根据这点:

function Promi(executor) {
  let _this = this;
  _this.$$status = 'pending';
  executor(resolve.bind(this), reject.bind(this));
  function resolve() {
    if (_this.$$status === 'pending') {
      _this.$$status = 'full'
    }
  }
  function reject() {
    if (_this.$$status === 'pending') {
      _this.$$status = 'fail'
    }
  }
}

其中$$status来记录Promise的状态,只有当promise的状态未pending时我们才会改变它的状态为'full'或者'fail', 因为我们在两个status函数中使用了this,显然使用的是Promise的一些属性,所以我们要绑定resolve与reject中的this为当前创建的Promise;
这样我们最最最基础的Promise就完成了(只有头部没有四肢...)

Promise高级 --> .then

接着,所有的Promise实例都可以用.then方法,其中.then的两个参数,成功的回调和失败的回调也就是我们所说的resolve和reject:

function Promi(executor) {
    let _this = this;
  _this.$$status = 'pending';
  _this.failCallBack = undefined;
  _this.successCallback = undefined;
  _this.error = undefined;
  executor(resolve.bind(_this), reject.bind(_this));
  function resolve(params) {
    if (_this.$$status === 'pending') {
      _this.$$status = 'success'
      _this.successCallback(params)
    }
  }
  function reject(params) {
    if (_this.$$status === 'pending') {
      _this.$$status = 'fail'
      _this.failCallBack(params)
    }
  }
}

Promi.prototype.then = function(full, fail) {
  this.successCallback = full
  this.failCallBack = fail
};

// 测试代码
new Promi(function(res, rej) {
  setTimeout(_ => res('成功'), 30)
}).then(res => console.log(res))

讲一下这里:
可以看到我们增加了failCallBack和successCallback,用来储存我们在then中回调,刚才也说过,then中可传递一个成功和一个失败的回调,当P的状态变为resolve时执行成功回调,当P的状态变为reject或者出错时则执行失败的回调,但是具体执行结果的控制权没有在这里。但是我们知道一定会调用其中的一个。

executor任务成功了肯定有成功后的结果,失败了我们肯定也拿到失败的原因。所以我们可以通过params来传递这个结果或者error reason(当然这里的params也可以拆开赋给Promise实例)其实写到这里如果是面试题,基本上是通过了,也不会有人让你去完整地去实现

error:用来存储,传递reject信息以及错误信息

Promise进阶

我想我们最迷恋的应该就是Promise的链式调用吧,因为它的出现最最最大的意义就是使我们的callback看起来不那么hell(因为我之前讲到了async比它更直接),那么为什么then能链式调用呢? then一定返回了一个也具有then方法的对象
我想大家应该都能猜到.then返回的也一定是一个promise,那么这里会有一个有趣的问题,就是.then中返回的到底是一个新promise的还是链式头部的调用者?????

从代码上乍一看, Promise.then(...).catch(...) 像是针对最初的 Promise 对象进行了一连串的方法链调用。

然而实际上不管是 then 还是 catch 方法调用,都返回了一个新的promise对象。简单有力地证明一下

var beginPromise = new Promise(function (resolve) {
    resolve(100);
});
var thenPromise = beginPromise.then(function (value) {
    console.log(value);
});
var catchPromise = thenPromise.catch(function (error) {
    console.error(error);
});
console.log(beginPromise !== thenPromise); // => true
console.log(thenPromise !== catchPromise);// => true

显而易见promise返回的是一个新的而非调用者
不过这样的话难度就来了,我们看下面代码:

function begin() {
    return new Promise(resolve => {
      setTimeout(_ => resolve('first') , 2000)
    })
}

begin().then(data => {
  console.log(data)
  return new Promise(resolve => {

  })
}).then(res => {
  console.log(res)
});    

我们知道最后的then中函数参数永远都不会执行,为什么说它难呢,想一下,之所以能链式调用是因为.then()执行之后返回了一个新的promise,一定注意,我说的新的promise是then()所返回而不是data => return new Promise....(这只是then的一个参数),这样问题就来了,我们从刚才的情况看,知道只有第一个.then中的状态改变时第二个then中的函数参数才会执行,放到程序上说也就是需要第一个.then中返回的promise状态改变!即:

begin().then(data => {
  console.log(data)
  return new Promise(resolve => {
      setTimeout(_ => resolve('two'), 1000)
  })
}).then(res => {
  console.log(res)
});       

直接从代码的角度上讲,调用了第一个.then中的函数参数中的resolve之后第一个.then()返回的promise状态也改变了,这句话有些绕,我用一张图来讲:
图片描述

那么问题就来了,我们如何使得P2的状态发生改变通知P1?
其实这里用观察者模式是可以的,但是代价有点大,换个角度想,其实我们直接让P2中的resolve等于P1中的resolve不就可以了?这样P2中调用了resolve之后同步的P1也相当于onresolve了,上代码:

function Promi(executor) {
    let _this = this;
    _this.$$status = 'pending';
    _this.failCallBack = undefined;
    _this.successCallback = undefined;
    _this.result = undefined;
    _this.error = undefined;
    setTimeout(_ => {
        executor(_this.resolve.bind(_this), _this.reject.bind(_this));
    })
}

Promi.prototype.then = function(full, fail) {
    let newPromi = new Promi(_ => {});
    this.successCallback = full;
    this.failCallBack = fail;
    this.successDefer = newPromi.resolve.bind(newPromi);
    this.failDefer = newPromi.reject.bind(newPromi);
    return newPromi
};

Promi.prototype.resolve = function(params) {
    let _this = this;
    if (_this.$$status === 'pending') {
        _this.$$status = 'success';
        if (!_this.successCallback) return;
        let result = _this.successCallback(params);
        if (result && result instanceof Promi) {
            result.then(_this.successDefer, _this.failDefer);
            return ''
        }
        _this.successDefer(result)
    }
}

Promi.prototype.reject = function(params) {
    let _this = this;
    if (_this.$$status === 'pending') {
        _this.$$status = 'fail';
        if (!_this.failCallBack) return;
        let result = _this.failCallBack(params);
        if (result && result instanceof Promi) {
            result.then(_this.successDefer, _this.failDefer);
            return ''
        }
        _this.successDefer(result)
    }
}

// 测试代码
new Promi(function(res, rej) {
    setTimeout(_ => res('成功'), 500)
}).then(res => {
    console.log(res);
    return '第一个.then成功'
}).then(res => {
    console.log(res);
    return new Promi(function(resolve) {
        setTimeout(_ => resolve('第二个.then成功'), 500)
    })
}).then(res => {
    console.log(res)
    return new Promi(function(resolve, reject) {
        setTimeout(_ => reject('第三个失败'), 1000)
    })
}).then(res => {res
    console.log(res)
}, rej => console.log(rej));

Promise完善

其实做到这里我们还有好多好多没有完成,比如错误处理,reject处理,catch实现,.all实现,.race实现,其实原理也都差不多,(all和race以及resolve和reject其实返回的都是一个新的Promise),错误的传递?还有很多细节我们都没有考虑到,我这里写了一个还算是比较完善的:

function Promi(executor) {
    let _this = this;
    _this.$$status = 'pending';
    _this.failCallBack = undefined;
    _this.successCallback = undefined;
    _this.error = undefined;
    setTimeout(_ => {
        try {
            executor(_this.onResolve.bind(_this), _this.onReject.bind(_this))
        } catch (e) {
            _this.error = e;
            if (_this.callBackDefer && _this.callBackDefer.fail) {
                _this.callBackDefer.fail(e)
            } else if (_this._catch) {
                _this._catch(e)
            } else {
                throw new Error('un catch')
            }
        }
    })
}

Promi.prototype = {
    constructor: Promi,
    onResolve: function(params) {
        if (this.$$status === 'pending') {
            this.$$status = 'success';
            this.resolve(params)
        }
    },
    resolve: function(params) {
        let _this = this;
        let successCallback = _this.successCallback;
        if (successCallback) {
            _this.defer(successCallback.bind(_this, params));
        }
    },
    defer: function(callBack) {
        let _this = this;
        let result;
        let defer = _this.callBackDefer.success;
        if (_this.$$status === 'fail' && !_this.catchErrorFunc) {
            defer = _this.callBackDefer.fail;
        }
        try {
            result = callBack();
        } catch (e) {
            result = e;
            defer = _this.callBackDefer.fail;
        }
        if (result && result instanceof Promi) {
            result.then(_this.callBackDefer.success, _this.callBackDefer.fail);
            return '';
        }
        defer(result)
    },
    onReject: function(error) {
        if (this.$$status === 'pending') {
            this.$$status = 'fail';
            this.reject(error)
        }
    },
    reject: function(error) {
        let _this = this;
        _this.error = error;
        let failCallBack = _this.failCallBack;
        let _catch = _this._catch;
        if (failCallBack) {
            _this.defer(failCallBack.bind(_this, error));
        } else if (_catch) {
            _catch(error)
        } else {
            setTimeout(_ => { throw new Error('un catch promise') }, 0)
        }
    },
    then: function(success = () => {}, fail) {
        let _this = this;
        let resetFail = e => e;
        if (fail) {
            resetFail = fail;
            _this.catchErrorFunc = true;
        }
        let newPromise = new Promi(_ => {});
        _this.callBackDefer = {
            success: newPromise.onResolve.bind(newPromise),
            fail: newPromise.onReject.bind(newPromise)
        };
        _this.successCallback = success;
        _this.failCallBack = resetFail;
        return newPromise
    },
    catch: function(catchCallBack = () => {}) {
        this._catch = catchCallBack
    }
};   


// 测试代码

task()
    .then(res => {
        console.log('1:' + res)
        return '第一个then'
    })
    .then(res => {
        return new Promi(res => {
            setTimeout(_ => res('第二个then'), 3000)
        })
    }).then(res => {
        console.log(res)
   })
    .then(res => {
        return new Promi((suc, fail) => {
            setTimeout(_ => {
                fail('then失败')
           }, 400)
        })
    })
    .then(res => {
        console.log(iko)
   })
    .then(_ => {}, () => {
       return new Promi(function(res, rej) {
           setTimeout(_ => rej('promise reject'), 3000)
       })
   })
    .then()
    .then()
    .then(_ => {},
        rej => {
            console.log(rej);
            return rej + '处理完成'
        })
    .then(res => {
        console.log(res);
        // 故意出错
        console.log(ppppppp)
    })
    .then(res => {}, rej => {
        console.log(rej);
        // 再次抛错
        console.log(oooooo)
    }).catch(e => {
        console.log(e)
   })
   

还有一段代码是我将所有的.then全部返回调用者来实现的,即全程都用一个promise来记录状态存储任务队列,这里就不发出来了,有兴趣可以一起探讨下.
有时间会再完善一下all, race, resolve....不过到时候代码结构肯定会改变,实在没啥时间,所以讲究看一下吧,欢迎交流

查看原文

赞 154 收藏 109 评论 14

卡卡 发布了文章 · 2019-08-19

[译]10个最常见的JavaScript错误

为了回馈我们的开发人员社区,我们查看了数千个项目的数据库,并发现了JavaScript中的前10个错误。我们将向您展示导致它们的原因以及如何防止它们发生。如果你避免这些“陷阱”,它会让你成为一个更好的开发者。

由于数据为王,我们收集,分析并排名前十大JavaScript错误。Rollbar收集每个项目的所有错误,并总结每个项目发生的次数。我们通过根据指纹对错误进行分组来实现此目的。基本上,如果第二个错误只是第一个错误的重复,我们将两个错误分组。这为用户提供了一个很好的概述。

我们专注于最有可能影响您和您的用户的错误。为此,我们根据不同公司遇到的项目数量对错误进行排名。如果我们只查看每个错误发生的总次数,那么大批量客户可能会因为与大多数读者无关的错误而压倒数据集。

这里是10大JavaScript错误:

图片描述

为了可读性,上面错误的描述都是缩写后的。接下来会深入探讨一下,这些错误发生的原理,并且如何避免触发他们。

1. Uncaught TypeError: Cannot read property

如果你是一个JavaScript开发人员,可能你看到这个错误的次数,比你希望承认的次数还要多。当你在一个未定义undefined的对象上读取一个属性或调用一个方法时,这个错误就会在chrome里触发(当然在其他浏览器中也会报错,但是错误信息不是这样描述的)。在chrome开发者控制台console里,可以测试这个错误:
图片描述

这个错误出现的原因有很多,最常见的一种场景是:当使用UI组件进行渲染时,声明state不正确。让我们来看下下面这段在真实app中的示例代码片段。我们选取的react的代码,但是同理这种不恰当的声明在vue、Angular或其他框架中也会出现。

    class Quiz extends Component {
      componentWillMount() {
        axios.get('/thedata').then(res => {
          this.setState({items: res.data});
        });
      }
    
      render() {
        return (
          <ul>
            {this.state.items.map(item =>
              <li key={item.id}>{item.name}</li>
            )}
          </ul>
        );
      }
    }

这里有两点需要注意的:

  1. 一个组件的state(比如上面的this.state)在组件生命周期开始时是未声明的,为undefined。
  2. 当你异步获取数据时,组件在获取到数据之前,无论你获取数据的代码是写在constructor方法,还是componentWillMount或者componentDidMount的生命周期里,至少都会调用一次render方法渲染模板。上面的示例代码运行第一次render的时候,this.state.items为undefined。这意味着本该是ItemList的值,却为undefined,接着你就会在console里看到一个错误”Uncaught TypeError: Cannot read property ‘map’ of undefined“

这个问题修复起来也很简单。最简单的方法:在constructor里初始化时用恰当的默认值赋值给state。

class Quiz extends Component {
  // 在这里添加:
  constructor(props) {
    super(props);

    // 声明state本身,并给他的属性都设置上一个默认值
    this.state = {
      items: []
    };
  }

  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }

  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

在你的app中的具体代码可能和上面有区别,但我们还是希望这会给你足够多的线索去修复或避免这个错误。如果没能帮到你,请继续阅读下面的更多例子以及相关的错误。

2.TypeError: ‘undefined’ is not an object

当你在一个未定义undefined的对象上读取一个属性或调用一个方法时,在safari里就会报这个错。你可以再Safari的console控制台里测试这个错误,本质上和上面那个在chrome中出现错误是一样的,只是在Safari用里的错误信息有区别。
图片描述

3. TypeError: null is not an object

当你去读取一个null对象的属性或调用方法时,会在Safari里出现这个错误。可以在Safari 控制台里测试这个错误。

图片描述
有趣的是,在JavaScript中的null和undefined是不相等的,所以我们才会得到不同的错误信息。Undefined通常是指一个变量没有被声明,而null表示一个变量的值为空。使用严格相等操作符可以证实他们是不相等的。
图片描述

在实际项目中有一种出现这种错误的场景:当你在js中想要操作一个dom元素,但这个元素还没加载或者不存在时。这是因为dom的API会在你查找dom元素的结果为空的情况下返回null。
任何处理dom元素的代码必须要放在dom元素被创建完毕之后。JS代码正如HTML中一样,是从上而下执行的。所以,如果你在html代码里的dom元素之前使用了一个JavaScript标签,并在里面包含了一些内联的js代码,那么这些js代码会在html页面解析之前执行。这时可能就会出现这个错误,因为在加载js代码之前,dom元素还没有被创建好。
在这种情况下,我们可以通过添加一个监听页面是否解析完毕的事件监听来解决问题。一但事件监听器触发,init()方法就能开始使用dom元素了。

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>

<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

4. (unknown): Script error

当一个未被捕获的错误在跨域时,违背了浏览器的跨域策略,就会出现这个错误。举个例子,你把js代码放在了CDN上面,任何未捕捉的错误发生时(这里指冒泡到window.onerror的监听处理器,而没有try/catch的错误)都只会报一条简单的'Script error'信息,而没有更加详细有帮助的错误信息。这是浏览器的一种安全手段,为了防止跨域传输数据,不允许进行通信。
想要获取到真实详细的错误信息,你可以像这样做:

  • 在header里添加 Access-Control-Allow-Origin 字段

    在header(这应该是服务器返回的response header)字段里,把Access-Control-Allow-Origin设为,这样就表示来自任意的域名请求都可以正确地访问到服务器的资源。必要的话也可以指定具体的域名来代替星号,比如:Access-Control-Allow-Origin: www.example.com。但是配置的域名太多的话,处理起来会有点棘手,而且如果你在使用CDN的话还会出现缓存的问题,这样就有点费力不讨好了。更多参考这里

    下面举一些在各种环境下配置这个header的示例:
    Apache:
    在JavaScript代码所在的文件夹目录下,新建一个.htaccess文件,内容如下:

    Header add Access-Control-Allow-Origin "*"

    Nginx:

    在JavaScript代码所在文件夹目录下面,添加add_header命令:

    location ~ ^/assets/ {
        add_header Access-Control-Allow-Origin *;
    }

    HAProxy:

    在后端的JavaScript所在文件加入以下内容:

    rspadd Access-Control-Allow-Origin:\ *
  • 在JavaScript标签上设置crossorigin="anonymous"

    在html代码里,每个设置好了Access-Control-Allow-Origin的js资源,都可以在其JavaScript标签上添加crossorigin="anonymous"。在设置crossorigin="anonymous"之前,确定好header字段都是正确发送了的。在Firefox里,如果js标签上出现了crossorigin属性,但是header里没有Access-Control-Allow-Origin,那么该js将不会被执行。(crossorigin是html5新增的功能,不只是JavaScript标签独有的,比如video、image也可以设置)

5. TypeError: Object doesn’t support property

这个错误发生在IE浏览器中,当你调用一个未定义的方法时,可以在IE的console里测试这个:
图片描述

这个错误和发生在chrome里的"TypeError: ‘undefined’ is not a function"是相同的,不同的浏览器对于相同的逻辑错误会给出不同的错误信息。
这是一个常见的错误,当你在IE里操作JavaScript的命名空间时。这种情况百分之九十九是因为IE无法将当前作用域的方法绑定给this关键字。举个例子,假设你有一个名叫Rollbar的作用域,里面包含了一个isAwesome函数。正常情况下,你可以用下面这样的语法在Rollbar作用域里引用isAwesome函数:

this.isAwesome();

Chrome,Firefox 和 Opera 会能接受这个语法,但是IE不行。 因此,使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀:

Rollbar.isAwesome();

6. TypeError: ‘undefined’ is not a function

调用一个未定义的函数时会出现这个错误,可以在Chrome或Mozilla Firefox的console里测试这个:
图片描述

随着js代码的编码技巧和设计模式越来越复杂,在回调函数、闭包等各种作用域中this的指向的层级也随之增加,这就是js代码中this/that指向容易混淆的原因。
先来看下这段代码:

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // 这个this指向谁?
  }, 0);
};

执行上述代码时,会出现错误: "Uncaught TypeError: undefined is not a function."。这是因为你执行setTimeout方法时,其实是执行的window.setTimeout。所以作为参数传递过去的匿名函数,其实是在window作用域下执行的,而window对象并没有clearBoard方法。
一个最简单的、能兼容旧版本浏览器的方法,就是先把this指向赋值给一个变量self,然后在闭包里直接引用这个self变量。像这样:

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // 把this赋值给self,这个作用域就会被保存下来
  this.timer = setTimeout(function(){
    self.clearBoard();  
  }, 0);
};

另外也可以使用bind方法来传递恰当的this指向:

function testFunction () {
  this.clearLocalStorage();
  this.timer = setTimeout(this.reset.bind(this), 0);  // bind to 'this'
};

function testFunction(){
    this.clearBoard();    //back in the context of the right 'this'!
};

7. Uncaught RangeError: Maximum call stack

在chrome中有好几个情况会触发这个错误。其中一种情况就是无终止地调用一个递归函数。
图片描述

还有当你给函数传参时,如果超出了范围,也会出现这个错误。许多函数在接收数字类型的参数时,都有一个具体的范围要求。比如,Number.toExponential(digits) 和 Number.toFixed(digits)方法,只接受0到20的数字作为参数,而Number.toPrecision(digits) 接收1到21的数字。

var a = new Array(4294967295);  //OK
var b = new Array(-1); //range error

var num = 2.555555;
document.writeln(num.toExponential(4));  //OK
document.writeln(num.toExponential(-2)); //range error!

num = 2.9999;
document.writeln(num.toFixed(2));   //OK
document.writeln(num.toFixed(25));  //range error!

num = 2.3456;
document.writeln(num.toPrecision(1));   //OK
document.writeln(num.toPrecision(22));  //range error!

8. TypeError: Cannot read property ‘length’

当在chorme中读取一个未定义变量的length属性时,就会出现这个错误。
图片描述

正常情况下你可以在数组对象上读取这个length属性,但是如果你要使用的数组对象没有被初始化,或者因为作用域的问题而没有正确地获取到,可能就会出现这个错误。来看下面这段代码理解下:

var testArray= ["Test"];

function testFunction(testArray) {
    for (var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
    }
}

testFunction();

当你声明函数的参数时,这些参数就是在函数内部的本地参数。这意味着,你在外部声明的全局变量和本地变量同名了话(都是叫testArray),那在函数内部读取的一定是本地的变量,即传入的参数。
有两种方法解决这样的问题

  • 在函数声明时,去掉这些参数。

    var testArray = ["Test"];
    
    /* Precondition: defined testArray outside of a function */
    function testFunction(/* No params */) {
        for (var i = 0; i < testArray.length; i++) {
          console.log(testArray[i]);
        }
    }
    
    testFunction();
  • 把外部的变量作为参数正确地传给函数内部。

    var testArray = ["Test"];
    
    function testFunction(testArray) {
       for (var i = 0; i < testArray.length; i++) {
          console.log(testArray[i]);
        }
    }
    
    testFunction(testArray);

9. Uncaught TypeError: Cannot set property

当我们把一个变量为undefined的时候,它就永远返回undefined,不能再读取/设置它的属性。否则,就会抛出这个错误。
图片描述

10. ReferenceError: event is not defined

当您尝试访问未定义的变量或当前作用域无法访问到的变量时,就会出现这个错误。
图片描述

查看原文

赞 1 收藏 1 评论 0

卡卡 发布了文章 · 2019-08-19

Dnnmmp更新:Docker可视化管理工具Portainer

dnnmmp更新1.2.4

增加docker可视化管理工具portainer

Portainer是什么?

简介:Portainer是一个轻量级的管理界面,可以让您轻松地管理不同的Docker环境(Docker主机或Swarm集群)。功能十分全面,基本能满足中小型单位对容器管理的全部需求。

快速部署:

  1. 帮忙加个星吧:

    点击:GitHub

  2. 本地安装gitdockerdocker-compose(建议使用最新版本:1.23)。
    附录1:docker安装
  3. clone项目:

    # 如果不是`root`用户,那么将当前用户加入`docker`用户组
    $ sudo gpasswd -a ${USER} docker
    
    # 获取项目
    $ git clone https://github.com/wallace5303/dnnmmp.git
  4. 构建并启动:

    $ cd dnnmmp
    
    # 后台运行(第一次)
    $ docker-compose -f docker-compose-manage.yml up -d portainer
    
    # 停止
    $ docker-compose -f docker-compose-manage.yml stop portainer
    
    # 运行(如果容器已经存在)
    $ docker-compose -f docker-compose-manage.yml start portainer
    
  5. 在浏览器中访问:

    http://localhost:8003

    如下图

    登录:

    镜像列表:

    容器列表:

    用户管理:

dnnmmp其他使用

官网

查看原文

赞 4 收藏 3 评论 0

卡卡 发布了文章 · 2019-08-16

nodejs版,麻将智能机器人出牌算法

nodejs版,麻将智能机器人出牌算法。

简述

麻将,起源于中国,粤港澳及闽南地区俗称麻雀,

由中国古人发明的博弈游戏,娱乐用具,一般用竹子、骨头或塑料制成的小长方块,上面刻有花纹或字样,

北方麻将每副136张,南方麻将多八个花牌,分别是春夏秋冬,梅竹兰菊,共计144张。

项目

请加星收藏仓库地址,方便以后学习使用。

github地址

使用方法


# 下载
git clone https://github.com/wallace5303/nodejs-game.git

# 进入文件
cd nodejs-game/aiTable

# 安装
npm install

# 运行
node demo.js

demo内容

# 麻将牌所有对应的数字id,请查看配置文件:cardConfig.json

const outCardLogic = require('./outCardLogic');

// 手牌 1万,2万,3万,8万,8万,1条,5条
const cards = ['31' , '32', '33', '38', '38', '41', '45'];

// 选出一张最优牌
var outLogic = new outCardLogic();

// 第二个参数为万能牌,可选。
var card = outLogic.outAI(cards);

console.log("选出的最优牌是:%j", card); // 41(1条)

分类

字牌(合计28张)

  • 风牌:东、南、西、北,各4张,共16张。
  • 箭牌:中、发、白,各4张,共12张。

花牌(合计8张)

  • 春、夏、秋、冬,梅、兰、竹、菊,各一张,共8张。
  • 注:这种牌很少种类的麻将会用到。

序数牌(合计108张)

  • 万子牌:从一万至九万,各4张,共36张。
  • 筒子牌:从一筒至九筒,各4张,共36张。也有的地方称为饼,从一饼到九饼。
  • 索子牌:从一索至九索,各4张,共36张。也有的地方称为条,从一条到九条。

相关术语

麻将应对的五种标准状态,是“吃”、“碰”、“杠”、“听”、“胡”。在正式比赛中,五种状态的官方语言都是汉语,包括国际比赛。

  • 吃:上家打出牌,与下家的牌正好组成一副顺子,他就可以吃。
  • 碰:其他人打出一张牌,自己手中有两张相同的牌正好组成一副刻子,他就可以碰。
  • 杠:其他人打出一张牌,自己手中有三张相同的牌,即可杠牌,称为明杠,倒下这个杠,再到排尾抓一张牌,将手中不需要的一张牌打出。手中有三张相同的牌,又抓到一张相同的牌,称为暗杠,扣下,别人不知道是啥牌,再到排尾抓一张牌,将手中不需要的一张牌打出。“明杠”比“吃”优先,如果你要杠的牌刚好是出牌方下家要吃的牌,则吃牌失败,杠牌成功。
  • 听:当你将你手中的牌都凑成了有用的牌,只需再加上最后一张便可和牌,你就可以进入听牌的阶段,报听后不能吃、碰、杠,且只能打出本轮摸到的牌。
  • 和:(读音:hú,ㄏㄨ)当最终牌型满足mAAA+nABC+DD(m、n可以为0),即可和牌(少数特殊牌型除外)。四位玩家谁先和牌谁为胜利,得分由底分乘上番数。具体视比赛详细规则而定。

牌型术语

  • 连子:一万二万三万
  • 刻子:一筒一筒一筒
  • 将:一条一条

胡牌公式

  • N×连子 + M×刻子 + 1×将
  • N>=0, M>=0

鬼牌

鬼牌的定义就是能够变成任意牌的牌,也叫万能牌。

案例分析

举个栗子,看看真实的人是怎么思考出牌的:

  • 1万2万3万5条,打5条
  • 1万2万3万1条1条6条,打6条

解决思路

从上面的例子可以看出来,打牌的过程,其实就是打完之后的牌面,胡牌概率最高。

所以,算法变成了评估牌面积分的算法,越高说明牌越好,也说明这副牌可以胡的概率更高。

评估方法

为了评价这副牌的积分,也就是胡牌的概率,我们可以给他再摸N张牌,看看胡牌情况。
参考如下示例,可以很直观得出牌面积分:1筒2筒3筒 > 1筒2筒3筒2条3条 > 1筒2筒3筒2条。

  • 1筒2筒3筒

已经胡了,胡牌概率为1

  • 1筒2筒3筒2条

只摸1张牌,那么只有当摸2条的时候,才会赢,胡牌概率为1/9*摸条的概率,有将。

  • 1筒2筒3筒2条3条

只摸1张牌,那么只有当摸1条4条的时候,才会赢,胡牌概率为2/9*摸条的概率,无将。

表格生成

有了评估方法后,我们只需要对每个花色的手牌,分配N张牌给他,然后计算胡牌概率,就可以知道牌面积分。

不过考虑到计算量太大,所以我们可使用查表法,提前计算好,方便快速查找。

出牌算法

  • 遍历手上的非鬼牌,计算排除掉这张牌后的牌面积分最大值,这张牌就是要打的牌。
  • 如果打出能听牌了,就取一个听牌最多的牌打出去。
查看原文

赞 1 收藏 1 评论 0

卡卡 回答了问题 · 2019-08-15

docker login 有什么用?

1: login

# 登录docker hub
docker login -u 用户名 -p 密码

#上传本地镜像myapache:v1到镜像仓库中。
docker push myapache:v1

2:ship
Build(构建镜像) : 镜像就像是集装箱包括文件以及运行环境等等资源。
Ship(运输镜像) :主机和仓库间运输,这里的仓库就像是超级码头一样。
Run (运行镜像) :运行的镜像就是一个容器,容器就是运行程序的地方。

关注 5 回答 4

卡卡 发布了文章 · 2019-08-15

Docker入门练手项目,运行一个2048游戏

dnnmmp集成环境中,之前一直在增加软件功能,这次想试试运行一个web项目,最后看起来还不错。

让我们开始吧!

安装2048游戏

安装步骤如下:

  1. 帮忙加个星呗:

    点击:GitHub

  2. 本地安装gitdockerdocker-compose(建议使用最新版本:1.23)。
    附录1:docker安装
  3. clone项目:

    # 如果不是`root`用户,那么将当前用户加入`docker`用户组
    $ sudo gpasswd -a ${USER} docker
    
    # 获取项目
    $ git clone https://github.com/wallace5303/dnnmmp.git
  4. 启动运行:

    $ cd dnnmmp
    
    # 后台运行
    $ docker-compose up -d game_2048
    
    # 停止运行
    $ docker-compose stop game_2048
    
    # 不玩了,可以删除容器,避免占用空间
    $ docker-compose rm game_2048
    
  5. 开始玩游戏吧:

    在浏览器中访问:http://localhost:8001

    玩法:键盘的上下左右键来控制。

    如图:

查看原文

赞 4 收藏 3 评论 0

卡卡 收藏了文章 · 2019-08-15

七道常见的Redis面试题分享

clipboard.png

绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知。这里以面试题的形式对 Redis 常见问题做一个总结,解决大家的知识盲点。

1、为什么使用 Redis?

在项目中使用 Redis,主要考虑两个角度:性能和并发。如果只是为了分布式锁这些其他功能,还有其他中间件 Zookpeer 等代替,并非一定要使用 Redis。

性能:

如下图所示,我们在碰到需要执行耗时特别久,且结果不频繁变动的 SQL,就特别适合将运行结果放入缓存。这样,后面的请求就去缓存中读取,使得请求能够迅速响应。

特别是在秒杀系统,在同一时间,几乎所有人都在点,都在下单。。。执行的是同一操作———向数据库查数据。

clipboard.png

根据交互效果的不同,响应时间没有固定标准。在理想状态下,我们的页面跳转需要在瞬间解决,对于页内操作则需要在刹那间解决。

并发:

如下图所示,在大并发的情况下,所有的请求直接访问数据库,数据库会出现连接异常。这个时候,就需要使用 Redis 做一个缓冲操作,让请求先访问到 Redis,而不是直接访问数据库。

clipboard.png

使用 Redis 的常见问题

  • 缓存和数据库双写一致性问题
  • 缓存雪崩问题
  • 缓存击穿问题
  • 缓存的并发竞争问题

2、单线程的 Redis 为什么这么快

这个问题是对 Redis 内部机制的一个考察。很多人都不知道 Redis 是单线程工作模型。

原因主要是以下三点:

  • 纯内存操作
  • 单线程操作,避免了频繁的上下文切换
  • 采用了非阻塞 I/O 多路复用机制

仔细说一说 I/O 多路复用机制,打一个比方:小名在 A 城开了一家快餐店店,负责同城快餐服务。小明因为资金限制,雇佣了一批配送员,然后小曲发现资金不够了,只够买一辆车送快递。

经营方式一

客户每下一份订单,小明就让一个配送员盯着,然后让人开车去送。慢慢的小曲就发现了这种经营方式存在下述问题:

  • 时间都花在了抢车上了,大部分配送员都处在闲置状态,抢到车才能去送。
  • 随着下单的增多,配送员也越来越多,小明发现快递店里越来越挤,没办法雇佣新的配送员了。
  • 配送员之间的协调很花时间。

综合上述缺点,小明痛定思痛,提出了经营方式二。

经营方式二

小明只雇佣一个配送员。当客户下单,小明按送达地点标注好,依次放在一个地方。最后,让配送员依次开着车去送,送好了就回来拿下一个。上述两种经营方式对比,很明显第二种效率更高。

在上述比喻中:

  • 每个配送员→每个线程
  • 每个订单→每个 Socket(I/O 流)
  • 订单的送达地点→Socket 的不同状态
  • 客户送餐请求→来自客户端的请求
  • 明曲的经营方式→服务端运行的代码
  • 一辆车→CPU 的核数

于是有了如下结论:

  • 经营方式一就是传统的并发模型,每个 I/O 流(订单)都有一个新的线程(配送员)管理。
  • 经营方式二就是 I/O 多路复用。只有单个线程(一个配送员),通过跟踪每个 I/O 流的状态(每个配送员的送达地点),来管理多个 I/O 流。

下面类比到真实的 Redis 线程模型,如图所示:

-clipboard.png

Redis-client 在操作的时候,会产生具有不同事件类型的 Socket。在服务端,有一段 I/O 多路复用程序,将其置入队列之中。然后,文件事件分派器,依次去队列中取,转发到不同的事件处理器中。

3、Redis 的数据类型及使用场景

一个合格的程序员,这五种类型都会用到。

String

最常规的 set/get 操作,Value 可以是 String 也可以是数字。一般做一些复杂的计数功能的缓存。

Hash

这里 Value 存放的是结构化的对象,比较方便的就是操作其中的某个字段。我在做单点登录的时候,就是用这种数据结构存储用户信息,以 CookieId 作为 Key,设置 30 分钟为缓存过期时间,能很好的模拟出类似 Session 的效果。

List

使用 List 的数据结构,可以做简单的消息队列的功能。另外,可以利用 lrange 命令,做基于 Redis 的分页功能,性能极佳,用户体验好。

Set

因为 Set 堆放的是一堆不重复值的集合。所以可以做全局去重的功能。我们的系统一般都是集群部署,使用 JVM 自带的 Set 比较麻烦。另外,就是利用交集、并集、差集等操作,可以计算共同喜好,全部的喜好,自己独有的喜好等功能。

Sorted Set

Sorted Set 多了一个权重参数 Score,集合中的元素能够按 Score 进行排列。可以做排行榜应用,取 TOP N 操作。Sorted Set 可以用来做延时任务。

4、Redis 的过期策略和内存淘汰机制

Redis 是否用到家,从这就能看出来。比如你 Redis 只能存 5G 数据,可是你写了 10G,那会删 5G 的数据。怎么删的,这个问题思考过么?

正解:Redis 采用的是定期删除+惰性删除策略。

为什么不用定时删除策略

定时删除,用一个定时器来负责监视 Key,过期则自动删除。虽然内存及时释放,但是十分消耗 CPU 资源。在大并发请求下,CPU 要将时间应用在处理请求,而不是删除 Key,因此没有采用这一策略。

定期删除+惰性删除如何工作

定期删除,Redis 默认每个 100ms 检查,有过期 Key 则删除。需要说明的是,Redis 不是每个 100ms 将所有的 Key 检查一次,而是随机抽取进行检查。如果只采用定期删除策略,会导致很多 Key 到时间没有删除。于是,惰性删除派上用场。

采用定期删除+惰性删除就没其他问题了么

不是的,如果定期删除没删除掉 Key。并且你也没及时去请求 Key,也就是说惰性删除也没生效。这样,Redis 的内存会越来越高。那么就应该采用内存淘汰机制。

在 redis.conf 中有一行配置:

# maxmemory-policy volatile-lru

该配置就是配内存淘汰策略的:

  • noeviction:当内存不足以容纳新写入数据时,新写入操作会报错。
  • allkeys-lru:当内存不足以容纳新写入数据时,在键空间中,移除最近最少使用的 Key。(推荐使用,目前项目在用这种)(最近最久使用算法)
  • allkeys-random:当内存不足以容纳新写入数据时,在键空间中,随机移除某个 Key。(应该也没人用吧,你不删最少使用 Key,去随机删)
  • volatile-lru:当内存不足以容纳新写入数据时,在设置了过期时间的键空间中,移除最近最少使用的 Key。这种情况一般是把 Redis 既当缓存,又做持久化存储的时候才用。(不推荐)
  • volatile-random:当内存不足以容纳新写入数据时,在设置了过期时间的键空间中,随机移除某个 Key。(依然不推荐)
  • volatile-ttl:当内存不足以容纳新写入数据时,在设置了过期时间的键空间中,有更早过期时间的 Key 优先移除。(不推荐)

5、Redis 和数据库双写一致性问题

一致性问题还可以再分为最终一致性和强一致性。数据库和缓存双写,就必然会存在不一致的问题。前提是如果对数据有强一致性要求,不能放缓存。我们所做的一切,只能保证最终一致性。

另外,我们所做的方案从根本上来说,只能降低不一致发生的概率。因此,有强一致性要求的数据,不能放缓存。首先,采取正确更新策略,先更新数据库,再删缓存。其次,因为可能存在删除缓存失败的问题,提供一个补偿措施即可,例如利用消息队列。

6、如何应对缓存穿透和缓存雪崩问题

这两个问题,一般中小型传统软件企业很难碰到。如果有大并发的项目,流量有几百万左右,这两个问题一定要深刻考虑。缓存穿透,即黑客故意去请求缓存中不存在的数据,导致所有的请求都怼到数据库上,从而数据库连接异常。

缓存穿透解决方案:

  • 利用互斥锁,缓存失效的时候,先去获得锁,得到锁了,再去请求数据库。没得到锁,则休眠一段时间重试。
  • 采用异步更新策略,无论 Key 是否取到值,都直接返回。Value 值中维护一个缓存失效时间,缓存如果过期,异步起一个线程去读数据库,更新缓存。需要做缓存预热(项目启动前,先加载缓存)操作。
  • 提供一个能迅速判断请求是否有效的拦截机制,比如,利用布隆过滤器,内部维护一系列合法有效的 Key。迅速判断出,请求所携带的 Key 是否合法有效。如果不合法,则直接返回。

缓存雪崩,即缓存同一时间大面积的失效,这个时候又来了一波请求,结果请求都怼到数据库上,从而导致数据库连接异常。

缓存雪崩解决方案:

  • 给缓存的失效时间,加上一个随机值,避免集体失效。
  • 使用互斥锁,但是该方案吞吐量明显下降了。
  • 双缓存。我们有两个缓存,缓存 A 和缓存 B。缓存 A 的失效时间为 20 分钟,缓存 B 不设失效时间。自己做缓存预热操作。
  • 然后细分以下几个小点:从缓存 A 读数据库,有则直接返回;A 没有数据,直接从 B 读数据,直接返回,并且异步启动一个更新线程,更新线程同时更新缓存 A 和缓存 B。

7、如何解决 Redis 的并发竞争 Key 问题

这个问题大致就是,同时有多个子系统去 Set 一个 Key。这个时候要注意什么呢?大家基本都是推荐用 Redis 事务机制。

但是我并不推荐使用 Redis 的事务机制。因为我们的生产环境,基本都是 Redis 集群环境,做了数据分片操作。你一个事务中有涉及到多个 Key 操作的时候,这多个 Key 不一定都存储在同一个 redis-server 上。因此,Redis 的事务机制,十分鸡肋。

如果对这个 Key 操作,不要求顺序

这种情况下,准备一个分布式锁,大家去抢锁,抢到锁就做 set 操作即可,比较简单。

如果对这个 Key 操作,要求顺序

假设有一个 key1,系统 A 需要将 key1 设置为 valueA,系统 B 需要将 key1 设置为 valueB,系统 C 需要将 key1 设置为 valueC。

期望按照 key1 的 value 值按照 valueA > valueB > valueC 的顺序变化。这种时候我们在数据写入数据库的时候,需要保存一个时间戳。

假设时间戳如下:

系统 A key 1 {valueA 3:00}

系统 B key 1 {valueB 3:05}

系统 C key 1 {valueC 3:10}

那么,假设系统 B 先抢到锁,将 key1 设置为{valueB 3:05}。接下来系统 A 抢到锁,发现自己的 valueA 的时间戳早于缓存中的时间戳,那就不做 set 操作了,以此类推。其他方法,比如利用队列,将 set 方法变成串行访问也可以。

8、总结

Redis 在国内各大公司都能看到其身影,比如我们熟悉的新浪,阿里,腾讯,百度,美团,小米等。学习 Redis,这几方面尤其重要:Redis 客户端、Redis 高级功能、Redis 持久化和开发运维常用问题探讨、Redis 复制的原理和优化策略、Redis 分布式解决方案等。

如果你觉得文章对你有帮助的话,可以关注、点赞、收藏、转发走一波,谢谢!
查看原文

卡卡 收藏了文章 · 2019-08-15

优秀程序员都应该学习的 GitHub 上开源的数据结构与算法项目

图片描述

前言

算法为王。

想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手;只有内功深厚者,前端之路才会走得更远。

强烈推荐 GitHub 上值得前端学习的数据结构与算法项目,包含 gif 图的演示过程与视频讲解。

GitHub 项目

数据结构与算法

关于数据结构与算法的 GitHub 项目,star 数由高到低排序。

该仓库包含了多种基于 JavaScript 的算法与数据结构,提供进一步阅读的解释和链接。
每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。

2018/2019/校招/春招/秋招/算法/机器学习(Machine Learning)/深度学习(Deep Learning)/自然语言处理(NLP)/C/C++/Python/面试笔记

算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法。

算法和数据结构迅速,有解释 !

Python中数据结构和算法的最小示例。

数据结构和算法必知必会的50个代码实现。

一份很棒的学习和/或练习算法的地方的整理清单。

对Jeff的算法书、笔记等进行错误跟踪

此存储库包含不同著名计算机科学算法的 javascript 实现。

算法学习笔记。

基本算法和数据结构手册。

LeetCode

关于 LeetCode 的 GitHub 项目,star 数由高到低排序。

用动画的形式呈现解LeetCode题目的思路。

leetcode 题解,记录自己的leetcode解题之路。

leetcode 问题解决方案。

LeetCode题解,151道题完整版。

LeetCode算法与Java解决方案(更新)。

在 VS Code 中练习 LeetCode。

LintCode/LeetCode 的 Java 解决方法。

数据结构与算法/leetcode/lintcode题解/

算法可视化工具

  • 算法可视化工具 algorithm-visualizer
    算法可视化工具 algorithm-visualizer 是一个交互式的在线平台,可以从代码中可视化算法,还可以看到代码执行的过程。

效果如下图。

图片描述

旨在通过交互式可视化的执行来揭示算法背后的机制。

效果如下图。
quick-sort.gif

图片描述

变量和操作的可视化表示增强了控制流和实际源代码。您可以快速前进和后退执行,以密切观察算法的工作方式。

图片描述

JavaScript 数据结构与算法之美

JavaScript 数据结构与算法之美系列是笔者写的, 用的语言是 JavaScript ,旨在入门数据结构与算法和方便以后复习。

最后

觉得有用 ?喜欢就点个赞吧! GitHub

查看原文

卡卡 收藏了文章 · 2019-08-15

前端十大经典算法

个人博客

算法概述

算法分类

十种常见排序算法可以分为两大类:

非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此称为非线性时间比较类排序。

线性时间非比较类排序:不通过比较来决定元素间的相对次序,它可以突破基于比较排序的时间下界,以线性时间运行,因此称为线性时间非比较类排序。

849589-20180402132530342-980121409.png

算法复杂度

849589-20180402133438219-1946132192.png

相关概念

稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面。

不稳定:如果a原本在b的前面,而a=b,排序之后 a 可能会出现在 b 的后面。

时间复杂度:对排序数据的总的操作次数。反映当n变化时,操作次数呈现什么规律。

空间复杂度:是指算法在计算机内执行时所需存储空间的度量,它也是数据规模n的函数。

冒泡排序(Bubble Sort)

冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。

1.1 算法描述

  • 比较相邻的元素。如果第一个比第二个大,就交换它们两个;
  • 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数;
  • 针对所有的元素重复以上的步骤,除了最后一个;
  • 重复步骤1~3,直到排序完成。

1.2 动图演示

849589-20171015223238449-2146169197.gif

1.3 代码实现

function bubbleSort(arr) {

    var len = arr.length;

    for (var i = 0; i < len - 1; i++) {

        for (var j = 0; j < len - 1 - i; j++) {

            if (arr[j] > arr[j+1]) {       // 相邻元素两两对比

                var temp = arr[j+1];       // 元素交换

                arr[j+1] = arr[j];

                arr[j] = temp;

            }

        }

    }

    return arr;

}

选择排序(Selection Sort)

选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。以此类推,直到所有元素均排序完毕。

2.1 算法描述

n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下:

  • 初始状态:无序区为R[1..n],有序区为空;
  • 第i趟排序(i=1,2,3…n-1)开始时,当前有序区和无序区分别为R[1..i-1]和R(i..n)。该趟排序从当前无序区中-选出关键字最小的记录 R[k],将它与无序区的第1个记录R交换,使R[1..i]和R[i+1..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区;
  • n-1趟结束,数组有序化了。

2.2 动图演示

849589-20171015224719590-1433219824.gif  

2.3 代码实现

function selectionSort(arr) {

    var len = arr.length;

    var minIndex, temp;

    for (var i = 0; i < len - 1; i++) {

        minIndex = i;

        for (var j = i + 1; j < len; j++) {

            if (arr[j] < arr[minIndex]) {    // 寻找最小的数

                minIndex = j;                // 将最小数的索引保存

            }

        }

        temp = arr[i];

        arr[i] = arr[minIndex];

        arr[minIndex] = temp;

    }

    return arr;

} 

2.4 算法分析

表现最稳定的排序算法之一,因为无论什么数据进去都是O(n2)的时间复杂度,所以用到它的时候,数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。理论上讲,选择排序可能也是平时排序一般人想到的最多的排序方法了吧。

插入排序(Insertion Sort)

插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。

3.1 算法描述

一般来说,插入排序都采用in-place在数组上实现。具体算法描述如下:

  • 从第一个元素开始,该元素可以认为已经被排序;
  • 取出下一个元素,在已经排序的元素序列中从后向前扫描;
  • 如果该元素(已排序)大于新元素,将该元素移到下一位置;
  • 重复步骤3,直到找到已排序的元素小于或者等于新元素的位置;
  • 将新元素插入到该位置后;
  • 重复步骤2~5。

3.2 动图演示

849589-20171015225645277-1151100000.gif

3.2 代码实现

function insertionSort(arr) {

    var len = arr.length;

    var preIndex, current;

    for (var i = 1; i < len; i++) {

        preIndex = i - 1;

        current = arr[i];

        while (preIndex >= 0 && arr[preIndex] > current) {

            arr[preIndex + 1] = arr[preIndex];

            preIndex--;

        }

        arr[preIndex + 1] = current;

    }

    return arr;

}

3.4 算法分析

插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已排序元素逐步向后挪位,为最新元素提供插入空间。

希尔排序(Shell Sort)

1959年Shell发明,第一个突破O(n2)的排序算法,是简单插入排序的改进版。它与插入排序的不同之处在于,它会优先比较距离较远的元素。希尔排序又叫缩小增量排序

4.1 算法描述

先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序,具体算法描述:

  • 选择一个增量序列t1,t2,…,tk,其中ti>tj,tk=1;
  • 按增量序列个数k,对序列进行k 趟排序;
  • 每趟排序,根据对应的增量ti,将待排序列分割成若干长度为m 的子序列,分别对各子表进行直接插入排序。仅增量因子为1 时,整个序列作为一个表来处理,表长度即为整个序列的长度。

4.2 动图演示

849589-20180331170017421-364506073.gif

4.3 代码实现

function shellSort(arr) {

    var len = arr.length,

        temp,

        gap = 1;

    while (gap < len / 3) {         // 动态定义间隔序列

        gap = gap * 3 + 1;

    }

    for (gap; gap > 0; gap = Math.floor(gap / 3)) {

        for (var i = gap; i < len; i++) {

            temp = arr[i];

            for (var j = i-gap; j > 0 && arr[j]> temp; j-=gap) {

                arr[j + gap] = arr[j];

            }

            arr[j + gap] = temp;

        }

    }

    return arr;

}

4.4 算法分析

希尔排序的核心在于间隔序列的设定。既可以提前设定好间隔序列,也可以动态的定义间隔序列。动态定义间隔序列的算法是《算法(第4版)》的合著者Robert Sedgewick提出的。 

归并排序(Merge Sort)

归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每个子序列有序,再使子序列段间有序。若将两个有序表合并成一个有序表,称为2-路归并。

5.1 算法描述

  • 把长度为n的输入序列分成两个长度为n/2的子序列;
  • 对这两个子序列分别采用归并排序;
  • 将两个排序好的子序列合并成一个最终的排序序列。

5.2 动图演示

849589-20171015230557043-37375010.gif

5.3 代码实现

function mergeSort(arr) { // 采用自上而下的递归方法
    var len = arr.length;
    if (len < 2) {
        return arr;
    }
    var middle = Math.floor(len / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}
 
function merge(left, right) {
    var result = [];
 
    while (left.length>0 && right.length>0) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        }else {
            result.push(right.shift());
        }
    }
 
    while (left.length)
        result.push(left.shift());
 
    while (right.length)
        result.push(right.shift());
 
    return result;
}

5.4 算法分析

归并排序是一种稳定的排序方法。和选择排序一样,归并排序的性能不受输入数据的影响,但表现比选择排序好的多,因为始终都是O(nlogn)的时间复杂度。代价是需要额外的内存空间。

快速排序(Quick Sort)

快速排序的基本思想:通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序。

6.1 算法描述

快速排序使用分治法来把一个串(list)分为两个子串(sub-lists)。具体算法描述如下:

  • 从数列中挑出一个元素,称为 “基准”(pivot);
  • 重新排序数列,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的摆在基准的后面(相同的数可以到任一边)。在这个分区退出之后,该基准就处于数列的中间位置。这个称为分区(partition)操作;
  • 递归地(recursive)把小于基准值元素的子数列和大于基准值元素的子数列排序。

6.2 动图演示

849589-20171015230936371-1413523412.gif

6.3 代码实现

function quickSort(arr, left, right) {
    var len = arr.length,
        partitionIndex,
        left =typeof left !='number' ? 0 : left,
        right =typeof right !='number' ? len - 1 : right;
 
    if (left < right) {
        partitionIndex = partition(arr, left, right);
        quickSort(arr, left, partitionIndex-1);
        quickSort(arr, partitionIndex+1, right);
    }
    return arr;
}
 
function partition(arr, left ,right) {    // 分区操作
    var pivot = left,                     // 设定基准值(pivot)
        index = pivot + 1;
    for (var i = index; i <= right; i++) {
        if (arr[i] < arr[pivot]) {
            swap(arr, i, index);
            index++;
        }       
    }
    swap(arr, pivot, index - 1);
    return index-1;
}
 
function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}

堆排序(Heap Sort)

堆排序(Heapsort)是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构,并同时满足堆积的性质:即子结点的键值或索引总是小于(或者大于)它的父节点。

7.1 算法描述

  • 将初始待排序关键字序列(R1,R2….Rn)构建成大顶堆,此堆为初始的无序区;
  • 将堆顶元素R[1]与最后一个元素R[n]交换,此时得到新的无序区(R1,R2,……Rn-1)和新的有序区(Rn),且满足R[1,2…n-1]<=R[n];
  • 由于交换后新的堆顶R[1]可能违反堆的性质,因此需要对当前无序区(R1,R2,……Rn-1)调整为新堆,然后再次将R[1]与无序区最后一个元素交换,得到新的无序区(R1,R2….Rn-2)和新的有序区(Rn-1,Rn)。不断重复此过程直到有序区的元素个数为n-1,则整个排序过程完成。

7.2 动图演示

849589-20171015231308699-356134237.gif

7.3 代码实现

var len;   // 因为声明的多个函数都需要数据长度,所以把len设置成为全局变量
 
function buildMaxHeap(arr) {  // 建立大顶堆
    len = arr.length;
    for (var i = Math.floor(len/2); i >= 0; i--) {
        heapify(arr, i);
    }
}
 
function heapify(arr, i) {    // 堆调整
    var left = 2 * i + 1,
        right = 2 * i + 2,
        largest = i;
 
    if (left < len && arr[left] > arr[largest]) {
        largest = left;
    }
 
    if (right < len && arr[right] > arr[largest]) {
        largest = right;
    }
 
    if (largest != i) {
        swap(arr, i, largest);
        heapify(arr, largest);
    }
}
 
function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}
 
function heapSort(arr) {
    buildMaxHeap(arr);
 
    for (var i = arr.length - 1; i > 0; i--) {
        swap(arr, 0, i);
        len--;
        heapify(arr, 0);
    }
    return arr;
}

计数排序(Counting Sort)

计数排序不是基于比较的排序算法,其核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。 作为一种线性时间复杂度的排序,计数排序要求输入的数据必须是有确定范围的整数。

8.1 算法描述

  • 找出待排序的数组中最大和最小的元素;
  • 统计数组中每个值为i的元素出现的次数,存入数组C的第i项;
  • 对所有的计数累加(从C中的第一个元素开始,每一项和前一项相加);
  • 反向填充目标数组:将每个元素i放在新数组的第C(i)项,每放一个元素就将C(i)减去1。

8.2 动图演示

849589-20171015231740840-6968181.gif

8.3 代码实现

function countingSort(arr, maxValue) {
    var bucket =new Array(maxValue + 1),
        sortedIndex = 0;
        arrLen = arr.length,
        bucketLen = maxValue + 1;
 
    for (var i = 0; i < arrLen; i++) {
        if (!bucket[arr[i]]) {
            bucket[arr[i]] = 0;
        }
        bucket[arr[i]]++;
    }
 
    for (var j = 0; j < bucketLen; j++) {
        while(bucket[j] > 0) {
            arr[sortedIndex++] = j;
            bucket[j]--;
        }
    }
 
    return arr;
}

8.4 算法分析

计数排序是一个稳定的排序算法。当输入的元素是 n 个 0到 k 之间的整数时,时间复杂度是O(n+k),空间复杂度也是O(n+k),其排序速度快于任何比较排序算法。当k不是很大并且序列比较集中时,计数排序是一个很有效的排序算法。

桶排序(Bucket Sort)

桶排序是计数排序的升级版。它利用了函数的映射关系,高效与否的关键就在于这个映射函数的确定。桶排序 (Bucket sort)的工作的原理:假设输入数据服从均匀分布,将数据分到有限数量的桶里,每个桶再分别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排)。

9.1 算法描述

  • 设置一个定量的数组当作空桶;
  • 遍历输入数据,并且把数据一个一个放到对应的桶里去;
  • 对每个不是空的桶进行排序;
  • 从不是空的桶里把排好序的数据拼接起来。

9.2 图片演示

849589-20171015232107090-1920702011.png

9.3 代码实现

unction bucketSort(arr, bucketSize) {
    if (arr.length === 0) {
      return arr;
    }
 
    var i;
    var minValue = arr[0];
    var maxValue = arr[0];
    for (i = 1; i < arr.length; i++) {
      if (arr[i] < minValue) {
          minValue = arr[i];               // 输入数据的最小值
      }else if (arr[i] > maxValue) {
          maxValue = arr[i];               // 输入数据的最大值
      }
    }
 
    // 桶的初始化
    var DEFAULT_BUCKET_SIZE = 5;           // 设置桶的默认数量为5
    bucketSize = bucketSize || DEFAULT_BUCKET_SIZE;
    var bucketCount = Math.floor((maxValue - minValue) / bucketSize) + 1;  
    var buckets =new Array(bucketCount);
    for (i = 0; i < buckets.length; i++) {
        buckets[i] = [];
    }
 
    // 利用映射函数将数据分配到各个桶中
    for (i = 0; i < arr.length; i++) {
        buckets[Math.floor((arr[i] - minValue) / bucketSize)].push(arr[i]);
    }
 
    arr.length = 0;
    for (i = 0; i < buckets.length; i++) {
        insertionSort(buckets[i]);                     // 对每个桶进行排序,这里使用了插入排序
        for (var j = 0; j < buckets[i].length; j++) {
            arr.push(buckets[i][j]);                     
        }
    }
 
    return arr;
}

9.4 算法分析

桶排序最好情况下使用线性时间O(n),桶排序的时间复杂度,取决与对各个桶之间数据进行排序的时间复杂度,因为其它部分的时间复杂度都为O(n)。很显然,桶划分的越小,各个桶之间的数据越少,排序所用的时间也会越少。但相应的空间消耗就会增大。

基数排序(Radix Sort)

基数排序是按照低位先排序,然后收集;再按照高位排序,然后再收集;依次类推,直到最高位。有时候有些属性是有优先级顺序的,先按低优先级排序,再按高优先级排序。最后的次序就是高优先级高的在前,高优先级相同的低优先级高的在前。

10.1 算法描述

  • 取得数组中的最大数,并取得位数;
  • arr为原始数组,从最低位开始取每个位组成radix数组;
  • 对radix进行计数排序(利用计数排序适用于小范围数的特点);

10.2 动图演示

849589-20171015232453668-1397662527.gif

10.3 代码实现

/ LSD Radix Sort
var counter = [];
function radixSort(arr, maxDigit) {
    var mod = 10;
    var dev = 1;
    for (var i = 0; i < maxDigit; i++, dev *= 10, mod *= 10) {
        for(var j = 0; j < arr.length; j++) {
            var bucket = parseInt((arr[j] % mod) / dev);
            if(counter[bucket]==null) {
                counter[bucket] = [];
            }
            counter[bucket].push(arr[j]);
        }
        var pos = 0;
        for(var j = 0; j < counter.length; j++) {
            var value =null;
            if(counter[j]!=null) {
                while ((value = counter[j].shift()) !=null) {
                      arr[pos++] = value;
                }
          }
        }
    }
    return arr;
}

10.4 算法分析

基数排序基于分别排序,分别收集,所以是稳定的。但基数排序的性能比桶排序要略差,每一次关键字的桶分配都需要O(n)的时间复杂度,而且分配之后得到新的关键字序列又需要O(n)的时间复杂度。假如待排数据可以分为d个关键字,则基数排序的时间复杂度将是O(d*2n) ,当然d要远远小于n,因此基本上还是线性级别的。

基数排序的空间复杂度为O(n+k),其中k为桶的数量。一般来说n>>k,因此额外空间需要大概n个左右。

查看原文

卡卡 收藏了文章 · 2019-08-15

8道经典JavaScript面试题解析,你真的掌握JavaScript了吗?

JavaScript是前端开发中非常重要的一门语言,浏览器是他主要运行的地方。JavaScript是一个非常有意思的语言,但是他有很多一些概念,大家经常都会忽略。比如说,原型,闭包,原型链,事件循环等等这些概念,很多JS开发人员都研究不多。

所以今天,就来和大家看看下面几个问题,大家可以先思考一下,尝试作答。

八道面试题

问题1:下面这段代码,浏览器控制台上会打印什么?
15205

问题2:如果我们使用 let 或 const 代替 var,输出是否相同
15208

问题3:“newArray”中有哪些元素?
15213

问题4:如果我们在浏览器控制台中运行'foo'函数,是否会导致堆栈溢出错误?

15217
问题5: 如果在控制台中运行以下函数,页面(选项卡) 是否会有响应
15221

问题6: 我们能否以某种方式为下面的语句使用展开运算而不导致类型错误
15224

问题7:运行以下代码片段时,控制台上会打印什么?
15228
问题8:xGetter() 会打印什么值?
15232

答案

前面的问题我们都举例出来了,接下来我们会从头到尾,一个个来分析我们这些问题的答案,给大家一些学习的思路

问题1:
使用var关键字声明的变量在JavaScript中会被提升,并在内存中开辟空间,由于没有赋值,无法定义数值类型,所以分配默认值undefined。var声明的变量,真正的数值初始化,是发生在你确定赋值的位置。同时,我们要知道,var声明的变量是函数作用域的,也就是我们需要区分局部变量和全局变量,而let和const是块作用域的。所以我们这道题的运行过程是这样的:

var a = 10; // 全局作用域,全局变量。a=10
function foo() {
// var a 
//的声明将被提升到到函数的顶部。
// 比如:var a

console.log(a); // 打印 undefined

// 实际初始化值20只发生在这里
   var a = 20; // local scope
}

图解在下面,好理解一点
15257
所以问题1的答案是:undefined

问题 2:
let和const声明可以让变量在其作用域上受限于它所在的块、语句或表达式中。和var不同的地方在于,这两个声明的变量,不会被提升。并且我们会有一个称为暂时死区(TDZ)。如果访问TDZ中的变量的话,就会报ReferenceError,因为他们的的作用域是在他们声明的位置的,不会有提升。所以必须在执行到声明的位置才能访问。

var a = 10; // 全局使用域
function foo() { // TDZ 开始

// 创建了未初始化的'a'
    console.log(a); // ReferenceError

// TDZ结束,'a'仅在此处初始化,值为20
    let a = 20;
}

图解:
15287
问题2答案:ReferenceError: a is not defined

问题3:

这个问题,是循环结构会给大家带来一种块级作用域的误区,在for的循环的头部使用var声明的变量,就是单个声明的变量绑定(单个存储空间)。在循环过程中,这个var声明的i变量是会随循环变化的。但是在循环中执行的数组push方法,最后实际上是push了i最终循环结束的3这个值。所以最后push进去的全都是3。

// 误解作用域:认为存在块级作用域
var array = [];
for (var i = 0; i < 3; i++) {
    // 三个箭头函数体中的每个'i'都指向相同的绑定,
    // 这就是为什么它们在循环结束时返回相同的值'3'。
    array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]

图解:
15306
如果想记录每一次循环的值下来,可以使用let声明一个具有块级作用域的变量,这样为每个循环迭代创建一个新的绑定。

// 使用ES6块级作用域
var array = [];
for (let i = 0; i < 3; i++) {
    // 这一次,每个'i'指的是一个新的的绑定,并保留当前的值。
    // 因此,每个箭头函数返回一个不同的值。
    array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]

还有解决这个问题的另外一种解决方案就是使用闭包就好了。

let array = [];
for (var i = 0; i < 3; i++) {
    array[i] = (function(x) {
     return function() {
           return x;
          };
    })(i);
}
const newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]  

问题3答案:3,3,3

问题4
JavaScript的并发模式基于我们常说的”事件循环“。
浏览器是提供运行时环境来给我们执行JS代码的。浏览器的主要组成包括有调用堆栈,事件循环,任务队列和WEB API。像什么常用的定时器setTimeout,setInterval这些全局函数就不是JavaScript的一部分,而是WEB API给我们提供的。
15335
JS调用栈是后进先出(LIFO)的。引擎每次从堆栈中取出一个函数,然后从上到下依次运行代码。每当它遇到一些异步代码,如setTimeout,它就把它交给Web API(箭头1)。因此,每当事件被触发时,callback 都会被发送到任务队列(箭头2)。
事件循环(Event loop)不断地监视任务队列(Task Queue),并按它们排队的顺序一次处理一个回调。每当调用堆栈(call stack)为空时,Event loop获取回调并将其放入堆栈(stack )(箭头3)中进行处理。请记住,如果调用堆栈不是空的,则事件循环不会将任何回调推入堆栈。

好了,现在有了前面这些知识,我们可以看一下这道题的讲解过程:
实现步骤:

  1. 调用 foo()会将foo函数放入调用堆栈(call stack)。
  2. 在处理内部代码时,JS引擎遇到setTimeout。
  3. 然后将foo回调函数传递给WebAPIs(箭头1)并从函数返回,调用堆栈再次为空
  4. 计时器被设置为0,因此foo将被发送到任务队列(箭头2)。
  5. 由于调用堆栈是空的,事件循环将选择foo回调并将其推入调用堆栈进行处理。
  6. 进程再次重复,堆栈不会溢出。

问题4答案:堆栈不会溢出。

问题5:
在很多时候,很多做前端开发的同学都是认为循环事件图中就只会有一个任务列表。但事实上不是这样的,我们是可以有多个任务列表的。由浏览器选择其中一个队列并在该队列进行处理回调。
从底层来看,JavaScript中是可以有宏认为和微任务的,比如说setTimeout回调是宏任务,而Promise回调是微任务。

他们有什么区别呢?
主要的区别在于他们的执行方式。宏任务在单个循环周期中一次一个低堆入堆栈,但是微任务队列总是在执行后返回到事件之前清空。所以,如果你以处理条目的速度向这个队列添加条目,那么你就永远在处理微任务。只有当微任务队列为空时,事件循环才会重新渲染页面。

然后我们再回到我们前面讲的问题5中:

function foo() {
  return Promise.resolve().then(foo);
};    

我们这段代码,每次我们去调用【foo】的时候,都会在微任务队列上加另一个【foo】的回调,因此事件循环没办法继续去处理其他的事件了(比如说滚动,点击事件等等),直到该队列完全清空位置。因此,不会执行渲染,会被阻止。

问题5答案:不会响应。

问题6:
在我们做面试题的时候,展开语法和for-of语句去遍历iterable对象定义要遍历的数据。其中我们要使用迭代器的时候,Array和Map都是有默认迭代操作的内置迭代器的。
但是,对象是不可迭代的,也就是我们这道题里的,这是一个对象的集合。但是我们可以使用iterable和iterator协议来把它变成可以迭代的。
在我们研究对象的时候,如果一个对象他实现了@@iterator方法,那么它就是可以迭代的。这意味着这个对象(在他的原型链上的一个对象)必须是又@@iterator键的属性的,然后我们就可以利用这个键,通过常量Symbol.iterator获得。
下面是这道题的举例写法:

var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
    // iterator 是一个具有 next 方法的对象,
    // 它的返回至少有一个对象
    // 两个属性:value&done。
    // 返回一个 iterator 对象
    return {
        next: function() {
            if (this._countDown === 3) {
               const lastValue = this._countDown;
               return { value: this._countDown, done: true };
              }
            this._countDown = this._countDown + 1;
            return { value: this._countDown, done: false };
        },
        _countDown: 0
    };
};
[...obj]; // 打印 [1, 2, 3]

问题6答案:如上是一种方案,可以避免TypeError异常。

问题7:
在看这个问题的时候,我们要先理解for-in循环遍历本身的可枚举属性和对象从原来的原型继承来的属性。可枚举属性是可以在for-in循环期间可以访问的属性。
当我们知道这个知识点前提了之后,我们在看这道题,你就知道这道题打印的其实就是只能打印这些特定的属性。

var obj = { a: 1, b: 2 }; //a,b 都是可枚举属性

// 将{c:3}设置为'obj'的原型,
// 并且我们知道for-in 循环也迭代 obj 继承的属性
// 从它的原型,'c'也可以被访问。
Object.setPrototypeOf(obj, { c: 3 });

// 我们在'obj'中定义了另外一个属性'd',
// 但是将'enumerable'可枚举设置为false。 这意味着'd'将被忽略。
Object.defineProperty(obj, "d", { value: 4, enumerable: false });
//所以最后使用for-in遍历这个对象集合,那就是只能遍历出可枚举属性
for (let prop in obj) {
    console.log(prop);
}

// 也就是只能打印
// a
// b
// c

图解
15436
问题7答案:a、b、c

问题8:
首先我们可以看到var x是一个全局遍历,在不是严格模式下,这个X就直接是window对象的属性了。在这段代码里,我们最重要是要理解this的对象指向问题,this始终是指向调用方法的对象的。所以,在foo,xGetter()的情况下,this指向的是foo对象,返回的就是在foo中的属性x,值就是90。但是在xGetter()的情况下,他是直接调用的foo的getx()方法,但是其中this的指向是在xGetter的作用域,就是指向的window对象中,这时指向的就是全局变量x了,值也就是10。

var x = 10; // 全局变量
var foo = {
    x: 90,//foo对象的内部属性
    getX: function() {
         return this.x;
    }
};
foo.getX(); // 此时是指向的foo对象,
//所以打印的是X属性 值就是90
let xGetter = foo.getX;//xGetter是在全局作用域,
//这里的this就是指向window对象
xGetter(); // 打印 10

15466
问题8答案:10

最后

ok,我们的8道问题都解决了,如果你前面写的答案全部都正确,那么你非常棒!去面试前端工作起码12k起步了。就算做不出来或者做错了也没有关系,我们都是不断通过犯错来学习的,一步步的理解错误,理解背后的原因,才能进步。

更多技术好文,前端开发学习教程,欢迎关注公众号【前端研究所】看更多前端技术文章!
图片描述

查看原文

卡卡 收藏了文章 · 2019-08-15

前端最强面经汇总

花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~

别只收藏,点个赞,点个star再走哈~

持续更新中……,可以关注下github

项目地址

https://github.com/abc-club/f...

求star!!!
求star!!!
求star!!!

面试秘籍

面试题集

面试题

面试技巧

面试经验

github面试题仓库

如果你是面试官

题目

js

  1. getcomputedstyle和style的区别
1.只读与可写
  getComputedStyle方法是只读的,只能获取样式,不能设置;而element.style能读能写,能屈能伸。
2.获取的对象范围
  getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);
  而element.style只能获取元素style属性中的CSS样式。
  因此对于一个光秃秃的元素<p>,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 
  而element.style就是0。
3.作用
  getComputedStyle方法有一个很重要的,类似css()方法没有的功能——获取伪类元素样式
4.兼容性
  getComputedStyle方法IE6~8是不支持的
查看原文