CDBlog

BizCharts调研
Nov 29, 2018
BizCharts
官网：https://bizcharts.net/

简单说下特性:
- 基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表
- 集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等
- 性能稳定且具有强大的扩展能力和高度自定义能力
...more
关于ECharts_click事件的探索
Sep 16, 2018
背景
用echarts展示图表的时候，有时候需要点击当前图表，进行一些其他”effect side”操作,这个时候就需要得到当前这个点的横纵坐标的数据信息了。

探索方法
方法一
查看官网API文档 http://www.echartsjs.com/api.html#echarts, 支持鼠标click事件，拿到基础的 line bar 图例上试验。
发现click触发条件是：
1. line图需要点击到数据气泡点上，需要精准点击，数据多的时候，精准点击是困难的
2. bar图需要点击到柱状上，如果某几个数据bar很小，也存在精准点击困难的问题
方法二
官网给出的API方法不尽如人意，去github上查找issue，发现有不少提出这问题。
解决方法：给出一个透明的bar坐标系重叠到图表上，透明bar的数据都是当前最大值，这样在图表对应的x轴都能实现触发点击，类似于tooltip那样方便。
https://github.com/apache/incubator-echarts/issues/6106

但是，这个方法也有缺点：
...more
记线上webpack分模块加载失败的问题
Aug 26, 2018
问题一：
用公司前端架构组给的tools工具时，在test环境下容易出现模块加载错误的问题。
观察发现，index.html， main.[hash].js 等资源文件缓存304，各个路由页面引用的还是之前的hash资源，导致Jenkins新构建的资源没有被使用，而原来的资源已经被替换，找不到文件，所以出错。

将index.html 不缓存，每次 200 请求最新的，从而刷新各个资源文件。

问题二：
现象同样是加载失败。
区别1：只有部分页面加载失败
区别2：手动刷新，有时候页面又是好的，但另一个页面出问题。
...more
npm的一次问题
Mar 3, 2018
环境： win
用npm install npm -g 升级npm后， npm失效，任意指令报错 ERR: cannot find module 'xxx'，但 node指令和cnpm都正常。
重新安装node，仍然有问题。

解决方法：
删除 AppData/Roaming/ 文件夹下的 npm 和 npm-cache文件夹后解决问题，
npm npm-cache 是全局npm包的安装，所以需要重新安装全局的npm包，如 cnpm, gulp, webpack等
...more
离线缓存
Feb 25, 2018
当前有两种离线缓存方式，一种是H5离线缓存，基于manifest,一种是基于 Service Worker。

manifest
其实manifest是一个简单的文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，mime-type 为 text/cache-manifest 。
如： <html lang="en" manifest="index.manifest">

优点：
- 离线浏览，无网情况下也能正常访问
- 更快的加载速度，缓存在本地访问速度自然更快
- 减轻服务请求压力，文件缓存后不需要再次请求，只需要请求需要更新的文件
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
...more
http缓存
Feb 25, 2018
http的缓存策略
关键字段 Cache-Control: max-age, expires, ETag, Last-Modified

优先级顺序
1. Cache-Control : 强缓存，no-cache是不缓存， max-age 设置缓存生效时间，单位为秒(s)
2. Expires : 缓存过期时间，单位是具体时间的 Date
3. ETag : 资源内容的 hash 值，如果资源没变化， If-None-Match 为false，返回 304
4. Last-Modified : 资源的最后修改日期，单位为秒(s)， If-Modified-Since 包含上一次的时间，如果一致，返回304
ETag Last-Modefied
ETag是对Last-Modefied的功能补充，优先级更高。
- ETag是针对内容的 hash 变化，而 Last-Modefied 单位是秒，对于 1s 内的多次改变无法感知。
- 周期性改变的资源，Last-Modefied 时间会改变，而内容不变的话，ETag 也不变，ETag对于缓存更有利。
...more
grunt_gulp
Feb 13, 2018
###
grunt 与 gulp 其实是很像的。
- loadNpmTasks(‘grunt-‘) === requier(‘gulp-‘) //载入处理插件
- registerTask === task //创建任务
- grunt [taskName] ==== gulp [taskName] //执行某个任务
区别：
- 对于要处理的文件较多较大时， gulp 基于流速度会快不少
- gulp简单的.src->.pipe->.dest,任务流程很清晰，而grunt是基于配置，然后创建任务，配置与任务分离，如果配置较多时，可读性就不如gulp task了
为什么gulp会比grunt更受欢迎?
- gulp 速度更快，这个可能是更多的情况，毕竟项目一般引入的外部资源都不少，如果一点改动就执行好几秒，体验是很差的，但可以解决，对dev开发环境进行配置，资源文件单独处理，生产环境再打包压缩。
- gulp 主要API就5个 .src .dest .pipe .task .watch，再配合官网的指南，上手难度低，而且任务可读性会更好
两者一对比， gulp 的学习成本低、易上手的优势就更大了。
...more

Angular1小结

Feb 13, 2018

filter

定义过滤器，返回一个filter function，在指令模板下可以进行一些筛选操作。

angular.module('filterModule')
    .filter('fileSize', function () {
      return function (value) {
        var bytes = parseInt(value, 10);
        var byteLabel = bytes > 1 ? 'Bytes' : 'Byte';
        var sizes = [byteLabel, 'KB', 'MB', 'GB', 'TB'];
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
      };
    });

factory service

factory service 都可以提供 xhr 服务，功用类似。
区别在于factory是返回一个实例对象，而service是将服务绑定在this上的。

angular.module('httpModule')
    .factory('api', function($http, $q){
        var api = {};
        api.func1 = function(){}
        api.func2 = function(){}

        return api;
    })

angular.module('httpModule')
    .service('api', function($http, $q){
        var self = this;
        self.func1 = function(){}
        self.func2 = function(){}
    })

...more

canvas:path2D,离屏canvas
Jan 14, 2018
Path2D
Path2D 概念
Canvas 2D API 的接口 Path2D 用来声明路径，此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的路径方法也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径。
当前IE safari 还不支持

作用
一句话， 缓存图形path

作用场景
- 假如随机生成的图形，常见的方法，保存图形参数
- clearRect 清空canvas后，需要回显刚才的图形
- isPointInPath 判断事件path区域
...more

svgvg_bezier

Jan 1, 2018

一种连接两个点的贝塞尔曲线

function bezier(startPoint, endPoint){
    var sx = startPoint.x,
        sy = startPoint.y,
        ex = endPoint.x,
        ey = endPoint.y,
        length = Math.sqrt( Math.pow( (sx-ex), 2) + Math.pow( (sy-ey), 2 ) ) ;

    //可以根据两点的倾斜方向做更加细致的取点，这里只列出其中一种方式

    if ( Math.abs( sx - ex ) < 5 ){  //两个点的横坐标差值小于5，姑且认为是平行的，这里可以自行设置
        return [startPoint, {x:sx-length, y:sy}, {x:ex+length, y:ey}, endPoint] ;
    }
    else if ( Math.abs( sy - ey ) < 5> ){  //纵坐标相同
        return [startPoint, {x:sx, y:sy-length}, {x:ex, y:ey+length}, endPoint] ;        
    }
    else {  //斜率的情况
        var slope = (ey-sy) / (ex-sx),   //斜率
            dx = Math.sqrt( Math.pow(length,2) / ( 1+ 1/(slope*slope) ) ),  //x坐标变化值
            dy = Math.abs(-1/slope * dx)  ;
        return [startPoint, {x:sx-dx, y:sy-dy}, {x:ex+dx ,y:ey+dy}, endPoint] ;
    }
}

var pointArr = bezier({x:11, y:22}, {x:33, y:44});
$('svg #path').attr('d', 'M'+pointArr[0].x+' '+pointArr[0].y+' C '+pointArr[1].x+' '+pointArr[1].y+', '+pointArr[2].x+' '+pointArr[2].y+', '+pointArr[3].x+' '+pointArr[3].y);

...more

BizCharts

背景

探索方法

方法一

方法二

问题一：

问题二：

manifest

http的缓存策略

优先级顺序

ETag Last-Modefied

filter

factory service

Path2D

Path2D 概念

作用

作用场景

一种连接两个点的贝塞尔曲线