Skip to content

VSCODE插件推荐

本文从一款前端开发编辑器的基本需求出发,推荐在VSCODE使用过程中让人愉悦的一些插件。

本文目录


  • 代码补全
  • 运行调试
  • 代码同步
  • 生产化
  • 效率
  • 编辑器主题

前言

如何在VSCODE中安装插件
  1. Ctrl + Shift + P 或者点击左侧快捷图标打开扩展(Extentions)。
  2. 选择 “Extensions: Install Extensions”。
  3. 在左侧搜索需要的插件安装即可。
多设备

你需要用 Settings Sync 这个插件在不同的设备同步你的
VSCODE 设置和插件。

1 代码补全

HTML Boilerplate

通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。
image

HTML Snippets

超级实用且初级的 H5代码片段以及提示
image

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索
image

Path Intellisense

自动路劲补全,默认不带这个功能的,赶紧装
image

2 运行调试

Open In Browser

由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firefox,Chrome,IE)中打开命令面板选项。
image

Quokka.js

Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。
image

Regex Previewer

实时测试正则表达式。
image

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试。

jQuery Code Snippets

jquery 重度患者必须品,废话不多说,上图
image

3 代码同步

Git

VSCODE 自带了git功能,非常方便。

FTP

4 生产化

Prettier – Code formatter

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯!
image

minify

压缩合并 JavaScript 和 CSS 文件。
image

5 效率

vscode-faker

Faker 是一个流行的 JavaScript 库,能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码,或者经典的乱数假文段落,并且每个类别还包含了各种子类别,你可以根据自身的需求来使用这些数据。
image

CSS Peek

使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
image

Color Info

鼠标悬停在 CSS 的颜色值上,就可以预览颜色以及 HEX、RGB、HSL、CMYK等信息。
image

SVG Viewer

支持在编辑器直接打开 SVG 文件。
image

TODO Highlight

在注释里面写关键字,就能够更方便的查看注释,还可以自定义样式。
image

change-case

快速按照一定规则修改文本。
image

Beautify

格式化代码的工具

6 编辑器主题(Themes)

vscode-icons

让 vscode 资源树目录加上图标,必备良品!
image

Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
image

Material Icon Theme
Monokai++

用 Sublime Text 的时候就习惯了这个主题

Material

冷门、好看、实用。此主题已停更许久
image

Dracula

目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~
image

One Dark Pro

源于Atom,老版本的Atom One Dark主题可以扔了.
image

Bimbo

image

7 其他

npm

运行npm命令

Npm Intellisense

require 时的包提示(最新版的vscode已经集成此功能)
image

Document this

js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)
image

ESlint

ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,
详情配置

HTMLHint

html代码检测
image

Project Manager

在多个项目之前快速切换的工具

Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。
image

GitLens

丰富的git日志插件
image

fileheader

顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
image

filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
image

Bracket Pair Colorizer

让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
image

vetur

语法高亮、智能感知、Emmet等
image

VueHelper

vue代码提示插件,包括了vue2所有api,vue-router2和vuex2的代码提示

// 首选项-设置-用户设置配置: 
// 小程序语法高亮: 
"files.associations": { 
"*.vue": "vue", 
"*.wpy": "vue", 
"*.wxml": "html", 
"*.wxss": "css" 
}

// 个人习惯配置: 
"editor.lineHeight": 26, // 行高 
"editor.fontSize": 16, // 字体 
"editor.wordWrap": "on" // 自动换行 
"editor.formatOnSave": true // 保存自动格式化代码

image

Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助
image

Auto Close Tag — 自动闭合HTML标签

Auto Rename Tag

修改HTML标签时,自动修改匹配的标签

background

背景

Beautify css/sass/scss/less

代码高亮

Easy Sass

scss/sass文件保存可自动生成并同步编译成同名css文件

Easy WXLESS

微信小程序WXSS文件专用,保存可自动生成并同步编译成同名css文件

File Peek

鼠标移到路径名按住ctrl可打开文件

Git History

git log

GitLens

显示文件最近的commit和作者,显示当前行commit信息

HTML Class Suggestions

类名命名提示

Indenticator

缩进高亮

IntelliSense for CSS class names

CSS类名智能命名提示

JavaScript (ES6) code snippets

JS语法提示

JavaScript Snippet Pack — 代码片段(Tab或者Enter补全),Console命令,DOM

文档对象模型,Loop,Function,Timer,NodeJS,BDD,Misc

Live Server

http服务器(相当于使用nodejs的http-server,首选项-设置-用户设置可配置更改端口:”liveServer.settings.port”: 8999)

Output Colorizer

彩色输出信息

px2rem

px值转rem

stylelint

CSS/SCSS/LESS检查工具

// 首选项-设置-用户设置配置: 
"stylelint.enable": true, 
"css.validate": false, 
"scss.validate": false 
Vetur

Vue语法高亮

VSCode Great Icons

文件图标(首选项-文件图标主题修改)

VSCode-Element-Helper

elementUI语法提示高亮

vue

Vue语法高亮(

// 首选项-设置-用户设置配置: 
"emmet.syntaxProfiles": { 
  "vue-html": "html", 
  "vue": "html" 
}
Vue 2 Snippets

基于最新的 Vue 官方语法高亮文件添加了语法高亮,并且依据 Vue 2 的 API 添加了代码补全

Vue Peek

查找vue组件文件

下载和安装WebP格式转换工具

本系列文章由 Mukti 翻译自 Google WebP 官方网站
原文链接:https://developers.google.com/speed/webp/download
中文链接:https://feizhaojun.com/?p=1945

所有版本的下载包可以在谷歌的下载仓库中找到,其中包括:

已编译的WebP工具和库(适用于Linux、Windows 和 Mac OS X),包括

  • libwebp 库,可以用于在你的程序中添加WebP编码和解码。

  • cwebp — WebP 编码工具

  • dwebp — WebP 解码工具

  • vwebp — WebP 文件查看器

  • webpmux — WebP 复合工具

  • gif2webp — 将 GIF 图像转换为 WebP 的工具

安装说明 | Windows 下载 | Linux 下载 | Mac OS X 下载

已编译 WebP 框架(适用于 iOS)。构建细节请见 README。

下载

WebP 库和工具的源码。如果已编译的文件不符合你的需求,你可以使用源码自己编译。

安装说明 | 下载 | 最新版源码

除非有特殊说明, 本页内容遵从 CC BY 3.0 许可,代码示例遵从 Apache 2.0 许可,更多细节请查看 Google 网站政策
Google 官方原文更新日期:2016-04-26

webp:一种新的网络图片格式

本系列文章由 Mukti 翻译自 Google WebP 官方网站
原文链接:https://developers.google.com/speed/webp/
中文链接:https://feizhaojun.com/?p=1924

本文目录



WebP是一种现代 图像格式,可以为网络上的图像提供高品质的 无损和有损 压缩。网站管理员和开发人员可以使用WebP创建更小、更丰富的图片来提高网站的速度。

与PNG格式的图片相比,WebP格式的无损图像在体积上缩小了26%。在同样的SSIM图像质量指标下,WebP格式的有损图像比JPEG图像小了25-34%

无损的WebP支持透明度(也叫alpha通道),只需要额外22%的字节。如果能接受有损RGB压缩,有损的WebP也支持透明度,文件大小通常比PNG小3倍。

提供给网站管理员的更多信息

WebP的工作原理

有损WebP压缩使用预测编码对图像进行编码,与VP8视频编解码器用于压缩视频中的关键帧的方法相同。预测编码使用相邻像素块中的值来预测块中的值,然后仅对差异进行编码。

无损WebP压缩使用图片的已知部分来精确地重建新像素。如果没有找到目标匹配,它也可以使用本地调色板。

WebP 压缩技术详解

WebP文件由 VP8VP8L 图像数据和基于RIFF 的容器组成。独立的libwebp库提供了一个 WebP 的参考实例,可以到 git 仓库tarball 获取。

WebP支持

Chrome 和 Opera 以及许多其他的工具和软件库对 WebP 提供了原生支持。WebP 开发人员还增加了对各种图像编辑工具的支持。

WebP包括轻量级编码和解码库libwebp 以及命令行工具cwebp,dwebp用于将图像转换为WebP格式以及从WebP格式转换图像,以及用于查看,复用和动画WebP图像的工具。完整的源代码可在 下载页面上找到。

WebP 包括轻量级编码和解码库libwebp和命令行工具cwebpdwebp,用来将图片转成 WebP 格式以及从 WebP格式转成普通图片,同样也有查看、合成 WebP 图片以及创建 WebP 动画的工具。完整的源码可以在下载页找到。

WebP转换工具下载

下载 Linux, Windows or Mac OS X 系统下已编译的cwebp转换工具,将你喜欢的图片从 JPEG 和 PNG 转成 WebP。

Google 的 WebP 项目提供了一个讨论区,你可以去发表意见。

除非有特殊说明, 本页内容遵从 CC BY 3.0 许可,代码示例遵从 Apache 2.0 许可,更多细节请查看 Google 网站政策

Google 官方原文更新日期:2016-03-04

突破百度网盘下载限制

百度网盘下载速度被限制,最高都不到200KB/s,如果你想下载的快一点,就要开通超级会员(30元/月,不差钱点这里去开通)。

其实我们可以借助第三方工具来突破下载速度限制。

本方法需要在电脑上操作,手机无法进行

我是用的工具是 proxyee-down,这个软件不需要安装,下载解压就可以用。官方提供了百度云下载(https://pan.baidu.com/s/1fgBnWJ0gl6ZkneGkVDIEfQ 提取码:d92x),Window 和 Mac 版本都有。下载解压之后直接运行 proxyee-down.exe 就可以了。如果你需要这个软件详细的说明,点这里

proxyee-down 其实只是一个下载工具,只支持 http 链接,但是百度网盘里面文件的下载链接怎么取得呢?

这里使用一个 Chrome 插件 baidudl (在 Chrome Web Store 打开),前提是你是用 Chrome 浏览器,然后打开 https://chrome.google.com/webstore/detail/baidudl/lflnkcmjnhfedgibjackiibmcdnnoadb 安装。

安装以后在你的 Chrome 浏览器插件栏会出现一个图标,打开你的百度网盘,需要下载的文件所在的页面,然后点击这个图标,在展开的页面点击 Generate 就可以取得下载链接了。

然后复制链接到 proxyee-down 里面下载就可以了。

XD60客制化键盘DIY教程

据说每个男人心里都有一个机械键盘的梦想。

其实我是不太在意机械键盘的(可能我是个比较穷的程序员),但是我喜欢鼓捣好看的小玩意儿,你要说 ikbc Poker 这种键盘好用吗?我觉得没有数字键和方向键其实很不方便,但是确实很漂亮,颜值就足够吸引我了。

然后在搜索便携的机械键盘的时候我发现了 GH60 这种神奇的东西,正好看到一个改良版的 XD60 支持方向键和删除键,我的好奇心驱使我要搞一搞,但是自己DIY键盘要求动手能力,目前的教程又过于零散,于是我就整理了这篇文章。

背景知识

什么是 GH60 和 XD60?

大家知道标准的键盘上大概有104个键,包括了主要的字符键盘,以及最上面一排F键,右侧功能键、方向键,还有最右侧的数字小键盘。还有的键盘可能不是标准的104个,会加几个功能键(声音、电源等等)。

我们通常把这种标准键盘称为 100% 键盘。那什么是不标准的呢?有的键盘省略了右侧的数字键盘,但是保留了方向键,键位大概有80多个,那这种就叫做 80% 键盘。同样,如果把F键、右侧功能键(Insert、Home、PageUp等)、方向键也省掉,只剩下60多个键,就是 60% 键盘。

GH60 就是一种 60% 键盘,最早是2012年在 geekhack 论坛上,由一帮键盘爱好者开发的,键位在 60 个左右,也不是确定只有 60 个。

XD60 是一位叫 xiudi 的工程师根据 GH60 的改良版本。

步骤概要

  1. 购买零件。
  2. 组装。
  3. 刷固件。

所需零件及工具

零件

  1. 一个pcb板,电路板,如果是 xd60 只能选择这家:https://item.taobao.com/item.htm?spm=a1z09.2.0.0.62502e8dG4sn2L&id=537485105086&_u=k42u11ed19a
  2. XD60 或 GH60 适用的键盘外壳(底座)。
  3. 键盘轴体,樱桃的是最好的,为了便宜,我选择了佳达隆 Gateron,也就是平常说的 G轴,使用五脚轴,更稳固。
  4. 键帽。
  5. 卫星轴5个,1个长的(6.25X)用于空格键,4个小的(2X)用于Shift、Enter等。

工具

  1. 电络铁1把。
  2. 焊锡丝若干。

参考资料:

https://tieba.baidu.com/p/4978712249?red_tag=2221842070

web客户端缓存机制

Readme

如果你已经熟悉客户端的缓存机制,可以直接跳过,看最后一节的代码规范。

参考资料:

Bug 场景

比如我们在服务器发布了一个页面:http://domain.com/cate/page.html

在这个页面当中我们引入了一个样式文件 style.css

    <link rel="stylesheet" type="text/css" href="./css/style.css" />

这时候产品经理告诉你,页面需要把背景换成灰色。于是你迅速把修改后的 style.css 交给了发布,等发布的同事说OK了之后你欣喜雀跃的告诉产品:改完了!

产品打开浏览器,刷新了 page.html 并没有看到修改后的效果。

于是你又不得不告诉产品说:Ctrl+F5试试?

如果这是一个移动端页面,那就没有办法给产品经理的iPhone上装一个 Ctrl 和 F5 键了。

问题原因

简单来讲,当你访问一个页面的时候,页面引入的资源(assets)以及页面自身都会被浏览器下载到你自己的电脑上。当你再次访问同一个页面,你电脑的浏览器会先从你电脑中查找上一次的“访问痕迹”,如果有这个文件记录,就不会去服务器请求这个文件。

页面中的图片,音视频,外引js脚本、css文件都会被缓存。

当然,服务器端也会有缓存,这时候通过 Ctrl+F5 就无效了(本文不做讨论)。

为什么要缓存

  1. 用户不需要每次浏览都重新去服务器取文件,为服务器减轻了半数以上的压力。

  2. 从用户角度,大大缩短了网页的加载时间。

缓存规则

问题来了,如果浏览器缓存了文件,服务器文件有了更新,怎么通知浏览器更新文件呢?

1 缓存时效

我们可以在 http 头信息(header)里面设定该文件缓存的有效期。

打开 Chrome 的控制台,查看网络请求,我们会看到如下信息。

image

其中,Expires 和 Cache-Control 字段控制着这个文件在浏览器缓存的失效。Expires 指在这个时间点以前,这个文件缓存都是有效的。Cache-Control 中的 max-age 是说从 Date 字段的时间开始算,43200 秒以内,这个文件缓存是有效的。

Expires 是 HTTP1.0 就有的,max-age 是 HTTP1.1 提出的,所以低版本浏览器不支持 max-age。max-age 比 Expires 更好(因为一个时间长度比写死一个时间点更有灵活性,也更符合“有效期”的逻辑),优先级更高。

Expires 详情

Cache-Control 详情

这两个值在 html 页面中都是可以设置的。在 html 的 meta http-equiv 中可以设置文件的头信息。如:

<meta http-equiv="expires" content="1 Nov 2017" />

我们也可以设置不缓存这个页面,如:

<meta http-equiv="cache-control" content="no-cache">

后端语言在输出 html 的时候也可以设置相应的头信息(header)来控制缓存。下面是一个 JSP 示例:

<%
response.setHeader("expires","sat,6 May 1995 12:00:00 GMT"); //将expire时间设置为一个过去时间或0,-1等
response.setHeader("cache-control","no-store,no-cache,must-revalidadate"); //设置HTTP/1.1 cache-control头
response.addHeader("cache-control", "post-check=0,pre-check=0"); //设置IE 扩展HTTP/1.1 no-cache header
response.setHeader("Pragma", "no-cache"); //设置标准HTTP/1.0 no-cache header
%>

但是如果是其他资源文件(css、img、js等),我们可以通过web服务器配置来设置,比如 Nginx 可以通过在 .conf 文件中设置 Expires。下面代码分别为图片设置30天缓存、为 js 和 css 设置12小时缓存:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
    expires      30d;
}

location ~ .*\.(js|css)?$ {
    expires      12h;
}

那么,是不是缓存过期了,浏览器就会去服务器重新请求一份新的文件呢?其实也不是的。当缓存过期,浏览器会携带头信息去与服务器的该文件进行比对。如果有更新,就返回状态码 200,重新请求文件。如果服务器文件没有更新,就会返回状态码 304,浏览器依旧使用缓存中的文件,这样就不需要再从服务器下载一份 http 的主体信息(body)。

2 状态码 304

如果缓存已经过期,浏览器在 Request 的时候,携带 ETag 和 Last-Modified 与服务器的文件进行比对。

image

如果服务器的文件在 Last-Modified(上次修改)之后更新了服务器端的文件,就会重新下载文件主体信息,如果没有修改,服务器返回状态码 304,依旧从缓存读取文件。

ETag 是服务器资源的唯一标识符,比对的优先级高于 Last-Modified。

ETag 详情

无论是 Last-Modified 还是 Etag,可以减少传输成本,但是不会减少 http 请求数,也就是说,服务器的并发数不会少。

另外,前面提到的 Cache-control 中 max-age=0 表示缓存立马过期,请求服务器会返回 304(有缓存的前提)。Cache-Control 值为 no cache 表示总是请求服务器最新文件,不会返回 304。

3 状态码 200

状态码 200 是请求成功,这里不是说服务器请求成功,也包含了从缓存文件请求成功。

在 Chrome 浏览器,我们还会发现,状态码是 200 的文件,也会有 from memory cache(缓存到内存) 和 from disk cache(缓存到本地硬盘) 两种情况:

image

缓存到内存(memory)中的文件,加载的时间几乎是瞬间。

至于 Chrome 如何区分 from memory cache 和 from disk cache,目前我也不知道。

3 为什么 html 页面很少遇到文件不更新的 bug?

我们遇到不更新的 bug 的时候,多数是页面外引的css和js,而页面本身做了修改,只需要刷新一下就可以更新,并不需要 Ctrl+F5 强制刷新。

这是因为点击浏览器的刷新按钮(包括微信浏览器->右上角->刷新),或者新开窗口,或者地址栏敲回车,都会重新请求 html 页面(IE8以下可能有出入,但是刷新按钮肯定会重请求)。

用户基本上已经习惯了刷新按钮,所以 html 极少遇到缓存bug(除非服务器端使用缓存),但是页面引入的其他资源就很难保证及时刷新了。

避免缓存

1 添加后缀

因为浏览器的 http 请求是基于 URL 来的,而且缓存机制不适用于 POST 方法,POST 是不会有缓存的。如果在请求文件的时候添加或修改携带的参数,浏览器就会认为这是一个新的文件,从而不考虑缓存,直接去请求。比如在地址栏请求新的 html 页面:

  • http://domain.com/sample/page.html?201711011801

或者在引入文件的时候使用:

<script src="./bundle.js?20171101114908"></script>
2 ajax

因为 ajax 可以设置头信息,所以在 ajax 中:

xmlHttpRequest.setRequestHeader(“If-modified-since”,”0″);
xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

jquery 使用 ajax 方法的时候设置 cache:false。

ajax 中也可以使用随机数参数。

3 后端

response.setHeader(“Cache-Control”,”no-cache,must-revalidate”);

4 POST

最后,因为浏览器的 http 请求是基于 URL 来的,缓存机制不适用于 POST,所以可以用 POST 代替 GET。

缓存负面影响

缓存损坏

image
image
image

有时候我们打开网站会发现页面失去了样式,这种情况多数原因是网络环境差(加载css失败)或者页面错误,也有极少可能是缓存在本地的 css 缓存被损坏了,浏览器使用了本地缓存,但是并不知道缓存已经失效,而是加载了一个无效的缓存文件。
当然,这种情况发生的概率小到可以忽略,就算发生了这种情况,我们可以把解决方案推给用户(用户只需要清除缓存或者使用 Ctrl+F5 强制刷新即可)。

不需要缓存的网站

个人观点认为:多数网站都被建议使用缓存,如果说要挑出一个例外,那应该是适用一条法则:
更新频率大于用户访问频率
比如股票实时行情页面,秒杀页面……用户对于页面数据请求要保持最新,这样就必须要避免数据缓存。

代码规范

因为我们可以用强制刷新(Ctrl+F5),但是用户可能不会。开发人员一旦习惯强制刷新之后,就很容易忽略缓存问题。所以强制刷新不是好习惯,因为不是最大限度模拟用户行为。

  1. 在 html 中引入资源,包括媒体、CSS、JS,如果引入的资源文件是再次发布的,建议添加该文件的版本号(没有约定版本号可以使用时间串),如:
<script src="./bundle.js?20171101114908"></script>
  1. 在移动端,务必这么做。

  2. 额外的,因为 https 越来越成为主流,为了更好兼容,在使用绝对地址引入外部脚本和样式文件,切勿限定协议类型。如:

<script src="http://domain.com/js/foo.js"></script>

应该替换为:

<script src="//domain.com/js/foo.js"></script>

测试环境的临时解决方案

在测试的时候,每次修改一下版本号(随机数)都太麻烦。因为刷新按钮可以每次都去服务器请求文件,所以我们只要将修改的文件直接放到当前浏览器的地址栏,然后刷新一下页面就可以更新了(注意是和html页面同一个浏览器)。移动端也可以直接打开css或js文件的URI地址刷新一下。

前端使用WebViewJavascriptBridge实现JS与iOS、Android客户端交互

  1. JS 调用 native 的 handler(JS 发起请求)
window.WebViewJavascriptBridge.callHandler(
    'handlerName',  // 调用 native 的 handler
    data,   // 传数据给 native
    function(res) {
        // 接收 native 返回的数据 res
    }
);
  1. Native 调用 JS 的方法(提供 handler 给 native)
//注册事件监听
function connectWebViewJavascriptBridge(callback) {
  // Android
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady',
      function() {
        callback(WebViewJavascriptBridge)
      },
      false
    );
  }

  // iOS
  if (window.WebViewJavascriptBridge) {
    return callback(WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function(){
    document.documentElement.removeChild(WVJBIframe)
  }, 0);
}

connectWebViewJavascriptBridge(function(bridge) {
  // 注册一个 JavaScript Handler,native 调用时执行 H5 操作
  bridge.registerHandler("handlerName", function(data, responseCallback) {
     // 接收来自 native 的数据 data
     console.log(data);
     // 返回数据给 Native
     var res = "Response Data";
     responseCallback(res);
  });

  // Android初始化,必须
  bridge.init(function(message, responseCallback) {
     // 接收来自 native 的数据 message
     console.log(message);
     // 返回数据给 Native
     var res = "Response Data";
     responseCallback(res);
  });
});

当一个河南人说“都”的时候

“都 dōu”和“就 jiù”这两个字在我们日常中最熟悉不过了,简单到不足以立文以究其文法。

我们平时说话的时候,不需要考虑什么时态啊语法啊,几乎没有人会把这两个用错,更不会把这两个字用混。比如:

“我这都到了。”

语音 1

意思大概是说,老刘啊,我都已经到了,你怎么还不来?

如果是:

“我这就到了。”

语音 2

意思应该是说,老刘啊,我马上就要到了,你再等等。

都,是已完成;就,是即将进行。

但是情况在河南人身上发生了一些微妙的变化,当一个河南人说:

“我这都到了。”

(wō zhè dǒu dào le)

语音 3

他很可能在说:我就要到了。

其实,普通话和河南话在说“我这都到了”的时候,除了口音,语气上也有一些细微的差别。普通话(语音 1)当中,强调“到了”,河南话(语音 3)里面,强调“这”。“都”好像是前面“这”的附属语气词(虽然事实上也应该是后面动作“到”的一个副词)。

一个不说河南话的人和一个河南人面对面交流的时候,加上河南人的口音,可能也发现不了这个问题,但是当大家用文字交流的时候,一个河南人给你发过来“我这都到了”,可能你就会糊涂了。

当然,我们上面提到的所谓普通话,其实也是非常口语化的表达,如果正式一点:

我这都到了。

应该是:

我已经到了。

我这就到了。

应该是:

我马上就到了。

总之,在河南人眼里,“都”很可能是“就”的意思。

当然,在普通话当中,“我这都到了”还有一种可能性,就是重音放在“都”上面:

“我这都~到了”

语音 4

这句话的意思大概是:老刘啊,我这里这些人全部都已经到了,你还来不来?

这个时候的“都”就和时态没有太大关系,而是最基本的意思“全部”。

那么,“都”有多少种意思呢?

(这里,我们只说“都 dōu”字,不谈“都 dū”字。)
1. 全部:我们对你的爱都是满满的。
2. 从“全部”引申出来,与“是”合用表示原因:都是你的错。
3. 强调:1) 你看你来都来了。2) 你吃的比我都多。
4. 如我们前面所说,表示完成:我都到了。
在河南人的字典里应该还有一项:
5. 表示将要进行,同“就”:我马上都来了。

“就”字的意思就更多了

“就”的本意是“去往高处”(动词),比如:老刘就任新一届主席。

“就”除了动词,还可以是介词、连词、语气词,这些应该都是引申自动词“去往”。比如:

  • 介词:就这篇文章来看,你的观点还是不错的。
  • 连词,表示假设或让步:1) 就让他去吧。2) 就算是这样。
  • 语气词(其实我觉得应该是表示态度的副词),比如:我就要这样!

下面我们不考虑“就”作为以上的动词、介词、语气助词,只看它容易和“都”混淆的副词。

“就”作为副词的时候,应该也是引申自“去往”,所以可以表达“即将发生”,比如:春天就要来了。

“就”字在字典有以下释义:

  1. 表示即将发生:我这就到了。(正如我们上面背景交代的例子)
  2. 表示既定的:一个小时之前我就到了。(划重点,这里好像和前面提到的“都”字用法很像!)
  3. 表示事件连续性:我一下课就去了图书馆。(很像连词)
  4. 只:我就一个苹果。
  5. 表示无争议事实:你找的衣服就在桌上。
  6. 表示某种条件下有某种结果:码农不写代码就没有饭吃。(感觉这个像是连词)

上面提到的所有“就”字的副词释义,我觉得有些存有争议,比如 3 和 6 很像是连词,难于作为副词理解。不过我们也发现了,1 和 2 是容易和“都”字混用的。但是我们在平时交流中并没有发现表达、沟通的时候会有难度。因为很多词语在实际使用中,表意性不是很强烈,比如我们说:

“你这件衣服黑难看!”

“黑难看”是什么意思呢?我们看到书面这几个词可能很费解,但是实际说话的时候,如果“黑”字发音比较轻,听者会自动代入一个正确的字把“黑”字替换掉,于是这句话对方得到的信息大概是:

“你这件衣服很难看!”

“你这件衣服还难看!”

只要不是正式沟通场合,这个“黑”字不影响我们交流。这就说明,“黑”字在这个语境中,算是存在感比较弱的,我姑且叫它“表意性”不是很强烈。
上面说了,平时说话我们不会用错,但是一旦这个字成为没有语气的书面文字,就很容易被我们误解。(当然不止这些字,很多话书面表达,不带语气,都可能被阅读者理解成多种意思)。比如:

我一天就写了五行代码。

这句话的意思可能是:

  1. 我今天特别懒,一天只写了五行代码。
  2. 我很牛,仅仅用了一天的时间就写了五行代码。(当然,这个并不牛,所以结合常识,我们不会理解成这句,但是对于那些不知道一个程序员一天正常能写多少代码的人来说,就很容易误解成这句。)

如果你没有和一个讲河南话的人沟通,可能很难理解,他们说“我这都到了”怎么会是“我这就到了”的意思呢?

其实河南人的用法,在普通话当中也可以找到一些痕迹,为了帮助大家更好地体会,我们假设一个场景:

小明从小喜欢打羽毛球,为了响应国家“把爱好变成社会奉献”的号召,小明和他的同学刘穿越在居委会办了一个班,免费教大爷大妈们打羽毛球。这事儿让3号楼的王大爷知道了。王大爷是看着小明长大的,知道小明喜欢打羽毛球,但是他不认识小明的同学刘穿越,不知道刘穿越是不是和小明一样喜欢打羽毛球,就和小明聊天说:“好小伙子!真棒!我说,你那个同学也喜欢打羽毛球?” 这时候小明回答:

“对对对,王大爷,我们都喜欢这个。”

语音 5

小明是想告诉王大爷,他们两个人都是很喜欢打球的,小明喜欢,刘穿越也喜欢。

这事儿5号楼的李大妈也知道了。李大妈不太认识小明,但是李大妈对小明这两人的行为表示高度肯定,就表扬小明说:“好小伙子!真棒!你们花了自己的时间免费教我们,这是做好人好事啊!” 这时候小明回答:

“没什么的李大妈,我们都喜欢这个。”

语音 6

小明是想对李大妈的夸奖谦虚一下,告诉她说两个人就是好这口儿,做好事也是顺带的事情。

后者的“都”其实就是一个表意性不强烈的表达。但是上面这个场景下,主语就不能是单数了。比如只有小明一个人,他就只能说“我就喜欢这个。”而不是“我都喜欢这个。”

我们再回到河南人那里。

场景1:你的一个河南好朋友要出远门了,给你发消息说:

“我这都走了,你不来送送我吗?”

语音 7

意思是他就要走了。

场景2:我们假设他没有发消息给你,你主动问他要不要去送行一下,结果他回复说:

“我这都走了,你还来干么?”

语音 8

意思是他已经走了。

这两个送行场景,放到普通话里面,其实也都是说的通的。

场景1普通话版:

“我这都走了,你不来送送我吗?”

语音 9

普通话里这个“都”不是“就要”的意思,而是强调,这句话其实应该是这样的:

“我都要走了,你不来送送我吗?”

上面那句省略了“要”,加了口语化的助词“这”,这里“都”的意思是强调后面“要走”,但这个“都”也可以理解成“已经”。如果把“都”当做“已经”来讲,就是“我已经要走了”,虽然是将要发生的事情,但是是既定的事情,其实“已经”的意思也是强调,强调他要走的事实。汉语真的是博大精深啊!
场景2的普通话版就好理解了,“我这都走了,你还来干么?”符合我们日常表达习惯。

语音 10

如果我们把这两个字连起来用会怎么样?

你大学室友要结婚了,在群里问你们几个室友能不能及时参加婚礼,张三能不能赶到?李四呢?刘穿越呢?你在群里替大家回复说:

“等你结婚那天,我们都就到了。”

语音 11

意思是你替大家担保能赶到。你还可以说:

“等你结婚那天,我们就都到了。”

语音 12

意思其实相差不大,甚至没有区别。前者强调全部,不会有人不到。后者强调会及时到场,是对结婚那天这个假定条件的结果。

好的,以上就是全部。

另外的,我觉得“都”表示“全部”的时候也很有趣,这个字其实是连接了两个复数对象。比如:

“我们都喜欢你。”

主语“我们”是复数,宾语“你”是单数。

“我都喜欢。”

这里省略了宾语,“我”喜欢什么呢?喜欢的对象可能是“苹果和梨”:

“苹果和梨,我都喜欢。”

这时候宾语前置了,而且必须前置,如果说“我都喜欢苹果和梨”就会怪怪的。

“都”连接的两个对象,主语“我”是单数,宾语“苹果和梨”是复数。
上面两个例子说明,“都”连接的两个对象只要有一个是复数就可以了,而且,宾语是复数的时候,必须是有区别的。苹果和梨是有区别的,如果说:

“这两个苹果,我都喜欢。”

那这两个苹果肯定也是有不同的地方,不然就没法用“都”字了。

看完此文,是不是觉得不会说话了?

在电脑上通过Chrome调试安卓手机app中的webview以及移动端页面

如果需要调试 iOS 设备,移步这里

本文基于 Windows 10 操作系统,Mac OS 尚未实践


背景

如果我们开发一个移动端的网页,调试的时候我们可以在 Chrome 的 DevTools 中选择移动设备(Toggle device toolbar)。但是如果我们开发的是一个手机 app 内置的 webview 页面,或者想把网页放在真机中调试,则需要本文中的方法。

特别注意

首次调试可能要求翻墙。

在电脑上调试iOS设备webview以及iOS移动端页面

本文尚未完成。


TOP