匆匆那年

Javascript小tips之Object

Object.create和new xxx()的区别 语法 Object.create(proto, [propertiesObject]) 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 参数 proto 新创建对象的原型对象。 propertiesObject 可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。 返回值 一个新对象，带着指定的原型对象和属性。 例外 如果propertiesObject参数不是 null 或一个对象，则抛出一个 TypeError 异常。 var F = function () {}; F.prototype = o; return new F(); }; new Base() new 构造函数() 实际上执行的是： var obj = new Object(); obj.[[Prototype]] = Base.prototype; Base.call(obj) 原型链的理解 在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链。 访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的proto属性. Read more…

By 匆匆那年, ago

使用discord或者slack的api实现自己的翻译bot

首先，需要自己去discord或者slack申请账号，我使用的翻译api是用的牛津词典的，但是它对词组或者语句的支持不好（可能是不调用的api不对吧），所以又申请了俄罗斯的yandex的翻译接口，这个接口的翻译结果很简短。 本来是想用discord的，后来发现slack的开发生态貌似好点，并且开发文档也详细些，所以最好我是主打slack了。哈哈哈。 // index.js const Discord = require(‘discord.js’); require(‘env2’)(‘./.env’) const dictionaryCtrl = require(‘./modules/dictionary/control’); const translateCtrl = require(‘./modules/translate/control’); const slackHook = require(‘./hooks/slack’); const utils = require(‘./utils’); const server = require(‘./server’); // load express server const client = new Discord.Client() client.on(‘ready’, () => { console.log(“Connected as ” + client.user.tag) }) const replyHook Read more…

By 匆匆那年, ago

webpack反向代理proxyTable设置

目前各大打包工具在本地开发时都是使用的http-proxy-middleware插件 具体以vue为例，反向代理配置的就是proxyTable proxyTable: { 'http://www.baidu.com/ttt': { target: 'http://localhost:1333', changeOrigin: true, pathRewrite: { '\\.\\w*$': '~okkk', } }, '/user': { target: 'http://localhost:1333', changeOrigin: true, pathRewrite: { '/user': 'ppqq', } } }, 最终会变成 { context:'http://www.baidu.com/ttt', options:{ target: 'http://localhost:1333', changeOrigin: true, pathRewrite: { '\\.\\w*$': '~okkk', } } }, { context:'/user', options:{ target: 'http://localhost:1333', changeOrigin: Read more…

By 匆匆那年, ago

vuex的mapState mapActions mapMutations mapGetters在模块module使用详解

我们使用主要是为了简洁自己的代码， 没用这些方法之前我们的代码可能是这样的（这里用使用了modules的来举例子，没有module的使用更简单，这里的module为pim），mutation和action的使用方式一致就不单独举例子了。 export default { computed: { count(){ return this.$store.state.pim.count; }, newCount(){ return this.$store.getters[‘pim/newCount’]; } }, methods: { getList(params){ return this.$store.dispatch(‘pim/getList’, params); } } } 使用了mapState mapActions mapMutations mapGetters代码会显得简单很多 import {mapState, mapActions, mapMutations, mapGetters} export default { computed: { …mapState(‘pim’, { count: state => state.count }), …mapGetters(‘pim’, [‘newCount’], }, methods: Read more…

By 匆匆那年, ago

用webpack的require.context() 简化你的代码

随着我们的项目越来越大，平时的常见用操作就会觉得很‘麻烦’了，比如每次要添加新的路由, vuex里面添加新的module等 { name: 'moduleN', component ModuleN, path: '/moduleN', } 麻烦吗？谈不上吧，毕竟我们之前一直都是这么做的啊 最近了解到webpack打包是有个 require.context可以用，之前是不知道的。 以前最多是自己写一个数组，数组里面放置我们需要读取的文件名，然后循环数组读取里面的文件，虽然也还算不错，但是还是没有require.context爽啊。 require.context() 方法是用来创建自己的（模块）上下文，这个方法有 3 个参数： 要搜索的文件夹目录 是否还应该搜索它的子目录， 以及一个匹配文件的正则表达式。 用法 require.context(directory, useSubdirectories = false, regExp = /^\.\//); require.context返回的是一个类require方法，这个方法接收一个参数req，根据这个参数我们可以得到相应的模块信息。 类似require.context(directory, useSubdirectories, regExp)(req)这样使用。 返回的这个方法还有三个属性（ resolve, keys, id）。 resolve 是一个函数，它返回请求被解析后得到的模块 id。 keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。 id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到 通常我们用的最多的是keys这个方法。 还是有点懵？？？ Read more…

By 匆匆那年, ago

传递所有vue属性至子组件

我们有时候在二次封装组件（比如My-dialog）的时候，需要支持原有组件（如element-ui）的El-dialog所有props，然后自己在额外支持一些props，实现自己组件比原组件更加强大的功能。比较朴实的做法就是将用户传递给My-dialog的属性中需要给El-dialog的自己传递过去。 <my -dialog title=”标题”></my> <template> <el -dialog :title=”title”></el> </template> props:{ title: [String] } element-ui的El-dialog组件支持的props都得这样弄的话，是不是得疯了 这种情况我们就需要用到vue的函数式组件和render函数了。 export default { name : `MyDialog`, functional : true, render (createElement, context) { return createElement(`el-dialog`, { props : { …context.props, newProp : `test new prop`, }, }, [ context.slots().default, // also pass default slot to Read more…

By 匆匆那年, ago

docker运行WordPress报MySQL server has gong away

前几天在用docker安装wordpress，之前已经安装的有mysql，准备使用–link的方式让wordpress的容器访问之前的mysql的容器，但是总是一启动在浏览器里面访问就把容器给搞挂了，页面什么的当然是从来没有打开的。开始以为是自己用的wordpress镜像生成容器的命令参数有问题，就没有扔一边了。这个周末有时间了继续倒腾下，毕竟这个博客都是wordpress，总得给点面子用用官方的docker镜像吧 自己在网上搜搜感觉相关的帖子不多，用docker logs查看容器的日志，根据日志搜索也没有找到什么有效的解决方案。此时我更深信按照官网的操作一步一步进行肯定没问题，不然怎会没法跟我遇到一样的问题呢。 我就耐心的按照官网的指示认真执行了，结果居然还是不行，顿时我都要怀疑人生了，照着弄都不会？自己是有多SB啊。。。 可是自己另外的一个hapi16的node项目也是用的这个mysql8都是好好的，真是百思不得其解。 想到之前的hapi16的项目当初连接mysql也是有问题，改动东西 ALTER User ‘root’@’localhost’ IDENTIFIED WITH mysql_native_password BY ‘你的密码’; ALTER User ‘root’@’%’ IDENTIFIED WITH mysql_native_password BY ‘你的密码’; 怀疑跟这个有关，再网上搜搜了原来mysql8默认的是caching_sha2_password，因为大家多半是用的默认的所以他们用着没毛病，立马果然改成这个就好了 我也只有搞两个mysql8的容器了，一个用caching_sha2_password，一个mysql_native_password，貌似还有个sha256_password，暂时用不到吧，先不管了。。。

By 匆匆那年, ago

前端开发在package.json通过命令行设置环境变量

在package.json里面设置环境变量的方法 我们一般使用cross-env来实现 记得 npm install cross-env –save-dev { “scripts”: { “dev”: “cross-env CURRENT_ENV=development webpack-dev-server –inline –progress”, “build”: “cross-env CURRENT_ENV=production node build/build.js } } 执行npm run dev即可，在js文件里面就可以通过process.env.CURRENT_ENV得到值development 执行scripts里面命令实际相当于在执行 node_modules/.bin/cross-env CURRENT_ENV=development webpack-dev-server 有点懵？ 我们一般是安装开发依赖时是执行npm install xxx –save-dev的，这时在node_modules文件里面会有个.bin文件夹，有的文件系统可能是隐藏文件夹，.bin文件夹里面的文件夹一般是可以执行文件 上面是针对的开发环境，设置生产环境同样适用，并且生产环境还可以使用process.env.argv，它是一个数组，里面存放node运行的参数。 上面的package.json里面有npm run build命令，我们可以在node build/build.js后面加上参数，比如 { “build”: “cross-env CURRENT_ENV=production node build/build.js testArg” } 这个参数testArg就会在process.env.argv里面了，需要注意的是，这个process.env.argv并不是只有两个参数build/build.js和testArg，该数组里面第一个是当前node的目录，比如/Users/shadow/.nvm/versions/node/v8.11.4/bin/node，所以testArg的index是数组里面的第三个。使用时最好把process.env.argv打印下，确定好自己设置的参数的位置再使用。

By 匆匆那年, ago

dockerfile将挂载目录作为服务器目录

这里以作为nodejs根目录为例，并且用的pm2作为node的守护进程， FROM keymetrics/pm2:latest-alpine MAINTAINER shadowprompt (huixiong.cn@gmail.com) # create and set app directory RUN mkdir -p /node/www # Bundle app source WORKDIR /node/www # Install app dependencies ENV NPM_CONFIG_LOGLEVEL warn # Show current folder structure in logs RUN ls -al -R CMD [ “pm2-runtime”, “start”, “pm2.json” ] keymetrics/pm2:latest-alpine是不错的pm2镜像，本例在此基础上进行封装，比如封装成名为node_web_pm2:dockerfile的镜像 在dockerfile里面创建一个目标文件夹，即/node/www，接下来的重点就是启动容器的命令了 docker run Read more…

By 匆匆那年, ago

macbook 使用vi方向键变ABCD，不能删除

近期在捯饬docker，进入容器操作是不可避免的，在linux使用vi编辑器时，发现自己几乎没法操作，主要是一下问题： 1、用键盘的上下左右键调整光标变成了输入ABCD 2、delete键(PC的backspace)无法删除 那使用多蛋疼啊 解决方案如下 1、编辑vim /etc/vim/vimrc.tiny，首先将set compatible改为set nocompatible ，作用是让上下左右恢复正常. 2、在set compatible下面加上set backspace=2，作用是delete键可以删除了 需要root权限运行 sudo vi /etc/vim/vimrc.tiny，建议先将编辑器的光标定位到compatible的c出再按i进入编辑模式（提前进入编辑模式移动光标ABCD又出来了），直接输入no然后:wq保存 然后再次编辑此文件，加上set backspace=2

By 匆匆那年, ago