js整理二

JS基础知识

 

1.1 变量类型

 

JavaScript 有六种数据类型。主要的类型有 Number、String、object 以及 Boolean 类型,其他两种类型为 null 和undefined。

1.1.1 变量的声明

JS中变量申明分显式申明和隐式申明。

 
   

 

 

1.1.2 变量类型检测

1,使用typeof typeof 变量

2,Variables.constructor

变量.constructor==变量类型(比如Number,String,

Boolean )

1.2 原型和原型链

 

1.2.1 原型

 

每一个函数都有一个prototype对象属性,指向另一个对象, prototype的所有属性和方法,都会被构造函数的实例继承。prototype就是调用构造函数所创建的那个实例对象的原型。

1.2.2 原型链

实例对象与原型之间的连接,叫做原型链,JS在创建对象的时候,都有一个叫做proto的内置属性,用于指向创建它的函数对象的原型对象prototype。

 

 

 

1.3 闭包和作用域

 

1.3.1 闭包

闭包是能够读取其他函数内部的变量的函数。特点:

让外部访问函数内部变量成为可能; 局部变量会常驻在内存中;

可以避免使用全局变量,防止全局变量污染;

会造成内存泄漏(有一块内存空间被长期占用,而不被释放)

1.3.2 作用域

作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

 

call、

1.3.2.1 全局作用域和函数作用域

1,全局作用域:最外层函数 和在最外层函数外面定义的变量拥有全局作用域。

(1) 最外层函数和在最外层函数外面定义的变量

(2) 所有末定义直接赋值的变量自动声明为拥有全局作用域

(3) window 对象的属性拥有全局作用内层作用域可以访问外层作用域的变量 2,函数作用域:声明在函数内部的变量。

3,块级作用域:块级作用域可通过新增命令 let const 声明

1.3.2.2 作用域链

如果父级也没呢?再一层一层向上寻找,直到找到全局作用域还是没找到,就宣布放弃。这种一层一层的关系,就是 用域链

 

 

 

1.4 异步和单线程

 

1.4.1 单线程

 

单线程:一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务。实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着。

1.4.2 异步

前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

观察者模式

Promises对象

1.5 Promises

 
   

 

promise都有三个状态:pending(默认)、fulfilled(完成)、rejected(失败)

每个 Promise 都有个叫 then 的方法,它接受两个函数做参数:resolve reject 按照顺序传递。 调用

1.7 相关方法

 

1.7.1 日期

Date:获得当日的日期

getTime:返回从 1970 1 1 日至今的毫秒数

 

setFullYear:设置具体的日期getDay:显示星期

1.7.2 math

random:获得随机数

1.7.3 数组方法

forEach 遍历所有元素

every 判断所有元素是否都符合条件some 判断是否有至少一个元素符合条件sort 排序

map 对元素重新组装,生成新元素

filter 过滤符合条件的元素

1.7.4 对象方法

 
   

 

 

 

js-web-api

 
   

 

2.1 DOM操作

 

2.1.1 DOM常用API

 

1,获得DOM节点,以及节点上的property和Attribute 2,获得父节点、获取子节点

3,新增节点、删除节点

2.1.2 attributeproperty

property是对js对象属性的修改attribute是对html标签属性的修改

2.1.3 DOM的本质

浏览器拿到的字符串,然后把标签解析为一个一个对象,并且以树的形式存储。

 

 

 

2.2 BOM操作

 

2.1.1 navigator

var ua = navigator.userAgent

var isChrome = ua.indexOf("Chrome")

如何检测浏览器的类型

2.1.2 screen

screen.width

2.1.3 location

 

location.href location.protocol location.pathname location.search location.hash

2.1.4 history

history.back history.forward

 

 

 

2.3 事件

 

2.3.1 通用事件

 
   

 

 

2.3.2 事件冒泡

事件不断的向外延伸

2.3.3 代理

当点击事件的时候,可以通过e.target.nodeName找到事件  来自哪儿

2.4 Ajax

 
   

 

 

2.4.1 手动编写ajax

 
   

 

 

2.4.2 状态码

2.4.2.1 readyState

0,还没有调用send                   1,已经调用send方法,正在发送请求

2,send方法执行完成,已经接收到全部响应内容

3:正在解析响应内容

4:响应内容解析完成,可以在客户端调用

2.4.2.2 status

200:成功请求

300:重定向

400:客户端请求错误

500:服务器端错误

 

 

 

2.5 ,跨域

 

2.5.1 什么是跨域

浏览器有同源策略,不允许ajax访问其他域的接口跨域条件:协议、域名、端口有一个不同就算跨域

2.5.2 可以跨域的三个标签

 

 

 

用于打点统计,统计网站可能是其他域可以使用CDN

注意事项

所有的跨域请求都必须经过信息提供方允许

2.5.3 JSONP

1,加载http:codeing.m/class.html class.html不一定真的存在

同理不一定真的存在

3,服务器端设置http header

2.6 存储

 

 

cookie sessionStorage localStorage

1,cookie

本身用于客户端和服务器端的通信,但是拥有本地存储的功能,于是被借用

缺点:存储量太小,只有4KB;2,所有http请求都带着,会影响获取资源的效率;3,API简单,需要疯子才能用

 

2,sessionStorage和localStorage

为HTML5专门存储设计,最大容量5M

API简单易用。loaclStorage.setItem;loaclStorage.getItem

 

 

 

容量

是否会携带到ajax API易用性

 

 

 

开发环境

 

 

IDE

git

js模块化打包工具

上线回滚的流程

1IDE

 

1.1 webstorm

1.2 sublime

1.3 vscode:快捷键、插件安装

1.4 atom

 

1.5 插件 重要

2Git

 

1,coding.net github.com 2,git的基本操作必须熟练

2.1 常用的git命令

git add

git checkout xxx

git commit -m "xxx" git push origin master git pull origin master

git branch 多人开发分支

git checkout -b xxx / git checkout xxx get merge xxx

3,模块化

 

 

 

 

4AMD

 

require.js requirejs.org

全局define函数全局require函数

依赖JS会自动、异步加载

 

5webpack

 

 

 

 

 

6 上线回滚

 

1,上线和回滚的基本流程

1.1 产品上线

(1) 将测试完成的代码提交到git版本的master分支

(2) 将当前服务器的代码全部打包并记录版本号,备份

(3) 将master分支的代码提交覆盖到线上服务器,生产新的版本号

1.2 回滚

(1) 将当前服务器的代码打包并记录版本号、备份

(2) 将备份的上一个版本号解压,覆盖到线上服务器,并生成新的版本号

2linux基本命令

mkdir:创建文件夹ls:看文件名字

cd.. 返回上一个目录

rm 删除一个文件

 

cp a.js a1.js 拷贝文件

mv a.js src/a.js 移动文件

 

 

运行环境

 

页面加载

 

从输入url到得到html的详细过程

window.onload和DOMContentLoaded的区别

页面的全部资源加载完才会执行,包括图片、视频-- window.onload

DOM渲染完毕即可执行、此时图片、视频还没有加载完-- DOMContentLoaded

1.1 加载资源的形式

输入url(或跳转页面)加载html

 
   

 

 

加载html中的静态资源

 
   

 

 

1.2 加载资源的过程

浏览器根据DNS服务器得到域名的IP地址

 

向这个IP的服务器发送http请求服务器收到、处理并返回http请求浏览器得到返回内容

1.3 浏览器渲染页面的过程

根据html结构生产DOM Tree

根据CSS生产CSSOM

将DOM和CSSOM整合成RenderTree 根据RenderTree开始渲染和展示

遇到时,会执行阻塞渲染:js有权利更改dom树

性能优化

 

1,静态资源的压缩合并webpack进行的文件合并

2,静态资源缓存

通过连接名字控制缓存

 
   

 

 

webpack 根据内容进行判断

3,使用CDN让资源加载更快

会根据用户的地址,给予你附近服务器传输资源

4,使用SSR后端渲染,数据直接输出到HTML中直接获得页面渲染,不需要ajax请求

 

1.1 渲染优化

CSS放前面,JS放后面

懒加载(图片懒加载,下拉加载更多) 减少DOM查询,对DOM查询做缓存

缓存查询的节点,通过getElementByTagName会消耗时间

减少DOM操作,多个操作尽量合并在一起操作做一次节点,这个节点处理好后,再添加进去事件节流,很频繁的操作合并到一起

事件调用keyup的时候,在停止的时候调用change, 尽早执行操作

安全性

 

1,XSS跨站请求攻击

写博客的时候,偷偷插入,在其他人看文章的时候,获取

cookie,发送到自己的服务器。(账号相关信息)

处理:<为<>替换为(为<)

2,XSRF跨站请求伪造

登录购物网站,正在浏览商品,付费接口是xxx.com/play? id=100,然后收到一封邮件,隐藏,查看邮件的时候,已经付费。增加验证流程

 

面试

 

1,简历

 

一,简洁明了,重点突出项目经历和解决方案

(1) 项目的复杂度

(2) 项目中的技术

二,个人博客放到简历中,并且定期维护博客

三,开源项目放在简历中,并且定期维护开源项目四,简历不要造假,要保持能力和经历上的真实性

2,面试

 

一,如何看到加班

项目需要,可以进行加班

二,不要挑战面试官,不要反考面试官三,学会给面试官惊喜

一个知识点延伸有用的其他知识点,不要太多

四,遇到不会的问题,说出自己知道的就可以五,谈谈自己的缺点

 

某个技术还不会,现在在学习,一个月后可能会掌握项目开发

posted @ 2021-04-12 19:11  诡道也  阅读(44)  评论(0编辑  收藏  举报