What is JS? ES? TS?

Posted on 2019-12-17 => 17:21:02

| Words count in article: 173

一图理清浏览器脚本语言

简而言之 , 就是 js 设计之处有很多缺陷,然后为了弥补缺陷不断的更新 ES 标准 , js 不断的实现新标准修复缺陷 , 这样下去越来越麻烦 , 其他开发者看不下去了就直接按照 ES 标准实现自己的编译器和语言 , 最后转成 js
按照这样发展下去 , js 有发展成浏览器的汇编趋势
现有新的技术不转成 js , 自己去兼容浏览器打破 js 垄断浏览器。例如: Dart

Thinking Shift

Posted on 2019-12-16 => 01:17:36

| Words count in article: 755

一次编程思想的转变

⭐不能局限于细节 , 还要纵观整体⭐

昨天发现一个很不错的 js 库 👉tagcanvas
所以今天就打算整合到 hexo 博客中,首先是看了 Next 主题的代码格式 , 按照规范写好了对应的文件 , 并且 tagcanvas 也成功显示在页面了
但是数据还是固定的 , 需要把 hexo 的 tag 数据引过来输入到 tagcanvas 中

通过反复阅读源码 , 先是确定了原始 tagcloud 的位置在 /next/layout/page.swig

1
2
3

<div class="tag-cloud-tags">
    {{ tagcloud({min_font: 15, max_font: 30, amount: 999, color: true, start_color: '#827878', end_color: '#000000'}) }}
</div>

调试后确定了 tagcloud 是个方法 , 然后查找资料定位到了 /node_modules/hexo/lib/plugins/helper/tagcloud.js

大概阅读 tagcloud.js 一遍后 , 可见 tagcloud 通过一定的算法处理后会输出 tag标签 <li/>

tags.forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0;
    const size = min + ((max - min) * ratio);
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`;

    if (color) {
    const midColor = startColor.mix(endColor, ratio);
    style += ` color: ${midColor.toString()}`;
    }

    result.push(
    `<a href="${self.url_for(tag.path)}" style="${style}">${transform ? transform(tag.name) : tag.name}</a>`
    );
});

CSS3 Knowledge Point

Posted on 2019-12-15 => 19:19:05

| Words count in article: 249

属性是否可继承

测试能否继承

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>Elias</title>
<style>
body {
    color: red; /* 可继承 */
    border: 3px solid green; /* 不可继承 */
}
</style>
</head>
<body>
    <h1>CSS3注意点</h1>
    <p>Hello Elias</p>
</body>
</html>

可观察到 <h1/>和<p/> 继承了 body 的 color 属性 , 而没有继承 border 属性

了解哪些属性可以被继承 👉MDN web docs

强制继承

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>Elias</title>
<style>
body {
    color: red; /* 可继承 */
    border: 3px solid green; /* 不可继承 */
}
h1{
    border:inherit;
}
</style>
</head>
<body>
    <h1>CSS3注意点</h1>
    <p>Hello Elias</p>
</body>
</html>

设置属性值为 inherit , 可强制继承父级对应属性

垂直对齐

👉详细参考

Switch to ES6

Posted on 2019-12-13 => 20:01:02

| Words count in article: 3k

Let

变量i的作用域

//ES5
if (true) {
    var i = 1;
}
console.log(i);

//ES6
if (true) {
    let i = 1;
}
console.log(i); //变量i未找到

重复定义

var i = 0;
switch (i) {
  case 0:
    let value = "hello";
    break;
  case 1:
    let value = "world"; //重复定义错误
    break;
}

Nice to use Vue.js

Posted on 2019-12-09 => 15:51:26

| Words count in article: 5.3k

Start

Vue-cli 版本 (2x)

下文基于2x版本 , 版本跟进需要查看官方文档 👉Vue CLI

先查看一下 Vue-cli 项目构建工具版本信息并安装 Vue-cli

npm show vue-cli 查看 Vue-cli 的版本信息
npm install -g vue-cli@2.9.6 选择最新版本
vue -V 版本确认
vue -h 查看帮助

Vue-cli 模板

由于用 Vue-cli 工具初始化项目是基于某些模板下初始化的 , 所以先查看下官方推荐的模板 👉vuejs-templates

这里就采用生态较好的 webpack 👉官方说明文档

Vue-cli 初始化项目

查看下如何初始化

两种方式初始化 : 一种是基于官方模板 , 另一种基于第三方模板

Learn to use Vue.js

Posted on 2019-12-05 => 19:17:00

| Words count in article: 3.4k

How to use Vue.js

引入 Vue.js

引入Vue.js , 实例化一个对象 myApp,里面的 el , data 为关键字
el 相当于元素选择器 element，这里 #App 选择了 id="App" 的元素
data 里面定义任意名称字段，然后在 双大括号 中显示

v-if 、 v-for

基础用法

v-if="seen"中的 seen 关联了 data 中 seen , v-if 中的参数为 true 则显示,反之
v-for="fruit in fruits" 中的 fruits 关联了 data 中的 fruits , 遍历fruits 数组中的内容赋给 fruit , 最后在 双大括号 取 fruit 对象中的值

v-if 、v-else-if 、v-else

这个比较容易理解 , 直接在后面写入表达式 , 然后根据结果真假进行显示与否

Tmux Manual

Posted on 2019-11-28 => 00:08:43

| Words count in article: 179

启动会话

tmux 匿名会话
tmux new -s <session-name>

退出会话

exit
Ctrl + d

前缀

Ctrl + b
Ctrl + b + ? 帮助信息
ESC / q 退出帮助

分离会话

tmux detach
Ctrl + b + d

查看会话列表

tmux ls
Ctrl + b + s

接入会话

tmux a
tmux attach -t <session-name>

关闭会话

tmux kill-session -t <session-name>

切换会话

tmux switch -t <session-name>

重命名会话

tmux rename-session -t <old-name> <new-name>
Ctrl + b + $

窗格操作

划分上下窗口

Ctrl + b + “

划分左右窗口

Ctrl + b + %

移动光标到其他窗格

Ctrl + b + ↑↓←→键

调整窗格大小

Ctrl + b + Ctrl + ↑↓←→

窗格内容上下滚动

Ctrl + b + [ + ↑↓

参考内容

Ark.exploit.log

Posted on 2019-10-10 => 11:47:18

| Words count in article: 1.4k

Date: 2019-11-23 18:18:27

Ctrl + Alt + N 内联变量(相当于提取变量的逆向操作)

Date: 2019-11-20 22:01:04

Pro Environment Deployment Review

安装Git yum install git
服务器端用 git pull 拉取开发环境提交的最新代码 git clone https://github.com/OrekiYuta/ArCanoe.git
安装Maven yum install

修改配置文件信息;👉Maven官方文档

环境分离,Spring 提供在本地使用 Pom 配置

服务端用Maven 的 .m2/setting.xml 配置文件

vim ~/.m2/settings.xml

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                    https://maven.apache.org/xsd/settings-1.0.0.xsd">
<localRepository/>
<interactiveMode/>
<offline/>
<pluginGroups/>
<servers/>
<mirrors/>
<proxies/>
<profiles>
    <profile>
        <id>dev</id>
        <properties>
            <db.url>jdbc:h2:~/ArCanoe</db.url>
            <db.user>sa</db.user>
            <db.password>123</db.password>
        </properties>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
    </profile>
    <profile>
        <id>pro</id>
        <properties>
            <db.url>jdbc:mysql://localhost:3306/ArCanoe</db.url>
            <db.user>root</db.user>
            <db.password>xxxxx</db.password>
        </properties>
    </profile>
</profiles>
<activeProfiles/>
</settings>

配置jdk,maven环境
- cd 进入项目
- 用flyway工具按脚本生成数据库表 mvn clean compile flyway:migrate -Ppro pro是在配置中 profile 节点自定义的名称
- 配置了环境分离的话,可以在开发环境和服务端分别按配置构建数据库连接进行便利开发,因为开发环境的配置不能随意填写
- 开发环境最好和服务部署环境保持一致性
用 mvn clean compile 和 mvn package 构建jar包
运行jar包即可 java -jar target/xxxx-0.0.1 -SNAPSHOT.jar
访问服务端即可

在服务器部署方面采用docker会更方便后续工作
docker主要步骤为: 拉取镜像/构建镜像→构建容器→运行容器
首先得安装docker,运行 service docker start
在这里以MySQL为例:
docker image pull mysql 首先会从本地查看有没有mysql镜像,没有再去docker仓库拉取
docker image ls
docker container run mysql 生成的容器会持久化存在，不需要可删除
docker ps docker container ls -all
docker run -it --name mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -v xx/xx : xx/xx mysql 端口映射,文件夹映射
需要深入了解网络IP
docker exec -it mysql /bin/bash 进入容器启动容器命令行
docker exec -it mysql -h localhost -u root -p
docker exec -it mysql bash mysql -uroot -p
docker exec -it mysql mysql -uroot -p

对于项目而言可以采用 dockerFile 方式把环境和项目和操作步骤写入dockerFile文件里
然后构建项目镜像,就可以方便的在不同环境利用docker部署
也可以把项目容器和数据库容器等多个容器用docker compose 方式构建
多下点功夫去看官方英文文档
Read more »

Hexo-Install+Migrate

Posted on 2019-09-19 => 19:20:12

| Words count in article: 379

安装Git , Node

安装Hexo

先创建一个文件夹，然后cd到这个目录下
npm install -g hexo-cli 安装hexo项目构建工具
hexo -v 查看版本

Git flow

Posted on 2019-06-28 => 01:29:36

| Words count in article: 2.1k

Git工作流

Flow

for ( =>local-code => 
        submit to local-repository => 
        submit to server-repository => 
        from remote-repository update code => 
    )

Detail

localfolder -> git Stage -> git local -> git remote

本地工作文件夹 -> 索引区 -> 本地库 -> 远程库（服务器端）

基础配置

git init 初始化
git config -l 查看配置信息
git config --global user.name "XXX"
git config --global user.email "xxx@zz.com"
git config --help 查看帮助信息
git help config
git help commit
git help ...

Read more »