前端碎碎念 - Githubissues

xuxinhang commented 5 years ago

这里是前端相关的小玩意。

xuxinhang commented 5 years ago

为什么 new Event 不能触发的点击事件？需要使用 MouseEvent。

$0.dispatchEvent(new Event('click'));  // 不可以
$0.dispatchEvent(new MouseEvent('click'));  // 可以

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Triggering_built-in_events

一个需要注意的地方：那个配置对象里面的 bubble 属性的默认值是 false

xuxinhang commented 5 years ago

background-origin 和 background-clip 之间的差别？

background-attachment: local 了解一下？其实是可以 Hack 的。（用 div 包一层。）

xuxinhang commented 5 years ago

[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属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

xuxinhang commented 5 years ago

使用<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 use rel=noopener.

xuxinhang commented 5 years ago

受《这应该是你见过的最全前端下载总结》启发，自己写了一个 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 上的文章：

URL.createObjectURL()
Content-Disposition
Data URLs
Blob
其它 Web API，不一列出链接：FileReader, Blob, URL ...

xuxinhang commented 5 years ago

Base64 是一种编码格式（二进制 -> ASCII）。 DataURL 中，如果数据是文本，可直接将文本嵌入 (可能需URL转义)，如果是二进制数据，可将数据Base64编码之后再嵌入。 DataURL 中可以包含 MIME 类型。 Blob URL 使用 URL.createObjectURL(Blob) 来生成。 Blob 是包含原始数据的类文件对象，其构造器的输入可以接受很多种类型。 FileReader 配合 Blob 可得到 Base64 格式的 DataURL File 继承自 Blob

xuxinhang commented 5 years ago

使用选项卡式浏览，任何给定网页都有可能在后台，因此对用户不可见。页面可见性 API提供了您可以观察的事件，以便了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。页面可见性 API对于节省资源和提高性能特别有用，它使页面在文档不可见时避免执行不必要的任务

// 当用户最小化窗口或切换到另一个选项卡时，API会发送visibilitychange事件
document.addEventListener("visibilitychange", () => {
  // doument 的一些属性记录了当前的状态
  console.log(document.hidden, document.visibilityState);
}, false);

MDN — Page_Visibility_API

xuxinhang commented 5 years ago

MutationObserver接口提供了监视对DOM树所做更改的能力。 MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。 +++++++++++ Intersection observer API 提供了一种方法，可以异步观察目标元素与祖先元素或顶层文件的交集变化。

xuxinhang commented 5 years ago

XSS / CROS 需要防御的几个点 (未完待续)

<a> 的 href（或者类似的）：过滤 javascript:，vbscript:，file:，data:（除了一些图像 GIF／PNG / JPEG / WebP）

xuxinhang commented 5 years ago

实现水印。在所有内容之上，但是不影响和其他内容的交互。

<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! */
}

xuxinhang commented 5 years ago

使用 PostCSS 生态代替 Sass

若使用 Sass 缩进风格的语法。使用 SugarSS 实现 Sass -> SCSS 的语法转换
使用 PreCSS 实现 Sass 的功能。 PreCSS 结合了类似于 Sass 的语法糖，如变量、条件和迭代器等。它是由其它几个插件组合在一起而成的。

[ TIPS ]
- 配合使用babel-plugin-react-css-modules 的时候，配置中只需指定 syntax 字段即可。

xuxinhang commented 5 years ago

Webpack 依赖引用

https://webpack.docschina.org/guides/dependency-management/

如果你的 request 含有表达式(expressions)，就会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体导入哪个模块。生成一个 context module(上下文模块)。它包含目录下的所有模块的引用。

如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助

xuxinhang commented 5 years ago

Tips for React HOC

贯穿传递不相关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 上。

xuxinhang commented 5 years ago

实现`<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，看看是什么效果？

xuxinhang commented 5 years ago

使用Console输出Debug的几个技巧分享

将变量以对象的形式打印出来: console.log({variable})
将数组以表格的形式打印出来: console.table(variable)
自定义console函数
利用 console.assert() 在某些条件下输出信息

xuxinhang commented 5 years ago

`Object.assign` vs. spread operator

`Object.assign()`

使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。（不含原型链上的。）
为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty()。

`{ ...obj }`

将已有对象的所有可枚举(enumerable)属性拷贝到新构造的对象中
Object.assign() 函数会触发 setters，而展开语法则不会。

两者共有

String类型和 Symbol 类型的属性都会被拷贝。(?)
类型会被包装为对象（见 Example）

Example 1

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);

Example 2

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 ]

xuxinhang commented 5 years ago

实现“分散对齐”

.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私有属性。（详见）

xuxinhang commented 5 years ago

Function.prototype.call(fn, undefined, a) 与 fn.call(undefined, a) 的区别？

xuxinhang commented 5 years ago

URL() 构造函数返回一个新创建的 URL 对象，表示由一组参数定义的 URL。 URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。一个实现了 URLSearchParams 的对象可以直接用在 for...of 结构中。

xuxinhang / cattle-temporary-posts

前端碎碎念 #3

使用 PostCSS 生态代替 Sass

使用 PreCSS 实现 Sass 的功能。 PreCSS 结合了类似于 Sass 的语法糖，如变量、条件和迭代器等。它是由其它几个插件组合在一起而成的。

Webpack 依赖引用

Tips for React HOC

实现`<img>`的自适应/自缩放效果

使用Console输出Debug的几个技巧分享

`Object.assign` vs. spread operator

`Object.assign()`

`{ ...obj }`

两者共有

Example 1

Example 2

实现“分散对齐”

多行文本省略

xuxinhang / cattle-temporary-posts

前端碎碎念 #3

使用 PostCSS 生态代替 Sass

使用 PreCSS 实现 Sass 的功能。 PreCSS 结合了类似于 Sass 的语法糖，如变量、条件和迭代器等。它是由其它几个插件组合在一起而成的。

Webpack 依赖引用

Tips for React HOC

实现<img>的自适应/自缩放效果

使用Console输出Debug的几个技巧分享

Object.assign vs. spread operator

Object.assign()

{ ...obj }

两者共有

Example 1

Example 2

实现“分散对齐”

多行文本省略

实现`<img>`的自适应/自缩放效果

`Object.assign` vs. spread operator

`Object.assign()`

`{ ...obj }`