xieyihao / blog Goto Github PK
View Code? Open in Web Editor NEWTechnical Article or something
Technical Article or something
todo
在同一行,用3个及以上的 *
或 -
或 _
。
两端各用一个*
或_
我是斜体
我是斜体
两端各用两个*
或_
我是粗体
我是粗体
两端各加上两个~~
删除我
基本格式:![alt](URL title)
各属性含义:
表头1 | 表头2
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
表头1 | 表头2 |
---|---|
Content Cell | Content Cell |
Content Cell | Content Cell |
| 表头1 | 表头2|
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
表头1 | 表头2 |
---|---|
Content Cell | Content Cell |
Content Cell | Content Cell |
| 名字 | 描述 |
| ------------- | ----------- |
| Help | Display the help window.|
| Close | Closes a window |
名字 | 描述 |
---|---|
Help | Display the help window. |
Close | Closes a window |
| 名字 | 描述 |
| ------------- | ----------- |
| Help | ~~Display the~~ help window.|
| Close | _Closes_ a window |
名字 | 描述 |
---|---|
Help | |
Close | Closes a window |
| 左对齐 | 居中 | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
左对齐 | 居中 | 右对齐 |
---|---|---|
col 3 is | some wordy text | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
比如:blush:
,可以显示:blush:。
具体每一个表情的符号码,可以查询GitHub的官方网页 http://www.emoji-cheat-sheet.com。
有个需求:点击链接需要跳转到页面的指定部分,就是锚点(Anchor)
对于原生的锚点设置有两种方法:
<a href="#part1"></a>
#方法一:name属性只对a标签生效
<a name="part1"></a>
#方法二:id属性其他标签可以
<h5 id="part1"></h5>
但思考了过后,本项目是Vue的SPA,而且使用了vue-router,利用了h5的history
api实现,因此方法不全,假如路由跳转后带有#part1
不会自动滚动到锚点对应的位置,
查阅了文档之后,使用了vue-router是可以配置的,设置scrollBehavior
属性可以实现vue-router的scrollBehavior,对于滚动到对应的#还有完整的例子可参考。
而且nuxt默认的router就有设置scrollBehavior
,说已支持锚点定位,
# notice: can't work
const scrollBehavior = function (to, from, savedPosition) {
// if the returned position is falsy or an empty object,
// will retain current scroll position.
let position = false
// if no children detected
if (to.matched.length < 2) {
// scroll to the top of the page
position = { x: 0, y: 0 }
} else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
// if one of the children has scrollToTop option set to true
position = { x: 0, y: 0 }
}
// savedPosition is only available for popstate navigations (back button)
if (savedPosition) {
position = savedPosition
}
return new Promise(resolve => {
// wait for the out transition to complete (if necessary)
window.$nuxt.$once('triggerScroll', () => {
// coords will be used if no selector is provided,
// or if the selector didn't match any element.
if (to.hash && document.querySelector(to.hash)) {
// scroll to anchor by returning the selector
position = { selector: to.hash }
}
resolve(position)
})
})
}
可实际上并没有生效,觉得有问题,然后把它加入到自己的nuxt项目后在断点调试后发现,无法触发自定义的事件triggerScroll
,那就改进不要$once
来触发吧:
# notice: can't work
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
let position = {}
if (to.matched.length < 2) {
position = {x: 0, y: 0}
} else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
position = {x: 0, y: 0}
}
if (to.hash) {
position = {selector: to.hash}
}
return position
}
}
但结果依旧不能生效。
揪心、抓狂...
最后在Nuxt的Issuse里找到了,确实是bug。。。有好些人遇到,这个暂时不能解决了。
HarmonyOS版本:2.0.0
手机型号:LYA-AL00(华为Mate20Pro)
内置浏览器:11.1.2.301
经实际测试,原生浏览器有大量的浏览器事件失效,包括
window.addEventListener('pageshow', event => {
console.log('[test]', 'addEventListener pageshow');
});
window.addEventListener('pagehide', event => {
console.log('[test]', 'addEventListener pagehide');
});
window.addEventListener('popstate', event => {
console.log('[test]', 'addEventListener popstate');
});
window.onunload = function () {
console.log('[test]', 'onunload ');
};
以下浏览器事件有效:
window.onbeforeunload = function (event) {};
document.addEventListener("visibilitychange", function () {
console.log('[test]', 'addEventListener visibilitychange ', document.visibilityState);
});
遇到了一个困扰了三天的问题:使用nuxt+vux搭建的项目,发现构建完的代码里居然有部分es6的语法没有编译,错误是出现了'const'这个还是来源于vux这个包引入的.js文件,就能脑壳疼了。
搜索了很多问题,以为是nuxt构建的项目中babel没有编译,但是问题是自己写的代码都是使用了es6的都可以编译。
接着从nuxt的weback配置入手,既然引入的包中没有编辑,那就加一条规则让webpack在打包构建的时候把node_modules/vux/src/
下的.js文件都编译了不就可以了吗?
然后,发现vux居然都没已经构建好的.js文件,翻了目录也没有找到。
这就郁闷了,想起vux有个loader,就去找了vux-loader的介绍看,惊奇的发现是使用源码分发,新鲜事:
VUX 希望使用源码分发
VUX 希望无侵入地解决一系列的工程问题,不需要用户手动配置 webpack
VUX 希望能统计(匿名)使用情况
好吧,既然是用源码,那就在自己项目中构建的时候加上webpack配置就可以了吧,按理说是,然后还是纠结于Nuxt怎么自定义配置wepack,只源于自己不熟webpack
最后找到了遇到相同的问题,加.babelrc
文件,安装对应的包,解决了。
总结在搜索的时候,还是要明白自己问题的关键词是什么,这样搜索的准确度才会提高。
ps: 为了解决此问题,延展看了好多东西,发现需要学的还有好多
使用Nuxt Vux搭建的项目,构建后出现兼容性问题Use of const in strict mode | Unexpected keyword 'const'
github.com/nuxt/nuxt/issues/1776
github.com/airyland/vux/issues/2426
webpack Module
查看了vux-loader的介绍,源码,
详看了vue-loader的功能,
查看了Nuxt的默认webpack配置,client配置
Below are the packages on which this practical depends. The main packages -- tidyverse
and sf
-- should be available on machines in the labs. However, if you are working from your own machine, you will need to download these with install.packages(<package-name>)
.
rakeR
-- the package for generating the microsimulation datasets -- is not already available in the labs and you will need to download it. If you are working from your own machne, download these (by uncommenting the relevant code lines in the block below) with install.packages(rakeR)
. If you are working from the lab machines, do this through the RStudio IDE: click Packages (in the bottom-right pane), Install, enter rakeR into the middle dialogue box (titled Packages) and in the thid dialogue box (Install to Library) click the drop-down and select C:\ drive
.
# Bundle of packages for data manipulation. If working from your own machine uncomment to download.
# install.packages("tidyverse")
library(tidyverse)
# For working with geospatial data. If working from your own machine uncomment to download.
# install.packages("sf")
library(sf)
# For performing microsimulation.
install.packages("rakeR")
# Set default ggplot2 theme.
theme_set(theme_minimal())
First download the data.
# Path to data dowload.
url_data <- "http://homepages.see.leeds.ac.uk/~georjb/predictive_analytics/"
download.file(paste0(url_data,"data.zip"), "./data.zip")
unzip("./data.zip")
Next execute code chunks that read in the datasets on which the practical depends, using read_csv()
for reading in comma-separated text files, st_read()
for reading in geospatial data.
# Read in Census data (constraints)
age_cons <- read_csv("./data/age_cons.csv")
age_sex_cons <- read_csv("./data/agesex_xtab_cons.csv")
oac_cons <- read_csv("./data/oac_cons.csv")
sex_cons <- read_csv("./data/sex_cons.csv")
# Read in individual-level survey data
individuals <- read_csv("./data/individuals.csv")
# Read in geojson files defining OAs and wards in Leeds
oa_boundaries <- st_read("./data/oa_boundaries.geojson", crs=27700)
ward_boundaries <- st_read("./data/ward_boundaries.geojson", crs=27700)
We first need to cast the individuals
variables to be matched with the constraints tibbles as factors, and then reorder according to the variable order in the constraints tibbles.
# Recast as factor
individuals <- individuals %>% mutate_at(vars(oac_grp, sex,age_band, age_sex),funs(factor(.)))
# Reorder according to order vars appear in constraints table : required by rakeR.
individuals <- individuals %>% mutate(
oac_grp=fct_relevel(oac_grp, colnames(oac_cons %>% select(-oa_code))),
sex=fct_relevel(sex, colnames(sex_cons %>% select(-oa_code))),
age_band=fct_relevel(age_band, colnames(age_cons %>% select(-oa_code))),
age_sex=fct_relevel(age_sex, colnames(age_sex_cons %>% select(-oa_code)))
)
We can check whether the refactored individuals
exactly match with the constraints tibbles.
# Check levels and variable names exactly match.
all.equal(
levels(individuals$age_sex),
colnames(age_sex_cons %>% select(-oa_code))
)
First, specify the variables that will be used as constraints. In the example code, I've specified the oac_grp
and age_sex
constraints. You are free to specify a different set of constraints -- you may find it instructive to explore different outcomes, e.g. different microsimulated data that result from differently specified constraints.
# Identify the variables to use as constraints.
cons_vars <- c("oac_grp", "age_sex")
# Join to generate a single constraint table.
temp_cons <- oac_cons %>% inner_join(age_sex_cons)
# Joining, by = "oa_code"
Next: generate weights (using rakeR::weight()
). These can be thought of in a similar way to survey weights: they indicate the extent to which each respondent in the individual-level survey data (individuals
) should be assigned to each OA when generating the microsimulated dataset. The resulting weights dataset contains pairs for each individual respondent and OA: as you would expect this is a sparse matrix, containing many 0
values.
# Calculate weights. May take several seconds to execute.
weights_oac_age_sex <- rakeR::weight(cons=temp_cons, inds=individuals %>% select(person_id, oac_grp, age_sex), vars=cons_vars)
In order generate the microsimulated dataset, it is necessary to move from these fractional weights to integer weights. Individuals must be cloned and assigned to OAs consisent with the constaints data -- in a way that minimises the difference between the OA-level statistics given by the constraints and the aggregated results of the simulated individuals. Here Lovelace & Ballas' (2013), '_truncate, replicate, sample' method is used to allocate cloned individuals to OAs. This procedure is abstracted into the rakeR::rake()
function.
# Run rk_take to generate simulated dataset. May take several seconds to execute.
simulated_oac_age_sex <- rakeR::rake(cons=temp_cons, inds=individuals %>% select(person_id, oac_grp, age_sex),
vars=cons_vars, output = "integer",
method = "trs", seed = 42)
First, generate a weights_summary
tibble, whereby weights are grouped (group_by
) and summarised (summarise()
) by OA, with 0
weights removed. Here, the mean()
, max()
and sd()
of non-0 weights are calculated. These statistics tell us something about model uncertainty as they indicate the extent of oversampling -- that is, instances where the same respondent is assigned to the same OA several times. This can also be investigated explicitly by calculating at the OA-level, the proportion simulated households that are based on unique individuals.
# Generate OA-level summary statistics on weights.
temp_weights_summary <- weights_oac_age_sex %>%
# Create row_index variable.
mutate(row_index=row_number()) %>%
# Rather than a matrix, we want a row for each individual and OA.
gather(key=oa_code, value=weight, -row_index) %>%
group_by(oa_code) %>%
filter(weight>0) %>%
summarise(weight_mean=mean(weight), weight_max=max(weight), weight_sd=sd(weight)) %>%
ungroup()
# Generate OA-level summary statistics on simulated data.
temp_simulated_summary <- simulated_oac_age_sex %>%
group_by(zone) %>%
summarise(distinct_persons=n_distinct(person_id), total_person=n(),
sim_oversample=1-(distinct_persons/total_person)) %>%
select(zone, sim_oversample)
# Merge and gather for charting.
oa_level_summary <- temp_weights_summary %>%
inner_join(temp_simulated_summary, by=c("oa_code"="zone")) %>%
gather(key="statistic_type", value="statistic_value",-oa_code)
# Remove temp datasets.
rm(temp_simulated_summary, temp_weights_summary)
First generate histograms of these summary statistics.
# Generate histograms of summary stats, faceted on statistic type.
plot <- oa_level_summary %>%
# Rescale summary stats between 0 and 1 for local scale on facet.
group_by(statistic_type) %>%
mutate(statistic_value_rescale=statistic_value/max(statistic_value)) %>%
ungroup() %>%
ggplot()+
geom_histogram(aes(x=statistic_value_rescale, fill=..x..), bins=10)+
geom_histogram(aes(x=statistic_value_rescale), fill="transparent", colour="#636363", size=0.1, bins=10)+
scale_fill_distiller(palette="Blues", direction=1, guide=FALSE)+
facet_wrap(~statistic_type, scales="free", nrow=1)
# Display in plots pane.
plot
# Save to project directory.
ggsave("stats_histograms.png", plot, width=10, height=2.5)
Then generate choropleths of these summary statistics (this will take some time to execute).
# Generate choropleths of summary stats, faceted on statistic type.
# So that the histograms and map can be related we need to assign each
# value to decile bins.
# Generate choropleths.
# First a data frame summerising over statstic types.
plot_data <- oa_level_summary %>%
group_by(statistic_type) %>%
mutate(
# Rescale summary stats between 0 and 1 for local scale on facet.
statistic_value_rescale=statistic_value/max(statistic_value),
# Cut into equal-range bins as per histogram.
statistic_value_bin = cut_interval(statistic_value_rescale, 10, labels=FALSE)
) %>%
ungroup()
# Merge with oa_boundaries for plotting.
plot <- oa_boundaries %>%
left_join(plot_data) %>%
ggplot()+
geom_sf(aes(fill=statistic_value_bin), colour=NA)+
geom_sf(data=ward_boundaries, fill="transparent", colour="#636363", size=0.1)+
coord_sf(crs=st_crs(oa_boundaries), datum=NA)+
scale_fill_distiller(palette="Blues", direction=1, guide=FALSE)+
theme(axis.title=element_blank())+
facet_wrap(~statistic_type, nrow=1)
rm(plot_data)
# Save to project directory: necessary as resource-intensive to draw.
ggsave("stats_choropleths.png", plot, width=10, height=5)
You will attach using a dplyr join
function. Take the simulated dataset (simulated_oac_age_sex
) and inner_join()
on the individuals
data. By default dplyr join
functions perform the join based on variable names that are shared between both datasets, person_id
in this case.
simulated_oac_age_sex <- simulated_oac_age_sex %>% select(person_id, zone) %>%
inner_join(individuals)
需求:动态生成一个带参数的链接的二维码,中间带自己的头像的。
链接如:http://a.com?a=${id}
,生成一个字符串的二维码挺容易的,但是中间需要有个logo,logo还是用户的头像,这个头像还是微信的。
找了用qrcode,但是中间生成logo需要自己用canvas画(见 Issues:soldair/node-qrcode#27 ),鄙人愚钝,canvas不熟悉,为了解决问题,所以找到了qr-code-with-logo
一切都挺好的。
。
。
。
直到上手做了之后,报了个错误,不能生成dataURI,
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
知道了是跨域的问题,所有就然后换了方式,但是缺点是不能生成dataURI,就是它不是一张图片,用户不能长按保存....
// page.vue
<canvas ref="canvas"/>
function loadImg() {
let img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = this.loginUserInfo.faceUrl; // insert image url here
let _self = this;
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
let dataURL = canvas.toDataURL("image/png");
console.log('【dataURL】', dataURL);
localStorage.setItem( "savedImageData", dataURL );
_self.createQrCodeWithLogo(dataURL);
};
img.src = src;
}
function createQRCode(){
let canvas = this.$refs.canvas;
let originURL = getOriginURL(); // 'http://a.com?a=id'
QrCodeWithLogo.toCanvas({
canvas: canvas,
content: originURL,
width: 120,
nodeQrCodeOptions: {
margin: 4,
},
logo: {
src: dataURL,
}
}).then(res => {});
}
canvas画的有如下效果
最后想到一个奇淫技巧,生成一个canvas节点,在canvas上画好了,导出成base64,试了一下,真的可以。在img的src属性上设置.
createQrCodeWithLogo() {
let originURL = getWebsiteShareLink({gameId: this.loginUserInfo.gameId}),
dataURL = this.headerDataURL,
newCanvas = document.createElement("canvas"),
_self = this;
QrCodeWithLogo.toCanvas({
canvas: newCanvas,
content: originURL,
width: 120,
nodeQrCodeOptions: {
margin: 4,
color: {
}
},
logo: {
src: dataURL,
}
}).then(res => {
let data = newCanvas.toDataURL("image/png");
console.log("【dataURL】", data);
_self.imageData = data;
});
}
loadHeaderImg(){
let _self = this;
let img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = this.loginUserInfo.faceUrl;
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
let dataURL = canvas.toDataURL("image/png");
_self.headerDataURL = dataURL;
// 生成二维码
_self.createQrCodeWithLogo();
// 设置头像
_self.$refs.header.src = img.src;
};
img.src = src;
}
mac os下vscode快捷键
全局
Command + Shift + P / F1 显示命令面板
Command + P 快速打开
Command + Shift + N 打开新窗口
Command + W 关闭窗口
基本
Command + X 剪切(未选中文本的情况下,剪切光标所在行)
Command + C 复制(未选中文本的情况下,复制光标所在行)
Option + Up 向上移动行
Option + Down 向下移动行
Option + Shift + Up 向上复制行
Option + Shift + Down 向下复制行
Command + Shift + K 删除行
Command + Enter 下一行插入
Command + Shift + Enter 上一行插入
Command + Shift + 跳转到匹配的括号
Command + [ 减少缩进
Command + ] 增加缩进
Home 跳转至行首
End 跳转到行尾
Command + Up 跳转至文件开头
Command + Down 跳转至文件结尾
Ctrl + PgUp 按行向上滚动
Ctrl + PgDown 按行向下滚动
Command + PgUp 按屏向上滚动
Command + PgDown 按屏向下滚动
Command + Shift + [ 折叠代码块
Command + Shift + ] 展开代码块
Command + K Command + [ 折叠全部子代码块
Command + K Command + ] 展开全部子代码块
Command + K Command + 0 折叠全部代码块
Command + K Command + J 展开全部代码块
Command + K Command + C 添加行注释
Command + K Command + U 移除行注释
Command + / 添加、移除行注释
Option + Shift + A 添加、移除块注释
Option + Z 自动换行、取消自动换行
多光标与选择
Option + 点击 插入多个光标
Command + Option + Up 向上插入光标
Command + Option + Down 向下插入光标
Command + U 撤销上一个光标操作
Option + Shift + I 在所选行的行尾插入光标
Command + I 选中当前行
Command + Shift + L 选中所有与当前选中内容相同部分
Command + F2 选中所有与当前选中单词相同的单词
Command + Ctrl + Shift + Left 折叠选中
Command + Ctrl + Shift + Right 展开选中
Alt + Shift + 拖动鼠标 选中代码块
Command + Shift + Option + Up 列选择 向上
Command + Shift + Option + Down 列选择 向下
Command + Shift + Option + Left 列选择 向左
Command + Shift + Option + Right 列选择 向右
Command + Shift + Option + PgUp 列选择 向上翻页
Command + Shift + Option + PgDown 列选择 向下翻页
查找替换
Command + F 查找
Command + Option + F 替换
Command + G 查找下一个
Command + Shift + G 查找上一个
Option + Enter 选中所有匹配项
Command + D 向下选中相同内容
Command + K Command + D 移除前一个向下选中相同内容
进阶
Ctrl + Space 打开建议
Command + Shift + Space 参数提示
Tab Emmet插件缩写补全
Option + Shift + F 格式化
Command + K Command + F 格式化选中内容
F12 跳转到声明位置
Option + F12 查看具体声明内容
Command + K F12 分屏查看具体声明内容
Command + . 快速修复
Shift + F12 显示引用
F2 重命名符号
Command + Shift + . 替换为上一个值
Command + Shift + , 替换为下一个值
Command + K Command + X 删除行尾多余空格
Command + K M 更改文件语言
导航
Command + T 显示所有符号
Ctrl + G 跳转至某行
Command + P 跳转到某个文件
Command + Shift + O 跳转到某个符号
Command + Shift + M 打开问题面板
F8 下一个错误或警告位置
Shift + F8 上一个错误或警告位置
Ctrl + Shift + Tab 编辑器历史记录
Ctrl + - 后退
Ctrl + Shift + - 前进
Ctrl + Shift + M Tab 切换焦点
编辑器管理
Command + W 关闭编辑器
Command + K F 关闭文件夹
Command + 编辑器分屏
Command + 1 切换到第一分组
Command + 2 切换到第二分组
Command + 3 切换到第三分组
Command + K Command + Left 切换到上一分组
Command + K Command + Right 切换到下一分组
Command + K Command + Shift + Left 左移编辑器
Command + K Command + Shift + Right 右移编辑器
Command + K Left 激活左侧编辑组
Command + K Right 激活右侧编辑组
文件管理
Command + N 新建文件
Command + O 打开文件
Command + S 保存文件
Command + Shift + S 另存为
Command + Option + S 全部保存
Command + W 关闭
Command + K Command + W 全部关闭
Command + Shift + T 重新打开被关闭的编辑器
Command + K Enter 保持打开
Ctrl + Tab 打开下一个
Ctrl + Shift + Tab 打开上一个
Command + K P 复制当前文件路径
Command + K R 在资源管理器中查看当前文件
Command + K O 新窗口打开当前文件
显示
Command + Ctrl + F 全屏、退出全屏
Command + Option + 1 切换编辑器分屏方式(横、竖)
Command + + 放大
Command + - 缩小
Command + B 显示、隐藏侧边栏
Command + Shift + E 显示资源管理器 或 切换焦点
Command + Shift + F 显示搜索框
Ctrl + Shift + G 显示Git面板
Command + Shift + D 显示调试面板
Command + Shift + X 显示插件面板
Command + Shift + H 全局搜索替换
Command + Shift + J 显示、隐藏高级搜索
Command + Shift + C 打开新终端
Command + Shift + U 显示输出面板
Command + Shift + V Markdown预览窗口
Command + K V 分屏显示 Markdown预览窗口
调试
F9 设置 或 取消断点
F5 开始 或 继续
F11 进入
Shift + F11 跳出
F10 跳过
Command + K Command + I 显示悬停信息
集成终端
Ctrl + 显示终端 Ctrl + Shift + 新建终端
Command + Up 向上滚动
Command + Down 向下滚动
PgUp 向上翻页
PgDown 向下翻页
Command + Home 滚动到顶部
Command + End 滚动到底部
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.