__SSSamuel

__SSSamuel 查看完整档案

成都编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

知乎ID:Samuel
前端,网络,UI,APP,ios。
努力,在努力,谁让我有点后悔了呢

个人动态

__SSSamuel 关注了标签 · 7月7日

flutter

clipboard.png

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter 官网:https://flutter.dev/
Flutter 中文资源:https://flutter-io.cn/
Flutter Github:https://github.com/flutter/fl...

关注 934

__SSSamuel 赞了文章 · 2019-10-22

超级易懂的redux-saga原理解析

原文地址

前言

笔者最近在做一些后台项目,使用的是Ant Design Pro,其使用了redux-saga处理异步数据流,本文将对redux-saga的原理做一个简单的解读,并将实现一个简易版的redux-saga

Generator函数的自动流程控制

在redux-saga中,saga是指一些长时操作,用generator函数表示。generator函数的强大之处在于其可以手动的暂停、恢复执行,且可以与函数体外进行数据交互,看如下例子:

function *gen() {
  const a = yield 'hello';
  console.log(a);
}

cont g = gen();
g.next(); // { value: 'hello', done: false }
setTimeout(() => g.next('hi'), 1000)  // 此时 a => 'hi'   一秒后打印‘hi'

可以看出来genrator函数何时进行下一步操作完全取决于外部的调度时机,且其内部执行状态也由外部的输入决定,这使得generator函数可以很方便的做异步流程控制。举个例子,我们首先读取一个文件的内容作为查询参数,然后请求一个查询接口并把返回的内容打印出来:

function getParams(file) {
  return new Promise(resolve => {
    fs.readFile(file, (err, data) => {
      resolve(data)
    })
  })
}

function getContent(params) {
  //  request返回promise
  return request(params)
}

function *gen() {
  const params = yield getParams('config.json');
  const content = yield getContent(params);
  console.log(content);
}

我们可以手动控制gen函数的执行:

const g = gen();
g.next().value.then(params => {
  g.next(params).value.then(content => {
    g.next(content);
  })
})

以上可以达到我们的目的,但是过于繁琐,我们想要的是generator函数可以自动的执行,可以写一个简易的自动执行函数如下:

function genRun(gen) {
  const g = gen();
  
  next();

  function next(err, pre) {
    let temp;
    (err === null) && (temp = g.next(pre));
    (err !== null) && (temp = g.throw(pre));

    if(!temp.done) {
      nextWithYieldType(temp.value, next);
    }
  }
}

function nextWithYieldType(value, next) {
  if(isPromise(value)) {
    value
      .then(success => next(null, success))
      .catch(error => next(error))
  } 
}

genRun(gen);

此时generator函数便可以自动执行,事实上我们可以发现,generator的内部状态完全是由nextWithYieldType决定的,我们可以根据yield的类型执行不同的处理逻辑。

Effect

事实上sagaMiddleware.run(saga)可以类似看做genRun(saga),而saga是由一个个的effect组成的,那么effect是什么?redux-saga官网的解释:一个 effect 就是一个 Plain Object JavaScript 对象,包含一些将被 saga middleware 执行的指令。redux-saga提供了很多Effect创建器,如callputtake等,已call为例:

function saga*() {
  const result = yield call(genPromise);
  console.log(result);
}

call(genPromise)生成的就是一个effect,它可能类似如下:

{
  isEffect: true,
  type: 'CALL',
  fn: genPromise
}

事实上effect只表明了意图,而实际的行为由类似于上文的nextWithYieldType完成,例如:

function nextWithYieldType(value, next) {
  ...
  if(isCallEffect(value)) {
    value.fn(). then(success => next(null, success)).catch(error => next(error))  
  } 
}

当genPromise函数返回的promise被resolve后便会打印出结果。

生产者与消费者

观察下面的例子

function *saga() {
  yield take('TEST');
  console.log('test...');
}

sagaMiddleware.run(test);

saga会在take('TEST')处阻塞,只有执行了dispatch({type: 'TEST'})后saga才能继续运行(注意:此时的dispatch方法是经过sagaMiddleware包装过的)。这给我们的感觉似乎很像是take是一个生产者,在等待disaptch的消费,事实上take只是一个Effect生成器,具体的处理逻辑依然是在nextWithYieldType完成的,类似于:

function nextWithYieldType(value, next) {
  ...
  // take('TEST')生成的effect简单的认为是  {isEffect: true, type: 'TAKE', name: 'TEST'}
  if(isTakeEffect(value)) {
    channel.take({pattern: value.name, cb: params => next(null, params)})  
  } 
}

channel是一个任务生成器,它有两个方法:take生成任务,put消费任务:

function channel() {
  /*
    task = {
      pattern,
      cb
    }
  */
  let _task = null;

  function take(task) {
    _task = task;
  }

  function put(pattern, args) {
    if(!_task) return;
    if(pattern == _task.pattern) _task.cb.call(null, args);
  }

  return {
    take,
    put
  }
}

显然任务是在执行dispatch的时候被消费掉的,这个工作是在sagaMiddleware中做的,类似于如下:

const sagaMiddleware = store => {
  return next => action => {
    next(action);
    
    const { type, ...payload } = action;
    channel.put(type, payload);
  }
} 

看到这里我们可以发现,需要我们做的就是不断的完善nextWithYieldType这个函数,当完成了putforktakeEvery对应的逻辑后,一个具备基本功能的redux-saga就诞生啦,笔者就不在赘述这些功能的实现了。最后,你可以查看这里:tiny-redux-saga,这是笔者实现的一个简易版的redux-saga,希望对你有所帮助。


全文完。

查看原文

赞 6 收藏 4 评论 0

__SSSamuel 赞了回答 · 2018-05-04

如何从excel中复制粘贴数据到navicat中?

在这一行开头的*号处右键点击然后粘贴

关注 2 回答 1

__SSSamuel 赞了文章 · 2017-12-15

【技巧】歪脑筋优化flexbox瀑布流布局方案

效果先行

需求

示意图
在大量“不定宽”元素并排的布局模式下,上图是我们想要的最佳布局
但是FlexBox布局虽然枪弹但并不能完全呈现以上布局,于是我们需要结合FlexBox作下小的改动即可实现。

css现成的布局方式

Flex布局,具有等分布局的能力,如图

问题

但是底部我们并不想如此等分,我们更希望可以同上一排对齐

方案

其实很简单,我们只要在后面加入一些等宽但是占高为0等隐藏元素即可轻松实现。
如图:

至于【empty】元素的数量需要不小于单行最多元素的数量即可,
最后我们将empty设置隐藏即可

.empty {
    visibility: hidden; 
}

完整demo代码

【JSFiddle地址】
https://jsfiddle.net/zwwill/43qnjxyL/

<html>
<head>
    <meta charset="UTF-8">
    <title>并排等分,单排靠左最齐布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            display: flex;
            width: 1000px;
            flex-flow: row wrap;
            justify-content: space-between;
            margin: 50px auto;
            background-color: #ccc;
            align-content: baseline;
        }
        .main span {
            width: 132px;
            height: 200px;
            display: inline-block;
            background-color: #666;
            margin: 4px;
        }
        .main .emp{
            height: 0;
            border: none;
            margin-top: 0;
            margin-bottom: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="main">
        <span style="">1</span>
        <span style="">2</span>
        <span style="">3</span>
        <span style="">4</span>
        <span style="">5</span>
        <span style="">6</span>
        <span style="">7</span>
        <span style="">8</span>
        <span style="">9</span>
        <span style="">10</span>
        <span style="">11</span>
        <span style="">12</span>  
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
    </div>
</body></html>
查看原文

赞 7 收藏 22 评论 5

__SSSamuel 赞了回答 · 2014-08-07

解决iOS开发中的IBAction中的IB是什么意思?

Interface Builder

关注 1 回答 2

__SSSamuel 收藏了文章 · 2014-08-01

[零基础学Python]

为什么要开设此栏目

这个栏目的名称叫做“零基础学Python”。

现在网上已经有不少学习python的课程,其中也不乏精品。按理说,不缺少我这个基础类型的课程了。但是,我注意到一个问题,不管是课程还是出版的书,大多数是面向已经有一定编程经验的人写的或者讲的,也就是对这些朋友来讲,python已经不是他们的第一门高级编程语言。据我所知,目前国内很多大学都是将C之类的做为学生的第一门语言。

然而,在我看来,python是非常适合做为学习高级语言编程的第一门语言的。有一本书,名字叫《与孩子一起学编程》,这本书的定位,是将python定位为学习者学习的第一门高级编程语言。然而,由于读者对象是孩子,很多“成年人”不屑一顾,当然,里面的讲法与“实战”有点距离,导致以“找工作”、“工作需要”为目标的学习者,认为这本书跟自己要学的方向相差甚远。

综上,我有了这样一个冲动,做一个栏目,面对零基础要学习Python的朋友,面对将python做为第一门高级语言的朋友。这就是开始本栏目的初衷。

查看原文

__SSSamuel 收藏了问题 · 2014-05-29

前端从接过设计稿以后, 怎样调整界面?

在做的应用, 交互有点多, 设计给了 PSD, 细节照做遇到挺多问题:

  • 浏览器端的字体和 PS 文件的字体不完全一样的, 而且要考虑其他平台

  • 字体排版, 有的地方说是统一间距来保持整齐, 前端比较控制行高
    当字体大小并不一样的时候, 怎么样处理更合适?

  • 设计图并没有前端开发给的那样详细的参数, 怎么应对?

  • 设计图没有考虑清楚屏幕差别和屏幕尺寸, 各种数据导致的界面特例等等问题

  • 渐变和动画等等效果, 在设计图上没有呈现

  • 重用的 CSS 模块并不清晰, 怎样梳理?

__SSSamuel 收藏了问题 · 2014-05-29

利用curl抓取网页数据,phantomjs..请神人解

小弟昨天有发文请教,有很多的神人给我小弟很大的帮忙,目前只剩下一小块的数据未抓到。

有大大说用 phantomjs来抓取html
目前的js如
var page = require('webpage').create();
var url = 'http://www.cbssports.com/mlb/gametracker/live/MLB_20140528_CLE@CHW';

page.open(url, function (status) {
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});

误错,显示不出正确的hmtl
另 phontomjs是一个执行档,我要怎么每秒让他自动执行,用 php ? 因为在php 里我目前只能用
exec("start d:\phantomjs script.js ")
让它自动产生本文档,然后针对本文档作解析,但一直没有办法执行,求神人解

2014 05 23 更新

之前在网站上有提出,有抓到几个数据。
先看一下我的程序如下:
$url ="http://www.cbssports.com/mlb/gametracker/live/MLB_20140529_SF@STL";
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22");
curl_setopt($ch, CURLOPT_FOLLOWLOCATION ,1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 0);
$data = curl_exec($ch);
preg_match_all('/(.?)<\/span>/is',$data,$teamCity);
preg_match_all('/(.
?)<\/span>/is',$data,$teamName);…….以下为正规化

未抓出的资料部份如下:(红字为抓不出来的)(以下只是部份)

<div class=gcTeamStats lineup><table class="data condensed stacked" width="100%">

里面会有一个

或是

<

div class=”batter-pitcher fleft”>

<

table>里面的

的资料都抓不出来

重点在于,部份的数据,不管你用什么浏览器的「另存新檔」 save as 或是 「检视原始码」,都看不到上列的这数据。 而 div class=”batter-pitcher fleft” 这部份的资料目前已知是 JS 的 batter_ingame_stats function是跑「进行比赛中的」

而另一个function function() { CBSi.app.BaseRunners = function(args 则是跑 「谁在垒上」右下角那个 「球场的图标」的数据 ,目前只剩这几个部份抓不出。

很多神人大大说,「就抓js呀」,但是,就问不到要如何抓。

跪求各位大大给个方向。

这一个话题的 讨论在:http://segmentfault.com/q/1010000000522277

目前直播赛事:http://www.cbssports.com/mlb/gametracker/live/MLB_20140529_SF@STL

认证与成就

  • 获得 10 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2012-09-30
个人主页被 208 人浏览