第24期 — 2019-10-12

在浏览器中阅读

周e信

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

Node.js

Rachel Romoff

Michele Riva

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

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

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

Kostas Bariotis 编辑 Ka

Deepak Gupta

Luciano Mammino

jamstack现代站点架构的创新🔗

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

BRIAN RINALDI

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

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

Liran Tal

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

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

前端

投稿

Jared Wilber

数据库

谭峰(francs)

其他

Facebook

Tucker Higgins

Matt Hobbs

Phil Nash (Twilio)

广告

Ash Kyd

AniX

Tuan Phung

Blue Bill

Rafael Caferati

Daybrush (Younkue Choi)

clip-path特效讲解🔗

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

Justin

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

Khoa Thai

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