SkyFly
0%

Posted on Edited on In

前言

我们在前端开发中经常需要使用 ChromeDevTool 来进行调试，我想大家经常会遇到这种场景：

  • 这里有一个字符串写错了，改一下就好了
  • 这里加个 if 判断保护一下就好了
  • 这里变量名写错了
    等等

在这些情况下我们往往只需要进行很少量的修改就可以修复一个 bug，但是切到编辑其中修复之后，我们又要跑一遍脚本或者在浏览器中打下一串地址（没有 hot-reload 的项目中），如果是混合移动的开发，我们还需要打包到真机上。这就是一个比较耗时的过程。何况当页面加载出来之后我们还要登陆，恢复现场才能调试一个小小的 bug。如果能在浏览器里面直接改动代码，马上恢复现场跑一下不就可以省去很多麻烦，chrome 的这个功能就会帮到你。

步骤如下

  1. 首先打开 ChromeDevTool，切换到 Sources Tab
  2. 在任意文件上单击右键 Add Folder to Folder，将包含所需要代码文件夹包含到工程中（这时 Chrome 会提示需要获得该文件夹的完全控制权限，这里点击 Allow）
  3. 在任意文件上单击右键，点击 Map to File System Resources
  4. 这时 Chrome 会提示用户重新载入开发者工具，点击 Ok 重新启动开发者工具。
  5. 然后就可以看到目录结构已经变成了我们的本地目录。command+p 搜索文件的时候也可以看到文件的路径变成本地路径了。这时在文件上进行修改，改动就会直接作用于本地的文件。而且修改后的文件可以直接用于调试而无需重新启动应用（浏览器调试和真机调试均是如此）。

Posted on Edited on In

yargs（官方地址） 是一个比较好用的 node 命令行参数处理工具。他可以让我们摆脱处理参数的麻烦。最近做一个项目的工作流改进用到了这个库，遇到了一个坑，在这里记录一下。

接受用户输入的参数时候需要对必要的参数进行检查，如果没有输入则需要结束流程，并提示用户传入所需参数。按照 yargs 的文档来看应该这样做

1
2
3
4
5
6
7
var argv = require('yargs')
    .usage('Usage: $0 <command> [options]')
    .demandOption('p', 'command -p is needed')
    .demandCommand(1, 'command -p is needed')
    .help('h')
    .alias('h', 'help')
    .argv;

但是这样做并不起作用，当我们不传参数直接执行命令的时候，依然直接跑了下去。这并不符合我们的预期，在多方查找之后，终于在 yargs 的 issue 里面发现了这个解决方案。

简单来讲，这个解决方案就是叫我们在配置的时候加一个选项

1
.global('p')

这个选项的意思是，在命令执行后继续保留这个参数（蛤？），这样就可以解决这个问题了。

Posted on Edited on In

这次记录一个在 Chrome Dev Tool 中直接修改本地的源代码文件的方法。

前言

我们在前端开发中经常需要使用 ChromeDevTool 来进行调试，我想大家经常会遇到这种场景：

  • 这里有一个字符串写错了，改一下就好了
  • 这里加个 if 判断保护一下就好了
  • 这里变量名写错了
    等等

在这些情况下我们往往只需要进行很少量的修改就可以修复一个 bug，但是切到编辑其中修复之后，我们又要跑一遍脚本或者在浏览器中打下一串地址（没有 hot-reload 的项目中），如果是混合移动的开发，我们还需要打包到真机上。这就是一个比较耗时的过程。何况当页面加载出来之后我们还要登陆，恢复现场才能调试一个小小的 bug。如果能在浏览器里面直接改动代码，马上恢复现场跑一下不就可以省去很多麻烦，chrome 的这个功能就会帮到你。

步骤如下

  1. 首先打开 ChromeDevTool，切换到 Sources Tab
  2. 在任意文件上单击右键 Add Folder to Folder，将包含所需代码的文件夹包含到工程中（这时 Chrome 会提示需要获得该文件夹的完全控制权限，这里点击 Allow）
  3. 在任意文件上单击右键，点击 Map to File System Resources
  4. 这时 Chrome 会提示用户重新载入开发者工具，点击 Ok 重新启动开发者工具。
  5. 然后就可以看到目录结构已经变成了我们的本地目录。command+p 搜索文件的时候也可以看到文件的路径变成本地路径了。这时在文件上进行修改，改动就会直接作用于本地的文件。而且修改后的文件可以直接用于调试而无需重新启动应用（浏览器调试和真机调试均是如此）。

Posted on Edited on In

一些概念

TypeScript

强类型的 javascript

React

利用 jsx 实现 web 开发的组件化。

d.ts 文件

d.ts 文件是 typescript 的类型定义文件，ts 依靠这个文件来为 js 代码中的类型添加类型说明并提供类型检查
所有的类型定义文件基本都可以在这里找到

typings

https://github.com/typings/typings
typings 是一个 typescript 的类型定义管理工具，可以使用它来安装 js 框架的 d.ts 类型定义文件，这样在 ts 项目中使用 js 框架时候就会得到准确的类型定义。

准备工作

材料
node
npm

Read more »

Posted on Edited on In

几个基本的概念

![Highchart](../../../images/highchart-highchart.png)
名词 描述
Title 图表的标题
Axis 坐标轴
Series 数据列，表现为图表上呈现数据的形状
Tooltip 鼠标悬停在数据点上的时候显示的一个提示框
Legend 图例
Credits 版权信息
Exporting 导出图标的按钮
PlotLines 图表上的辅助线，比如图表背景的网格或者标识出某一点数据的指示线。
PlotBands 在某些数据区域上画出的分辨带
Crosshair 跟随鼠标在图表上显示的标线，是一个隶属于坐标轴的属性
Marker 用于标识数据的点，可以设置普通状态和悬浮状态的样式

一些 hack 的手段

在真实工作中，有些设计稿里面描绘的样式不能通过简单的调整 highchart 配置或者直接使用 highchart 的绘图接口进行绘图来实现（比如调整折线图中 crosshair 和 marker 的位置）。
通过阅读源代码，我 hook 到了一个十分好用的方法， 这个方法是 chart.tooltip.refresh，每当鼠标移动到图表范围内的时候，这个方法都会被调用，我们只需要 hook 这个方法，然后再其内部对 point 的数据进行更改就可以实现我们大部分的需求了。

例子

![Highchart](../../../images/highchart-chart.png)

这个是在我们需求中设计的一个图表样式，乍一看像是直方图，但又是个折线图。这里我们使用 area 面积图也就是折线图的样式来进行图表的配置。
我们注意到，这个图中 crosshair 和 marker 的位置和标准的 area 图中是有所区别的。标准的 area 图中这两东西都会显示在数据点的位置上，而在我们的图中，它们显示在了两个数据点的中间，这时候，我们 hook refresh 方法，在里面修改 point 的 plotX 值，再hook XAxis 的 drawCrosshair 方法，修改传入 drawCrosshair 中的 point 对象的 plotX 值。最后实现了居中的效果。

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 offset = chart.plotWidth / (chart.pointCount - 1) / 2;
var offsetCorsshair = function(e, point) {
    if (point) {
        var originX = point.plotX;
        point.plotX += offset;
        __drawCrosshair.call(this, e, point);
        point.plotX = originX;
    }
}


chart.tooltip.refresh = function(point, mouseEvent) {
    var __setState;
    if (point.length > 0) {
        var myPoint = point[0];
        __setState = myPoint.setState;

        var originX = myPoint.plotX;
        if (myPoint.x != 5) {
            myPoint.plotX += offset;
        } else {
            myPoint.plotX += offset * 2;
        }
        myPoint.setState = __setState;
        __refresh.call(this, point, mouseEvent);
        myPoint.plotX = originX;
        __xAxis.drawCrosshair = offsetCorsshair;
    }
};

Posted on Edited on In

Emmet 的前身是 Zen Coding，它提供了一套简单的语法来帮助前端开发快速地生成代码。最近有空学习了一下，这里做下记录。

体验一把

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="logo">
        <ul class="list">
            <li class="item"><a href="http://www.baidu.com">Baidu 1</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 2</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 3</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 4</a></li>
            <li class="item"><a href="http://www.baidu.com">Baidu 5</a></li>
        </ul>
    </div>
</body>
</html>

如何写出上面这段代码？使用 Emmet，只要下面这一行

1
!>.logo>ul.list>li.item*5>a[href="http://www.baidu.com"]{Baidu $}

把这段指令 copy 到 VSCode 中，光标移动到指令的末尾后按下 tab 就可以生成出以上的代码了，是不是很方便。

Read more »

Posted on Edited on In

搜索列表页面里面自动聚焦搜索框，键盘自动弹出，这个交互简直再正常不过了。给用户，尤其对于
iPhone 的 plus 系列用户来说，在操作上带来了很大的便利。但是在 iOS 的 UIWebview
十分坑爹，focus
事件不能在代码中触发。美其名曰防止用户被干扰，简直坑爹，导致这个需求在非原生的页面中根本无法实现，所以用户必须去点击一下搜索框才可以聚焦。

网上统一供了几种解决方案，我一一尝试过了，无效。看样子只有在 click
里面使用一个同步的方式才能触发 focus 事件，否则无效（在里面添加 timeout
异步触发也是失败）。

这时候我想起了 cordova Keyboard
插件，当我翻开他的源码时候，只见一位开发者绝望的写道：

1
2
3
- (void) show:(CDVInvokedUrlCommand*)command {
    NSLog(@"Showing keyboard not supported in iOS due to platform limitations.");
}

呵呵！

Posted on Edited on In

上周微信发布了微信·小程序功能，通过这个功能，开发者可以直接依托微信开发一个具有堪比原生 APP 体验的 WEB 应用。由于这个功能目前还处于邀请体验阶段，未受到邀请的开发者并不能直接看到 API 文档，不过热心的开发者已经将文档爬取下来并且在这里提供浏览。下面我们来看一下这个小程序是一个怎样的东西。

Read more »

Posted on Edited on In

在 javscript 中 AOP 的使用会带来很多方便，在程序的结构上实现了解耦，代码逻辑更加清晰。使用 AOP 我们还可以对逻辑进行非侵入性的改造，下面来看下用法：

用于非侵入的插入逻辑

before 函数

1
2
3
4
5
6
7
8
9
10
Function.prototype.before = function(func) {
    var __self = this;
    return function() {
        if (func.apply(this, arguments) == false) {
            return false;
        }
        return __self.apply(this, arguments);
    }
}

after 函数

1
2
3
4
5
6
7
8
9
10
11
Function.prototype.after = function(func) {
    var __self = this;
    return function() {
        var ret = __self.apply(this, arguments);
        if (ret === false) {
            return false;
        }
        func.apply(this, arguments);
        return ret;
    }
}
Read more »

Posted on Edited on In

如何使用 Webpack

  1. 首先安装 Webpack 和 webpack-dev-server
    $ npm i -g webpack webpack-dev-server（webpack-dev-server 是用来在本地启动服务器方便本地调试而安装的）
  2. 运行 $ webpack -h 命令可以显示帮助信息，说明 webpack 已经安装完成。

在常规项目开发中，更好的做法是将 webpack 直接写入 package.json 中方便维护
$ npm init $ npm i webpack --save-dev

Read more »