前端笔记

220次阅读
没有评论

CSS 核心知识(万字长文,值得收藏!)

https://www.jianshu.com/p/42116364651b?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=qq

IntersectionObserver API 使用教程

http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html 网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。 传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题。

目前有一个新的 IntersectionObserver API,可以自动"观察"元素是否可见,Chrome 51+ 已经支持。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"。

它的用法非常简单。

var io = new IntersectionObserver(callback, option); 上面代码中,IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选)。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

CSS3中width值为max/min-content及fit-content的理解

1.fill-available的意义——自动填满剩余的空间 就是有个div没有任何样式的时候,浏览器是按照自动填充的样式呈现的,就是100%width的样式填充的。按照盒子模式,不仅元素在block中可以呈现自动填满空间的样式,在inline-block上也是可以这样呈现的(包裹收缩的inline-block元素上,这里说的inline-block是具有收缩特性)。

div { display:inline-block; width:fill-available; }

2.max-content和min-content是会个跟随有定宽的的最大最小宽度,不会进行收缩。

3.fit-content的属性 width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。就是div的自适应宽度不是100%而是内容的大小。很好的实现了,block元素的水平居中。

下面一张图形象的体现了四个属性的表现

前端笔记

需要提一下的是:max-content 和fit-content, 当元素内容没有超出行宽的时候,最终的宽度都是内容的宽度。而超出行宽的时候,max-content的表现是不换行,出现横向滚动条,fit-content的表现是会换行。

webpack中require.context 自动导入

(https://zhuanlan.zhihu.com/p/59564277)

const importAll = context => {
  const map = {}

  for (const key of context.keys()) {
    const keyArr = key.split('/')
    keyArr.shift() // 移除.
    map[keyArr.join('.').replace(/\.js$/g, '')] = context(key)
  }

  return map
}

export default importAll

#使用

import importAll from '$common/importAll'
export default importAll(require.context('./', true, /\.js$/))