记录一次基于RESTful API 怎么设计用户权限控制

前言

有人说,每个人都是平等的;
也有人说,人生来就是不平等的;
在人类社会中,并没有绝对的公平,
一件事,并不是所有人都能去做;
一样物,并不是所有人都能够拥有。
每个人都有自己的角色,每种角色都有对某种资源的一定权利,或许是拥有,或许只能是远观而不可亵玩。
把这种人类社会中如此抽象的事实,提取出来,然后写成程序,还原本质的工作,就是我们程序员该做的事了。
有了一个这么有范儿的开头,下面便来谈谈基于RESTful,如何实现不同的人不同的角色对于不同的资源不同的操作的权限控制。

RESTful简述

本文是基于RESTful描述的,需要你对这个有初步的了解。
RESTful是什么?
Representational State Transfer,简称REST,是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。
REST比较重要的点是资源和状态转换,
所谓”资源”,就是网络上的一个实体,或者说是网络上的一个具体信息。它可以是一段文本、一张图片、一首歌曲、一种服务,总之就是一个具体的实在。
而 “状态转换”,则是把对应的HTTP协议里面,四个表示操作方式的动词分别对应四种基本操作:

  • GET,用来浏览(browse)资源
  • POST,用来新建(create)资源
  • PUT,用来更新(update)资源
  • DELETE,用来删除(delete)资源

资源的分类及操作

清楚了资源的概念,然后再来对资源进行一下分类,我把资源分为下面三类:

  1. 私人资源 (Personal Source)
  2. 角色资源 (Roles Source)
  3. 公共资源 (Public Source)

“私人资源”:是属于某一个用户所有的资源,只有用户本人才能操作,其他用户不能操作。例如用户的个人信息、订单、收货地址等等。
“角色资源”:与私人资源不同,角色资源范畴更大,一个角色可以对应多个人,也就是一群人。如果给某角色分配了权限,那么只有身为该角色的用户才能拥有这些权限。例如系统资源只能够管理员操作,一般用户不能操作。
“公共资源”:所有人无论角色都能够访问并操作的资源。

而对资源的操作,无非就是分为四种:

  1. 浏览 (browse)
  2. 新增 (create)
  3. 更新 (update)
  4. 删除 (delete)

角色、用户、权限之间的关系

角色和用户的概念,自不用多说,大家都懂,但是权限的概念需要提一提。

“权限”,就是资源与操作的一套组合,例如”增加用户”是一种权限,”删除用户”是一种权限,所以对于一种资源所对应的权限有且只有四种。

角色与用户的关系:一个角色对应一群用户,一个用户也可以扮演多个角色,所以它们是多对多的关系。

角色与权限的关系:一个角色拥有一堆权限,一个权限却只能属于一个角色,所以它们是一(角色)对多(权限)的关系

权限与用户的关系:由于一个用户可以扮演多个角色,一个角色拥有多个权限,所以用户与权限是间接的多对多关系。

需要注意两种特别情况:

  1. 私人资源与用户的关系,一种私人资源对应的四种权限只能属于一个用户,所以这种情况下,用户和权限是一(用户)对多(权限)的关系。
  2. 超级管理员的角色,这个角色是神一般的存在,能无视一切阻碍,对所有资源拥有绝对权限,甭管你是私人资源还是角色资源。

数据库表的设计

角色、用户、权限的模型应该怎么样设计,才能满足它们之间的关系?

对上图的一些关键字段进行说明:

Source

  • name: 资源的名称,也就是其他模型的名称,例如:user、role等等。
  • identity: 资源的唯一标识,可以像uuid,shortid这些字符串,也可以是model的名称。
  • permissions : 一种资源对应有四种权限,分别对这种资源的browse、create、update、delete

Permission

  • source : 该权限对应的资源,也就是Source的某一条记录的唯一标识
  • action :对应资源的操作,只能是browse、create、update、delete四个之一
  • relation:用来标记该权限是属于私人的,还是角色的,用于OwnerPolicy检测
  • roles: 拥有该权限的角色

###Role

  • users : 角色所对应的用户群,一个角色可以对应多个用户
  • permissions: 权限列表,一个角色拥有多项权利

User

createBy : 该记录的拥有者,在user标里,一般等于该记录的唯一标识,这一属性用于OwnerPolicy的检测,其他私有资源的模型设计,也需要加上这一字段来标识资源的拥有者。
roles : 用户所拥有的角色

策略/过滤器

在sails下称为策略(Policy),在java SSH下称为过滤器(Filter),无论名称如何,他们工作原理是大同小异的,主要是在一条HTTP请求访问一个Controller下的action之前进行检测。所以在这一层,我们可以自定义一些策略/过滤器来实现权限控制。

为行文方便,下面姑且允许我使用策略这一词。

策略 (Policy)

下面排版顺序对应Policy的运行顺序

SessionAuthPolicy:
检测用户是否已经登录,用户登录是进行下面检测的前提。

SourcePolicy:
检测访问的资源是否存在,主要检测Source表的记录

PermissionPolicy:
检测该用户所属的角色,是否有对所访问资源进行对应操作的权限。

OwnerPolicy:
如果所访问的资源属于私人资源,则检测当前用户是否该资源的拥有者。
如果通过所有policy的检测,则把请求转发到目标action。

Policies

结语

对程序员最大的挑战,并不是能否掌握了哪些编程语言,哪些软件框架,而是对业务和需求的理解,然后在此基础上,把要点抽象出来,写成计算机能理解的语言。

最后,希望这篇文章,能够帮助你对权限管理这一课题增加多一点点理解。

sails-permissions 源码

原文链接

https://cnodejs.org/topic/551802d3687c387d2f5b2906

做一个可复用Vuejs组件

Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。

从维护视图到维护数据,Vue.js 让我们快速地开发应用。但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难。

同时,Vue.js 的接口和语法十分自由,实现同一功能有若干种方法。每个人解决问题的思路不一样,写出来的代码也就不一样,缺乏团队内的规范。

本文旨在从组件开发的不同方面列举出合理的解决方法,作为建立组件规范的一个参考。

导航

  • 构成组件
  • 组件间通信
  • 业务无关
  • 命名空间
  • 上下文无关
  • 数据扁平化
  • 使用自定义事件实现数据的双向绑定
  • 使用自定义 watcher 优化 DOM 操作
  • 项目骨架

构成组件

组件,是一个具有一定功能,且不同组件间功能相对独立的模块。组件可以是一个按钮、一个输入框、一个视频播放器等等。

可复用组件,高内聚、低耦合。

那么,什么构成了组件呢。以浏览器的原生组件 video 为例,分析一下组件的组成部分。

1
2
3
4
5
6
7
8
<video
src="example.mp4"
width="320"
height="240"
onload="loadHandler"
onerror="errorHandler">
Your browser does not support the video tag.
</video>

实例中能看出,组件由状态、事件和嵌套的片断组成。状态,是组件当前的某些数据或属性,如 video 中的 src、width 和 height。事件,是组件在特定时机触发一些操作的行为,如 video 在视频资源加载成果或失败时会触发对应的事件来执行处理。片段,指的是嵌套在组件标签中的内容,该内容会在某些条件下展现出来,如在浏览器不支持 video 标签时显示提示信息。

在 Vue 组件中,状态称为 props,事件称为 events,片段称为 slots。组件的构成部分也可以理解为组件对外的接口。良好的可复用组件应当定义一个清晰的公开接口。

  • Props 允许外部环境传递数据给组件
  • Events 允许组件触发外部环境的副作用
  • Slots 允许外部环境将额外的内容组合在组件中。
  • 使用 vue 对 video 组件做拓展,构造出一个支持播放列表的组件 myVideo:
1
2
3
4
5
6
7
8
9
10
<my-video
:playlist="playlist"
width="320"
height="240"
@load="loadHandler"
@error="errorHandler"
@playnext="nextHandler"
@playprev="prevHandler">
<div slot="endpage"></div>
</my-video>

myVideo 组件有着清晰的接口,接收播放列表、播放器宽高等状态,能够触发加载成功或失败、播放上一个或下一个的事件,并且能自定义播放结束时的尾页,可用于插入广告或显示下一个视频信息。

组件间通信

在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

命名

组件的命名应该跟业务无关。应该依据组件的功能为组件命名。

例如,一个展示公司部门的列表,把每一项作为一个组件,并命名为 DepartmentItem。这时,有一个需求要展示团队人员列表,样式跟刚刚的部门列表一样。显然,DepartmentItem 这个名字就不适合了。

因此,可复用组件在命名上应避免跟业务扯上关系,以组件的角色、功能对其命名。Item、ListItem、Cell。可以参考 Bootstrap、ElementUI 等一些 UI 框架的命名。

业务数据无关

可复用组件只负责 UI 上的展示和一些交互以及动画,如何获取数据跟它无关,因此不要在组件内部去获取数据,以及任何与服务端打交道的操作。可复用组件只实现 UI 相关的功能。

组件职责

约束好组件的职责,能让组件更好地解耦,知道什么功能是组件实现的,什么功能不需要实现。

组件可以分为通用组件(可复用组件)和业务组件(一次性组件)。

可复用组件实现通用的功能(不会因组件使用的位置、场景而变化):

  • UI 的展示
  • 与用户的交互(事件)
  • 动画效果

业务组件实现偏业务化的功能:

  • 获取数据
  • 和 vuex 相关的操作
  • 埋点
  • 引用可复用组件

可复用组件应尽量减少对外部条件的依赖,所有与 vuex 相关的操作都不应在可复用组件中出现。

组件应当避免对其父组件的依赖,不要通过 this.$parent 来操作父组件的示例。父组件也不要通过 this.$children 来引用子组件的示例,而是通过子组件的接口与之交互。

命名空间

可复用组件除了定义一个清晰的公开接口外,还需要有命名空间。命名空间可以避免与浏览器保留标签和其他组件的冲突。特别是当项目引用外部 UI 组件或组件迁移到其他项目时,命名空间可以避免很多命名冲突的问题。

1
2
3
4
<xl-button></xl-button>
<xl-table></xl-table>
<xl-dialog></xl-dialog>
...

业务组件也可以有命令空间,跟通用组件区分开。这里用 st (section) 来代表业务组件。

1
2
3
<st-recommend></st-recommend>
<st-qq-movie></st-qq-movie>
<st-sohu-series></st-sohu-series>

上下文无关

还是上面那句话,可复用组件应尽量减少对外部条件的依赖。没有特别需求且单个组件不至于过重的的前提下,不要把一个有独立功能的组件拆分成若干个小组件。

1
2
3
4
<table-wrapper>         
<table-header slot="header" :headers="exampleHeader"></table-header>
<table-body slot="body" :body-content="exampleContents"></table-body>
</table-wrapper>

TableHeader 组件和 TableBody 组件依赖当前的上下文,即 TableWrapper 组件嵌套的环境下。你可以有更好的解决办法:

1
<xl-table :headers="exampleHeader" :body-content="exampleContents"></xl-table>

上下文无关原则能够降低组件使用的门槛。

数据扁平化

定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。

1
2
<!-- 反例 -->
<card :item="{ title: item.name, description: item.desc, poster: item.img }></card>

每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:

  • 组件接口清晰
  • props 校验方便
  • 当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象
1
2
3
4
5
<card
:title="item.name"
:description="item.desc"
:poster="item.img">
</card>

扁平化的 props 能让我们更直观地理解组件的接口。

使用自定义事件实现数据的双向绑定

有时候,对于一个状态,需要同时从组件内部和组件外部去改变它。

例如,模态框的显示和隐藏,父组件可以初始化模态框的显示,模态框组件内部的关闭按钮可以让其隐藏。一个好的办法是,使用自定义事件改变父组件中的值:

1
<modal :show="show" @showchange="show = argument[0]"></modal>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Modal.vue -->

<template>
<div v-show="show">
<h3>标题</h3>
<p>内容</p>
<a href="javascript:;" @click="close">关闭</a>
</div>
</template>

<script>
export default {
props: {
show: String
},
methods: {
close () {
this.$emit('input', false)
}
}
}
</script>

用户点击关闭按钮时,Modal 组件发送一个 showchange 自定义事件给父组件。父组件监听到 showchange 事件时,把 show 设置为事件回调的第一个参数。

特别地,当状态名称为 value,事件名称为 input 时,可以使用 v-model 指令语法糖:

1
<modal :value="show" @input="show = argument[0]"></modal>

等价于

1
<modal v-model="show"></model>

要让组件的 v-model 生效,它必须:

  • 接受一个 value 属性
  • 在有新的 value 时触发 input 事件

注意:由于每个组件的 input 事件只能用来对一个数据进行双向绑定,所以当存在多个需要向上同步的数据时,请不要使用 v-model,请使用多个自定义事件,并在父组件中同步新的值。

1
2
3
4
<modal
:show="show" @showchange="show = argument[0]"
:content="content" @contentchange="content = argument[0]">
</model>

使用自定义 watcher 优化 DOM 操作

在开发中,有些逻辑无法使用数据绑定,无法避免需要对 DOM 的操作。例如,视频的播放需要同步 Video 对象的播放操作及组件内的播放状态。可以使用自定义 watcher 来优化 DOM 的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- MyVideo.vue -->

<template>
<div>
<video ref="video" src="src"></video>
<a href="javascript:;" @click="togglePlay">暂停</a>
</div>
</template>

<script>
export default {
props: {
src: String // 播放地址
},
data () {
return {
playing: false // 是否正在播放
}
},
watch: {
// 播放状态变化时,执行对应操作
playing (val) {
let video = this.$refs.video
if (val) {
video.play();
} else {
video.pause();
}
}
},
method: {
// 切换播放状态
togglePlay () {
this.playing = !this.playing
}
}
}
</script>

示例中,自定义 watcher 在监听到 playing 状态变化时,会执行播放或暂停操作。遇到对视频播放状态的处理时,只需要关注 playing 状态即可。

项目骨架

单组件不异过重,组件在功能独立的前提下应该尽量简单,越简单的组件可复用性越强。当你实现组件的代码,不包括CSS,有好几百行了(这个大小视业务而定),那么就要考虑拆分成更小的组件。

当组件足够简单时,就可以在一个更大的业务组件中去自由组合这些组件,实现我们的业务功能。因此,理想情况下,组件的引用层级,只有两级。业务组件引用通用组件。

我们可以得到一个扁平化的结构。

在一个庞大的项目当中,组件间的引用关系会更复杂一些。当单页应用有多个路由,每个路由组件过重,需要拆分模块时。组件结构会变成下图这样。

按照这个思路构建我们的项目,最后的源代码目录结构(不包括构建流程文件):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
│  App.vue          # 顶级组件
│ client-entry.js # 前端入口文件
│ config.js # 配置文件
│ main.js # 主入口文件

├─api # 接口 API
├─assets # 静态资源
├─components # 通用组件
├─directives # 自定义指令
├─mock # Mock 数据
├─plugins # 自定义插件
├─router # 路由配置
├─sections # 业务组件
├─store # Vuex Store
├─utils # 工具模块
└─views # 路由页面组件

在通用组件中还可以区分容器组件、布局组件和其他功能性组件等。

原文链接:https://www.jianshu.com/p/79a37137e45d

如何在CentOS7上安装Python3并设置本地编程环境

本文基于引用文章(见尾部)和个人搭建python3.7.0环境的过程进行总结和分享。

安装环境说明

  • 主机:centos7
  • 安装python版本:3.7.0

# yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel libffi-devel

-y参数:自动选择,不弹出选择对话,默认yes

若不先安装依赖环境,在后面编译的步骤会报错缺少依赖,如:找不到zlib包

1
zipimport.ZipImportError: can't decompress data; zlib not available

注意:上面尾部的包libffi-devel,是python3.7版本的新依赖,若此包没安装,编译时会报错

1
ModuleNotFoundError: No module named '_ctypes'

wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tgz

tar -zxvf Python-3.7.0.tgz

执行configure检测安装平台特征

./configure是用来检测你的安装平台的目标特征的。比如它会检测你是不是有CC或GCC,并不是需要CC或GCC,它是个shell脚本。

这一步一般用来生成 Makefile,为下一步的编译做准备

1
2
cd Python-3.7.0
./configure

不出意外,会提示

1
configure: error: no acceptable C compiler found in $PATH

原因是没有安装gcc,因为python是用C写的,所以需要用gcc进行编译,所以需要先安装gcc

1
2
# 顺道把c++编译器也安装了
yum install gcc gcc-c++

checking endian.h usability... yes ....

ok,没有报错进入下一步编译

make && make install
  • make:编译,可能遇到的错误:make *** 没有指明目标并且找不到 makefile。 没有Makefile,解决方法是要先./configure 一下生成Makefile。

  • make install:将程序安装至系统中。如果原始码编译无误,且执行结果正确,便可以把程序安装至系统预设的可执行文件存放路径。如果用bin_PROGRAMS宏的话,程序会被安装至/usr/local/bin这个目录。

查看是否安装成功:

1
2
python3 -V    // 输出 Python3.7.0
python -V // 输出 python2.7.6

设置虚拟环境

成功安装python后,我们需要为python项目创建虚拟环境。

虚拟环境为Python项目创建一个隔离空间,确保每个项目都有自己的一组依赖项,这些依赖项不会破坏任何其他项目。

设置编程环境使我们能够更好地控制Python项目以及如何处理不同版本的包。在使用第三方软件包时,这一点尤为重要。

新建项目目录

1
2
3
cd ~
mkdir myproject
cd myproject

运行以下命令来创建独立环境:

1
python3 -m venv my_env

本质上,此命令创建一个新目录(在本例中称为my_env),其中包含我们可以使用以下ls命令查看的一些项:

1
bin  include  lib  lib64  pyvenv.cfg

到此为止,环境创建完成,要使用该虚拟环境,还需要执行激活虚拟环境命令

1
source my_env/bin/activate

可以看到linux操作提示符前缀变为

1
(my_env) [root@localhost myproject]#

这个前缀让我们知道环境my_env当前是活动的,这意味着当我们在这里创建程序时,它们将只使用这个特定环境的设置和包。

注意:我们使用python3创建的虚拟环境,在虚拟环境类,我们的python版本默认为python3.7.0,退出虚拟环境后python默认版本仍为2.7版本。

1
(my_env) [root@localhost bin]# python -V   // 输出Python 3.7.0

1
[root@localhost ~]# python -V         // 输出Python 2.7.5

想退出python虚拟环境,只需执行deactivate命令

1
(my_env) [root@localhost myproject]# deactivate

参考链接:https://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set-up-a-local-programming-environment-on-centos-7

移动端H5多页开发拍门砖经验


两年前刚接触移动端开发,刚开始比较疑惑,每次遇到问题都是到社区里提问或者吸取前辈的经验分享,感谢热衷于分享的开发者为前端社区带来欣欣向上的生命力。本文结合先前写的文章和开发经验分享给大家,希望也能帮助刚步入移动端开发的新人解惑。以下会以其中一个以公积金页面开发项目作为例子,介绍移动端的一些常见问题和使用Vuejs作为lib进行多页开发的经验。

可伸缩布局方案

根据设备设备像素比设置scale的值(scale = 1 / deviceRatio),这样可以保持视口device-width始终等于设备物理像素,接着根据屏幕大小动态计算根字体大小,具体是将屏幕划分为100等分,每份为a,1rem就等于10a。

标注

通常我们会拿到750宽的设计稿,这是基于iPhone6的物理分辨率。有的设计师也许会偷懒,设计图上面没有任何的标注,如果我们边开发边量尺寸,无疑效率是比较低的。要么让设计师标注上,要么自食其力。

如果设计师实在没有时间,推荐使用markman进行标注,免费版阉割了一些功能(比如无法保存本地)不过基本满足了我们的需求了。

后来我发现比markman更好的标注工具PxCook,该工具可以显示PSD设计图中的图层的样式代码,对于前端来说简直方便极了。

标注完成后开始写我们的样式,使用了淘宝的lib-flexible库之后,我们的根字体基准值就为750/100*10 = 75px。此时我们从图中若某个标注为100px,那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率,可以使用px转化为rem的插件。下面是sublimeText和Vscode的转换插件:

px转rem插件

  • sublimeText插件:

  • Vscode插件:

使用rem的几点总结

  • 在所有的单位中,font-size推荐使用px,然后结合媒体查询进行重要节点的控制,这样可以满足突出或者弱化某些字体的需求,而非整体调整。
  • 众向的单位可以全部使用px,横向的使用rem,因为移动设备宽度有限,而高度可以无限向下滑动。但这也有特例,比如对于一些活动注册页面,需要在一屏幕内完全显示,没有下拉,这时候所有众向或者横向都应该使用rem作为单位。如图:

左图的表单高度单位由于下边空距较大,使用px在不同屏幕显示更加;而右边的活动注册页由于不能出现滚动条,所有的众向高度、margin、padding都应该使用rem。

  • border、box-shadow、border-radius等一些效果应该使用px作为单位。

手机状态栏和浏览器导航栏的影响

之前发布的文章中,有个SF的前端小伙伴提出的问题:
文中作者有重点强调布局全部铺满,和下方与很多空隙的处理方案是不同的,在工作中我遇到这种情况,设计师的设计稿宽度为750×1334,但实际的展示高度并没有那么多,因为上方有导航栏还包括手机自己的状态栏展示,所以整体高度就达不到750,但是设计师设计稿是严格按照750进行设计的,这种情况下使用rem,严格按照设计师尺寸进行还原就会出现屏幕出现滚动条情况,请问针对这种情况您是怎么处理的?是从设计稿上规范,还是从开发上有相应的措施

依旧以我的分享界面为例:
展示高度不同通常发生在微信及浏览器端,因为前者没有地址栏和工具栏,这样显示高度通常会和设计师设计的视图吻合。那如果按照纯padding,margin即使全部使用rem,在浏览器端依旧会超出一屏高度,对于分享页面这种不是我们想要看到的。这时候就要做出取舍,我对主体区域采用绝对定位,这样上面间隙虽然小,不过仍能保持在一个屏幕高度显示。若采用margin padding在设置,必然已出现滚动条。当然这样的前提是依赖设计图的,通常设计师会为了空间感有保留一定的间隙,也不会将主要对象高度设的过高,否则太撑满也不好看,开发上如果设计图宽高没有在一定界限之内,超出也无法避免,不过我们这种分享界面通常是通过微信分享好友,通过浏览器打开的视图效果出现滚动条其实也不怎么影响不是么?
下面附上微信端和浏览器端的效果图:

微信端:

浏览器端:

为何不使用SPA模式

一般移动端使用vue是为了数据交互频繁而且快速开发的页面,为什么不使用单页SPA开发模式,原因大概几点。

  • 为了快速开发,快速上线
  • 项目其他成员不熟悉SPA,不熟悉webpack
  • 参与项目时项目已使用多页开发,短时间无法重构

抛开使用单页的架构,开发多页应用时,一个页面交互逻辑与一个Vue实例对应。

基于接口返回数据的属性注入

“基于接口返回数据的属性注入”是个人创建的话术,抛开此概念,先说一下表单数据的绑定方式。

表单的数据绑定

一个重要的点是有几份表单就分开几个表单对象进行数据绑定

以上图公积金查询为例,由于不同城市会有不同的查询要素,可能登陆方式只有一种,也可能有几种。比如上图有三种登陆方式,在使用vue布局时,有两种方案。

  • 1、 只建立一个表单用于数据绑定,点击按钮触发判断
  • 2、有几种登陆方式建立几个表单,用一个字段标识当前显示的表单

由于使用第三方的接口,一开始也没有先进行接口返回数据结构的查看,采用了第一种错误的方式,错误一是每种登陆方式下面的登陆要素的数量也不同,错误二是数据绑定在同一个表单data下,当用户在用户名登陆方式输入用户名密码后,切换到客户号登陆方式,就会出现数据错乱的情况。

解决完布局问题后,我们需要根据设计图定义一些状态,比如当前登陆方式的切换、同意授权状态的切换、按钮是否可以点击的状态、是否处于请求中的状态。当然还有一些app穿过来的数据,这里就忽略了。

1
2
3
4
5
6
7
8
data: {
tags: {
arr: [''],
activeIndex: 0
},
isAgreeProxy: true,
isLoading: false
}

接着审查一下接口返回的数据,推荐使用chrome插件postman,比如呼和浩特的登陆要素如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
"code": 2005,
"data": [
{
"name": "login_type",
"label": "身份证号",
"fields": [
{
"name": "user_name",
"label": "身份证号",
"type": "text"
},
{
"name": "user_pass",
"label": "密码",
"type": "password"
}
],
"value": "1"
},
{
"name": " login_type",
"label": "公积金账号",
"fields": [
{
"name": "user_name",
"label": "公积金账号",
"type": "text"
},
{
"name": "user_pass",
"label": "密码",
"type": "password"
}
],
"value": "0"
}
],
"message": "登录要素请求成功"
}

可以看到呼和浩特有两种授权登陆方式,我们在data中定义了一个loginWays,初始为空数组,接着methods中定义一个请求接口的函数,里面就是基于返回数据的基础上为上面fields对象注入一个input字段用于绑定,这就是所谓的基于接口返回数据的属性注入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
methods: {
queryloginWays: function(channel_type, channel_code) {
var params = new URLSearchParams();
params.append('channel_type', channel_type);
params.append('channel_code', channel_code);
axios.post(this.loginParamsProxy, params)
.then(function(res) {
console.log(res);
var code = res.code || res.data.code;
var msg = res.message || res.data.message;
var loginWays = res.data.data ? res.data.data : res.data;
// 查询失败
if (code != 2005) {
alert(msg);
return;
}
// 添加input字段用于v-model绑定
loginWays.forEach(function(loginWay) {
loginWay.fields.forEach(function(field) {
field.input = '';
})
})
this.loginWays = loginWays;
this.tags.arr = loginWays.map(function(loginWay) {
return loginWay.label;
})
}.bind(this))
}
}

即使返回的数据有我们不需要的数据也没有关系,这样保证我们不会遗失进行下一步登陆所需要的数据。

这样多个表单绑定数据问题解决了,那么怎么进行页面间数据传递?如果是app传过来,那么通常使用URL拼接的方式,使用window.location.search获得queryString后再进行截取;如果通过页面套入javaWeb中,那么直接使用”${字段名}”就能获取,注意要js中获取java字段需要加双引号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
computed: {
// 真实姓名
realName: function() {
return this.getQueryVariable('name') || ''
},
// 身份证
identity: function() {
return parseInt(this.getQueryVariable('identity')) || ''
},
/*If javaWeb
realName: function() {
return this.getQueryVariable('name') || ''
},
identity: function() {
return parseInt(this.getQueryVariable('identity')) || ''
}*/
},
methods: {
getQueryVariable: function(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
}

关于前端跨域调试

在进行接口请求时,我们的页面通常是在sublime的本地服务器或者vscode本地服务器预览,所以请求接口会遇到跨域的问题,如果使用Gulp进行打包,可以使用插件http-proxy-middleware,或者使用nginx。

使用Gulp

在项目构建的时候通常我们源代码会放在src文件夹下,然后使用gulp进行代码的压缩、合并、图片的优化(根据需要)等等,我们会使用gulp。

解决跨域的问题可以用http-proxy-middleware,此时我们在gulp-connect中的本地服务器进行预览调试。

gulpfile.js如下: 开发过程使用gulp server:dev命令,监听文件改动并使用livereload刷新,并且代理src目录;使用gulp命令进行打包;使用gulp server:dist代理dist生产目录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var useref = require('gulp-useref');
var connect = require('gulp-connect');
var proxyMiddleware = require('http-proxy-middleware');

// 开发跨域代理 将localhost:8088/api 映射到 https://api.xxxxx.com/
gulp.task('server:dev', ['listen'], function() {
var middleware = proxyMiddleware(['/api'], {
target: 'https://api.xxxxx.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
});
connect.server({
root: env == 'dev' ? './src' : './dist',
port: 8088,
livereload: true,
middleware: function(connect, opt) {
return [middleware]
}

});
});

// 打包后跨域代理
gulp.task('server:dist', ['listen'], function() {
var middleware = proxyMiddleware(['/api'], {
target: 'https://api.xxxxx.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
});
connect.server({
root: './dist',
port: 8088,
livereload: true,
middleware: function(connect, opt) {
return [middleware]
}

});
});

gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
gulp.task('css', function() {
gulp.src('src/css/main.css')
.pipe(concat('main.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'));

gulp.src('src/css/share.css')
.pipe(concat('share.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'));

gulp.src('src/vendors/css/*.css')
.pipe(concat('vendors.min.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/vendors/css'));
return gulp
});
gulp.task('js', function() {
return gulp.src('src/vendors/js/*.js')
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/vendors/js'));
});
gulp.task('img', function() {
gulp.src('src/imgs/*')
.pipe(gulp.dest('dist/imgs'));
});
gulp.task('listen', function() {
gulp.watch('./src/css/*.css', function() {
gulp.src(['./src/css/*.css'])
.pipe(connect.reload());
});
gulp.watch('./src/js/*.js', function() {
gulp.src(['./src/js/*.js'])
.pipe(connect.reload());
});
gulp.watch('./src/*.html', function() {
gulp.src(['./src/*.html'])
.pipe(connect.reload());
});
});
gulp.task('default', ['html', 'css', 'js', 'img']);

}

公众号网页的调试

如果你开发的H5基于微信jsSDK,你一定接触过微信授权域名,微信会将授权数据传给一个回调页面,而回调页面必须在你配置的域名下(含子域名)。比如我们获取用户的openid操作。而微信配置域名回去该域名根目录下检测一个xxx_verify_xxx.txt文件,确保该域名是属于你的。

所以要想在微信开发调试工具中获取openid,我们需要使用一种叫做内网穿透的工具。下面是自己比较常用的两个工具:

ngrok -config ngrok.cfg start web

在ngrok.exe目录需要一个配置文件ngrok.cfg
以下是配置示例:

1
2
3
4
5
6
7
8
server_addr: "tunnel.cn:4443"
trust_host_root_certs: false
tunnels:
web:
subdomain: "xxx"
proto:
http: 8086
https: 8086

启动后xxx.tunnel.cn:4443会指向你本地的8086端口,将xxx_verify_xxx.txt文件放到8086端口根目录即可配置授权域名成功。

花生壳

花生壳免费版对于个人开通仅需6元,然后每月会提供给你1G的流量,免费版不支持80端口,最多支持两个域名,需要下载桌面客户端。

添加域名映射很简单,免费版无法配置自定义域名,由花生壳自动生成。

配置成功后启动客户端可查看当前的状态

感谢阅读,欢迎任何形式的技术提问和交流!

做一个使用 Virtual-DOM 的前端模版引擎

本文转载自:https://github.com/livoras/blog/issues/14

目录

  • 前言
  • 问题的提出
  • 模板引擎和 Virtual-DOM 结合 —— Virtual-Template
  • Virtual-Template 的实现
    • 编译原理相关
    • 模版引擎的EBNF
    • 词法分析
    • 语法分析与抽象语法树
    • 代码生成
  • 完整的 Virtual-Template
  • 结语

1 前言

本文尝试构建一个 Web 前端模板引擎,并且把这个引擎和 Virtual-DOM 进行结合。把传统模板引擎编译成 HTML 字符串的方式改进为编译成 Virtual-DOM 的 render 函数,可以有效地结合模板引擎的便利性和 Virtual-DOM 的性能。类似 ReactJS 中的 JSX。

阅读本文需要一些关于 ReactJS 实现原理或者 Virtual-DOM 的相关知识,可以先阅读这篇博客:深度剖析:如何实现一个 Virtual DOM 算法 , 进行相关知识的了解。

同时还需要对编译原理相关知识有基本的了解,包括 EBNF,LL(1),递归下降的方法等。

2 问题的提出

本人在就职的公司维护一个比较朴素的系统,前端渲染有两种方式:

  1. 后台直接根据模板和数据直接把页面吐到前端。
  2. 后台只吐数据,前端用前端模板引擎渲染数据,动态塞到页面。

当数据状态变更的时候,前端用 jQuery 修改页面元素状态,或者把局部界面用模板引擎重新渲染一遍。当页面状态很多的时候,用 jQuery 代码中会就混杂着很多的 DOM 操作,编码复杂且不便于维护;而重新渲染虽然省事,但是会导致一些性能、焦点消失的问题(具体可以看这篇博客介绍)。

因为习惯了 MVVM 数据绑定的编码方式,对于用 jQuery 选择器修改 wordings 等细枝末节的劳力操作个人感觉不甚习惯。于是就构思能否在这种朴素的编码方式上做一些改进,解放双手,提升开发效率。其实只要加入数据状态 -> 视图的 one-way data-binding 开发效率就会有较大的提升。

而这种已经在运作多年的多人维护系统,引入新的 MVVM 框架并不是一个非常好的选择,在兼容性和风险规避上大家都有诸多的考虑。于是就构思了一个方案,在前端模板引擎上做手脚。可以在几乎零学习成本的情况下,做到 one-way data-binding,大量减少 jQuery DOM 操作,提升开发效率。

div>

这只一个普通的模板引擎语法(类似 artTemplate),支持循环语句(each)、条件语句(if elseif else ..)、和文本填充({…}), 应该比较容易看懂,这里就不解释。当用下面数据渲染该模板的时候:

1
2
3
4
5
6
7
8
var data = {
title: 'Users List',
users: [
{id: 'user0', name: 'Jerry', isAdmin: true},
{id: 'user1', name: 'Lucy', isAuthor: true},
{id: 'user2', name: 'Tomy'}
]
}

会得到下面的 HTML 字符串:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<h1>Users List</h1>
<ul>
<li class="user-item">
<img src="/avatars/user0" />
<span>NO.1 - Jerry</span>
I am admin
</li>
<li class="user-item">
<img src="/avatars/user1" />
<span>NO.2 - Lucy</span>
I am author
</li>
<li class="user-item">
<img src="/avatars/user2" />
<span>NO.3 - Tomy</span>
I am nobody
</li>
</ul>
</div>

把这个字符串塞入文档当中就可以生成 DOM 。但是问题是如果数据变更了,例如data.title由Users List修改成Users,你只能用 jQuery 修改 DOM 或者直接重新渲染一个新的字符串塞入文档当中。

然而我们可以参考 ReactJS 的 JSX 的做法,不把模板编译成 HTML, 而是把模板编译成一个返回 Virtual-DOM 的 render 函数。render 函数会根据传入的 state 不同返回不一样的 Virtual-DOM ,然后就可以根据 Virtual-DOM 算法进行 diff 和 patch:

1
2
3
4
5
6
7
8
9
10
11
12
// setup codes
// ...

var render = template(tplString) // template 把模板编译成 render 函数而不是 HTML 字符串
var root1 = render(state1) // 根据初始状态返回的 virtual-dom

var dom = root.render() // 根据 virtual-dom 构建一个真正的 dom 元素
document.body.appendChild(dom)

var root2 = render(state2) // 状态变更,重新渲染另外一个 virtual-dom
var patches = diff(root1, root2) // virtual-dom 的 diff 算法
patch(dom, patches) // 更新真正的 dom 元素

这样做好处就是:既保留了原来模板引擎的语法,又结合了 Virtual-DOM 特性:当状态改变的时候不再需要 jQuery 了,而是跑一遍 Virtual-DOM 算法把真正的 DOM 给patch了,达到了 one-way data-binding 的效果,总结流程就是:

  1. 先把模板编译成一个 render 函数,这个函数会根据数据状态返回 Virtual-DOM
  2. 用 render 函数构建 Virtual-DOM;并根据这个 Virtual-DOM 构建真正的 DOM 元素,塞入文档当中
  3. 当数据变更的时候,再用 render 函数渲染一个新的 Virtual-DOM
  4. 新旧的 Virtual-DOM 进行 diff,然后 patch 已经在文档中的 DOM 元素

(恩,其实就是一个类似于 JSX 的东西)

这里重点就是,如何能把模板语法编译成一个能够返回 Virtual-DOM 的 render 函数?例如上面的模板引擎,不再返回 HTML 字符串了,而是返回一个像下面那样的 render 函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function render (state) {
return el('div', {}, [
el('h1', {}, [state.title]),
el('ul', {}, state.users.map(function (user, i) {
return el('li', {"class": "user-item"}, [
el('img', {"src": "/avatars/" + user.id}, []),
el('span', {}, ['No.' + (i + 1) + ' - ' + user.name],
(user.isAdmin
? 'I am admin'
: uesr.isAuthor
? 'I am author'
: '')
])
}))
])
}

前面的模板和这个 render 函数在语义上是一样的,只要能够实现“模板 -> render 函数”这个转换,就可以跑上面所说的 Virtual-DOM 的算法流程,这样就把模板引擎和 Virtual-DOM结合起来。为了方便起见,这里把这个结合体称为 Virtual-Template 。

4 Virtual-Template 的实现

网上关于模板引擎的实现原理介绍非常多。如果语法不是太复杂的话,可以直接通过对语法标签和代码片段进行分割,识别语法标签内的内容(循环、条件语句)然后拼装代码,具体可以参考这篇博客。其实就是正则表达式使用和字符串的操作,不需要对语法标签以外的内容做识别。

但是对于和 HTML 语法已经差别较大的模板语法(例如 Jade ),单纯的正则和字符串操作已经不够用了,因为其语法标签以外的代码片段根本不是合法的 HTML 。这种情况下一般需要编译器相关知识发挥用途:模板引擎本质上就是把一种语言编译成另外一种语言。

而对于 Virtual-Template 的情况,虽然其除了语法标签以外的代码都是合法的 HTML 字符串,但是我们的目的是把它编译成返回 Virtual-DOM 的 render 函数,在构建 Virtual-DOM 的时候,你需要知道元素的 tagName、属性等信息,所以就需要对 HTML 元素本身做识别。

因此 Virtual-Template 也需要借助编译原理(编译器前端)相关的知识,把一种语言(模板语法)编译成另外一种语言(一个叫 render 的 JavaScript 函数)。

4.1 编译原理相关

CS 本科都教过编译原理,本文会用到编译器前端的一些概念。在实现模板到 render 函数的过程中,要经过几个步骤:

  1. 词法分析:把输入的模板分割成词法单元(tokens stream)
  2. 语法分析:读入 tokens stream ,根据文法规则转化成抽象语法树(Abstract Syntax Tree)
  3. 代码生成:遍历 AST,生成 render 函数体代码

所以这个过程可以分成几个主要模块:tokenizer(词法分析器),parser(语法分析器),codegen(代码生成)。在此之前,还需要对模板的语法做文法定义,这是构建词法分析和语法分析的基础。

{/if}

对于 {user.name} 这样的表达式插入,可以简单地看成是字符串,在代码生成的时候再做处理。这样我们的词法和语法分析就会简化很多,基本只需要对 each、if、HTML 元素进行处理。

Virtual-Template 的 EBNF:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Stat -> Frag Stat | ε
Frag -> IfStat | EachStat | Node | text

IfStat -> '{if ...}' Stat {ElseIf} [Else] '{/if}'
ElseIf -> '{elseif ...}' Stat
Else -> '{else}' Stat|e

EachStat -> '{each ...}' Stat '{/each}'

Node -> OpenTag NodeTail
OpenTag -> '/[\w\-\d]+/' {Attr}
NodeTail -> '>' Stat '/\<[\w\d]+\>/' | '/>'

Attr -> '/[\w\-\d]/+' Value
Value -> '=' '/"[\s\S]+"/' | ε

可以把该文法转换成 LL(1) 文法,方便我们写递归下降的 parser。这个语法还是比较简单的,没有出现复杂的左递归情况。简单进行展开和提取左公因子消除冲突获得下面的 LL(1) 文法。

LL(1) 文法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Stat -> Frag Stat | ε
Frag -> IfStat | EachStat | Node | text

IfStat -> '{if ...}' Stat ElseIfs Else '{/if}'
ElseIfs -> ElseIf ElseIfs | ε
ElseIf -> '{elseif ...}' Stat
Else -> '{else}' Stat | ε

EachStat -> '{each ...}' Stat '{/each}'

Node -> OpenTag NodeTail
OpenTag -> '/[\w\-\d]+/' Attrs
NodeTail -> '>' Stat '/\<[\w\d]+\>/' | '/>'

Attrs -> Attr Attrs | ε
Attr -> '/[\w\-\d]/+' Value
Value -> '=' '/"[\s\S]+"/' | ε

}

使用 JavaScript 自带的正则表达式引擎编写 tokenizer 很方便,把输入的模板字符串从左到右进行扫描,按照上面的 token 的类型进行分割:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function Tokenizer (input) {
this.input = input
this.index = 0
this.eof = false
}

var pp = Tokenizer.prototype

pp.nextToken = function () {
this.eatSpaces()
return (
this.readCloseTag() ||
this.readTagName() ||
this.readAttrName() ||
this.readAttrEqual() ||
this.readAttrString() ||
this.readGT() ||
this.readSlashGT() ||
this.readIF() ||
this.readElseIf() ||
this.readElse() ||
this.readEndIf() ||
this.readEach() ||
this.readEndEach() ||
this.readText() ||
this.readEOF() ||
this.error()
)
}

// read token methods
// ...

Tokenizer 会存储一个 index,标记当前识别到哪个字符位置。每次调用 nextToken 会先跳过所有的空白字符,然后尝试某一种类型的 token ,识别失败就会尝试下一种,如果成功就直接返回,并且把 index 往前移;所有类型都试过都无法识别那么就是语法错误,直接抛出异常。

具体每个识别的函数其实就是正则表达式的使用,这里就不详细展开,有兴趣可以阅读源码 tokenizer.js

最后会把这样的文章开头的模板例子转换成下面的 tokens stream:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{ type: 10, label: 'div' }
{ type: 8, label: '>' }
{ type: 10, label: 'h1' }
{ type: 8, label: '>' }
{ type: 1, label: '{title}' }
{ type: 13, label: '</h1>' }
{ type: 10, label: 'ul' }
{ type: 8, label: '>' }
{ type: 6, label: '{each users as user i}' }
{ type: 10, label: 'li' }
{ type: 11, label: 'class' }
{ type: 12, label: '=' }
{ type: 13, label: 'user-item' }
{ type: 8, label: '>' }
{ type: 10, label: 'img' }
{ type: 11, label: 'src' }
{ type: 12, label: '=' }
{ type: 13, label: '/avatars/{user.id}' }
{ type: 9, label: '/>' }
{ type: 10, label: 'span' }
{ type: 8, label: '>' }
{ type: 1, label: 'NO.' }
{ type: 1, label: '{i + 1} - ' }
{ type: 1, label: '{user.name}' }
{ type: 13, label: '</span>' }
{ type: 2, label: '{if user.isAdmin}' }
{ type: 1, label: 'I am admin\r\n ' }
{ type: 4, label: '{elseif user.isAuthor}' }
{ type: 1, label: 'I am author\r\n ' }
{ type: 5, label: '{else}' }
{ type: 1, label: 'I am nobody\r\n ' }
{ type: 3, label: '{/if}' }
{ type: 13, label: '</li>' }
{ type: 7, label: '{/each}' }
{ type: 13, label: '</ul>' }
{ type: 13, label: '</div>' }
{ type: 100, label: '$' }

FOLLOW(Value) = {TK_ATTR_NAME, TK_GT, TK_SLASH_GT}

上面只求出了一些必要的 FIRST 和 FOLLOW 集,对于一些不需要预测的产生式就省略求解了。有了 FIRST 和 FOLLOW 集,剩下的编写递归下降的 parser 只是填空式的体力活。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var Tokenizer = require('./tokenizer')
var types = require('./tokentypes')

function Parser (input) {
this.tokens = new Tokenizer(input)
this.parse()
}

var pp = Parser.prototype

pp.is = function (type) {
return (this.tokens.peekToken().type === type)
}

pp.parse = function () {
this.tokens.index = 0
this.parseStat()
this.eat(types.TK_EOF)
}

pp.parseStat = function () {
if (
this.is(types.TK_IF) ||
this.is(types.TK_EACH) ||
this.is(types.TK_TAG_NAME) ||
this.is(types.TK_TEXT)
) {
this.parseFrag()
this.parseStat()
} else {
// end
}
}

pp.parseFrag = function () {
if (this.is(types.TK_IF)) return this.parseIfStat()
else if (this.is(types.TK_EACH)) return this.parseEachStat()
else if (this.is(types.TK_TAG_NAME)) return this.parseNode()
else if (this.is(types.TK_TEXT)) {
var token = this.eat(types.TK_TEXT)
return token.label
} else {
this.parseError('parseFrag')
}
}

// ...

完整的 parser 可以查看 parser.js。

抽象语法树(Abstract Syntax Tree)

递归下降进行语法分析的时候,可以同时构建模版语法的树状表示结构——抽象语法树,模板语法有以下的抽象语法树的节点类型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Stat: {
type: 'Stat'
members: [IfStat | EachStat | Node | text, ...]
}

IfStat: {
type: 'IfStat'
label: <string>,
body: Stat
elifs: [ElseIf, ...]
elsebody: Stat
}

ElseIf: {
type: 'ElseIf'
label: <string>,
body: Stat
}

EachStat: {
type: 'EachStat'
label: <string>,
body: Stat
}

Node: {
type: 'Node'
name: <string>,
attributes: <object>,
body: Stat
}

因为 JavaScript 语法的灵活性,可以用字面量的 JavaScript 对象和数组直接表示语法树的树状结构。语法树构的建过程可以在语法分析阶段同时进行。最后,可以获取到如下图的语法树结构:

完整的语法树构建过程,可以查看 parser.js 。

从模版字符串到 tokens stream 再到 AST ,这个过程只需要对文本进行一次扫描,整个算法的时间复杂度为 O(n)。

至此,Virtual-Template 的编译器前端已经完成了。

// => 3

这里需要通过语法树来还原 render 函数的函数体的内容,也就是 new Function 的第三个参数。

拿到模版语法的抽象语法树以后,生成相应的 JavaScript 函数代码就很好办了。只需要地对生成的 AST 进行深度优先遍历,遍历的同时维护一个数组,这个数组保存着 render 函数的每一行的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function CodeGen (ast) {
this.lines = []
this.walk(ast)
this.body = this.lines.join('\n')
}

var pp = CodeGen.prototype

pp.walk = function (node) {
if (node.type === 'IfStat') {
this.genIfStat(node)
} else if (node.type === 'Stat') {
this.genStat(node)
} else if (node.type === 'EachStat') {
...
}
...
}

pp.genIfStat = function (node) {
var expr = node.label.replace(/(^\{\s*if\s*)|(\s*\}$)/g, '')
this.lines.push('if (' + expr + ') {')
if (node.body) {
this.walk(node.body)
}
if (node.elseifs) {
var self = this
_.each(node.elseifs, function (elseif) {
self.walk(elseif)
})
}
if (node.elsebody) {
this.lines.push(indent + '} else {')
this.walk(node.elsebody)
}
this.lines.push('}')
}

// ...

CodeGen 类接受已经生成的 AST 的根节点,然后 this.walk(ast) 会对不同的节点类型进行解析。例如对于 IfStat 类型的节点:

1
2
3
4
5
6
7
{
type: 'IfStat',
label: '{if user.isAdmin}'
body: {...}
elseifs: [{...}, {...}, {...}],
elsebody: {...}
}

genIfStat 会把 ‘{if user.isAdmin}’ 中的 user.isAdmin 抽离出来,然后拼接 JavaScript 的 if 语句,push 到 this.lines 中:

1
2
var expr = node.label.replace(/(^\{\s*if\s*)|(\s*\}$)/g, '')
this.lines.push('if (' + expr + ') {')

然后会递归的对 elseifs 和 elsebody 进行遍历和解析,最后给 if 语句补上 }。所以如果 elseifs和 elsebody 都不存在,this.lines 上就会有:

1
['if (user.isAdmin) {', <body>, '}']

其它的结构和 IfStat 同理的解析和拼接方式,例如 EachStat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pp.genEachStat = function (node) {
var expr = node.label.replace(/(^\{\s*each\s*)|(\s*\}$)/g, '')
var tokens = expr.split(/\s+/)
var list = tokens[0]
var item = tokens[2]
var key = tokens[3]
this.lines.push(
'for (var ' + key + ' = 0, len = ' + list + '.length; ' + key + ' < len; ' + key + '++) {'
)
this.lines.push('var ' + item + ' = ' + list + '[' + key + '];')
if (node.body) {
this.walk(node.body)
}
this.lines.push('}')
}

最后递归构造完成以后,this.lines.join(‘\n’) 就把整个函数的体构建起来:

1
2
3
4
5
6
7
if (user.isAdmin) {
...
}

for (var ...) {
...
}

这时候 render 函数的函数体就有了,直接通过 new Function 构建 render 函数:

1
2
var code = new CodeGen(ast)
var render = new Function('el', 'data', code.body)

el 是需要注入的构建 Virtual-DOM 的构建函数,data 需要渲染的数据状态:

1
2
var svd = require('simple-virtual-dom')
var root = render(svd.el, {users: [{isAdmin: true}]})

从模版 -> Virtual-DOM 的 render 函数 -> Virtual-DOM 的过程就完成了。完整的代码生成的过程可以参考:codegen.js

})

完整的 Virtual-Template 源码托管在 github 。

6 结语

这个过程其实和 ReactJS 的 JSX 差不多。就拿 Babel 的 JSX 语法实现而言,它的 parser 叫 babylon。而 babylon 基于一个叫 acorn 的 JavaScript 编写的 JavaScript 解释器和它的 JSX 插件 acorn-jsx。其实就是利用 acorn 把文本分割成 tokens,而 JSX 语法分析部分由 acorn-jsx 完成。

Virtual-Template 还不能应用于实际的生产环境,需要完善的东西还有很多。本文记录基本的分析和实现的过程,也有助于更好地理解和学习 ReactJS 的实现。

(全文完)

JavaScript深入之从原型到原型链【转载】

本文转载自冴羽博客javascript专题系列,相信会给研读的小伙伴柳暗花明之感。

JavaScript深入之从原型到原型链

JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的原型的原型是什么,就来看看这篇文章吧。

构造函数创建对象

我们先使用构造函数创建一个对象:

1
2
3
4
5
6
function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。

很简单吧,接下来进入正题:

prototype

每个函数都有一个 prototype 属性,就是我们经常在各种例子中看到的那个 prototype ,比如:

1
2
3
4
5
6
7
8
9
10
function Person() {

}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那这个函数的 prototype 属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 person1 和 person2 的原型。

那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型”继承”属性。

让我们用一张图表示构造函数和实例原型之间的关系:

在这张图中我们用 Object.prototype 表示实例原型。

那么我们该怎么表示实例与实例原型,也就是 person 和 Person.prototype 之间的关系呢,这时候我们就要讲到第二个属性:

__proto__

这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入:

1
2
3
4
5
function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

于是我们更新下关系图:

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个 constructor 属性指向关联的构造函数。

为了验证这一点,我们可以尝试:

1
2
3
4
function Person() {

}
console.log(Person === Person.prototype.constructor); // true

所以再更新下关系图:

综上我们已经得出:

1
2
3
4
5
6
7
8
9
10
function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

了解了构造函数、实例原型、和实例之间的关系,接下来我们讲讲实例和原型的关系:

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

原型的原型

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

1
2
3
var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

所以原型对象是通过 Object 构造函数生成的,结合之前所讲,实例的 __proto__ 指向构造函数的 prototype ,所以我们再更新下关系图:

原型链

那 Object.prototype 的原型呢?

null,我们可以打印:

1
console.log(Object.prototype.__proto__ === null) // true

然而 null 究竟代表了什么呢?

引用阮一峰老师的 《undefined与null的区别》 就是:

null 表示“没有对象”,即该处不应该有值。

所以 Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型,其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最后一张关系图也可以更新为:

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

补充

最后,补充三点大家可能不会注意的地方:

constructor

首先是 constructor 属性,我们看个例子:

1
2
3
4
5
function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时,其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时,会从 person 的原型也就是 Person.prototype 中读取,正好原型中有该属性,所以:

1
person.constructor === Person.prototype.constructor

__proto__

其次是 __proto__ ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.__proto__ 时,可以理解成返回了 Object.getPrototypeOf(obj)。

真的是继承吗?

最后是关于继承,前面我们讲到“每一个对象都会从原型‘继承’属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:

继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

JavaScript深入之词法作用域和动态作用域

https://github.com/mqyqingfeng/Blog

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

前端都了解的配色策略

在色彩设计应用中,我们对颜色不同程度的理解,影响到设计页面的表现。可是这跟前端有什么联系么?不是设计师的事情么?

可试想一下如果某些情况下我们需要脱离脱离设计师,比如我们需要做些赏心悦目的示例分享,除了将交互、逻辑做好,没有优雅的配色和设计,可能你的分享会显得苍白无力,下面直入正题。

颜色理论(Color theory)

三原色:指色彩中不能再分解的三种基本颜色,我们通常说的三原色,即红、黄、蓝。三原色可以混合出所有的颜色,同时相加为黑色,黑白灰属于无色系。色彩中颜料调配三原色混合色为黑色。

红+黄=橙、黄+蓝=绿、蓝+红=紫

色环(Color Wheel):又称色轮、色圈,是将可见光区域的颜色以圆环来表示,为色彩学的一个工具,一个基本色环通常包括12种不同的颜色。

配色策略

在理解的色环之后,在前人的总结和指引下,就衍生出了一些配色策略。注意每一种配色策略都可以因饱和度、明度的变化产生数不清的配色方案。比如下面的相似色两种配色方案,基本颜色就是四种(主色、辅色、点睛、背景)

可以发现它们对应颜色的色相变化值都不超过30,在提升或降低饱和度之后形成的颜色变化从而形成不同配色方案。

配色策略提供的一种指引,具体的颜色值确定靠的更多是灵感和视觉审美。

关于主色调、辅色调、点睛色、背景色

主色调
页面色彩的主要色调、总趋势,其他配色不能超过该主要色调的视觉面积。(背景白色不一定根据视觉面积决定,可以根据页面的感觉需要。)

辅色调
仅次与主色调的视觉面积的辅助色,是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。

点睛色
在小范围内点上强烈的颜色来突出主题效果,使页面更加鲜明生动。

背景色
衬托环抱整体的色调,协调、支配整体的作用。

配色工具

Adobe出品的一个在线配色工具,上边列出了海量的配色方案供我们使用,如果你不满足,也可以试下上传图片建立自己的配色方案,只需上传一张图片,网站便可自动提取图片颜色生成配色方案。

网页版地址:

Kuler也有PS插件,使用方式参考这篇文章教你使用最受欢迎的配色小工具Kuler

其他配色工具:
Color Scheme Designer:高级在线配色工具

更多的配色工具参考:国外最好的22个配色网站

如何巧用色彩打造动人心弦的网页设计

基于bmob后端云微信小程序开发

人的一生90%的时间都在做着无聊的事情,社会的发展使得我们的闲暇时间越来越多,我们把除了工作的其他时间放在各种娱乐活动上 。

程序员有点特殊,他们把敲代码看成娱乐活动的一部分,以此打发时间的不占少数。这不最近无聊搞了一个口袋吉他小程序,使用七牛

关于bmob小程序开发文档请戳这里,文档详细简练,主要是缩短了开发周期,不过对于复杂的项目,还是推荐使用自己服务器提供数据服务。

https://github.com/alex1504/wx-guita_tab

下面分点分享下小程序的开发过程中的关键点及感受,说明:

  1. 小程序标签统称组件,Html标签统称元素。
  2. 部分内容会与vuejs及jQuery作对比

}

定义通用icon样式,定义伪元素

1
2
3
4
5
6
7
.icon{
display: inline-block;
font-family: 'iconfont';
}
.icon-home::before{
content: "\e600";
}

使用

1
<view class="icon icon-home"</view>

input>

1
2
3
4
5
bindSearchInput(e) {
this.setData({
searchTxt: e.detail.value
})
}

小程序中的事件处理器并不能像vue一样传入参数,因为事件处理器只有一个默认的参数event对象,在for循环的组件中如果要想获取元素绑定的id,可以通过和jQuery相同的方式绑定data属性。

1
2
3
4
5
6
7
8
<!-- 轮播图 -->
<swiper indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
<block wx:for="banner_list" wx:key="index">
<swiper-item bindtap="navigateToDetail" data-id="itemhref">
<image src="itemimage" class="slide-image" mode="widthFix"></image>
</swiper-item>
</block>
</swiper>

获取id:

1
2
3
4
//事件处理函数
navigateToDetail: function (e) {
const id = e.currentTarget.dataset.id;
}

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle

对应阻止冒泡事件将bind用catch替代

})

正确做法:

1
2
3
4
5
6
setSongFlag(e) {
// 注意setData属性名[]中的非整数值会被识别为变量
let key = 'searchSongs[' + index + '].love_flag'
this.setData({
[key]: 2
})

关于image组件

小程序wxss的background-image及image组件都不支持本地url
在H5的开发中,通常我们会将页面一些不需要根据容器大小来选择显示方式的图片使用img标签,需要一些特殊显示方式的使用background。但小程序只需要image组件便可。它提供的mode属性和背景定义图片及img元素控制图片显示方式对比

mode属性 background-size html img元素
scaleToFill 100%,100%(默认) width:100%;height:100%
aspectFit contain js实现
aspectFill cover js实现
widthFix 100%, auto width: 100%;

其他的top、bottom、right、left等不缩放图片调整位置的属性与background-position作用相同,img元素则只能通过定位控制。

}

小程序问题

  • 调试器没有css快捷提示功能和颜色面板,影响布局及颜色调整效率(随性派)
  • 无法引入第三方js库
  • 内置组件单调,没有考虑字体数量比较多时的自适应情况
  • 不支持跳转外部链接
  • 背景图片或者image组件不能用本地图片

关于小程序审发布或更新

小程序上线需要经过审核、发布两个过程。
审核通过后有全量更新、或者分阶段发布,小程序才会更新,首次发布没有选项。

全量发布:即时向全量微信用户发布新版小程序。
分阶段发布:新版小程序将在15天内以开发者自定义比例,向微信用户发布更新
详情见知乎:发布小程序时选择全量发布和分阶段发布是什么意思?

不得不说小程序审核速度是非常快的,即便是个人申请(相比以企业账号申请会有应用服务类型限制),通常小程序没有涉及政策不允许的内容或者超过小程序允许的应用服务类型,都是可以顺利通过,初次体验,即便在国庆期间,也是有工作团队进行审核,审核时间通常在几小时内。

历史更新日志可以看到,无论是开发工具、基础库、与原生硬件交互API都在不断的更新或者修复异常bug,有时间希望做些与硬件交互更有趣的小程序和大家分享。

这个简易小程序将加入评论功能,用户系统功能、曲谱本地收藏、分享、改善图片加载、滑动位置保存等功能及问题,借此熟悉小程序开发以便做出更有趣的东西出来,因此本篇文章随开发过程持续更新。
希望这篇分享对你有所帮助,更希望能与同样热爱前端的你交流心得体会抑或工作经历、困扰等,欢迎知乎私信或邮件交流。

知乎:me@huzerui.com

关于Blob、FileReader、FormData的那些事

MDN上有这样一段描述:

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。

引用中的关键词是保存着原始数据的类似文件的对象,所谓类似文件的对象可以理解为这种对象本身不是文件,但可以从原始数据解析出文件数据。

既然要解析,就需要知道Blob对象的类型,所以创建Blob的时候第二个参数就是配置项,我们可以配置所有new Blob( array, options );

  • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob.
  • options 是一个可选的Blob熟悉字典,它可能会指定如下两种属性:
    • type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。
    • endings,默认值为”transparent”,它代表包含行结束符\n的字符串如何被输出。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的惯例,或者 “transparent”, 代表会保持blob中保存的结束符不变

Blob创建出来,那JS种如何读取或者说从原始数据解析出文件数据呢?从Blob中读取内容的唯一方法是使用FileReader

fileReader.readAsDataURL(file)

这个过程跟预加载图片的过程相同,生成实例->监听->开始加载,上面的例子以读取文件为例,使用readAsDataURL的方法,FileRader还有三种读取为其他数据类型的方法:

方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsBinaryArray file 将文件读取为二进制数组
readAsText file[, encoding] 按照格式将文件读取为文本,encode默认为UTF-8
readAsDataURL file 将文件读取为DataUrl

另外还有一个abort方法用于阻止文件读取

我们知道Image对象读取图像的事件有onload、onerror、onabort,而FileReader除了这三个事件,还新增了三个对过程的监听事件,onloadstart、onprogress、onloadend,但实际上新增的事件使用的并不多,主要用于大文件读取时进度条实现的需求上。

在onprogress的事件处理器中,有一个ProgressEvent对象,这个事件对象实际上继承了Event对象,提供了三个只读属性:

  • lengthComputable
  • loaded (已读取的字节数)
    • total (总字节数)

其中事件的lengthComputable属性代表文件总大小是否可知。如果 lengthComputable 属性的值是 false,那么意味着总字节数是未知并且 total 的值为零。

看到这些是否感觉似曾相识,“蓦然回首,那人却在灯火阑珊处”。没错,使用ajax上传文件的时候也有同样的事件钩子,XMLHttpRequest Level 2中,xhr的progress事件用于异步请求进度的监听,上传的进度事件绑定在xhr的upload属性中,在异步上传文件时我们可以这样监听进度:

1
2
3
4
5
6
7
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
$progress.css('width', percentComplete + '%');
}
};

同样地,我们只需要为onprogress事件添加处理器就获取文件读取的进度。

1
2
3
4
function progressHandler(e) {
var percentLoaded = Math.round((e.loaded / e.total) * 100);
$progress.css('width', percentLoaded + '%');
}

FileReader和文件密不可分,既然说到文件上传,就再说一下多文件上传、拖拽上传

}

这是将所有的文件发送一次异步请求,而我们监听的进度也是所有文件上传的总进度,如果我们需要单独监听单个文件的上传进度,只需改成递归的方式依次发送请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var fileInput = document.getElementById("myFile");
var files = fileInput.files;
var i = 0;

var uploadFile = function(){
var formData = new FormData();
formData.append(files[i]);

xhr.open("POST", "/upload.php");

xhr.onload = function(){
if(this.status === 200){
//进行下一次请求
i++;
if(i != files.length){
uploadFile()
}
}
}
// 如果要监听进度
xhr.upload.onprogress = progressHandler

xhr.send(formData);
xhr = null;

}

HTML 拖放 API

  • drag : 元素被拖拽时由拖拽元素频繁触发的事件
  • dragstart : 拖拽时开始时由拖拽元素触发的事件
  • dragend : 拖拽结束时触发由拖拽元素的事件
  • dragover : 当拖拽元素进入放置区域时由放置元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragenter : 当拖拽元素进入放置区域时由放置元素触发的事件
  • dragleave : 当拖拽元素离开放置区域时由放置元素触发的事件
  • drop : 当拖拽元素在放置区域放置时由放置元素触发的事件

持续触发的事件:drag和dragover
发生在拖拽元素的事件:drag、dragstart、dragend
发生在放置元素的事件:dragover 、dragenter 、dragleave、drop
事件触发次序:dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

当我们拖放文件到浏览器中时,浏览器默认的行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上,因此需要阻止dragenter、dragover、drop的默认行为,这样才能使drop事件被触发。(最好同时阻止冒泡)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var dropArea;

dropArea = document.getElementById("dropArea");
dropArea.addEventListener("dragenter", handleDragenter, false);
dropArea.addEventListener("dragover", handleDragover, false);
dropArea.addEventListener("drop", handleDrop, false);

function handleDragenter(e) {
/*若要兼容ie
window.event? window.event.cancelBubble = true : e.stopPropagation();
window.event? window.event.returnValue = false : e.preventDefault();*/
e.stopPropagation();
e.preventDefault();
}

function handleDragover(e) {
e.stopPropagation();
e.preventDefault();
}

function handleDrop(e) {
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;
var files = dt.files;

// FileReader将图片读取为dataUrl并立刻展示..省略
}

值得注意的是:触发dragstart事件后,其他元素的mousemove、mouseover、mouseenter、mouseleaver、mouseout事件均不会被触发。

上面拖拽回调中的事件对象,继承自 MouseEvent 对象,它的dataTransfer属性保存着拖拽对象的相关信息。

DataTransfer对象有几个重要的属性,其中files属性保存文件的数据。
effectAllowed 和 dropEffect 最主要的作用是,用于配置拖拽操作过程中鼠标指针的类型以便提示用户后续可执行怎样的操作;其次的作用是,控制 drop 事件的触发与否。当显示禁止的指针样式时,将无法触发目标元素的 drop 事件。

注意:只能在dragstart中设置effectAllowed,只能在dragover中设置dropEffect

拖拽后通过FileReader读取立刻显示图片优化体验,因为用户可能需要确定是否更换图片,然后单击按钮才将图片,这样可以防止不必要的请求,接下来就是上文提到的FormData上传文件,这里不再赘述。

vuejs开发H5页面总结

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验。

可伸缩布局方案效果更好且更容易使用。

网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小。

淘宝的方案总结为:根据设备设备像素比设置scale的值,保持视口device-width始终等于设备物理像素,接着根据屏幕大小动态计算根字体大小,具体是将屏幕划分为10等分,每份为a,1rem就等于10a。

通常我们会拿到750宽的设计稿,这是基于iPhone6的物理分辨率。有的设计师也许会偷懒,设计图上面没有任何的标注,如果我们边开发边量尺寸,无疑效率是比较低的。要么让设计师标注上,要么自食其力。如果设计师实在没有时间,推荐使用markman进行标注,免费版阉割了一些功能(比如无法保存本地)不过基本满足了我们的需求了。

标注完成后开始写我们的样式,使用了淘宝的lib-flexible库之后,我们的根字体基准值就为750/100*10 = 75px。此时我们从图中若某个标注为100px,那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率,可以使用px转化为rem的插件。如果你使用sublimeText,可以用

使用rem单位注意以下几点:

  1. 在所有的单位中,font-size推荐使用px,然后结合媒体查询进行重要节点的控制,这样可以满足突出或者弱化某些字体的需求,而非整体调整。
  2. 众向的单位可以全部使用px,横向的使用rem,因为移动设备宽度有限,而高度可以无限向下滑动。但这也有特例,比如对于一些活动注册页面,需要在一屏幕内完全显示,没有下拉,这时候所有众向或者横向都应该使用rem作为单位。如图:

    左图的表单高度单位由于下边空距较大,使用px在不同屏幕显示更加;而右边的活动注册页由于不能出现滚动条,所有的众向高度、margin、padding都应该使用rem。
  3. border、box-shadow、border-radius等一些效果应该使用px作为单位。

基于接口返回数据的属性注入

可能大家不明白什么叫”基于接口返回数据的属性注入”,在此之前,先说一下表单数据的绑定方式,一个重要的点是有几份表单就分开几个表单对象进行数据绑定

已上图公积金查询为例,由于不同城市会有不同的查询要素,可能登陆方式只有一种,也可能有几种。比如上图有三种登陆方式,在使用vue布局时,有两种方案。一是只建立一个表单用于数据绑定,点击按钮触发判断;而是有几种登陆方式建立几个表单,用一个字段标识当前显示的表单。由于使用第三方的接口,一开始也没有先进行接口返回数据结构的查看,采用了第一种错误的方式,错误一是每种登陆方式下面的登陆要素的数量也不同,错误二是数据绑定在同一个表单data下,当用户在用户名登陆方式输入用户名密码后,切换到客户号登陆方式,就会出现数据错乱的情况。

解决完布局问题后,我们需要根据设计图定义一些状态,比如当前登陆方式的切换、同意授权状态的切换、按钮是否可以点击的状态、是否处于请求中的状态。当然还有一些app穿过来的数据,这里就忽略了。

1
2
3
4
5
6
7
8
data: {
tags: {
arr: [''],
activeIndex: 0
},
isAgreeProxy: true,
isLoading: false
}

接着审查一下接口返回的数据,推荐使用chrome插件postman,比如呼和浩特的登陆要素如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
"code": 2005,
"data": [
{
"name": "login_type",
"label": "身份证号",
"fields": [
{
"name": "user_name",
"label": "身份证号",
"type": "text"
},
{
"name": "user_pass",
"label": "密码",
"type": "password"
}
],
"value": "1"
},
{
"name": " login_type",
"label": "公积金账号",
"fields": [
{
"name": "user_name",
"label": "公积金账号",
"type": "text"
},
{
"name": "user_pass",
"label": "密码",
"type": "password"
}
],
"value": "0"
}
],
"message": "登录要素请求成功"
}

可以看到呼和浩特有两种授权登陆方式,我们在data中定义了一个loginWays,初始为空数组,接着methods中定义一个请求接口的函数,里面就是基于返回数据的基础上为上面fields对象注入一个input字段用于绑定,这就是所谓的基于接口返回数据的属性注入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
methods: {
queryloginWays: function(channel_type, channel_code) {
var params = new URLSearchParams();
params.append('channel_type', channel_type);
params.append('channel_code', channel_code);
axios.post(this.loginParamsProxy, params)
.then(function(res) {
console.log(res);
var code = res.code || res.data.code;
var msg = res.message || res.data.message;
var loginWays = res.data.data ? res.data.data : res.data;
// 查询失败
if (code != 2005) {
alert(msg);
return;
}
// 添加input字段用于v-model绑定
loginWays.forEach(function(loginWay) {
loginWay.fields.forEach(function(field) {
field.input = '';
})
})
this.loginWays = loginWays;
this.tags.arr = loginWays.map(function(loginWay) {
return loginWay.label;
})
}.bind(this))
}
}

即使返回的数据有我们不需要的数据也没有关系,这样保证我们不会遗失进行下一步登陆所需要的数据。

这样多个表单绑定数据问题解决了,那么怎么进行页面间数据传递?如果是app传过来,那么通常使用URL拼接的方式,使用window.location.search获得queryString后再进行截取;如果通过页面套入javaWeb中,那么直接使用”${字段名}”就能获取,注意要js中获取java字段需要加双引号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
computed: {
// 真实姓名
realName: function() {
return this.getQueryVariable('name') || ''
},
// 身份证
identity: function() {
return parseInt(this.getQueryVariable('identity')) || ''
},
/*If javaWeb
realName: function() {
return this.getQueryVariable('name') || ''
},
identity: function() {
return parseInt(this.getQueryVariable('identity')) || ''
}*/
},
methods: {
getQueryVariable: function(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
}


陕ICP备19008946号-1         陕公网安备 61040202000450号