分类 web前端 下的文章

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;
}

- 阅读剩余部分 -

基于最近考虑着手iOS 安卓 双平台的开发,整理了一下现存的一些跨平台开发思路。

为了让自己更直观的感受不同跨平台思路的差异,我简单的做了几个图示。

跨平台开发图示1

跨平台开发图示2

套壳模式

微信公众号H5(相当于) , jQuery Mobile ?

套壳模式是开发APP可以说是最简单快捷的(对于web开发者来说),基本上只要有一个正常能用的手机端可以UI适应的web就可以通过套一个壳完成APP开发。 套壳的问题主要有2个

  1. 体验不好,完全通过套壳的webapp 从性能以及UI交互上来说都会比原生app差,通过对js、css的优化,可以解决一部分,比如说click事件在手机端应当用tap事件(封装tap事件),另一部分解决不了,比如说iOS端的侧滑返回或侧滑删除功能,这个体验如果要靠js来实现,效果当然是可以写出来的,但是流畅度、细节表现大大不如原生,而且会花费比较多的时间,而且没有什么这一块比较好的库可以用。
  2. 没有原生功能支持,在微信公众号h5中,还可以通过微信的JSAPI调用部分微信提供的功能,譬如说存储图片。但是套壳在app里的时候,就完全没有办法支持了。

Web 框架模式

Dcloud H5 plus (SDK)

除了Dcloud h5 目前没有发现明确的web框架模式,这里的web框架模式主要是指以web形式开发,通过特定的SDK或者插件api访问app原生功能,不需要使用该框架特定的打包流程,支持以sdk嵌入等方式构建app的。

Web框架模式相对来说简单,快速。不用深入学习原生的内容即可快速使用原生平台的能力,通过插件的扩展也能提高一定程度上的体验效果。

- 阅读剩余部分 -

参考:

如何利用阿里云在PC端快速接入直播功能?

由于现在已经是2020年了,所以具体细节部分也有一定的改变。 今天做一下快速搭建的笔记:

配置推流、播流域名

在阿里云后台 “视频云直播控制台” 首先进行域名的配置。 分别添加 推流域名,播流域名 如 live-push.xxx.com, live.xxx.com 配置需要在域名解析中添加对应的CNAME记录。

配置鉴权

以上面的推流地址为例,参数设置为:

FMS URL / URL: rtmp://http://video-center.alivecdn.com/AppName

播放路径/串码流(如果存在)/ 流秘钥: StreamName?vhost=http://live.aliyn.com

appname 和 stream 是两个可变参数 其中stream参数在直播推流软件中,需要放置到推流码中。而不是紧跟着推流地址。

鉴权秘钥可以在阿里云后台生成,测试时可以这样使用。 但是在实际业务使用时,应该在后台请求对应的API来获取临时的鉴权秘钥

- 阅读剩余部分 -

在无意间漫游网上的文章时,看到一个指出对JavaScript误解的部分提到了这个关于JavaScript私有对象的问题。

Private Members in JavaScript

在该文章中指出,在对象内部使用 var 创建的变量属于私有变量、这个是外部无法访问的。 在这里var的变量我们换一种说法就是局部变量。事实上不能算是真正的私有属性。

我们知道在面向对象编程中,一个类的属性、方法如果能够被其他类访问调用,那么这个是public 公开属性、方法。 但是他有一个隐式条件就是,他也能被类自身其他的方法访问。类的private 私有属性、方法虽然不能被外部属性访问,但是他是需要满足被同一个父类下的其他方法访问的。

而局部变量是方法内部创建的,他只能在当前方法的生命周期内被调用,如果一个JavaScript对象中包含了多个方法,在方法内部var创建的属性和方法,是不能被其他任何方法、包括同一个类的其他子方法调用。

- 阅读剩余部分 -

在多数现代浏览器中我们都可能会遇到图片跨域被阻止的问题,一般来说跨域问题主要出现在前后端分离,云架构的web系统中。 在两年前的时候通过网上的搜索勉强应付了问题,但是每次使用或多或少还会有需要解决的小问题。这次弄清楚了之后发现之前网上大多数也都是一知半解,并没有解决核心问题,所以导致了瞎试,碰运气的方式来处理。

首先html2canvas跨域问题的原因 我们希望将html渲染为canvas 进而渲染为图像,这就需要将html中的资源加载到临时的canvas中,而这个时候,如果资源和当前页面不同源,就会被canvas认为有污染拒绝加载。这是出于浏览器出于安全的角度做的一个设定。

在这个时候,我们需要做的其实比较简单,在所有因为跨域被拒绝的资源从服务端返回一个header

Access-Control-Allow-Origin: https://aaa.bbb.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE

诸如网上的一些都是,不需要的:

Access-Control-Expose-Headers: 
Access-Control-Allow-Credentials: true

- 阅读剩余部分 -

README.md

后台管理系统结构说明

引入服务端入口(管理后台接口)

  • 初始化管理后台 Manager对象

    • 处理登录、鉴权
    • 处理默认访问路径
    • 初始化权限
  • 引入页面文件

    • header HTML头文件
    • customHeader (自定义)
    • aside 侧边栏导航菜单
    • customAside (自定义)
    • act ( page | default ) 核心内容输出 优先page路径
    • script 通用脚本
    • customFooter 自定义脚本
    • footer HTML底部 ( act页customJS在这里生效 )

系统用户的默认权限设置

90000 超级管理员 80000 管理员

40000 网站编辑 30000 创作者 10000 普通用户

最近有将AppSite框架进行公开发布(开源)的想法。 不过开源也就意味着更多的一份责任,如果是普通的个人系统还好,我们的系统商业化在很多中大型项目上,安全也是一个隐忧。

暂且先梳理一下

AppSite PHP全栈框架

Appsite的宗旨是用于快速开发网络\云应用\物联网

全栈支持引擎 Full stack Supporting Engine 介于CMS与Framework之间

AppSite 核心特色是极简的语义化编程

如果一个框架、一个语言、甚至一个程序他的可读性不好甚至很差,那么他就是我眼中的垃圾。 我们可以回想一下,高级语言的意义到底是什么? AppSite追求的就是当我们书写/维护我们的程序时,可以像读一篇文章一样,顺畅的知道别人写了什么,自己写过什么。 先不要跟我说什么设计模式、优雅还是什么安全的,首先,我们应该能阅读我们的代码,因为看明白代码之后,其他的都不耽误。

$validate = USER::mobileValidate('15000000000','123456');
if( $validate->isOk() ){
    print( 'validated' );
}else{
    print( $validate->status );
    print( $validate->message );
}

AppSite 主要思想是面向数据编程

从某个侧面来看计算机信息技术本身就是对于数据的各种处理,而AppSite就是这样的思想,我们的核心引擎着重解决的是提供一个可以自适应处理各种不同结构数据的一套程序开发套件。 基于这些高度自适应的基础功能,我们可以方便的创建各种方法或对象、进而快速实现不同的业务逻辑的新增或调整。

例如,我们对于向数据库添加数据的时候,通用的使用的是:

$DB->add( $data, $table );      // 数据库实例化操作方法
USER::add( $data );                 // 组件静态方法

这里相当于我们告诉程序 “我有这些数据,你添加一下。” 程序则通过设定好的规范自动去完成数据整理以及后续操作。

- 阅读剩余部分 -

总体来说 Typecho做到了简洁实用,有些部分虽然有些简单或是有些不足,但是自行修改是十分便捷的,这非常适合用来维持一个单纯的博客系统。

因为近期实在是感受到了记忆力下滑、接触面过广的时候对于笔记、知识点记忆搜索的需求很强烈,不得不重新拾起曾经一度丢弃的个人博客。 区别在于以前更多的是设计作品展示、图片展示。现在更重要的是做技术博客。

在很久之前我一直以来习惯的就是使用WordPress来搭建博客和网站,曾经在做设计师的时候折腾过蛮多次WordPress来制作个人网站、在线教育网站,包括给别人搭建电子商务网站。 2017年 基本主义在线商城: 基本主义

但是由于一些原因、我不打算再尝试WordPress这个较重、同时风险也比较高的CMS 其中最主要原因还是因为折腾成本太高、想要去自定义的时候需要很了解这个框架的设计、想要深度定制的难度很大、修改别人的主题、模板的时候由于代码的结构化很差、所以想要做修改的时间成本异常的高。

(也正是因为2017年痛的领悟,所以自行开发了AppSite全栈框架) 现在自己再去写一个博客又感觉挺浪费时间的。

简书、lofter这类自由度不够、cnblogs、CSDN等技术博客又太过不能入眼, 所以决定还是找一个极简的cms来做,这时候正好发现了Typecho。

- 阅读剩余部分 -