分类 技术探讨 下的文章

今天正好有个老朋友聊起来jquery源码,他对于源码不了解,我抱着学习交流的心态,给他讲解了核心实现。(好像自己也鸽了好长时间)

顺便在哪个cdn服务商找个jquery文件打开, 我这里用的1.2.3版本为例,最新版本也差不多,只有两三处变化https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js

源码分析

17-20行传入选择器,返回自身new出来的init方法,估计你们也没用过$()的第二个参数,这里省略掉

var jQuery = window.jQuery = function(selector) {
    return new jQuery.prototype.init(selector);
}

26-27行这就是为什么总是用$开头的原因,挂载到window对象下,属于全局变量

// Map the jQuery namespace to the '$' one
window.$ = jQuery;

36-547行剔除我们不需要的保留核心,留下init方法,内部做了jquery实例与选择器的判断,这里我们忽略掉,简化

jQuery.fn = jQuery.prototype = {
    init: function(selector) {
        var nodes = document.querySelectorAll(selector);
        for (var i in nodes) {
            this[i] = nodes[i];
        }
        return this;
    }
    //此处省略十万字
}

549行来上一段这个,jquery原型链传递给jquery原型下init方法的原型,回头再看new时候的代码,很清楚明了

jQuery.prototype.init.prototype = jQuery.prototype;

完整实现

在jQuery的原型上继续增加功能就很接近初版jQuery了,这里我是简单实现了text()方法

    var jQuery= function (selector) {
        return new jQuery.fn.init(selector);
    }

    jQuery.fn = jQuery.prototype = {
        init: function (selector) {
            var nodes = document.querySelectorAll(selector);
            for (var i in nodes) {
                this[i] = nodes[i];
            }
            return this;
        },
        element: function (callback) {
            for (var i = 0; i < this.length; i++) {
                callback(this[i]);
            }
        },
        text: function (content) {
            if (content == '' || content) {
                this.element(function (node) {
                    node.innerHTML = content;
                })
                return content;
            } else {
                return this[0].innerHTML;
            }
        },
    }

    jQuery.prototype.init.prototype = jQuery.prototype;

    window.$ = jQuery;

结束

核心其实一点不复杂,插件的实现我倒是很喜欢,自身的功能我看来大部分全是用插件实现的,工具自身的巧妙设计加上便利性。

在传统页面制作上jquery一把梭用的很舒服,但MVVM的出现改变了大家的思考方式,只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,对于项目管理轻松不少。

如果有简单需求的单页上,jquery还是有用武之地的,上MVVM只能是徒增麻烦。

把最近整的一些小玩意整理分享一下

手机号登录,分析一下页面可以知道一般是有两个按钮(获取验证码,登录)两个框(输入手机号,输入验证码)

所以有了下面这个玩意(不看具体功能,只看结构)

<template>
    <div class="login-wrapper">
        <div class="title-bar">登录</div>
        <div class="wrapper phone-wrapper">
            <span class="title">手机号</span>
            <input class="input phone" type="text" placeholder="手机号">
        </div>
        <div class="wrapper code-wrapper">
            <span class="title">验证码</span>
            <input class="input code" type="number" placeholder="验证码">
            <div class="send">获取验证码</div>
        </div>
        <div class="wrapper btn-wrapper">
            <div class="input btn">登录</div>
        </div>
    </div>
</template>

这个时候就可以开始写逻辑了,也是来简单分析一下,登录需要点击,获取验证码需要点击并且能倒数秒数,也就是动态修改文字,体验好一点可以检查限定手机号位数,验证码位数。

那就差不多是下面这个样子

<template>
    <div class="login-wrapper">
        <div class="title-bar">登录</div>
        <div class="wrapper phone-wrapper">
            <span class="title">手机号</span>
            <input class="input phone" type="text" placeholder="手机号"
                   :value="phone"
                   ref="phone" v-on:change="changePhone" v-on:input="changePhone">
        </div>
        <div class="wrapper code-wrapper">
            <span class="title">验证码</span>
            <input class="input code" type="number" placeholder="验证码"
                   :value="code"
                   ref="code" v-on:change="changeCode" v-on:input="changeCode">
            <div @click="loginCode" class="send">{{codeText}}</div>
        </div>
        <div class="wrapper btn-wrapper">
            <div class="input btn" @click="login">登录</div>
        </div>
    </div>
</template>

<script>
        name: "LoginPhone",
        data() {
            return {
                phone: '',  //输入框中的手机号
                code: '',  //输入框中的验证码
                codeText: '获取验证码',  //倒计时显示文字
                timingBoard: 60,  //倒计时数
                timer: null,  //一个定时器,用来倒数验证码
            }
        },
        methods: {
            loginCode() {},   //获取验证码
            login() {},       //登录
            changePhone() {}, //检查手机号长度
            changeCode() {},  //检查验证码长度
        }
</script>

有了这些已经足够你实现出一个基本的手机号登录界面了,如需完全代码请点击下面gist链接

完整代码参阅: https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48

说实话用了这么长时间的vue,都没看过API,这几天重构博客偶然发现Vue.directive,挺厉害的样子

总是看到这里用Vue.use(ElementUi),那里用Vue.use(axios),一直停留在了用的层面,正好我发现编写markdown解析实例的消耗好像有点大,直接处理成指令或许会方便很多(真的方便了很多,少写了一堆方法)

简单描述一下流程吧

渲染文章的组件在挂载的生命周期中,会查询本地记录中是否存在对应的文章,不存在就发起请求线上查找,否则404。
文章为markdown内容,考虑让前端处理直接解析出来(毕竟前端性能过剩233),减少后端逻辑处理负担,一致性什么现在是不需要考虑的。
markdown解析器就用marked,完成逻辑如下

//main.js

import Vue from 'vue'
import App from './App'
import markdown from './markdown';

//注入markdown解析器
Vue.use(markdown.install)
Vue.prototype.$marked = markdown.marked

new Vue({
    store,
    router,
    render: h => h(App)
}).$mount('#app')

集成marked制成插件形式暴露

//markdown.js

import marked from 'marked'
import('highlight.js/styles/atom-one-dark.css')

marked.setOptions({
    renderer: new marked.Renderer(),
    pedantic: false,
    gfm: true,
    tables: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
    highlight(code) {
        return require('highlight.js').highlightAuto(code).value;
    },
})

let install = (Vue) => {
    if (install.installed) return;
    Vue.directive('markdown', {
        bind: (el, binding, vnode) => {
            el.innerHTML = marked(binding.value)
        },
        update: (el, binding, vnode) => {
            el.innerHTML = marked(binding.value)
        }
    })
}

export default {
    marked,
    install,
}

在标签上使用v-markdown指令

//Test.vue

<template>
    <div>
        <div v-if="isNotFound">404</div>
        <div v-else v-markdown="article"></div>
    </div>
</template>

<script>
    const 这是一个查找文章的接口 = function () {
        return new Promise((resolve, reject) => {resolve(id)})
    }

    export default {
        name: "Test",
        data() {
            return {
                article: '',
                isNotFound: true,
            }
        },
        methods: {
            handlerArticle(id) {
                //查找本地文章
                let a = this.findArticle(id, async (id) => {
                    return await 这是一个查找文章的接口(id);
                })
                if (a == null) {
                    return 404;
                }

                return a;
            },
            findArticle(id, callback) {
                // let res = '## Test';
                let res = null;
                if (res === null) {
                    return callback(id);
                }

                return res;
            }
        },
        mounted() {
            //用id来查找文章
            let a = this.handlerArticle(123);

            if (a === 404) {
                //跳到错误页面
            }

            //处理loading
            this.isNotFound = false;
            this.article = a;  //将markdown内容直接保存到变量
        }
    }
</script>

完整代码参阅: https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7

蹭了学生优惠,买了个阿里云轻服务器,5M带宽转国外线路减少丢包概率还不错,ns联机美滋滋,不过据说港服联机服务要出了,不知道联机质量会怎么样

firewall中继栗子

# 打开ip伪装
firewall-cmd --add-masquerade --permanent

# 添加端口协议
firewall-cmd --add-forward-port=port=中转后的端口:proto=tcp:toport=酸酸乳端口:toaddr=酸酸乳地址 --permanent
firewall-cmd --add-forward-port=port=中转后的端口:proto=udp:toport=酸酸乳端口:toaddr=酸酸乳地址 --permanent

# 重载一下
firewall-cmd --reload

最近在捣鼓golang,其中用线上数据全放在redis里,以前写死的配置有点不太适合了,热加载才是王道!

俗话说不会搜索的程序员不是一个好程序员(误

观摩了一下其他大佬的写法,大多都是采用定时器+goroutine实现的。难度不大,开始码

配置文件结构体

假设一下我们的配置文件是json文件,那应该就是下面这样

// conf.json
{
  "host": "127.0.0.1",
  "port": 6379,
  "passwd": "",
  "db": 0
}

首先肯定是要写一个跟它一模一样的结构体出来

//json配置文件结构体
type Content struct {
    Host   string `json:"host"`
    Port   int    `json:"port"`
    Passwd string `json:"passwd"`
    Db     int    `json:"db"`
}

如果继续在此结构体上编写操作函数不太稳妥,序列化json也是直接操作的指针。之前拆散它们的试错,最后还是让它们在一起了233

优化结构体

将文件名,同步锁,最后修改时间,配置文件结构体整合一起

//配置结构体
type Config struct {
    Filename       string
    LastModifyTime int64
    Lock           *sync.RWMutex
    Data           interface{}
}

编写实例配置的工厂函数(这个有点约定俗成的规矩,具体出处你们自己去考证吧,好处挺多的)

func NewConfig(filename string, data interface{}) *Config {
    conf := &Config{
        Filename: filename,
        Data: data,
        Lock: &sync.RWMutex{},
    }

    conf.parse()

    go conf.reload()

    return conf
}

这里把配置结构体配置了默认参数,外部传入参数是配置文件的文件名配置文件结构体,这里data的类型为接口类型,好处是Config可以独立出来,代码多处复用。我们还使用了conf.parse()方法,第一次解析文件,go conf.reload()方法单独起一个goroutine跑(具体效果看后面),结果当然返回本体了

- 阅读剩余部分 -

为什么

为什么要开发积分商城呢?

因为我们之前使用的是兑吧的服务,还不错

但是得知今年(2018)下半年关闭免费版的服务,需要付费购买专业版或旗舰版使用

当然兑吧的工作人员也联系过我们,可以给予优惠价格,商业互吹肯定要说“好的,我们会讨论考虑一下”

如果我们用了兑吧,那你也不会看到这个文章了23333

- 阅读剩余部分 -

一般设置代理只需按以下来设置是没有问题的,但是今天我们要操作的websockt

server {
    location / {
        proxy_pass http://127.0.0.1:10086;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_http_version 1.1;
        proxy_read_timeout 300s;
    }
}

nginx -t一下

会出现如下错误:
nginx: [emerg] unknown "connection_upgrade" variable

就是这里出现了个坑

其中涉及到了一个nginx的设计问题 End-to-end and Hop-by-hop Headers
我在这里还是不过多赘述了,以免误人子弟

map在nginx中是为一个或多个变量设置映射表

下面是需要添加的几项配置:

http {
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

    server {
        location / {
            #…
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }
    }
}

自己编译php版本时出现的错误,哦,顺带说一句,可能php7以下会有出入,纯净系统
好长时间也是没有出文了,文档不是很想整理(¦3[____]

# 编译参数,基本就是自带的全装了
'./configure' '--cache-file=/opt/temp/cache/config.cache' '--prefix=/opt/temp/php/php-7.2.6' '--with-config-file-path=/opt/temp/php/php-7.2.6/etc' '--with-config-file-scan-dir=/opt/temp/php/php-7.2.6/var/db' '--disable-all' '--enable-short-tags' '--enable-opcache' '--enable-dba' '--enable-ipv6' '--enable-calendar' '--enable-wddx' '--enable-static' '--enable-inifile' '--enable-inline-optimization' '--enable-cli' '--enable-ftp' '--enable-filter' '--enable-gcov' '--enable-maintainer-zts' '--enable-json' '--enable-hash' '--enable-exif' '--enable-mbstring' '--enable-mbregex' '--enable-libgcc' '--enable-pdo' '--enable-posix' '--enable-embed' '--enable-sockets' '--enable-debug' '--enable-phpdbg' '--enable-zip' '--enable-bcmath' '--enable-fileinfo' '--enable-ctype' '--enable-cgi' '--enable-soap' '--enable-pcntl' '--enable-phar' '--enable-session' '--enable-tokenizer' '--with-imap-ssl' '--with-ldap' '--with-tidy' '--with-kerberos' '--with-xmlrpc' '--enable-fpm' '--enable-dtrace' '--with-pcre-regex' '--with-pcre-dir=/usr' '--with-mhash' '--with-mcrypt=/usr' '--with-zlib=/usr' '--with-curl=/usr' '--with-readline=/usr' '--with-libedit=/usr/local' '--with-gd=shared' '--enable-gd-native-ttf' '--with-png-dir=/usr' '--enable-intl' '--with-openssl=/usr' '--with-mysqli=mysqlnd' '--with-pdo-mysql=mysqlnd' '--with-sqlite3' '--with-pdo-sqlite' '--with-pgsql=/usr/bin' '--with-pdo-pgsql=/usr/bin' '--enable-dom' '--enable-libxml' '--enable-simplexml' '--enable-xml' '--enable-xmlreader' '--enable-xmlwriter' '--with-xsl' '--with-libxml-dir=/usr' '--with-gettext=/usr' '--with-iconv' '--with-bz2=/usr' '--enable-shmop' '--enable-sysvsem' '--enable-sysvshm' '--enable-sysvmsg' '--with-gmp=/usr' '--with-pear=/opt/temp/php/php-7.2.6/lib/php/pear' '--with-libdir=lib64' '--with-mcrypt=/usr/lib64' '--with-readline'

错误: configure: error: Please reinstall the libcurl distribution – easy.h should be in/include/curl/
解决方法: yum install curl-devel

错误: configure: error: jpeglib.h not found.
解决方法: yum install libjpeg-devel

错误: configure: error: png.h not found.
解决方法: yum install libpng-devel

错误: configure: error: To enable code coverage reporting you must have LTP installe
解决方法: yum install -y lcov

错误: configure: error: Cannot find sys/sdt.h which is required for DTrace support
解决方法: yum install -y systemtap-sdt-devel, apt install -y systemtap-sdt-dev

错误: configure: error: Cannot find OpenSSL's libraries
解决方法: yum install openssl openssl-devel openssl-libs
备注: 64位系统在编译时加上--with-libdir=/usr/lib64, 或者把/usr/lib64/libssl.so复制到/usr/lib/libssl.so

错误: configure: error: Unable to locate gmp.h
解决方法: yum install -y gmp gmp-devel

错误: configure: error: Unable to detect ICU prefix or no failed. Please verify ICU install prefix and make sure icu-config works.
解决方法: yum install -y icu libicu libicu-devel

错误: configure: error: Please reinstall libedit - I cannot find readline.h
解决方法: yum install -y readline readline-devel
备注: 64位系统在编译时加上--with-readline, 可能还需要你去单独下载编译最新版本的libedit

错误: configure: error: Cannot find libtidy
解决方法: yum install -y readline readline-devel, apt install libtidy-dev libtidy5

错误: configure: error: Cannot find OpenSSL's <evp.h>
解决方法: yum install -y openssl openssl-devel libssl-dev

错误: configure: error: Please reinstall the BZip2 distribution
解决方法: yum install -y libbz2-dev

错误: configure: error: Please reinstall the libcurl distribution
解决方法: yum install -y curl-devel, apt install libcurl4-gnutls-dev

错误: configure: error: mcrypt.h not found.
解决方法: apt install libmcrypt4-dev

错误: configure: error: Cannot find libpq-fe.h.
解决方法: apt install libpq-dev

错误: configure: error: Please reinstall readline - I cannot find readline.h
解决方法: apt install libreadline-dev

错误: configure: error: xslt-config not found.
解决方法: apt install libxslt1-dev

错误: configure: error: cURL version 7.10.5 or later is required to compile php with cURL support
解决方法: apt install libcurl4-openssl-dev, apt install libcurl4-gnutls-dev

错误: configure: error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution
解决方法: apt install libxslt1-dev

错误: configure: error: Unable to locate gmp.h
解决方法: apt install libgmp-dev

错误: configure: error: utf8_mime2text() has new signature, but U8T_CANONICAL is missing. This should not happen. Check config.log for additional information.
解决方法: apt install libc-client2007e-dev, apt install libc-client-dev

错误: configure: error: This c-client library is built with Kerberos support.
解决方法: apt install libkrb5-dev, 考虑加上--with-kerberos--with-imap-ssl参数

错误: configure: error: libfbclient, libgds or libib_util not found! Check config.log for more information.
解决方法: apt install firebird-dev, 可能会是apt install firebird2-dev

错误: configure: error: Cannot find ldap.h
解决方法: apt install libldap2-dev

错误: configure: error: Please reinstall the libzip distribution
解决方法: apt install libzip-dev

过年到现在都挺忙的,还有游戏在等着我van,这篇文章拖的时间有点长

上次不是讲到家里树莓派在挂机嘛,用了frp穿外网可以在外面随时随地的在家下片,美滋滋

但是问题来了,家里硬盘里的资源我想在公司用了,平时也没有拷U盘的习惯,一般写完都是直接关闭保存在硬盘,最近笔记本都放在公司没拿回家,更是限制了我的操作。

于是闲暇之余写了个目录程序出来,当然写之前我也去网上找了下的,大部分都不是那种性(简)冷(洁)淡风格,老外的那种大大圆圆的看着太卡通了不适合我睾贵的身份,唯一一个上眼的就是DirectoryLister/DirectoryLister,但是需要把程序和文件放在一个目录下,已经拒绝了我去使用它。
网络上大部分可以找到的基本都是与DirectoryLister/DirectoryLister操作是相似的,均是放置在同一目录下。想想还是自己写吧????‍♂️,问题不大

目录程序界面

项目地址: https://github.com/flxxyz/directory-lister
演示网址: http://cloud.flxxyz.com/

本程序适用于有一定的php知识储备的开发人员使用,小白用户使用请先了解一下composer使用

确保本身已经安装php再进行下面的操作

类unix

如macosx, ubuntu, centos, archlinux, debian这类系统

php -i | grep "/php.ini"

类unix系统

windows

如果没有添加环境变量,请将php目录添加至环境变量!!!

php -i | findstr "php.ini"

windows系统

通用

创建一个php文件,往里写入如下内容

  1. <?php
    echo phpinfo();

    通过浏览器访问

    通用

  2. echo(str_replace("\","/",str_replace("ext","php.ini",ini_get("extension_dir"))));

    慕若曦dalao评论区又给出来一种,明白的就用

This page loaded in 0.000987 seconds