2020年5月

ZangoDB是一个indexedDB的类MongoDB轻量级接口库,主要是为了更轻松快速的编写indexedDB相关的操作。

关于indexedDB: IndexedDB - MDN

Github: ZangoDB

在MDN的推荐中介绍了几款不同的轻量级类库 来简化indexdb的使用,其中dexie.js也是不错的,但是在多条件筛选上并没有支持,所以介绍一下ZangoDB。

对于熟悉MongoDB这类NoSQL的开发者来说,应该简单看一下文档就能够快速上手。这里我将会对熟悉关系型数据库的来做一下说明。

ZangoDB主要将indexedDB简化为3个对象

Db - 数据库

Collection - 集合(表)

Cursor - 游标 查询( SQL )

不同于关系型数据库的初始化时数据库,表,所有字段名称和类型,索引结构都要确定。

NoSQL数据库通常只需要建立数据库的名称,表名称以及需要索引的字段。 其他的数据可以任意存储。

ZangoDB的主要特性集中在运算符的部分,类似于SQL中的( GROUP BY, ORDER BY 等 ) 包括以下几类

文末会给出更详细的介绍

Filter Operators 筛选查询运算符

Expression Operators 表达式运算符

Update Operators 更新运算符

Group Operators 组运算符


- 阅读剩余部分 -

最近在基于chrome开发一个用于收集和整理 信息(知识)的插件,名称叫Memoreasy。 一贯以来我都是用自己写的AppSiteJS框架在写web前台的功能,很少去涉及到异步编程,一般来说也就只是在XMLRequest( Ajax )的时候会用。

而在开发chrome插件的时候,几乎所有的api都是异步API,在第一时间的时候还是让我有些不适应。

但是很多时候理解一个技术或者说模式,最重要的并不是强迫自己去理解很多别人的说明、解释或者说代码。最关键的是需要以一个好的思路领会到这个概念的精髓。

我们先说同步编程,大家肯定不陌生,最初学习编程的时候我们都是使用同步编程,同步编程就好比工厂的流水线。 同步编程-流水线

我们在进行同步编程的时候 每一个后续的步骤都依赖于前一步的计算或结果(返回值),如果其中一个过程出现问题,那后续的工作也无法继续了。 换言之,我进行后续工作的时候肯定已经获得了前一步的结果了。 从我们的思维习惯上来讲,这个过程的可控性是很好的。

// 一个简单同步编程的代码说明
var a = "hello", b = 10;
var u = getUseid();
if( u ){
    var obj = { text: a, number: b, user: u };
    console.log(obj);
}else{
    console.log( 'user not found' );
}
function getUserid(){
    return localStorage.getItem('userid');
}

在这段程序中,无论是否找到userid 控制流程实际上还是在当前这段代码中的。 这相当于开发者是公司的老板,让员工去完成一些任务,且无论完成的如何,都需要向老板汇报,然后老板再向员工发布下一步的任务。 这就是我们常识中的“集权"。 我们喜欢同步编程,也就是喜欢他的掌控度。

但是同步也会遇到问题。譬如说,从网络中请求数据(Ajax)时我们无法掌控对方的后续结果。 这就相当于我们在网上下单购物,快递走哪里,什么时间到什么位置,会不会被堵车,会不会在仓库里被堆积,被哪个快递员投递等等。 这种情况我称之为不可控编程,在这个时候,我们不可能一直在手机前面全程跟踪一直到收到商品,我们一般放下手机该吃吃该喝喝,等待快递员的电话。 其实我们也早已习惯了“放权”,只是在编程中,我们需要对那些习惯做一些适应。 来看一段示例代码:

// 购物异步编程 仅供参考 完全不严谨!

function 购物( 订单 ){
    return Promise( 付款之后, 没给钱 ){
        给钱( 订单.价格 ).then( function(){ 
            付款之后( 订单 ) 
        }).catch(function(){
            没给钱()
        })
    }
}

function 发快递( 订单 ){
    var 包裹 = 商家打包( 订单 ); // 打包好了才能发包裹,所以需要同步
    return Promise( 到货, 丢了 ){
        发货().then( function( 包裹 ){
            到货( 包裹 )
        }).catch(function(  ){
            丢了()
        })
    }
}

function 到货( 包裹 ){
    return Promise( 在家, 不在家 ){
        打电话( 包裹.收件人 ).then( function(){
            在家( 包裹 ); // 送货上门
        }).catch(function(){
            放到快递柜( 包裹 )
        })
    }
}

这里我们定义了多个购物相关的异步方法,而我们在调用的时候就很简单了

购物( 订单 ).then( 发快递 ).catch( 弹窗提示 );

是不是感觉打开了新世界,因为发快递之后的事情我都不用管了,放权也是很爽的。

Flex布局 在CSS中是当前最流行的布局方式,并且在移动端以及较新的pc浏览器有着很高的支持度,基本上已经可以完全替代传统的 float, inline-block 各种混合的布局方式了。

flex布局因为是比较新的标准,所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式,对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。

当前的现代浏览器中 flex layout支持度已经超过98%

Flexible box - Can I use


CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。

Container Style 容器样式:

flex可以提供block和inline两种对外效果。但是并不影响内部元素。因为内部元素会被设定为flex项目。

设置一个flex容器:

设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。


.flex{
    display:flex;
    display: -webkit-flex; /* Safari */
}
.inline-flex{
    display:inline-flex;
}

- 阅读剩余部分 -

官方首页 flutter.io, flutter.dev

Flutter创始人说

早在一年多以前就对flutter有所耳闻,但是还没有真正去了解和跑过,今天看了flutter创始人的介绍,实际上感觉这个框架应该是会有web的影子,在随后看官方对于widgets介绍的时候,其实本质上也有点类似于div。 所以如果本身有一些web开发经验的小伙伴,想要上手flutter应该是比较简单的了。

# https://flutter.cn/docs/development/ui/widgets-intro

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

如果是web来说的话,就是以下内容

<style>
.Center{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="Center">
<span>Hello, world</span>
</div>