rem
按照设计稿标准走即可
meta 相关
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
<meta name=”author” content=”name, email@gmail.com”/>
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<!–添加到主屏后的标
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏–>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<!–windows phone
设置页面不缓存–>
复制代码
div+css的布局较table布局有什么优点
-
改版的时候更方便 只要改
css
文件。 -
页面加载速度更快、结构化清晰、页面显示简洁。
-
表现与结构相分离。
-
易于优化
( seo )
搜索引擎更友好,排名更容易靠前。
src与href的区别
-
src
用于替换当前元素,href
用于在当前文档和引用资源之间确立联系。 -
src
是source
的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src
资源时会将其指向的资源下载并应用到文档内,例如js
脚本,img
图片和frame
等元素
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
href 是 Hypertext Reference
的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加 -link href="common.css" rel="stylesheet"
那么浏览器会识别该文档为css
文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link
方式来加载css
,而不是使用@import
方式
link 与 @import 的区别
-
link
是HTML
方式,@import
是CSS
方式 -
link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现 FOUC (文档样式短暂失效) -
link
可以通过rel="alternate stylesheet"
指定候选样式 -
浏览器对
link
支持早于@import
,可以使用@import
对老浏览器隐藏样式 -
@import
必须在样式规则之前,可以在css
文件中引用其他文件 -
总体来说:
link
优于@import
,link
优先级也更高
BFC 有什么用
-
创建规则:
-
根元素
-
浮动元素(
float
不取值为none
) -
绝对定位元素(
position
取值为absolute
或fixed
) -
display
取值为inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex
之一的元素 -
overflow
不取值为visible
的元素 -
作用
-
可以包含浮动元素
-
不被浮动元素覆盖
-
阻止父子元素的
margin
折叠
清除浮动的几种方式
-
父级
div
定义height
-
结尾处加空
div
标签clear:both
-
父级
div
定义伪类:after
和zoom
-
父级
div
定义overflow:hidden
-
父级
div
也浮动,需要定义宽度 -
结尾处加
br
标签clear:both
Css3 新增伪类 - 伪元素
p:first-of-type
选择属于其父元素的首个
元素的每个
元素。
p:last-of-type
选择属于其父元素的最后
元素的每个
元素。
p:only-of-type
选择属于其父元素唯一的
元素的每个
元素。
p:only-child
选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2)
选择属于其父元素的第二个子元素的每个
元素。
-
:enabled
已启用的表单元素。 -
:disabled
已禁用的表单元素。 -
:checked
单选框或复选框被选中。 -
::before
在元素之前添加内容。 -
::after
在元素之后添加内容,也可以用来做清除浮动。 -
::first-line
添加一行特殊样式到首行。 -
::first-letter
添加一个特殊的样式到文本的首字母。
-
伪类语法一个:,它是为了弥补css常规类选择器的不足
-
伪元素语法两个:,它是凭空创建的一个虚拟容器生成的元素
IE盒子模型 、W3C盒子模型
-
W3C盒模型: 内容(content)、填充( padding )、边界( margin )、 边框( border );
-
box-sizing: content-box
-
width = content width;
-
IE盒子模型: IE 的content 部分把 border 和 padding 计算了进去;
-
box-sizing: border-box
-
width = border + padding + content width
display:inline-block 什么时候不会显示间隙?
-
移除空格
-
使用
margin
负值 -
使用
font-size:0
-
letter-spacing
-
word-spacing
行内元素float:left后是否变为块级元素?
行内元素设置成浮动之后变得更加像是 inline-block
(行内块级元素,设置 成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是 100% ),这时候给行内元素设置 padding-top
和 padding-bottom
或者 width 、 height
都是有效果的
如果需要手动写动画,你认为最小时间间隔是多久,为什么?
多数显示器默认频率是 60Hz ,即 1 秒刷新 60 次,所以理论上最小间隔为 1/60*1000ms = 16.7ms
CSS权重,计算规则
!important
> 内联样式 > ID > 类属性、属性选择器或者伪类选择器 > 标签选择器
CSS REFACTORING
中提到了算法的过程,取决于A、B、C、D的值,abcd是什么呢?
| 符号 | 计算方式 |
| — | — |
| A ( 内联样式) | 有内联样式时 A=1 否则0 |
| B(ID选择器出现次数) | 有两层ID选择器 B=2 |
| C (类选择器出现的次数) | 类选择器1个, 属性选择器1个,伪类选择器2个 C=4 |
| D (标签、伪类选择器出现次数) | 标签选择器2个,伪类选择器1个 D=3 |
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + [REL=up] / (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
复制代码
-
最终从A开始逐层比较,A => B =>C =>D 哪个大优先哪个样式生效,否则后面覆盖前面样式,这也是为什么有的嵌套多层样式可以实现覆盖的原因。
-
样式名称也有就近原则,作用在当前标签的能覆盖继承来的样式
-
最终将这几个条件合并起来就是css的权重问题和计算规则
stylus/sass/less区别
-
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
-
Sass
和LESS
语法较为严谨,LESS
要求一定要使用大括号“{}”,Sass
和Stylus
可以通过缩进表示层次与嵌套关系 -
Sass
无全局变量的概念,LESS
和Stylus
有类似于其它语言的作用域概念 -
Sass
是基于Ruby
语言的,而LESS
和Stylus
可以基于NodeJS NPM
下载相应库后进行编译;这也是为什么安装Sass的时候有时候会报错,需要安装python脚本
优点:就不用我多说了,谁用谁知道,真香。
rgba()和opacity的透明效果有什么不同?
-
rgba()
和opacity
都能实现透明效果,但最大的不同是opacity
作用于元素,以及元素内的所有内容的透明度, -
而
rgba()
只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)
水平居中的方法
-
元素为行内元素,设置父元素
text-align:center
-
如果元素宽度固定,可以设置左右
margin 为 auto
; -
如果元素为绝对定位,设置父元素
position 为 relative
,元素设left:0;right:0;margin:auto;
-
使用
flex-box
布局,指定justify-content
属性为center
-
display
设置为tabel-ceil
垂直居中的方法
-
将显示方式设置为表格,
display:table-cell
,同时设置vertial-align:middle
-
使用
flex
布局,设置为align-item:center
-
绝对定位中设置
bottom:0,top:0
,并设置margin:auto
-
绝对定位中固定高度时设置
top:50%,margin-top
值为高度一半的负值 -
文本垂直居中设置
line-height
为height
值
浏览器内核的理解
-
主要分两个部分:
渲染引擎
、js引擎
-
渲染引擎:
负责取得网页的内容(html css img …),以及计算网页的显示方式,然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同,所以渲染的效果也不一样 -
js引擎:
解析和执行javascript 来实现网页的动态效果 -
最开始渲染引擎和js引擎并没有区分的很明确,后来js引擎越来越独立,内核就倾向于只值渲染引擎
-
IE : trident
内核 -
Firefox : gecko
内核 -
Safari : webkit
内核 -
Opera
:以前是presto
内核,Opera
现已改用Google - Chrome
的Blink
内核 -
Chrome:Blink
(基于webkit
,Google与Opera Software
共同开发)
HTTP 的请求方式场景
-
Get
方法:获取数据通常(查看数据)-查看 -
POST
方法:向服务器提交数据通常(创建数据)-create -
PUT
方法:向服务器提交数据通常(更新数据)-update,与POST
方法很像,也是提交数据,但PUT
制定了资源在服务器上的位置,常用在修改数据 -
HEAD
方法:只请求页面的首部信息 -
DELETE
方法:删除服务器上的资源 -
OPTIONS
方法:用于获取当前URL
支持的请求方式 -
TRACE
方法:用于激活一个远程的应用层请求消息回路 -
CONNECT
方法:把请求链接转换到透明的TCP/IP
的通道
HTTP状态码
-
1XX
:信息状态码 -
100 continue
继续,一般在发送 post 请求时,已发送了 http header 之后服务端将返回此信息,表示确认,之后发送具体参数信息 -
2XX
:成功状态码 -
200 ok
正常返回信息 -
201 created
请求成功并且服务器创建了新资源 -
202 accepted
服务器已经接收请求,但尚未处理 -
3XX
:重定向 -
301 move per
请求的网页已经永久重定向 -
302 found
临时重定向 -
303 see other
临时冲重定向,且总是使用get请求新的url -
304 not modified
自从上次请求后,请求的网页未修改过 -
4XX
:客户端错误 -
400 bad request
服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求 -
401 unauthorized
请求未授权 -
403 forbidden
禁止访问 -
404 not found
找不到如何与url匹配的资源 -
5XX
:服务器错误 -
500 internal server error
最常见的服务器端的错误 -
503 service unacailable
服务器端暂时无法处理请求(可能是过载活维护)
从浏览器地址栏输入URL后发生了什么?
基础版本
-
1.的浏览器根据请求的
URL
交给DNS
域名解析,找到真实IP
,向服务器发起请求; -
2.服务器交给后台处理完成后返回数据,浏览器接收文件
( HTML、JS、CSS 、图象等)
; -
3.浏览器对加载到的资源
( HTML、JS、CSS 等)
进行语法解析,建立相应的内部数据结构(如 HTML 的 DOM )
; -
4.载入解析到的资源文件,渲染页面,完成。
详细版
-
1.从浏览器接收
url
到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系) -
2.开启网络线程到发出一个完整的
HTTP
请求(这一部分涉及到dns查询,TCP/IP
请求,五层因特网协议栈等知识) -
3.从服务器接收到请求到对应后台接收到请求(这一部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)
-
4.后台和前台的
HTTP
交互(这一部分包括HTTP
头部、响应码、报文结构、cookie
等知识,可以提下静态资源的cookie
优化,以及编码解码,如gzip
压缩等) -
5.单独拎出来的缓存问题,
HTTP
的缓存(这部分包括http缓存头部
,ETag , catchcontrol
等) -
6.浏览器接收到
HTTP
数据包后的解析流程(解析html
-词法分析然后解析成dom
树、解析css
生成css
规则树、合并成render
树,然后layout 、 painting
渲染、复合图层的合成、GPU
绘制、外链资源的处理、loaded 和 DOMContentLoaded
等) -
7.
CSS
的可视化格式模型(元素的渲染规则,如包含块,控制框,BFC
, IFC 等概念) -
8.
JS
引擎解析过程(JS
的解释阶段,预处理阶段,执行阶段生成执行上下文,VO
,作用域链、回收机制等等) -
9.其它(可以拓展不同的知识模块,如跨域,
web
安全,hybrid
模式等等内容)
详细升级版
-
1.在浏览器地址栏输入
URL
-
2.浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
-
2.1 如果资源未缓存,发起新请求
-
2.2 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
-
2.3 检验新鲜通常有两个
HTTP
头进行控制Expires
和Cache-Control
: -
2.3.1
HTTP1.0
提供Expires
,值为一个绝对时间表示缓存新鲜日期 -
2.3.2
HTTP1.1
增加了Cache-Control: max-age=
,值为以秒为单位的最大新鲜时间 -
3.浏览器解析
URL
获取协议,主机,端口,path
-
4.浏览器组装一个
HTTP(GET)
请求报文 -
5.浏览器获取主机
ip地址
,过程如下: -
5.1 浏览器缓存
-
5.2 本机缓存
-
5.3 hosts文件
-
5.4 路由器缓存
-
5.5 ISP DNS缓存
-
5.6 DNS递归查询(可能存在负载均衡导致每次IP不一致)
-
6.打开一个
socket
与目标IP地址
,端口建立TCP链接,三次握手
如下: -
6.1 客户端发送一个
TCP的SYN=1,Seq=X
的包到服务器端口 -
6.2 服务器发回
SYN=1,ACK=x+1,Seq=Y
的相应包 -
6.3 客户端发送
ACK=Y+1,Seq=z
-
7.
TCP
链接建立后发送HTTP
请求 -
8.服务器接收请求后解析,将请求转发到服务器程序,如虚拟主机使用
HTTP Host
头部判断请求的服务程序 -
9.服务器检测
HTTP
请求头是否包含缓存验证信息,如果验证缓存新鲜,返回304等对应状态 -
10.出合理程序读取完整请求并准备
HTTP
相应,可能需要查询数据库等操作 -
11.服务器将相应报文通过
TCP
链接发送回浏览器 -
12.浏览器接收
HTTP
相应,然后根据情况选择关闭TCP
链接或者保留重用,关闭TCP链接的四次握手如下: -
12.1 主动方发送
Fin=1,ACK=z,Seq=x
报文 -
12.2 被动方发送
ACK=X+1,Seq=Y
报文 -
12.3 被动方发送
Fin=1,ACK=X,Seq=Y
报文 -
12.4 主动方发送
ACK=Y,Seq=x
报文 -
13.浏览器检查相应状态码
-
14.如果资源可缓存,进行缓存
-
15.对相应进行解码
-
16.根据资源类型决定如何处理
-
17.解析
HTML
文档,构建DOM
树,下载资源,构建CSSOM
树,执行js脚本,这些操作每月严格的先后顺序 -
18.构建DOM树:
-
18.1 Tokenizing:根据HTML规范将字符流解析为标记
-
18.2 Lexing:词法分析将标记转换为对象并定义属性和规则
-
18.3 DOM construction:根据HTML标记关系将对象组成DOM树
-
19.解析过程中遇到图片、样式表、js文件,启动下载
-
20.构建
CSSOM
树: -
20.1
Tokenizing
:字符流转换为标记流 -
20.2
Node
:根据标记创建节点 -
20.3
CSSOM
:节点创建CSSOM树 -
- 根据
DOM树和CSSOM树
构建渲染树
- 根据
-
21.1 从
DOM树
的根节点遍历所有可见节点,不可见节点包括:1)script , meta
这样本身不可见的标签。2)被css隐藏的节点,如 display: none -
21.2 对每一个可见节点,找到恰当的
CSSOM
规则并应用 -
21.3 发布可视节点的内容和计算样式
-
22.js解析如下
-
22.1 浏览器创建
Document对象
并解析HTML
,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
-
22.2 HTML解析器遇到没有
async和defer的script时
,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()
把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容 -
22.3 当解析器遇到设置了
async属性的script
时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write()
,它们可以访问自己script和之前的文档元素 -
22.4 当文档完成解析,
document.readState变成interactive
-
22.5 所有
defer脚本
会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
-
22.6 浏览器在
Document
对象上触发DOMContentLoaded事件
-
22.7 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,
document.readState变为complete,window触发load事件
-
23.显示页面(HTML解析过程中会逐步显示页面)
cookies , sessionStorage 和 localStorage 的区别
-
cookie
是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密) -
cookie
数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递(优化点) -
sessionStorage
和localStorage
不会自动把数据发给服务器,仅在本地保存 -
存储大小:
-
cookie
数据大小不能超过4k -
sessionStorage 和 localStorage
虽然也有存储大小的限制,但比 cookie 大得多,可以达到5M或更大 -
有期时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
sessionStorage
数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie
过期时间之前一直有效,即使窗口或浏览器关闭
浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流程如下
-
先根据这个资源的一些
http header
判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器; -
当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些
request header
验证这个资源是否命中协商缓存,称为http
再验证,如果命中,服务器将请求返回,但不返回资源,而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源; -
强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓存不对发送请求到服务器,但协商缓存会。
-
当协商缓存也没命中时,服务器就会将资源发送回客户端。
-
当
ctrl+f5
强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存; -
当
f5
刷新网页时,跳过强缓存,但是会检查协商缓存;
强缓存-协商缓存:了解更多加入我们前端学习圈
说几条写JavaScript的基本规范
-
不要在同一行声明多个变量
-
请是用 =/! 来比较
true/false
或者数值 -
使用对象字面量替代
new Array
这种形式 -
不要使用全局函数
-
Switch
语句必须带有default
分支 -
If
语句必须使用大括号 -
for-in
循环中的变量 应该使用let
关键字明确限定作用域,从而避免作用域污染
绕不过去的闭包
-
闭包就是能够读取其他函数内部变量的函数
-
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个
-
函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
-
闭包的特性:
-
函数内再嵌套函数
-
内部函数可以引用外层的参数和变量
-
参数和变量不会被垃圾回收机制回收
-
优点:能够实现封装和缓存等
-
缺点:消耗内存、使用不当会内存溢出,
-
解决方法:在退出函数之前,将不使用的局部变量全部删除
说说你对作用域链的理解
-
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到
window
对象即被终止,作用域链向下访问变量是不被允许的。 -
简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期
JavaScript原型,原型链 ? 有什么特点?
-
每个对象都会在其内部初始化一个属性,就是
prototype
(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype
里找这个属性,这个prototype
又会有自己的prototype
,于是就这样一直找下去,也就是我们平时所说的原型链的概念 -
关系:
instance.constructor.prototype = instance._*proto*_
-
特点:
JavaScript
对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变当我们需要一个属性的时,Javascript
引擎会先看当前对象中是否有这个属性, 如果没有的,就会查找他的Prototype
对象是否有这个属性,如此递推下去,一直检索到Object
内建对象
请解释什么是事件委托/事件代理
-
事件代理
( Event Delegation )
,又称之为事件委托。是JavaScript
中常用的绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM
元素的事件冒泡。使用事件代理的好处是可以提高性能 -
可以大量节省内存占用,减少事件注册,比如在
table
上代理所有td 的 click
事件就非常棒 -
可以实现当新增子对象时无需再次对其绑定
Javascript如何实现继承?
-
构造继承
-
原型继承
-
实例继承
-
拷贝继承
-
原型
prototype
机制或apply 和 call
方法去实现较简单,建议使用构造函数与原型混合方式
function Parent(){
this.name = ‘wang’;
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent,通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
复制代码
谈谈This对象的理解
-
this
总是指向函数的直接调用者(而非间接调用者) -
如果有
new
关键字,this
指向new
出来的那个对象 -
在事件中,
this
指向触发这个事件的对象,特殊的是,IE
中的attachEvent 中的this
总是指向全局对象Window
事件模型
W3C
中定义事件的发生经历三个阶段:捕获阶段(capturing
)、目标阶段 (targetin
)、冒泡阶段(bubbling
)
-
冒泡型事件:当你使用事件冒泡时,子级元素先触发,父级元素后触发
-
捕获型事件:当你使用事件捕获时,父级元素先触发,子级元素后触发
-
DOM
事件流:同时支持两种事件模型:捕获型事件和冒泡型事件 -
阻止冒泡:在
W3c
中,使用stopPropagation()
方法;在IE下设置cancelBubble =true
-
阻止捕获:阻止事件的默认行为,例如
click - a
后的跳转。在W3c
中,使用preventDefault()
方法,在 IE 下设置window.event.returnValue = false
new操作符具体干了什么呢?
-
创建一个空对象,并且
this
变量引用该对象,同时还继承了该函数的原型 -
属性和方法被加入到
this
引用的对象中 -
新创建的对象由
this
所引用,并且最后隐式的返回this
Ajax原理
-
Ajax
的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎),通过XmlHttpRequest
对象来向服务器发异步请求,从服务器获得数据,然后用javascript
来操作DOM
而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据 -
Ajax
的过程只涉及JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest
是ajax
的核心机制
如何解决跨域问题?
首先了解下浏览器的同源策略 同源策略
/SOP(Same origin policy)
是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS 、 CSFR
等攻击。所谓同源是指"协议+域名+端口"
三者相同,即便两个不同的域名指向同一个ip地址,也非同源
- 通过
jsonp
跨域
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
// 传参并指定回调执行函数为onBack
script.src = ‘http://www…:8080/login?user=admin&callback=onBack’;
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
复制代码
document.domain + iframe
跨域
//父窗口:(http://www.domain.com/a.html)
//子窗口:(http://child.domain.com/b.html)
document.domain = ‘domain.com’;
// 获取父窗口中变量
alert('get js data from parent —> ’ + window.parent.user);
复制代码
-
nginx
代理跨域 -
nodejs
中间件代理跨域 -
后端在头部信息里面设置安全域名
说说你对AMD和Commonjs的理解
CommonJS
是服务器端模块的规范,Node.js
采用了这个规范。CommonJS
规范加载模
块是同步的,也就是说,只有加载完成,才能执行后面的操作。 AMD
规范则是非同步加载 模块,允许指定回调函数
AMD
推荐的风格通过返回一个对象做为模块对象,CommonJS
的风格通过对
module.exports 或 exports
的属性赋值来达到暴露模块对象的目的
js的7种基本数据类型
Undefined 、 Null 、Boolean 、Number 、String 、Bigint 、Symbol
了解更多加入我们前端学习圈
介绍js有哪些内置对象
-
Object
是JavaScript
中所有对象的父对象 -
数据封装类对象:
Object 、 Array 、 Boolean 、 Number 和 String
-
其他对象:
Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error
JS有哪些方法定义对象
-
对象字面量:
var obj = {}
; -
构造函数:
var obj = new Object()
; -
Object.create():
var obj = Object.create(Object.prototype);
你觉得jQuery源码有哪些写的好的地方
-
jquery
源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window
对象参数,可以使window
对象作为局部变量使用,好处是当jquery
中访问window
对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window
对象。同样,传入undefined
参数,可以缩短查找undefined
时的作用域链 -
jquery
将一些原型属性和方法封装在了jquery.prototype
中,为了缩短名称,又赋值给了jquery.fn
,这是很形象的写法 -
有一些数组或对象的方法经常能使用到,
jQuery
将其保存为局部变量以提高访问速度 -
jquery
实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高代码效率
null,undefined 的区别
-
undefined
表示不存在这个值。 -
undefined
:是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。尝试读取时会返回undefined
-
例如变量被声明了,但没有赋值时,就等于
undefined
-
null
表示一个对象被定义了,值为“空值” -
null
: 是一个对象(空对象, 没有任何属性和方法) -
例如作为函数的参数,表示该函数的参数不是对象;
-
在验证
null
时,一定要使用 === ,因为 == 无法分别null 和 undefined
谈谈你对ES6的理解
-
新增模板字符串(为
JavaScript
提供了简单的字符串插值功能) -
箭头函数
-
for-of
(用来遍历数据—例如数组中的值。) -
arguments
对象可被不定参数和默认参数完美代替。 -
ES6
将promise
对象纳入规范,提供了原生的Promise
对象。 -
增加了
let 和 const
命令,用来声明变量。 -
还有就是引入
module
模块的概念
面向对象编程思想
-
基本思想是使用对象,类,继承,封装等基本概念来进行程序设计
-
易维护
-
易扩展
-
开发工作的重用性、继承性高,降低重复工作量。
-
缩短了开发周期
如何通过JS判断一个数组
instanceof
运算符是用来测试一个对象是否在其原型链原型构造函数的属性
var arr = [];
arr instanceof Array; // true
复制代码
isArray
Array.isArray([]) //true
Array.isArray(1) //false
复制代码
constructor
属性返回对创建此对象的数组函数的引用,就是返回对象相对应的构造函数
var arr = [];
arr.constructor == Array; //true
复制代码
Object.prototype
Object.prototype.toString.call([]) == ‘[object Array]’
// 写个方法
var isType = function (obj) {
return Object.prototype.toString.call(obj).slice(8,-1);
//return Object.prototype.toString.apply([obj]).slice(8,-1);
}
isType([]) //Array
复制代码
异步编程的实现方式
-
回调函数
-
优点:简单、容易理解
-
缺点:不利于维护,代码耦合高
-
事件监听(采用时间驱动模式,取决于某个事件是否发生)
-
优点:容易理解,可以绑定多个事件,每个事件可以指定多个回调函数
-
缺点:事件驱动型,流程不够清晰
-
发布/订阅(观察者模式)
-
类似于事件监听,但是可以通过‘消息中心‘,了解现在有多少发布者,多少订阅者
-
Promise
对象 -
优点:可以利用
then
方法,进行链式写法;可以书写错误时的回调函数; -
缺点:编写和理解,相对比较难
-
Generator
函数 -
优点:函数体内外的数据交换、错误处理机制
-
缺点:流程管理不方便
-
async
函数 -
优点:内置执行器、更好的语义、更广的适用性、返回的是
Promise
、结构清晰。 -
缺点:错误处理机制
对原生Javascript了解方向
数据类型、运算、对象、Function
、继承、闭包、作用域、原型链、事件、 RegExp
、JSON
、 Ajax
、 DOM
、 BOM
、内存泄漏、跨域、异步装载、模板引擎、前端MVC
、路由、模块化、 Canvas
、 ECMAScript
sort 快速打乱数组
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(()=> Math.random() - 0.5)
//利用sort return 大于等于0不交换位置,小于0交换位置
// [5, 8, 4, 3, 2, 9, 10, 6, 1, 7]
复制代码
数组去重操作
-
ES6 Set
-
for
循环indexOf
-
for
循环includes
-
sort
JS 原生拖拽节点
-
给需要拖拽的节点绑定
mousedown , mousemove , mouseup
事件 -
mousedown
事件触发后,开始拖拽 -
mousemove
时,需要通过event.clientX 和 clientY
获取拖拽位置,并实时更新位置 -
mouseup
时,拖拽结束 -
需要注意浏览器边界值,设置拖拽范围
深拷贝、浅拷贝
-
所有的基础数据类型的赋值操作都是深拷贝
-
通常利用上面这点,来对引用数据类型做递归深拷贝
-
浅拷贝:
Object.assign
或者 扩展运算符 -
深拷贝:
JSON.parse(JSON.stringify(object))
深层递归 -
局限性:会忽略 undefined,不能序列化函数,不能解决循环引用的对象
节流防抖
-
节流:每隔一段时间执行一次,通常用在高频率触发的地方,降低频率。–如:鼠标滑动 拖拽
-
防抖:一段时间内连续触发,不执行,直到超出限定时间执行最后一次。–如:
input
模糊搜索
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
组去重操作
-
ES6 Set
-
for
循环indexOf
-
for
循环includes
-
sort
JS 原生拖拽节点
-
给需要拖拽的节点绑定
mousedown , mousemove , mouseup
事件 -
mousedown
事件触发后,开始拖拽 -
mousemove
时,需要通过event.clientX 和 clientY
获取拖拽位置,并实时更新位置 -
mouseup
时,拖拽结束 -
需要注意浏览器边界值,设置拖拽范围
深拷贝、浅拷贝
-
所有的基础数据类型的赋值操作都是深拷贝
-
通常利用上面这点,来对引用数据类型做递归深拷贝
-
浅拷贝:
Object.assign
或者 扩展运算符 -
深拷贝:
JSON.parse(JSON.stringify(object))
深层递归 -
局限性:会忽略 undefined,不能序列化函数,不能解决循环引用的对象
节流防抖
-
节流:每隔一段时间执行一次,通常用在高频率触发的地方,降低频率。–如:鼠标滑动 拖拽
-
防抖:一段时间内连续触发,不执行,直到超出限定时间执行最后一次。–如:
input
模糊搜索
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-MgLLWswb-1715047999826)]
[外链图片转存中…(img-saIp962C-1715047999827)]
[外链图片转存中…(img-eqmrpiIZ-1715047999827)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!