记录一种React表单验证的思路。原文参考(English)

表单字段与验证信息分开

就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
constructor(props) {
  super(props);
  this.state = {
    fullName: null,
    email: null,
    password: null,
    errors: {
      fullName: '',
      email: '',
      password: '',
    }
  };
}

验证信息和表单字段一一对应

每个字段验证错误信息只有一条

比如,fullName的验证提示应该是“2~4个中文”,而不应该分成两个:“至少两个字”、“最多4个字”

显示验证错误信息

验证可能需要3种信息展示:

  1. 默认时的提示文本
  2. 验证没通过时的错误提示
  3. 验证通过后的正确提示

这些可以通过判断errors里的字段按条件展示。拿 errors.fullName 举例:

  1. errors.fullName为空,显示默认信息
  2. errors.fullName为字符串,显示其内容(未通过提示)
  3. errors.fullName===true,显示验证通过信息

这样,在表单提交时,判断表单各字段是否通过验证,并设置 errors 里面对应的提示信息即可

今天查 webpack 文档, 发现版本已经是 4.6 了, 而 webpack 4.0 发布于 2月25日, 距今天不足两个月.

不知道是什么促使 webpack 上演版本大战, 也许有 parcel 的原因吧. 但我要说的是, webpack 4.0+ , 变得更难用了

首先独立出来一个 webpack-cli 就能坑老大一批人

其次说好的零配置(mode设置)也并不全面, 不设置 mode 编译时还有警告; 再加上我用 webpack 本来就不是冲着零配置去的, 我喜欢的就是灵活的配置(比如怎么将打包出来的代码兼容IE8)

然后, 很多插件没有跟上 webpack 的步伐, 导致使用报错. 其中不乏知名且使用率很高的插件如 html-webpack-plugin, extract text plugin

还有就是官方的文档, 更新也严重滞后. 4.0 就废除了 CommonsChunkPlugin , 但官方的文档里还是比比皆是(只有左边的版本号变成了 4.6.0)

4.0发布不久, 我就试用了一下整体流程, 第一个感觉就是坑多.加上文档的滞后, 体验非常不好

就连 CommonsChunkPlugin 废除后用什么, 我都查了老半天—-结论是新的配置项: optimization.splitChunks

好了, 不多说了. 建议保持观望, 不要升级到 4.0 以上—-起码应该等官方文档更新后再说

偶尔我也有意识的读一些关于函数式编程的文章, 虽然在工作中实践的机会不多, 但我十分喜欢函数式编程的风格. 在现代浏览器中, 使用函数式编程实用且高大上.

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素

高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程, 但 java 则不是(最近版本加入了)

下面简单列举一些函数式编程的特性

1, 没有for循环

虽然这根本不是个正经的(真不正经)的函数式特性,但确实是肉眼最容易看出来的特性.就如同用了 for 循环就不是函数式编程了一样

因为函数式编程必定提供替代for循环的方法, 例如随便列举几个大家耳熟能详的方法: forEach, filter, some, every, find, reduce

2,纯函数(pure-function)

纯函数即没有”副作用”的函数. 所谓的副作用是: 函数操作了其自身作用域之外的值.

这个要求对于我这种习惯命令式开发的人有点苛刻, 而且,大部分人都喜欢跨作用域干事.继续阅读

在线预览(懒更新…)

github地址:https://github.com/wslx520/llazy/

图片懒加载,是一个非常实用且使用非常广泛的功能。由于历史悠久,所以此功能的实现也达成了不少共识,我先简单列举几点:

  1. 需要后端配合:在输出html代码时,不能直接将图片真实地址赋给img.src,而是用自定义属性保存起来,图片的初始src里放一个占位图
  2. 无论是从左往右,从右往左,从上向下,从下向上,都需要能动态lazyload
  3. 初始图片(占位图)如果有明确的宽高信息就好了,不然load时会发生抖动(这也要靠后台,在输出时输出width与height)

网上有太多太多的实现,大部分都很好,完全可以满足使用需求。不过我是一个任何事情都想自已尝试下用起来心中才踏实的人,所以花了点时间自己写了个llazy.js

兼容性

网上有很多jquery的lazyload插件,而做成jq插件,就可以兼容到jq兼容的浏览器,因为最难兼容的就是选择器了。而llazy不想有依赖,所以只兼容到IE8。为什么?因为IE8就支持querySelector了啊!

判断load的时机

很多lazyload插件在判断load时机时都比较麻烦。其实load的时机从人的角度来说很简单,即:图片框出现在了可见区,就可以load了。关键就在于,如何判断图片出现在了可见区。

对这个问题,大家各显神通,什么 offset, client, page, screen, scroll等属性一长串,能把人看晕。甚至有的人实现出来才发现,只能从上向下拖时触发load,其余情况又不兼容,非常尴尬。

而我就在想,图片,是一个矩形;图片的容器,也是一个矩形。当这两个矩形相交时,不就表示可以触发load了吗?

于是google了一下:如何判断两个矩形相交,获得了一个公式——虽然公式是c语言的,但套入JS一点困难也木有。继续阅读

本文属于《javascript基础纪要》的一节。

今天在家看书:《你不知道的Javascript》,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下。

构造函数简单的讲,即定义出来专供new 式调用的函数。如:

1
2
3
function A(b) {
    this.b = b || 'bbb';
}

然后你就可以通过new ,来构建一个 A 的实例:

1
var a = new A('B')

但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误:继续阅读

这几天在写一个简单的只针对单Dom节点的jquery,只考虑IE8+。jq里有个is方法,非常好用,他的用法是:

1
$('#div1').is('#content .sidebar');

这样就可以判断$(‘#div1’)是否是位于#content下面,且具有.sidebar的className了。我也要实现一个。

本来我昨天已经实现了,但今天在搜索mouseleave相关问题时,居然意外的发现了更好的解决方式。就是Element.matches(),他用来判断element是否匹配给定的选择器

他的使用方式简单得和jq.is一样:

1
node.matches('#content .sidebar');

当然,这么好的方法,IE8是不支持的,有的旧的现代浏览器也不支持,但MDN直接给出了polyfill:继续阅读

本文只是提一些关于混淆与压缩的想法,可能会偶发抽风型更新。

混淆

混淆就是尽量让JS代码看不懂。

JS的变量名可以以字母或特殊符号开头,但不能以数字开头.

1a不是一个合法的变量名,但_1a就是

JS的变量名开头能用的特殊符号只有两个:$和_.前者被jquery等发扬光大,后者则由underscore占据.

混淆可以让格式良好的代码都看不懂,就是把变量名函数名通通变成_1,_2,_11,_a,_1a2c这种(easyui就是这么搞的).

相比a,b,c,我觉得_1,_2,_3这种名称更让人混淆,虽然后者更长.继续阅读

加入新公司后,一直忙得飞起。由于在新公司的工作包括写一些公用组件,比如日历啊,分页啊什么的,这个分页组件我觉得要用的人比较多,所以把它独立了出来,做成了一个无依赖的原生JS版本,供需要的人使用。

注:新公司使用了一个自己的框架,写组件的方式与jQuery或原生JS都不一样,所以要做提取工作。

xPagination.js参数说明,示例,在线预览请见:http://wslx520.github.io/pagination/index.html

xPagination.js源码请见:Github

本文只是说明一下写这个组件的一些思路,仅供参考。继续阅读

javascript中for循环非常常用,一般写法如下:

1
2
3
4
for(var i = 0;i< arr.length;i++) {
        var a = arr[i];
        //...
    }

这就是一个常见的,正序循环的for循环。这样写的缺点大家都明白:每次都从arr里取length与i来对比,浪费性能(而且,要是arr的长度是动态变化的,就会出现死循环)。改进这个循环的办法是用变量保存arr.length:

1
2
3
4
for(var i = 0, al = arr.length;i< al;i++) {
        var a = arr[i];
        //...
    }

这样比第一种可以略微提升点性能,要是数组长,可以提升更多。继续阅读

本文属于《Javascript基础纪要》系列

带格式是指,像普通的HTML文档一样,有缩进,有换行,有空格,这种字符串更便于阅读。大家拼innerHTML的时候,巴不得越容易阅读越好。

JS拼字符串,一般喜欢用+。如果想要很多行拼在一起,且方便阅读,一般的做法是:

1
2
3
4
5
6
7
8
9
10
11
12
var
s = '<div class="main">'
    + '<div class="left">'
    +'</div>'
    +'<div class="right">${a},{{a}}'
    +   '<ul>'
    +       '<!-- for: ${people} as ${p} -->'
    +       '<li>${p.name}</li>'
    +       '<!-- /for -->'
    +   '</ul>'
    +'</div>'
+'</div>';

这种已经算比较好了,但还是不够好。比如有太多的+号,有太多的”,这里的结构还算少的,要是再多的话,+和’也会更多。下面是更简洁的方式,也是我一直在用的:继续阅读