kylin

醉里论道,醒时折花。

kylin

用ajax的姿势伪装一次表单提交

方法

  • 新建一个formData将数据append进去
  • 修改header中的Content-Type

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var file = $file.files[0]
let param = new FormData()
param.append('host',data.host)
param.append('policy',data.policy)
param.append('signature',data.signature)
param.append('key',`${data.dir}\${filename}`)
param.append('OSSAccessKeyId',data.accessId)
param.append('file',file,file.name)
axios.post('http://nbicc-lele.oss-cn-hangzhou.aliyuncs.com',param,{
// multipart/form-data 带文件的表单
// application/x-www-form-urlencoded 普通表单
headers:{'Content-Type':'multipart/form-data'}
})

webpack打包慢的解决方案

前言

在开发某基于electron、vue等技术栈的桌面程序的过程中发现,模块越多,webpack打包的速度越慢,居然慢到了令人发指的50min!之后我对整个项目进程了排查,最后发现打包慢的罪魁祸首来自gojs这个模块。由于我对gojs的源代码进行过修改,在.vue组件中引入的是未压缩的gojs/release/go-nw.js,该文件巨大无比多达数万行。起初我以为是Uglify的过程占用了太多时间,然而发现,假如不使用压缩混淆,当只有一个文件引入该模块时,打包时间减少到了两分钟,但若有5、6个文件都引用了该模块,打包速度并没有明显的提升,此时我想到了将该文件直接在index页面中引入的方式来避免将该文件打包,由于种种原因,在这个项目中并不能将变量go作为属性赋值给window,这里我放弃了使用最常见的externals方法,而是采用了另一种方式。

解决方案

DLLPlugin方法能把第三方代码完全分离开,即每次只打包项目自身的代码。

gojs修改后的版本进行混淆压缩

这里可以使用任何能达到效果的方式,我使用的是全局模块uglyfy-js

修改gojs模块指向

先将gojs模块的package.json中的main字段指向想要引入的文件

1
2
3
4
5
{
// ...
"main": "release/go-nw.min.js",
// ...
}

阅读全文

vue插件的打包与发布

初始化项目

以我刚发布的vue-calendar组件为例

开发插件用webpack-simple 模板比较合适

1
2
3
vue init webpack-simple vue-calendar
cd vue-calendar
npm install

在跟目录下新建test文件夹用于开发测试

我这里将原本位于src文件夹下的main.js以及App.vue文件转移到了test文件夹下

将插件源码放在src文件夹下,插件入口为src/calendar/main.js

修改 webpack.config.js 文件

根据不同的命令(环境变量)设置不同的入口与输出文件,保证npm run devnpm run build两个命令都为可用

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
var path = require('path')
var webpack = require('webpack')
//...根据环境变量(package.json script中设置)...
var entry = './test/main.js'
var outputFileName = 'build.js'
if (process.env.NODE_ENV === 'production') {
entry = './src/calendar/main.js'
outputFileName = 'vue-calendar.js'
}
//......
module.exports = {
//entry改为变量
entry: entry,
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
//filename
filename: outputFileName,
//library与libraryTarget一定要添加,否则import进来的对象为空
library: 'vue-calendar',
libraryTarget: 'umd'
},
//...
}

阅读全文

最长公共子序列(LCS)

基本概念

(Longest Common Subsequence LCS)是从给定的两个序列X和Y中取出尽可能多的一部分字符,按照它们在原序列排列的先后次序排列得到。LCS问题的算法用途广泛,如在软件不同版本的管理中,用LCS算法找到新旧版本的异同处;在软件测试中,用LCS算法对录制和回放的序列进行比较,在基因工程领域,用LCS算法检查患者DNA连与键康DNA链的异同;在防抄袭系统中,用LCS算法检查论文的抄袭率。LCS算法也可以用于程序代码相似度度量,人体运行的序列检索,视频段匹配等方面,所以对LCS算法进行研究具有很高的应用价值。

子序列(subsequence)

一个特定序列的子序列就是将给定序列中零个或多个元素去掉后得到的结果(不改变元素间相对次序)。例如序列<A,B,C,B,D,A,B>的子序列有:<A,B><B,C,A><A,B,C,D,A>等。

公共子序列(common subsequence)

给定序列X和Y,序列Z是X的子序列,也是Y的子序列,则Z是X和Y的公共子序列。例如X=[A,B,C,B,D,A,B],Y=[B,D,C,A,B,A[,那么序列Z=[B,C,A]为X和Y的公共子序列,其长度为3。但Z不是X和Y的最长公共子序列,而序列[B,C,B,A]和[B,D,A,B]也均为X和Y的最长公共子序列,长度为4,而X和Y不存在长度大于等于5的公共子序列。对于序列[A,B,C]和序列[E,F,G]的公共子序列只有空序列[]。

最长公共子序列

给定序列X和Y,从它们的所有公共子序列中选出长度最长的那一个或几个。

子串

将一个序列从最前或最后或同时删掉零个或几个字符构成的新系列。区别与子序列,子序列是可以从中间抠掉字符的。cnblogs这个字符串中子序列有多少个呢?很显然有27个,比如其中的cb,cgs等等都是其子序列

分析

求解LCS问题,不能使用暴力搜索方法。一个长度为n的序列拥有 2的n次方个子序列,它的时间复杂度是指数阶,太恐怖了。我们先对LCS问题进行特征分析。

结合下图,设A=“a0,a1,…,am”,B=“b0,b1,…,bn”,且Z=“z0,z1,…,zk”为它们的最长公共子序列。不难证明有以下性质:

  • 如果am=bn,则zk=am=bn,且“z0,z1,…,z(k-1)”是“a0,a1,…,a(m-1)”和“b0,b1,…,b(n-1)”的一个最长公共子序列;
  • 如果am!=bn,则若zk!=am,蕴涵“z0,z1,…,zk”是“a0,a1,…,a(m-1)”和“b0,b1,…,bn”的一个最长公共子序列;
  • 如果am!=bn,则若zk!=bn,蕴涵“z0,z1,…,zk”是“a0,a1,…,am”和“b0,b1,…,b(n-1)”的一个最长公共子序列。

由以上特征可得到递归公式如下:

c[i,j]表示长度为i的S1和长度为j的S2的LCS的长度

阅读全文

react-native踩坑记录

打包命令说明

使用 react-native bundle --help 来查看打包的具体参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
react-native bundle [options]
builds the javascript bundle for offline use
Options:
-h, --help output usage information
--entry-file <path> Path to the root JS file, either absolute or relative to JS root
--platform [string] Either "ios" or "android"
--transformer [string] Specify a custom transformer to be used
--dev [boolean] If false, warnings are disabled and the bundle is minified
--prepack When passed, the output bundle will use the Prepack format.
--bridge-config [string] File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
--bundle-output <string> File name where to store the resulting bundle, ex. /tmp/groups.bundle
--bundle-encoding [string] Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
--sourcemap-output [string] File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
--assets-dest [string] Directory name where to store assets referenced in the bundle
--verbose Enables logging
--reset-cache Removes cached files
--config [string] Path to the CLI configuration file

中文版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
react-native bundle [参数]
构建 js 离线包
Options:
-h, --help 输出如何使用的信息
--entry-file <path> RN入口文件的路径, 绝对路径或相对路径
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小
--prepack 当通过时, 打包输出将使用Prepack格式化
--bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
--bundle-output <string> 打包后的文件输出目录, 例: /tmp/groups.bundle
--bundle-encoding [string] 打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string] 生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map
--assets-dest [string] 打包时图片资源的存储路径
--verbose 显示打包过程
--reset-cache 移除缓存文件
--config [string] 命令行的配置文件路径

阅读全文

李宏毅machine learning学习笔记——Regression

资料

pdf video B站
链接 链接 链接

例子:预测宝可梦进化后的武力值(cp)

输入

  • X来表示一只宝可梦
  • Xi来表示宝可梦进化前的种种特性(feature)
    • Xcp 现在的cp值
    • Xs 物种
    • Xhp hp值
    • Xw 体重
    • Xh 身高

输出

  • 这只宝可梦进化后的cp值:Y

Model

假设输入与输出间存在Y = w·Xcp 这样的关系(这里省略了X的其他属性)

由于wb可以为任何值。这里我们将各种数值带入到bw中,就得到了一个Model(A set of function)

  • f1:Y = 10+9·Xcp
  • f2:Y = 9.8+9.2·Xcp
  • f3:Y = - 0.8-1.2·Xcp

最后得到一个Linear Model

阅读全文

如何在canvas中使用自定义字体图标

案例

font-awesome这个图标库为例

字体图标的展示需要保证图标代码为unicode,需要在code前面加上\u


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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="800" height="400"></canvas>
<i class="fa fa-hand-pointer-o"></i>
<input type="button" value="点我画图标" id="button">
<script>
function draw(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='48px FontAwesome';
ctx.fillText('\uF064 \uF065 \uF0a5',20,75);
}
document.getElementById('button').onclick = draw
</script>
</body>
</html>

JS Bin on jsbin.com

李宏毅machine learning学习笔记——导论

前言

最近在学习machine learning相关的知识,李宏毅教授的机器学习课程是一套非常好的入门教材,这里使用的2017年的版本。
课程日历
B站视频

几个概念之间的关系

  • 人工智能
    人们想要达成的目标
  • 机器学习(machine learning)
    达成人工智能的一种手段
  • 深度学习(deep learning)
    机器学习其中的一个方法

几个概念之间的关系

machine learning

machine learning:让机器具有一个能力,这个能力可以根据提供的资料,寻找到一个人们需要的function

machine learning的步骤

以supervise learning为例

  1. 定义一个Model —— define a set of function (f1、f2……)
  2. 准备一些训练资料 Training Data (正确的输入和输出label的集合),使机器具有衡量function好坏的能力 —— goodness of function
  3. 准备一个有效率的演算法寻找Model中最优的funciton(f*) —— pick the best function

    阅读全文

扩展运算符小贴士

前沿

es2015引入了扩展运算符(spread operator)...,可以用来进行一些数组和对象操作。

案例

下面是codewar上的一道题,判断字符串/数字/数组是否对称

题目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Give you an obj, it can be 3 types: string, number and number array, Check that they are symmetrical or not, return a boolean value.
obj="" return true (Empty string should return true)
obj="1" return true (one char should return true)
obj="11" return true
obj="12" return false
obj="121" return true
obj=1 return true (number<10 should return true)
obj=-1 return false (negative number should return false)
obj=10 return false
obj=11 return true
obj=12 return false
obj=121 return true
obj=[] return true (Empty array should return true)
obj=[1] return true (an array with one element should return true)
obj=[1,2,3,4,5] return false
obj=[1,2,3,2,1] return true
obj=[11,12,13,12,11] return true (left element = right element)
obj=[11,12,21,11] return false (not verify them as a string)

阅读全文