geek_zwb

geek_zwb 查看完整档案

上海编辑福州大学  |  计算机科学与技术 编辑拼多多  |  高级前端工程师 编辑 github.com/geek-zwb 编辑
编辑

Always on the way to being a great geek.

个人动态

geek_zwb 发布了文章 · 2020-02-14

Docker 实践指南笔记一

浅谈虚拟化和容器技术

虚拟化技术是一种将计算机物理资源进行抽象、转换为虚拟的计算机资源提供给程序使用的技术。
  • 实现跨平台运行应用程序

  • 将虚拟化应用于资源管理, 提高计算机资源使用率

虚拟机

image.png

存在性能缺陷

容器技术

所谓容器技术,指的是操作系统自身支持一些接口,能够让应用程序间可以互不干扰的独立运行,并且能够对其在运行中所使用的资源进行干预。

容器技术并没有做指令转换,它提供了相对独立的应用程序运行的环境,也提供了资源控制的功能,所以我们依然可以归纳其为一种实现不完全的虚拟化技术。

vs

why docker

复杂应用的开发与部署效率低下
分布式应用服务体系

docker跑分

Docker 的技术实现

Docker 的实现,主要归结于三大技术:命名空间 ( Namespaces ) 、控制组 ( Control Groups ) 和联合文件系统 ( Union File System ) 。

  • 命名空间是 Linux 核心在 2.4 版本后逐渐引入的一项用于运行隔离的模块。

  • 资源控制组 ( 常缩写为 CGroups ) 是 Linux 内核在 2.6 版本后逐渐引入的一项对计算机资源控制的模块。

  • 联合文件系统 ( Union File System ) 是一种能够同时挂载不同实际文件或文件夹到同一目录,形成一种联合文件结构的文件系统。

AUFS ( Advanced Union File System )

类比git version 改动记录

Docker 的理念

Reference

整理于掘金小册 《开发者必备的 Docker 实践指南》
查看原文

赞 0 收藏 0 评论 0

geek_zwb 关注了专栏 · 2018-08-23

某熊的全栈之路

知识,应该在它该在的地方。一个热爱代码,热爱新技术的程序熊。

关注 4998

geek_zwb 关注了标签 · 2018-08-22

mobx

Simple And Scalable State Management

关注 79

geek_zwb 关注了收藏夹 · 2018-08-22

Node.js 优秀文章

SegmentFault 2015 Top Rank 系列之《Node.js 相关优秀文章》,该系列全部内容请看 http://segmentfault.com/bookmark/1230000004292712

关注 543

geek_zwb 发布了文章 · 2018-08-03

next.js with mobx

github

关于状态管理

为什么需要状态管理?
  • 因为层次深,很不爽
  • 数据和行为分离,是个不错的实践
为什么是mobx,而不是redux或者直接context
  • redux 用好久了,尝试下新的,样板代码太多了,很不爽
  • context 不推荐不是?
  • 什么函数式,个人见智
  • 听说mobxvuex一个道理,我试试
  • mobx 代码好少,哇,可以提前下班了,爽

mobx 介绍

这个不用介绍了吧,自己google

next 介绍

这个我也不管, ssr、同构嘛,也就那回事。

next 引入mobx

配置啥的(for decorators)

  • babel 6
npm i --save-dev babel-plugin-transform-decorators-legacy

.babelrc

{
    "presets": ["es2015", "stage-1"],
  "plugins": ["transform-decorators-legacy"]
}
  • babel 7
// .babelrc
{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins":[
      "transform-decorators",
      ["transform-class-properties", { "loose": true}]
  ]
}

// package.json
{
    "babel-core": "7.0.0-beta.3",
    "babel-preset-es2015": "7.0.0-beta.3",
    "babel-preset-react": "7.0.0-beta.3",
    "babel-preset-stage-1": "7.0.0-beta.3",
    "babel-plugin-transform-decorators": "^6.24.1"
}

两个方案

  • 统一管理多个 store
import A from './mobx/A'
import B from './mobx/B'

const aStore = new A();
const bStore = new B();

const stores = {
    aStore,
    bStore,
}

class App extends Component {
    render() {
        return (
            <Provider {...stores}>
                <Home/>
            </Provider>
        );
    }
}

export default App;

如上,简单的一种引用方式。next 改造同方案二。

  • 单 page 单store

由于在我项目中,各个模块不耦合,路由间不想干,所以各自处理就ok。
ssr 中要解决的一个很大的问题就是 server 和 client 之间状态同步的问题。如下:

//  with-mobx-state.js

import React from "react";
import { Provider } from "mobx-react";

export default (initializeStore, storeName, initState = {}) => App => {
  const isServer = typeof window === "undefined";

    // cache
  function getOrCreateStore(initialState = initState) {
    if (isServer) {
      return initializeStore(isServer, initialState);
    }

    if (!window[storeName]) {
      window[storeName] = initializeStore(isServer, initialState);
    }
    return window[storeName];
  }

  return class AppWithMobx extends React.Component {
    static async getInitialProps(ctx) {
      const mobxStore = getOrCreateStore();
      ctx.mobxStore = mobxStore;

      let appProps = {};
      if (typeof App.getInitialProps === "function") {
        appProps = await App.getInitialProps.call(App, ctx);
      }

      return {
        ...appProps,
        initialMobxState: mobxStore
      };
    }

    constructor(props) {
      super(props);
      // sync
      this.mobxStore = getOrCreateStore(props.initialMobxState);
    }

    render() {
      const store = { [storeName]: this.mobxStore };
      return (
        <Provider {...store}>
          <App {...this.props} {...store} />
        </Provider>
      );
    }
  };
};

// testStore.js
import { action, observable } from "mobx";

// 注意模块内变量的作用范围: 模块内是全局的,模块间是独立的
let store = null;

class Store {
  @observable lastUpdate;
  @observable light = false;

  constructor(isServer, lastUpdate) {
    this.lastUpdate = lastUpdate;
  }

  @action
  start = () => {
    this.timer = setInterval(() => {
      this.lastUpdate = Date.now();
      this.light = true;
    }, 1000);
  };

  stop = () => clearInterval(this.timer);
}

export default function initializeTestStore(
  isServer,
  { lastUpdate = Date.now() }
) {
  if (isServer) {
    return new Store(isServer, lastUpdate);
  } else {
    if (store === null) {
      store = new Store(isServer, lastUpdate);
    }
    return store;
  }
}

// test.js
import React, { Component } from "react";
import { Card, Button } from "antd";
import { inject, observer } from "mobx-react";
import moment from "moment";
import withMobxStore from "../../decorators/with-mobx-store";
import initializeTestStore from "./testStore";

@withMobxStore(initializeTestStore, "testStore")
class MobxTest extends Component {
  static async getInitialProps(ctx) {
    return {
      title: "mobx test",
      PageHeaderVisible: true
    };
  }

  render() {
    return (
      <Card title="I'm parent">
        <TestChild1 />
        <TestChild2 />
      </Card>
    );
  }
}
export default MobxTest;

@inject("testStore")
@observer
class TestChild1 extends Component {
  render() {
    const { testStore = {} } = this.props;
    return (
      <Card title="I'm child1">
        <code>{JSON.stringify(testStore)}</code>
        <br />
        <br />
        <Button onClick={testStore.start}>start</Button>
      </Card>
    );
  }
}

@inject("testStore")
@observer
class TestChild2 extends Component {
  render() {
    const { testStore } = this.props;
    console.log("testStore.lastUpdate", testStore.lastUpdate);
    return (
      <Card title="I'm child2" style={{ marginTop: 20 }}>
        {/*<code>{testStore.lastUpdate}</code>*/}
        <br />
        <br />
        <Button onClick={testStore.stop}>stop</Button>
        <p>{moment(testStore.lastUpdate, "x").format("YYYY-MM-DD HH:mm:ss")}</p>
      </Card>
    );
  }
}

留有问题:上边initState其实是没有意义的。
解决方案: 没想到。求大佬指教。

TL;DR

  • 存在即合理
  • 对症下药。别再说啥啥啥比啥啥啥好了。
  • 能快速抓老鼠的都是好猫。
查看原文

赞 2 收藏 1 评论 0

geek_zwb 关注了标签 · 2018-06-20

next.js

next.js是一个基于React的通用JavaScript框架,next.js为React组件模型提供了扩展,支持基于服务器的组件渲染,同时也支持在客户端继续进行渲染

关注 33

geek_zwb 回答了问题 · 2018-02-25

webpack, react, react-router 多入口问题

sorry,我的 to 写错了。去掉 build 层文件夹就好了。

{ from: /^\/admin.html/, to: '/admin.html' },
{ from: /^\/vip.html/, to: '/vip.html' },

关注 1 回答 1

geek_zwb 提出了问题 · 2018-02-25

webpack, react, react-router 多入口问题

在开发环境下,有多个入口,问题是这样的: 如其中一个入口是 http://localhost:3000/vip.html, 然后点击跳转到另一个路由http://localhost:3000/vip.html/submenu, ok没问题。如果刷新的话,就变成404了 Cannot GET /vip.html/submenu

WebpackDevServer的配置项historyApiFallback已经增加了对应的rewrites, 如下:

 historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebookincubator/create-react-app/issues/387.
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
        // { from: /^\/$/, to: '/build/index.html' },
        { from: /^\/admin.html/, to: '/build/admin.html' },
        { from: /^\/vip.html/, to: '/build/vip.html' },
      ]
    },

求解决方法~thanks

关注 1 回答 1

geek_zwb 发布了文章 · 2017-11-10

原型与原型链

sync github

原型属性 prototype

在函数被定义时创建,初始值是一个"空"对象(没有自身属性的对象)。

为新建对象添加方法和属性的方式

  1. 利用原型

// 1 构造器中
function Gadget(name, color) {
    this.name = name;
}

// 2 原型属性
Gadget.prototype.price = 66;

几个相关方法和属性

  • hasOwnProperty() 判断一个属性是自身属性还是原型属性。

通常,在for infor of 中,需要使用 hasOwnProperty()~

  • propertyIsEnumerable() 该方法会对所有的非内建对象属性返回 true

const newtoy = new Gadget('webcam');

// 对于内建属性和方法来说,不可枚举
newtoy.propertyIsEnumerable('constructor'); // false

// 任何来自原型链中的属性都会返回false,包括那些在`for-in`循环中可枚举的属性
newtoy.propertyIsEnumerable('price');   // false

// notice
newtoy.constructor.prototype.propertyIsEnumerable('price'); // true
  • isPrototypeOf() 判断当前对象是否是另一个对象的原型

  • Object.getPrototypeOf() ES5适用。获取对象的原型。效果同 特殊属性 __proto__

  • __proto__

notice: 不要在实际的脚本中使用。另,__proto__prototype的区别,__proto__实际上是某个实例对象的属性,而prototype则属于构造器函数的属性。

原型陷阱

  • 当我们对原型对象执行完全替换时,可能会触发原型链中某种异常

  • prototype.constructor属性是不可靠的

体会下面的输出内容

function Dog() {
    this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();

Dog.prototype.say = function() {
    return 'Woof!';
};

benji.say();    // 'Woof!'
rusty.say();    // 'Woof!'
benji.constructor === Dog;  // true
rusty.constructor === Dog;  // true

// 用一个自定义的新对象完全覆盖掉原有的原型对象
Dog.prototype = {
    paws: 4,
    hair: true,
};

// 发现通过构造函数创建的对象 prototype 对象并没有改变
typeof benji.paws;  // undefined
benji.say();    // Woof
typeof benji.__proto__.say; // function
typeof benji.__proto__.paws;    // undefined

// 通过构造函数创建的对象使用新的 prototype 对象
var lucy = new Dog();
lucy.say(); // TypeError: lucy.say is not a function
lucy.paws;  // 4
typeof lucy.__proto__.say; // undefined
typeof lucy.__proto__.paws; // number

//但是!!!注意此时新对象的 constructor 属性的指向
lucy.constructor;   // function Object(){[native code]}
benji.constructor;  // function Dog() {...}

// solve
Dog.prototype.constructor = Dog;
new Dog().constructor === Dog;  // true
lucy.constructor;   // function Dog() {...}

当我们重写某对象的 prototype 时, 需要重置相应的 constructor 属性。

Summary

来自知乎的一张图,很清晰
原型链图

Reference

查看原文

赞 0 收藏 1 评论 0

geek_zwb 提出了问题 · 2017-10-12

前后端分离的情况下进行第三方登录?

前后端分离,并且是不同域名,现在要使用诸如微信第三方登录~

求方案

关注 7 回答 3

认证与成就

  • 获得 9 次点赞
  • 获得 38 枚徽章 获得 0 枚金徽章, 获得 9 枚银徽章, 获得 29 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-03-14
个人主页被 653 人浏览