第24期 — 2019-10-12

在浏览器中阅读

周e信

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

Javascript

Ka

解构destructuring详细示例🔗

几点需要注意

object 解构

let a, b;
// 数组这样写没问题
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2


let y, z;
//object这样解构就会报错,因为{}会被认为是代码块block
{y, z} = {y: 1, z: 2};
// 正确的写法
({y, z} = {y: 1, z: 2});

动态解构

let key = 'z';
//动态解构
let {[key]: foo} = {z: 'bar'};

console.log(foo); // "bar"

不能直接解构数组最后一个元素

const [...a,b] = [1,2,3]; //错误
//只能这样
[1,2,3].slice(-1)[0];
//强行解构😅🤦‍♂️
[...arr].pop();

Rajnish Rajput 编辑 Ka

Ka

Node.js

Rachel Romoff

Michele Riva

我们应该使用package-lock.json🔗

刚有篇文章说要小心使用package.json,马上这篇文章又说应该使用。

  • 使用npm ci来初始化已有项目,它不会像npm install更新lock file
  • 每个月更新一次依赖并做好检查

Kostas Bariotis 编辑 Ka

Deepak Gupta

Luciano Mammino

is-website-vulnerable检测网页是否使用漏洞库工具🔗

使用 npx is-website-vulnerable https://example.com

Liran Tal

jamstack现代站点架构的创新🔗

JAM 代表 javascript + Apis + Markup,从静态站点工具Jekyll, Middleman, Hugo发展到Netlify平台。越来越多的CMS站点开始基于JAMStack实现。

BRIAN RINALDI

Mongoose设计-字段冗余联动更新避免多表查询🔗

将需要连表查询的字段作为冗余字段放在一个表里,这样尽量避免多表查询。

$lookup尽量不要使用

冗余字段同步数据的问题

const authorSchema = Schema({ name: String });
// Add middleware to update the dereferenced `authorName`
authorSchema.pre('save', async function() {
  if (this.isModified('name')) {
    await Book.updateMany({ authorId: this.author }, { authorName: this.name });
  }
});
const Author = mongoose.model('Author', authorSchema);

// Won't trigger the 'save' middleware. You would need a separate `pre('updateOne')`
// hook to capture this case.
await Author.updateOne({}, { name: 'test' });

这个举例太简单,并没有看到有多便利。如果是这样简单的例子,先查外表,列出id,再查本表,这也很简单。况且这个联动更新不能解决数据库被非本程序修改的问题。

Valeri Karpov

前端

投稿

Jared Wilber

数据库

谭峰(francs)

其他

Facebook

Tucker Higgins

Matt Hobbs

Phil Nash (Twilio)

广告

Ash Kyd

100vh高度在手机上的问题🔗

当地址栏出现时,100vh就超出了屏幕。

解决方案:

  • 使用脚本window.innerHeight
  • 配合html body { height: 100% }
  • 不支持IE11

    document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);

.fullheight { height: calc(var(--vh, 1vh) * 100); }

Bonus: simplifying with an SCSS function:

@function vh($quantity) { @return calc(var(--vh, 1vh) * #{$quantity}); }

.fullheight { height: vh(100); }

David Chanin

Tuan Phung

Khoa Thai

Blue Bill

Daybrush (Younkue Choi)

clip-path特效讲解🔗

例如左上角的切割饼图菜单

Justin

AniX

Rafael Caferati

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