douyasi 发布的文章

使用 golang 写的一些小玩意

贵金属价格悬浮提示工具

近 2 年贵金属波动大，受到一些投资者的追捧，像我们这些散户玩家可能需要一款小窗口价格提醒工具。
PriceReminder 就是这样一款工具，由本人采用 Golang 编写，支持自定义悬浮窗位置。

金银数据采集自新浪财经。特别注意：投资需谨慎。

link:


- 阅读剩余部分 -

RabbitMQ 多运行模式简介

RabbitMQ 提供了 6 种模式，分别是 Simple、 Worker（或称 Work Queue）、 Publish/Subscribe、 Routing、 Topic(s)、RPC Request/Reply。下面传送门仓库详细讲述了前 5 种，并给出代码实现和思路（主动拉取模式属于消费端一种模式，不在此列，一般场景下均为推模式），其中 Publish/Subscribe、 Routing 与 Topics 三种模式可以统一归为 Exchange 模式，只是创建时交换机的类型不一样，分别是 fanout、 direct 与 topic。

传送门：

https://github.com/ycrao/rabbitmq-examples

Vue 实现父子组件双向绑定最正确的做法

最近在学习 vue ，遇到了父子组件数据绑定的问题。Vue 官方文档有这样一段话：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

但这并不是说父页面就不能跟子组件双向通讯，不过就是麻烦了一点。在 Google 了诸多之后，尝试了网络上一些破碎零星的代码（什么计算属性，侦听器等）之后，终于找到了最佳的做法：prop.sync。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prop 双向绑定的实现</title>
    <script src="dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>父组件数据</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>{{ name }} <input type="text" v-model="name" /></td>
            <td>{{ age }} <input type="number" v-model.number="age" /></td>
        </tr>
    </table>
    <!--
      v-bind:my-name
      v-on:update:my-name="my-name = $event"
    参考文档
      https://cn.vuejs.org/v2/guide/components-custom-events.html
    -->
    <user-table
      v-bind:my-name.sync="name"
      v-bind:my-age="age"
      v-on:change-age="age = $event"
    ></user-table>
</div>
<template id="userTable">
    <div>
        <h2>子组件数据</h2>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>{{ myName }} <input type="text" :value="myName" @input="updateName" /></td>
                <td>{{ myAge }} <input type="number" :value="myAge" @input="updateAge" /></td>
            </tr>
        </table>
    </div>
</template>
<style>
table, td, th {
    border-collapse: collapse;
    border-spacing: 0
}
table {
    margin: 20px;
}
td, th {
    border: 1px solid #bcbcbc;
    padding: 5px 10px
}
th {
    background: #42b983;
    font-weight: 400;
    color: #fff;
    cursor: pointer
}
</style>
<script>
var UserTable = {
  props: {
    myName: String,
    myAge: Number
  },
  template: '#userTable',
  watch: {
    myName: function (val) {
      console.log('child-component watch fater-component name:' + val)
    },
    myAge: function (val) {
      console.log('child-component watch father-component age:' + val)
    }
  },
  methods: {
    updateName (evt) {
      console.log(evt)
      console.log('_name value:' + this.myName)
      console.log('evt.target.value:' + evt.target.value)
      this.$emit('update:myName', evt.target.value)
      console.log('child-component myName:' + this.myName)
    },
    updateAge (evt) {
      console.log(evt)
      console.log('_name value:' + this.myAge)
      console.log('evt.target.value:' + evt.target.value)
      // 自定义 change-age 事件
      this.$emit('change-age', Number(evt.target.value))
      console.log('child-component myAge:' + this.myAge)
    }
  }
}
new Vue({
  el: '#app',
  data: {
    name: '张三',
    age: 20
  },
  components: {
    'user-table': UserTable
  },
  mounted() {
    const vm = this
    setInterval(() => { console.log('name', this.name, 'age', this.age); }, 3000);
  }
})
</script>
</body>
</html>

使用 Event-Emit 方式实现的示例（请随意在输入框中输入数据，观察数据文本变化）：

https://raoyc.com/learning_vue/example/cp_2.html

- 阅读剩余部分 -

解决响应首行输出一行空白问题

最近在开发过程中，发现页面 响应在首行都会输出一行空白，这个问题初步搜索说是 UTF-8 BOM 问题。人工一个一个文件排查是很耗时的，一“翻”谷歌之后，发现了一款检测神奇 phptags tag tidier 。

解决办法如下（似乎直接下载 phptags-1.2.phar 使用不行）：

# 直接下载 phptags 源码
wget http://include-once.org/p/phptags/phptags
# 追加可写权限
chmod +x phptags
# /php/project/folder 项目文件夹目录
php phptags --whitespace /php/project/folder

官网提供了更多的使用示例：

usage examples
phptags --whitespace *.php cleans up spaces or UTF-8 BOM issues before opening and after close tags
phptags --warn directory/ searches through a directory and just warns about whitespace issues
phptags --close --long --tokenizer *.php adds close tags, converts open tags into long form <?php and uses the more reliable --tokenizer mode (instead of --regex)
phptags --unclosed --shortall dir/ ../*.tpl includes/ converts all tags into short forms, and strips close tags of a document (it's advised to rather have whitespace issues fixed than keep using the newcomer workaround)
  1. 1
  2. 2
  3. 3
  4. 4
  5. ...
  6. 28