第25期 — 2019-10-20

在浏览器中阅读

周e信

扫描二维码关注微信公众号

Node.js

Timsort 各种语言默认的排序算法🔗

python, java, javascrit(v8)

都用的这种算法

这是我见过的最好懂的算法,结果也是目前最稳定的算法。

Brandon Skerritt

inversify

Chidume Nnamdi

Intoli

Mozillia

javascript命名约定🔗

几种命名方式

camelCase (used in JS) 驼峰

PascalCase (used in JS) 帕斯卡

snake_case 蛇形

kebab-case 脊柱(也叫spinal-case)

普遍用驼峰

布尔变量加is,例如isValid

函数亦用驼峰 myFunction

类使用帕斯卡 MyClass

对于函数组件,则应该当作类处理,使用帕斯卡function MyComponent(){}

私有属性,方法使用_开头 _myPrivateMethod

常量全部大些,中间以隔开 MYCONSTANT

文件一般用kebab-case

但是对于类文件还是建议直接用类名做文件名,即帕斯卡命名方式。

Robin Wieruch 编辑 Ka

Javascript

JSON.stringify()的其它参数🔗
const dude = {
  name: "Dan"
};
const dudeStringified = JSON.stringify(dude, (key, value) =>
  key === "name" ? "Pawel" : value
);

console.log(dudeStringified);
// {"name":"Pawel"}
JSON.stringify(dude, null, "\t");

可以美观的打印。

Pawel Grzybek

前端

Konstantin Lebedev

Stefan Judis

投稿

当窗口大小变化时停止动画🔗

解决办法是,捕捉resize事件,为所有样式添加停止动画样式

let resizeTimer;
window.addEventListener("resize", () => {
  document.body.classList.add("resize-animation-stopper");
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    document.body.classList.remove("resize-animation-stopper");
  }, 400);
});
.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

Chris Coyier

Cam Wiegert

tiny-swiper 只有2kb的swiper替代🔗

替代大名鼎鼎的swiperjs,提供相同的api,减少了大小。

WeRDyin

Smooth Code

Deric Cain

Federico Zivolo

preventExtension seal freeze的区别🔗
特性 default preventExtensions seal freeze
添加
删除
改变

这些限制都是shadow的,即只能保证对第一层的属性。

Chris Coyier

css和圆形🔗

实现圆形的多种方式:

border-radius: 50%;

.circle {
  background: #456BD9;
  border: 0.1875em solid #0F1C3F;
  border-radius: 50%;
  box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
  height: 5em;
  width: 5em;
}

pill椭圆形状则将其换成高度的一半,见这里

svg

<svg viewBox="0 0 80 80" width="80" height="80">
  <circle class="circle" cx="40" cy="40" r="38"/>
</svg>

Clip Path

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

Radial Gradient

.circle {
  background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
  height: 5em;
  width: 5em;
}

Tyler Sticka

Max Lynch

react-transitions 纯样式跨页面动画特效🔗

虽然名字里有react,但其是一个纯css工具,任何框架都可以使用。 在线Demo

Joe Rezendes

数据库

Bart Oles

扫描二维码关注微信公众号
本期阅读量