没有合适的资源?快使用搜索试试~ 我知道了~
前端面试题js,html,css,vue
需积分: 5 0 下载量 45 浏览量
2023-12-28
16:11:04
上传
评论
收藏 49KB DOCX 举报
温馨提示
试读
35页
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 具体步骤: 第一步: 需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化 第二步: compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图 第三步: Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个 update() 方法 3、待属性变动 dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。 第四步:MVVM 作为数据绑定的入口,整合 Obs
资源推荐
资源详情
资源评论
2019/9/5
第�部分:复习篇上 | FE-Interview
blog.poetries.top/FE-Interview-Questions/review/#_9-安全
1/29
第�部分:复习篇
�、CSS
1. 盒模型
⻚�渲染时, dom 元素所采�的 布局模型。可通过 box-sizing 进�设置。
根据计算宽�的区域可分为
content-box ( W3C 标准盒模型)
border-box ( IE 盒模型)
padding-box
margin-box (浏览器未实现)
2. BFC
块级格式化上下�,是�个独�的渲染区域,让处于 BFC 内部的元素与外部
的元素相互隔离,使内外元素的定位不会相互影响。
IE 下为 Layout ,可通过 zoom:1 触发
触发条件:
根元素
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible
规则:
属于同�个 BFC 的两个相邻 Box 垂直排列
属于同�个 BFC 的两个相邻 Box 的 margin 会发�重叠 2019/9/5
第�部分:复习篇上 | FE-Interview
blog.poetries.top/FE-Interview-Questions/review/#_9-安全
2/29
BFC 中�元素的 margin box 的左边, 与包含块 (BFC) border box 的左边相接
触
(�元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的�度时,浮动�元素也参与计算
�字层不会被浮动层覆盖,环绕于周围
应�:
阻� margin 重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同�
个 BFC 区
域之中)
�适应两栏布局
可以阻�元素被浮动元素覆盖
3.层叠上下�
元素提升为�个�较特殊的图层,在三维空间中 (z 轴) �出普通元素�等。
触发条件
根层叠上下�( html )
position
css3 属性
flex
transform
opacity
filter
will-change
webkit-overflow-scrolling
层叠等级:层叠上下�在 z 轴上的排序
在同�层叠上下�中,层叠等级才有意义
z-index 的优先级最�
4. 居中布局
�平居中 2019/9/5
第�部分:复习篇上 | FE-Interview
blog.poetries.top/FE-Interview-Questions/review/#_9-安全
3/29
�内元素: text-align: center
块级元素: margin: 0 auto
absolute + transform
flex + justify-content: center
垂直居中
line-height: height
absolute + transform
flex + align-items: center
table
�平垂直居中
absolute + transform
flex + justify-content + align-items
5. 选择器优先级
!important > �内样式 > #id > .class > tag > * > 继承 > 默认
选择器 从右往左 解析
6.去除浮动影响,防��级�度塌陷
通过增加尾元素清除浮动
:after / <br> : clear: both
创建�级 BFC
�级设置�度
7.link 与 @import 的区别
link 功能较多,可以定义 RSS ,定义 Rel 等作�,� @import 只能�于加载
css
当解析到 link 时,⻚�会同步加载所引的 css ,� @import 所引�的 css 会等
到⻚
�加载完才被加载
@import 需要 IE5 以上才能使�
link 可以使� js 动态引�, @import 不�
8. CSS 预处理器(Sass/Less/Postcss)2019/9/5
第�部分:复习篇上 | FE-Interview
blog.poetries.top/FE-Interview-Questions/review/#_9-安全
4/29
CSS 预处理器的原理: 是将类 CSS 语�通过 Webpack 编译 转成浏览器可
读的真正 CSS 。在这层编译之上,便可以赋予 CSS 更多更强�的功能,常
�功能:
嵌套
变量
循环语句
条件语句
�动前缀
单位转换
mixin 复�
�试中�般不会重点考察该点,�般介绍下��在实战项�中的经验即可~
9.CSS 动画
transition: 过渡动画
transition-property : 属性
transition-duration : 间隔
transition-timing-function : 曲线
transition-delay : 延迟
常�钩�: transitionend
animation / keyframes
animation-name : 动画名称,对应 @keyframes
animation-duration : 间隔
animation-timing-function : 曲线
animation-delay : 延迟
animation-iteration-count : 次数
infinite : 循环动画
animation-direction : �向
alternate : 反向播放
animation-fill-mode : 静�模式
forwards : 停�时,保留最后�帧
backwards : 停�时,回到第�帧
both : 同时运� forwards / backwards2019/9/5
第�部分:复习篇上 | FE-Interview
blog.poetries.top/FE-Interview-Questions/review/#_9-安全
5/29
常�钩�: animationend
动画属性: 尽量使�动画属性进�动画,能拥有较好的性能表现
translate
scale
rotate
skew
opacity
color
剩余34页未读,继续阅读
资源评论
编代码的小王
- 粉丝: 97
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功