Javascript

() => Promise<any> 到底是个什么鬼

Submitted by Lizhe on Wed, 11/07/2018 - 16:39

今天在项目代码里看见这么一段

export default function asyncComponent(getComponent: () => Promise<any>) {

....

}

主要懵在这个参数上

asyncComponent(getComponent: () => Promise<any>)

冒号左边 getComponent 应该是参数名

冒号右边 () => Promise<any> 应该是这个参数的类型

但是() => Promise<any>到底是个什么类型呢?

写个例子试一试

Main.ts

call, apply, bind 方法

Submitted by Lizhe on Wed, 11/07/2018 - 10:53

所有的函数都从Function.prototype中继承了call, apply 和 bind 方法

这些方法可以设置函数内部的this值

初始化

npm init -y

安装ts

npm install -g typescript ( linux 或者 mac 如果出现权限错误需要sudo )

先定义一个Student类, 包含两个属性name和age, 实际上我只使用了name

 

export class Student {

  public name: string;

  public age: Int16Array;

  public hello() {

    console.log("hello, i am " + this.name);

  }

}

关于node你应该知道的一些事

Submitted by Lizhe on Mon, 11/05/2018 - 13:44

起这么个名字主要是为了自己备忘

1. 原生node使用的是CommonJS 

2. CommonJS, TypeScript, ES6 是三种不同的Javascript

3. 通过 babel 等库, 上面这3种 Javascript都可以被编译成在浏览器端可以运行的代码

4. CommonJS里每个文件都是一个模块, 每个模块有自己的作用域, 其中的变量和方法都是私有的

5. CommonJS通过module.exports变量导出变量和方法, Node还会为每个模块提供var exports = module.exports; 所以可以直接使用exports变量

6. require 是运行时调用, 所以require理论上可以运用在代码的任何地方

7. import 是编译时调用, 所以必需放在文件开头

8. require 是赋值过程, require的结果就是对象,数字,字符串或者函数等

9. import 是解构过程, 但是目前所有的引擎都没有实现import, 所以在node中使用的ES6 import 都需要babel转为ES5代码之后才能运行

npm 官方库

Submitted by Lizhe on Thu, 11/01/2018 - 16:44

metrics-registry = "https://registry.npmjs.org/"

npm config ls

npm install --registry=https://registry.npm.taobao.org --loglevel=silly

npm cache clean --force

关于Netflix放弃使用react的一点内容

Submitted by Lizhe on Tue, 10/09/2018 - 11:25

 

https://jakearchibald.com/2017/netflix-and-react/

 

第一种情况

 

多线程异步下载html和css

一边下载一边渲染

 

第二种情况 ( 使用react的情况 )

 

多线程异步下载html, js 和 css 

然后执行css

再执行js

更新dom对象并且渲染

 

netflix 好像是在2017年10月末发布了一条推特, 说自己在client-side上remove了 React.js, 然后速度提升了50%

就是从第二种情况切换到了第一种情况

 

注释:

你把一个jsx的Javascript项目完全切换成html和css , 这不就是个静态页面么

像国内网易,腾讯 的主页原来都是静态页, 他们的新闻内容是靠文字编辑手写内容和html发布的, 访问速度当然快

React 环境备忘

Submitted by Lizhe on Wed, 08/01/2018 - 15:05

https://github.com/Microsoft/vscode-eslint

20180801030917

{

"window.zoomLevel": 0,

"workbench.statusBar.feedback.visible": false,

"update.channel": "none",

"update.enableWindowsBackgroundUpdates": false,

ES6 map, filter

Submitted by Lizhe on Thu, 07/12/2018 - 17:27

  test = () => {

    var data = [1, 2, 3, 4];

    var arrayOfSquares = data.map(function(item) {

      return item * item;

    });

    console.log(arrayOfSquares);

  };

test = () => {

    var data = [0, 1, 2, 3];

    var arrayFilter = data.filter(function(item) {

React 通过 storybook 进行单元测试

Submitted by Lizhe on Mon, 07/09/2018 - 15:09

安装下面的包

  382  npm install --save @storybook/react

  383  npm install --save @storybook/addon-actions

  384  npm install --save @storybook/addon-links

  385  npm install --save @storybook/addons

在package.json平级目录下放置.storybook文件夹

/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook

文件夹内放置文件

/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook/config.js

React recompose

Submitted by Lizhe on Thu, 07/05/2018 - 14:59

recompose 模块可以帮助"提升"很多无状态的模块

you take a stateless component, and without creating any class, you enhance it to provide a state and your return the new component, that is "enhanced".

安装

npm install --save recompose

说明文档

https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate

import React, { Component } from "react";