前端基础知识

前端基础知识

基本数据类型以及 typeof 的结果

基本数据类型:

null,undefined,string,boolean,number,symbol,还有一种复杂的 object

typeof 的结果:

undefined,number,string,boolean,object,function,symbol

querySelectorAll 和 getElementByClassName 的区别

querySelectorAll 是没有性能问题的,因为它不是动态的

getElementByClassName 是有性能问题的,他会动态刷新

闭包

就是在函数的最后返回一个函数回去,返回的函数拥有访问原函数内部变量以及参数的能力,如果不手动设置为 null 的话,垃圾回收器是无法回收的。

他的价值在于可以用来生成模块模式,搞出一个只有返回的闭包本身才能访问到的私有变量和函数。

阻止冒泡和默认事件

冒泡:e.stopPropagation,IE 下位 cancelBubble=true,

默认事件,e.preventDefault(),e.returnValue=false,return false(用来取消对象属性注册的处理程序)

addEventListener 的第三个参数

只有在有父元素,并且有同样类型的处理事件时才有用,默认为 false,默认为 bubble,从内向外,设置为 true 后,就从外向内触发了。

类型检测

其实就是 typeof 嘛,最简单的类型检测

还有就是 instanceof,这个三目运算符是用来看是否在原型链上

但是对于多全局对象,内置的全局构造函数是不同的,所以 instanceof 会有问题,使用 Array.isArray 倒是可以,不过这东西 ie9 才支持,所以两种:

  • Object.prototype.toString.call([]) == [object array]
  • 先 typeof [].length == ‘number’然后[].propertyIsEnumable(‘length’)==fasle,因为 array 的 length 属性是不可枚举的

继承

到现在写个继承居然自己写错了!!!唉..

function A() {}
function B() {}
A.prototype = new B();

这是最简单的

最简单的原型继承就是上面的,但是这样父原型的实例属性变成原型属性,且无法传参数

所以可以借用构造函数继承,就是在子类中调用父类型的构造函数,但是没有原型关系,父类的原型方法子类继承不到

所以混合着用的一般比较比较多

function Super() {}
function Sub() {
  Super.call(this);
}
Sub.prototype = new Super();

Polyfill 温习一下

就是感觉涨了见识吧,比如用 x-qsa,expresssion 的 css 属性来抓取元素模仿 querySelectorAll 方法,还有 defineProperty 这个东西实际上调用了defineGetter等,还有 bind 方法,一般直接写个 this.apply(obj,[].slice.call(arguments)),为了让 bind 方法支持 new,还在里面写了一个原型继承。

shrinkwrap 怎么管理项目依赖的

因为很有可能第三方的没有按照规范来定义版本号,npm shinkwrap 可以根据当前的 package.json 中稳定的版本进行构建一个文件,写死了版本,以后 npm install 的时候,拿取的就是老版本的了。最新的包管理 yarn 其实是默认锁住版本号的

克隆一个对象

有奇葩的方法:

  • eval(uneval(o))//firefox 才支持非标准的 uneval
  • JSON.parse(JSON.stringify(o))//还行,深度复制的速度是最快的(和 extends 其实差不多),浅度复制的话还是 assign 吧,但是函数对象,date 对象等等 json 不支持的都没戏咧
  • Object.create(o)//虽然是加了层原型链,但是我感觉还是不错的,不过前者的对象变化会影响到后面,基本不算是复制了
  • Object.assign(就是一个浅复制呗,writable 特性无法复制)
  • $.extends(第一个参数为 true 的话是支持深度复制的)
  • replaceState(奇葩啊,这也行..)
const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};
function clone(obj) {
  var newObj;
  if (obj instanceof Array) {
    newObj = [];
    for (var i = 0; i < obj.length; i++) {
      newObj[i] = clone(obj[i]);
    }
  } else if (obj instanceof Object) {
    newObj = {};
    for (var k in obj) {
      newObj[k] = clone(obj[k]);
    }
  } else {
    newObj = obj;
  }
  return obj;
}

AMD 和 CMD 规范

AMD 依赖前置,所以异步并行加载

CMD 按需依赖,所以还是顺序加载

node 端是 Commonjs

##前端安全
永远不相信前端输入,1 个是前端的验证要通过正则啊等等的验证,后端也必须得再校验一遍

XSS 攻击

就是在网页上插入 html 标签或者 javascript 代码。

解决:

  • 针对提交的结果后端设置一层 filter,对<>进行过滤
  • 东西写到页面上的时候都进行一次 encode,放置将 html 标签显示出来
  • 不在 cookie 里面存重要的信息

CSRF(跨站点请求伪造)

  • 传一个 token
  • 判断来源 referer

机器人的攻击

进行验证码的验证

两者的区别在于 XSS 是访问,不需要什么数据,CSRF 是一次动作,是需要一些数据包的

manifest

就是在 html 元素里定义了这个属性,就可以进行缓存了,当做离线应用进行缓存

web worker

运营在后台的 js,独立于页面,可以不阻塞主线程

BFC

块级格式化上下文,是一个独立的布局环境,其中的元素布局不受外部的影响。
float 不是 none,position 是 absolute 或者 fixed,或者 overflow 不是 visible,display 的值是 inline-block,flex,table-cell 等等

他的作用:
避免外边距折叠,在外面加上一层 BFC
也能触发包含了浮动元素,内部不被撑开的情况
避免文字环绕

点击穿透

就是点击之后上层 DOM 改变,下层中同样位置的元素触发点击事件,就是点击穿透。

一般就是 touchstart–touchmove–touchend,然后 touchend 之后浏览器会延迟 300ms 来监听是否触发了 dbclick 事件。

tudo:如何解决??

如果构造函数里有 return 语句

如果构造函数 return 的不是引用类型,那么就会当没有 return;

如果返回的是引用类型,那就会替换掉返回的东西;

如果是 return this,那么当做构造函数调用的话等于就是没有写。

==和===的区别

重点内容就是不同类型的值进行比较的时候,字符串和布尔值都会转化为数值进行比较,如果是对象与原始类型的值比较,对象转化为原始类型的值,然后再进行比较。

之所以建议用===的原因就是因为===没有歧义,当后面的开发者看到的时候,不会去想是不是有什么深意。

HTTPS 的好处

全站 HTTPS:
主要为了摆脱运营商的劫持

因为发一个 http 请求,属于明文传输,中间代理服务器,路由器,网关出口,通信运营商,都可以劫持到请求,就可以拿到放在 url 里的一些参数,cookie 也可以拿到,返回的内容,他也可以添加一些第三方的内容

HTTPs 就是进行了数据的保密,数据的完整,身份的校验,就是 http+ssl,发了请求,会先 302 到 https 服务,然后生成一个 crt,然后客户端进行验证,然后生成一个随机的加密形式发回后端,后端将加密内容发回来,客户端再进行解密进行展示。

主要问题是请求的响应速度影响明显还有 cpu 的计算能力的消耗,主要是私钥解密阶段,因为非对称私钥计算很需要时间,而且每次生成的都不一样,而且一定程度上也不利于 SEO

只听说过会话复用

HTTP2

他是二进制的,代替了原有的文本;

交换两个值,不用额外临时变量

就三种方法咯,异或的最快

var a = 123;
var b = 456;
a = a + b;
b = a - b;
a = a - b; //加法
a = a * b;
b = a / b;
a = a / b; //除法
a ^= b;
b ^= a;
a ^= b; //异或是位操作,速度肯定是最快的啦,相同为1,不同为0,因为异或的反操作还是本身

webpack 与 gulp,grunt 的区别

webpack 带有一套 loader 机制,gulp,grunt 没有这种机制。

yarn 与 npm 的比较

yarn 自动缓存了他下载过的模块,就是说他只要下载过,即使你删去了,他也能够离线下载下来。(其实也就是保存在了本地的目录)而且是并行资源管理,速度很快。

yarn 号称自己非常可依赖,如果在一个机器上能够运行,在另外的机器上也能运行。(npm 的下载可能是杂乱无章的,yarn 根据他的 lockfile 和安装算法保证了位置,顺序都是一样的)

yarn 非常安全,会校验模块的完整性。

yarn 自动 shrinkwrap。

纯函数

纯函数其实就是你输入什么东西,得到的结果是必定的,不会更改的就叫做纯函数。

模块跟闭包的区别

模块的表现很像闭包。但是模块是比闭包更高级的东西。就是说他其实是有他自己的上下文环境的。

迭代器

generator 函数返回了一个可迭代的迭代器,比如为 c 的话。c[Symbol.iterator]() === c,其实就形成了一个循环了。

Iterable -- object
    [Symbol.iterator] -- function
        return -- Iterator --object
            [next] -- function
Generator Function
    Generator <Iterable, Iterator>

HTTPS 如何实现

客户端发起一个请求。服务器端有一个公钥和一个私钥,服务器端将公钥传过来;客户端校验公钥是否失效,如果合格,就生成一串随机值,然后用公钥加密传给后端;后端根据私钥进行解密,得到这串随机值,然后用随机值将内容加密传给前端;客户端拿到值后使用随机值解密,得到具体的内容。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 981909093@qq.com

文章标题:前端基础知识

文章字数:2.4k

本文作者:泽鹿

发布时间:2019-08-28, 16:45:23

最后更新:2019-08-28, 20:11:39

原始链接:http://panyifei.github.io/2019/08/28/技术/前端技术/前端基础知识/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏