2019.8.5 - 8.11 中你学到什么？

[donghaina]

Element UI CheckBox 使用 value 绑定 模板

<el-checkbox-group v-model="selectedLanguage" @change="onChange">
        <div v-for="item in languageOptions" :key="item.key">
                <el-checkbox :label="item.key" name="language">@{{item.title}}</el-checkbox>
        </div>
</el-checkbox-group>

选项数据结构

 languageOptions: [
                    {
                        key: 'cn',
                        title: '简体中文',
                    },
                    {
                        key: 'en',
                        title: '英语',
                    },
                    {
                        key: 'fa',
                        title: '波斯语',
                    },
                    {
                        key: 'ar',
                        title: '阿拉伯语',
                    }
                ],

[yy523697597]

1. Array.unshift() ，用于添加项目到数组的开头，并返回最新的数组长度

   let a=[1,2]
   let b = a.unshift(3,4)
   console.log(a) // [3, 4, 1, 2]
   console.log(b) // 4

2. 三列布局，不考虑高度问题，左右两列固定宽度为200px，中间列自适应，有几种布局方法？

   页面布局：article .container > div.left+div.center+div.right

   有5种布局方法，float 浮动定位、绝对定位、flexbox布局、table表格布局、grid 网格布局。

   浮动定位的兼容性好，但是需要清除浮动，而且内部布局需要修改为

   article.container > div.left+div.right+div.center;

   绝对定位会导致元素及其子元素脱离文档流，用法很少。

   flexbox布局，在移动端表现完美，使用简单。但是对PC端网页兼容性不足。

   table布局，表格布局较为老旧，使用较少。使用时需要设置

   .container:{display:table; width:100%;};  
   .container div {display:table-cell;}

   grid网格布局，未来的布局方式，功能强大，代码量少，但是现阶段对浏览器的兼容性不好。

   .container{
       display:grid;
       grid-template-columns:200px auto 200px;
       grid-template-rows:200px;   // 设置行高
   };

   延伸，如果中间列的内部高度被内容撑开，上述5中方案中，哪些还可以继续生效？

   flexbox布局和table布局还可以继续使用。所以综上所述，最好是选择使用 flexbox 布局。

[shfshanyue]

2019/08/05

黑云翻墨未遮山，白雨跳珠乱入船

01 总结了两篇关于 promise 的文章

• Promise简单实现
• Promise.map 限流实现

2019/08/06

居高声自远，非是藉秋风

01 解决 typescript/webpack 环境中 import query.gql 的问题

https://github.com/shfshanyue/shici/commit/fc59b3600c52fa106b224a2215734903fb58bd69

02 看源码 graphql-tag

• graphql-tag 源码分析

03 了解 node 中的 stream 以及原理

2019/08/07

惊鹊栖未定，飞萤捲帘入。

01 思考两个问题

• 如何快速熟悉新业务
• 如何对测试环境添加假数据

02 关于 prerender 与 ssr 的取舍思考

03 大致了解 musl

2019/08/08

睡起秋声无觅处，满阶梧叶月明中。

2019/08/09

01 看 graphql.js 的源码

02 graphql.js 中有一段 Promise.reduce 的实现，用来串行 Promise。比较简单，贴下边

export default function promiseReduce<T, U>(
  values: $ReadOnlyArray<T>,
  callback: (U, T) => PromiseOrValue<U>,
  initialValue: PromiseOrValue<U>,
): PromiseOrValue<U> {
  return values.reduce(
    (previous, value) =>
      isPromise(previous)
        ? previous.then(resolved => callback(resolved, value))
        : callback(previous, value),
    initialValue,
  );
}

2019/09/10

01 看 dataloader 源码

02 看 CMAKE 用法

[tingyuxuan2302]

react路由跳转的时候加一个loading效果，依赖@loadable/component库，github:https://github.com/smooth-code/loadable-components#readme;

import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import loadable  from '@loadable/component';
const fallback = {
    fallback: <div>Loading...</div>
}
const HelloComponent = loadable(() => import ('component/Hello/Hello'), fallback);
const CounterComponent = loadable(() => import ('pages/Counter/Counter'), fallback);
const getRouter = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/counter">计数</Link></li>
            </ul>
            <Switch>
                <Route exact path="/" component={HelloComponent}/>
                <Route  path="/counter" component={CounterComponent}/>
            </Switch>
        </div>
    </Router>
);

[jifengdehao]

react路由跳转的时候加一个loading效果 可以使用react Suspense Lazy

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() { return (

Loading...

}>

[careteenL]

从零重补数据结构和算法

数据结构和算法这道坎，我们总归是要迈过去的，为什么不是现在呢？

实现队列

• 传送门有大量注释和实现思路以及测试用例放心食用
• 使用数组实现队列
• 使用hash实现队列
• 使用两个栈实现队列面试常考题
• 优先队列
• 循环队列的运用-击鼓传花面试常考题
• 火车车厢重排问题面试常考题

[GitHdu]

Element UI CheckBox 使用 value 绑定 模板

<el-checkbox-group v-model="selectedLanguage" @change="onChange">
        <div v-for="item in languageOptions" :key="item.key">
                <el-checkbox :label="item.key" name="language">@{{item.title}}</el-checkbox>
        </div>
</el-checkbox-group>

选项数据结构

 languageOptions: [
                    {
                        key: 'cn',
                        title: '简体中文',
                    },
                    {
                        key: 'en',
                        title: '英语',
                    },
                    {
                        key: 'fa',
                        title: '波斯语',
                    },
                    {
                        key: 'ar',
                        title: '阿拉伯语',
                    }
                ],

也可以绑定对象

 <el-checkbox :label="item" name="language">@{{item.title}}</el-checkbox>

[andyqier88]

1. 今天遇到一个bug less解析calc(100% - 80px)的时候会解析成calc(20%); 解决办法：calc(~"100% - 80px")；解析正常

[yy523697597]

1. 使用 array.reduce 来统计一个数组中数字重复出现的次数

const arr =[1,2,3,1,4,45,4,67,6,823,8,8];
const statistics = arr.reduce((tally,item)=>{
        tally[item]? tally[item]++ : tally[item] = 1;
        return tally;
},{});
console.log(statistics); // {1: 2, 2: 1, 3: 1, 4: 2, 6: 1, 8: 2, 45: 1, 67: 1, 823: 1}

[Yangfan2016]

20190808

判断字符串是否符合千分位格式

// (?负号)<数字 1,3 位>(0 次及以上<逗号 数字 3位>)(?<点号 数字 1位及以上>)
// -12,345,678.90123

function isThousand(str) {
  return /^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(str);
}

[zhangyingcai]

20190808

vue 的 watch 事件怎么在初始化的时候执行

之前的做法一直是在 created 钩子之后手动调用一次

created() {
  this.fetchText();
},
watch: {
  text: 'fetchText',
}

后来在翻阅文档的时候发现一个属性 immediate 这样在初始化的时候也会触发

该回调将会在侦听开始之后被立即调用

watch: {
  text: {
    handler: 'fetchText',
    immediate: true
  }
}

[Yangfan2016]

20190809

判断一个数 是否 是 2 的整数次幂

function isPowerOf2(n) {
    return (n&(n-1))===0;
}

[teachat8]

8.9 今日份学习

如果真的想将对象冻结，应该使用 Object.freeze 方法。

// const foo = {}
const foo = Object.freeze({})

// 常规模式时，下面一行不起作用
// 严格模式时，该行会报错

foo.prop = 123

    上面的代码中，常量 foo 指向一个冻结的对象，所以添加新属性时不起作用，严格模式时还会报错。
    除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

    var constantize = (obj) => {
        Object.freeze(obj);
        Object.keys(obj.forEach(key, i) => {
            if ( typeof obj([key] === 'Object') {
                constantize( obj[key] )
            })
        })
    }

[ghost]

1. 学英语，练口语。以后很想离开这里
2. 看了axios的源码，https://juejin.im/post/5d4beb74f265da03de3aee23

[teachat8]

1. 学英语，练口语。以后很想离开这里
2. 看了axios的源码，https://juejin.im/post/5d4beb74f265da03de3aee23

链接404了

[ghost]

拆解 async/await

关键词：async/await、promise、microtask、eventloop、Thenable Job、TC39规范 另备注：转换规则仅参考TC39文档说明和V8相关博客

========================= Node 8 转换： 原代码：

async function async1(){
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}

转换后：

function _async1(){
    console.log( 'async1 start' )
    let implicit_promise = new Promise((resolve, reject)=>{
        let promise = new Promise((rs, rj)=>{
            rs( async2() )
        })
        promise.then(()=>{
            console.log( 'async1 end' )
            resolve()
        })        
    })
    return implicit_promise
}

备注：对应到Chrome浏览器，目前至少在v71及以下版本中，是按照如上规则转换的

Node 10 转换： 原代码：

async function async1(){
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}

转换后：

function _async1(){
    console.log( 'async1 start' )
    let implicit_promise = new Promise((resolve, reject)=>{
        let promise = Promise.resolve( async2() )
        promise.then(()=>{
            console.log( 'async1 end' )
            resolve()
        })        
    })
    return implicit_promise
}

备注：对应到Chrome浏览器，在v73及以下版本中，V8已更新了转换规则

========================= 总结： 1、在Node 8解析async/await语法糖时，会额外生成至少两个微任务；Node 10的实现已与TC39规范同步

附录： 当Async/Await的遇到了EventLoop 更快的异步函数和 Promise Promise特点状态追随V8中的async