2020年3月

项目开发完给群里朋友看的时候，被指出 “信息都输出到控制台了！！！”

在开发过程中忘记注释console.log 怎么才能高速的全部注释了，高效又准确？

当然是正则表达式

处理思路：

  1. 第一种情况： 一般在 console 前面有空白字符（空格，换行，制表符）
  2. 第二种情况： 在行首直接出现console
  3. console 前面不能有 //
  4. 不能匹配到 console 。因为我们要注释它而不是删除。
  5. 那么，就匹配console前面的一个空格吧。不能用 \s ，替换了换行符，代码就不好看了

综上，得出正则表达式

(?<!//.*)( |^)(?=console\.log)

匹配到的结果：

image-20200328211604325.png

正则解释

(?<!//. ) 表示左边不能有 // 其中 . 是匹配除了‘换行’的任意内容， 相当于 {0,} 表示匹配0次到无穷大次。

( |^) 其中 | 的左边是个空格,右边的^ 表示‘行开头’。整体的意思就是匹配空格或者行开头

(?=console\.log) 表示右边是 console.log

最方便好用的 linux 操作系统，我觉得应该是 ubuntu

安装 php 扩展一直是个比较难搞的活

一般流程是，从官网下载 php 源码，解压，找到扩展，用 phpize 编译。你得清楚 php 的位置

那么 ubuntu 下的步骤呢

apt install php-pear

pecl  install 扩展

最后设置下 php.ini 就完事了。。。

比如在Ubuntu里安装 mcrypt 扩展

pecl install mcrypt

然后在 /etc/php/7.2/cli/conf.d/ 里添加 mcrypt.ini 文件。文件内容如下

extension=mcrypt.so

保存。完事

网页自动刷新小助手

设计初心

  1. 为什么要写这个小助手？

    为了刷帖子的访问量

  2. 有替代方案案吗？

    有，而且有许多。如“流量精灵”， 有些浏览器自带有刷新网页的插件。

    但是，作为一个程序猿。明明知道其实现原理很简单，为什么不尝试自己做一个呢？

  3. 使用了哪些技术

    最初写的时候很粗糙，这次优化了一下下。

    1. 使用 bootstrap4 实现了响应式布局
    2. 使用 vue 框架。没办法，这框架太好用了，用一次就爱上了。

实现原理

使用 iframe 标签加载目标网页。通过多次修改 iframe 标签的 src 属性来实现多次访问目标网页。

代码

Demo

<!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">
    <title>网页自动刷新小助手</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="navbar navbar-expand-md bg-dark text-light w-100 border-top border-warning">
    <a href="" class="nav-item text-light nav-link navbar-brand">
        网页自动刷新小助手
    </a>
</div>

<div id="app" class="container">
    <div class="row">
        <div class="card aside col-md-4 my-3">
            <div class="card-body">
                <div class="form-group">
                    <label for="">
                        链接
                        <small>(必须以 http:// 或 https:// 开头)</small>
                    </label>
                    <input type="text" v-model="src" class="form-control" placeholder="请输入链接">
                </div>
                <div class="form-group">
                    <label for="">刷新次数</label>
                    <input type="number" v-model="times" class="form-control">
                </div>
                <div class="form-group">
                    <label for="">刷新间隔时间(毫秒)</label>
                    <input type="number" v-model="interval" class="form-control">
                </div>
                <div class="btn-group-sm">
                    <button class="btn btn-primary" @click="start">开始刷</button>
                    <button class="btn btn-danger" @click="stop">停止</button>
                </div>
            </div>
        </div>
        <div class="col-md-8 my-3">
            <div class="alert alert-info">
                {{ message }}
            </div>
            <iframe class="mt-2 w-100 h-100" ref="iframe_box" frameborder="0"></iframe>
        </div>
    </div>
</div>

<script>
    let App = new Vue({
            el: '#app',
            data: {
                src: "https://api.xygeng.cn/dailywd/api/get.php",
                times: 10,
                interval: 2000,
                job_id: "",
                count: 1,
                message: '网页预览小窗口'
            },
            methods: {
                start() {
                    this.message = '任务将会在' + this.interval / 1000 + 's 后开始';

                    this.job_id = setInterval(() => {
                        this.message = '任务正在进行中 , 第' + this.count + '次'
                        if (++this.count > this.times) this.stop()
                        this.$refs.iframe_box.src = this.src
                    }, this.interval)
                },
                stop() {
                    this.message = '任务已结束'
                    clearInterval(this.job_id)
                    this.count = 1;
                }
            }
        }
    )
</script>
</body>
</html>