Open xuxinhang opened 5 years ago
为什么 new Event
不能触发 的点击事件?需要使用 MouseEvent
。
$0.dispatchEvent(new Event('click')); // 不可以
$0.dispatchEvent(new MouseEvent('click')); // 可以
一个需要注意的地方:那个配置对象里面的 bubble
属性的默认值是 false
background-origin
和 background-clip
之间的差别?
background-attachment: local
了解一下?
其实是可以 Hack 的。(用 div 包一层。)
[ant-click-animating-without-extra-node]:after,
.ant-click-animating-node {
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: inherit;
border: 0 solid @primary-color;
opacity: 0.2;
animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
animation-fill-mode: forwards;
display: block;
pointer-events: none;
}
@keyframes waveEffect {
100% {
top: -@wave-animation-width;
left: -@wave-animation-width;
bottom: -@wave-animation-width;
right: -@wave-animation-width;
border-width: @wave-animation-width;
}
}
@keyframes fadeEffect {
100% {
opacity: 0;
}
}
<button type="button" class="ant-btn ant-btn-primary" ant-click-animating-without-extra-node="true">
<span>Primary</span>
</button>
Ant Design 按钮点击有波纹效果,就是由上面的 CSS + HTML 实现的。
亮点:
border-radius: inherit;
实现波纹的形状和按钮的形状相同。pointer-events: none;
不要响应鼠标的操作animation-fill-mode: forwards;
pointer-events: none;
-none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
使用<a>
的 rel
与 target
属性要注意:
注意:使用target时,考虑添加
rel="noopener norefferrer"
以防止针对window.opener
API 的恶意行为。Note: Linking to another page using
target="_blank"
will run the new page on the same process as your page. If the new page is executing expensive JS, your page's performance may suffer. To avoid this userel=noopener
.
受《这应该是你见过的最全前端下载总结》启发,自己写了一个 CodePen,按照自己的思路实践了一下。
CodePen is Here: https://codepen.io/anon/pen/ZVgGgJ
Blob
,File
,FileReader
之间的联系? 这些概念之间的关系:MIME, Data URL, Blob URL, Base64,
当然,也可以使用 HTTP 头来做:: attachment; filename="filename.jpg"
MDN 上的文章:
FileReader
, Blob
, URL
...Base64 是 一种编码格式(二进制 -> ASCII)。
DataURL 中,如果数据是文本,可直接将文本嵌入 (可能需URL转义),如果是二进制数据,可将数据Base64编码之后再嵌入。
DataURL 中可以包含 MIME 类型。
Blob URL 使用 URL.createObjectURL(Blob)
来生成。
Blob 是包含原始数据的类文件对象,其构造器的输入可以接受很多种类型。
FileReader 配合 Blob 可得到 Base64 格式的 DataURL
File 继承自 Blob
使用选项卡式浏览,任何给定网页都有可能在后台,因此对用户不可见。页面可见性 API提供了您可以观察的事件,以便了解文档何时可见或隐藏,以及查看页面当前可见性状态的功能。 页面可见性 API对于节省资源和提高性能特别有用,它使页面在文档不可见时避免执行不必要的任务
// 当用户最小化窗口或切换到另一个选项卡时,API会发送visibilitychange事件
document.addEventListener("visibilitychange", () => {
// doument 的一些属性记录了当前的状态
console.log(document.hidden, document.visibilityState);
}, false);
MutationObserver接口提供了监视对DOM树所做更改的能力。 MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。 +++++++++++ Intersection observer API 提供了一种方法,可以异步观察目标元素与祖先元素或顶层文件的交集变化。
XSS / CROS 需要防御的几个点 (未完待续)
<a>
的 href
(或者类似的):过滤 javascript:
,vbscript:
,file:
,data:
(除了一些图像 GIF/PNG / JPEG / WebP)实现水印。在所有内容之上,但是不影响和其他内容的交互。
<div class="watermark" />
.watermark {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 50px, #eeddaa77 0, #eeddaa77 60px);
pointer-events: none; /* Here! */
}
[ TIPS ]
babel-plugin-react-css-modules
的时候,配置中只需指定 syntax
字段即可。https://webpack.docschina.org/guides/dependency-management/
如果你的 request 含有表达式(expressions),就会创建一个上下文(context),因为在编译时(compile time)并不清楚具体导入哪个模块。生成一个 context module(上下文模块)。它包含目录下的所有模块的引用。
如果想引入一个文件夹下面的所有文件,或者引入能匹配一个正则表达式的所有文件,这个功能就会很有帮助
贯穿传递不相关props属性给被包裹的组件
const { extraProp, ...passThroughProps } = this.props;
<WrappedComponent
injectedProp={injectedProp}
{...passThroughProps}
/>
为了便于调试,可以使用静态属性选择一个显示名字。WithSubscription.displayName = "";
⚠不要在render方法内使用高阶组件。这里不仅仅是性能问题,重新加载一个组件会引起原有组件的状态和它的所有子组件丢失。应用高阶组件在组件定义的外面,可以使结果组件只创建一次。在很少的情况下,你可能需要动态的应用高阶组件。
使用 React Router 的时候,
<Route>
上可以使用render
而非component
来避免使用 HOC
当你应用一个高阶组件到一个组件时,也就意味着新组件会没有原始组件的任何静态方法。将原始组件的方法拷贝给容器。(使用hoist-non-react-statics
来帮你自动处理)
Refs属性不能贯穿传递. 使用 React.forwardRef
。或者将 Ref 作为高阶组件的一个普通的属性传入,然后在高阶组件内部将它用于被包裹组件的 ref
上。
<img>
的自适应/自缩放效果.wrap {
height: 10em;
width: 100%;
text-align: center;
}
.wrap img {
max-width: 100%;
max-height: 100%;
}
实现的效果类似于 background-size: contain;
的效果。
Just do it: 使用
min-height
/min-width
,看看是什么效果?
console.log({variable})
console.table(variable)
console.assert()
在某些条件下输出信息Object.assign
vs. spread operatorObject.assign()
Object.assign
方法只会拷贝源对象自身的并且可枚举的属性到目标对象。(不含原型链上的。)Object.getOwnPropertyDescriptor()
和Object.defineProperty()
。{ ...obj }
Object.assign()
函数会触发 setters,而展开语法则不会。var aa = {
get a () {
return 1;
},
set a (v) {
alert('a is setting to be' + v);
},
b: 123,
};
var bb = {
get a () {
return 11;
},
set a (v) {
alert('the new a::' + v);
},
};
console.info("=== Use Object.assign ===");
var aa_one = Object.assign({}, aa);
var aa_two = Object.assign(aa, bb);
console.log(aa_one, aa_two);
console.info("=== Use spread operation ===");
var aa_one = { ...aa };
var aa_two = {...aa, ...bb};
console.log(aa_one, aa_two);
var a = [1,2,3,4,5]
var s = 'str'
var b = true
var n = 9
console.log(Object.assign({}, a, b, s, n)) // Object(5) [ "s", "t", "r", 4, 5 ]
console.log({ ...a, ...b, ...s, ...n }) // Object(5) [ "s", "t", "r", 4, 5 ]
.foo {
text-align: justify;
text-align-last: justify; /* 指定最后一行的对齐方式 */
}
或者
.bar {
text-align: justify-all;
}
目前没有一个浏览器支持justify-all
附:MDN上对
text-align
的说明justify
The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.justify-all
Same as justify, but also forces the last line to be justified.The
text-align-last
CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.
使用 -webkit-line-clamp
,Webkit私有属性。(详见)
Function.prototype.call(fn, undefined, a)
与 fn.call(undefined, a)
的区别?
URL()
构造函数返回一个新创建的 URL 对象,表示由一组参数定义的 URL。
URLSearchParams
接口定义了一些实用的方法来处理 URL 的查询字符串。一个实现了 URLSearchParams
的对象可以直接用在 for...of
结构中。
这里是前端相关的小玩意。