来者往者

koa面向对象式编程最近由于在用egg.js，所以十分羡慕它里面面向对象的逻辑，自己参照着简单封装了一个面向对象的koa2-node的 写法封装思想，将一些基础的方法（list, insert, update, delete）封装至一个父类（基类），子类继承它便可以获得对应的方法 route层 定义了一堆页面路由 用户请求对应的路由 进入对应...

日结博客 15.5.18 HZJavaScript按位取反运算符由于JavaScript数组里面没有contain的方法，所以每次查找一个元素是否存在时都使用indefOf去操作，而indexOf并没有给一个boolean值，而是给了一个下标，多了一步，这个时候按位取反运算符便排上了用途按位取反： 顾名思义，先把二进制的0101编码加上一位，再取相反符合取值如下~1 // -2~2 // -3...

把一个数组拆成两半const arr = [1, 2, 3, 4]const arr1 = arr.reduce((init, item, index) => { index % 2 === 0 ? init.push([item]) : init[init.length-1].push(item) return init},[])console.log(arr1)...

git rm -r --cached node_modulesgit commit -m '移除node_modules文件夹'git push origin master

PhantomJs 入门小demo为啥要用PhantomJs呢，而不是superagent + cheerio？后者只可以爬取一些静态网页是非常好用的，但是遇到了动态JS加载数据的网页就束手无策了。所以这里选取了phantomJs作为爬虫的工具（又称无头浏览器）官网下载phantomJs的exe程序配置phantomJs环境变量mac配置我用的是Iterm2 + Oh my zash 所以我配置的...

JS对象去掉下划线属性最近在写node端，所以遇到数据库直接返回数据带下划线的情况需要把下划线属性换成驼峰属性 封装了两个方法 将下划线换为驼峰 const replaceUnderLine = (val, char = '_') => {  const arr = val.split('')  const index = arr.indexOf(char...

koa路由层封装typescript例子koa面向对象式编程（仿egg.js）最近做了一个koa的例子，封装了一些controller层和services层技术栈采用的是koa2 + koa-router + mysql controller : 负责直接和数据库进行连接（写sql, 对参数进行处理） services: 负责传输数据 route: 负责...

AMap通过两点获取偏移量最近在用AMap做一个热点图，但是有些功能官方没法提供，所以自己封装了一些方法两点确定偏移的米数/**   *   * @param {Object | include longitude & latitude} point1   * @param {Object | include longitude & latitude} point2 ...

React-Native环境搭建最近要做一个移动端的app项目，所以在办公电脑上安装了一下rn的环境本人用的是mac噢，所以环境都是以mac为标准下载homebrew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"安装nodebrew instal...

Websocket心跳重连最近的工作业务上有用到关于websocket的相关知识，本来打算用socket.io去完成，但是最后还是采用了自带的websocket的方式完成需求 新建websocket this.websocket = new WebSocket('yoursocketurl')   设置websocket传输类型(默认为text/json，这...

记录yield错误今天在项目里面写一个函数时报错，所以记录下来yield是generator语法糖的提交我们来看一个例子​* function abc() {   yield 1}​abc.next()// 1​正常情况下，使用在函数体里使用多个yield是没有问题的* function abc() {   yield 1   yield 2...

puppeteer爬虫扒取数据后存入数据库由于最近的工作内容接触到了爬虫与测试所以这里就记录了一个小小的例子爬虫puppeteer + Koa2 + Mysql是从之前koa2项目上增强了爬虫的功能爬虫是以网易公开课的例子为例之前koa博客地址：https://blog.youkuaiyun.com/frank_come/article/details/80805032ko...

谷歌浏览器调试JavaScript代码由于在前端是一个弱类型语言，虽然现在增加了ESLint，Flow等静态检查，但是这些检查工具只能帮你检查出一些代码的显式问题，很多隐藏的逻辑性问题我们只能通过console去输出，但是有些时候打印出来的结果不尽人意，于是，我便找阿里的前辈学习了如何使用debugger去调试代码如下代码function a () {  let i = 1;...

日结博客 8.5.18 HZImmutable的运用判断数据是否值相等import { is } from 'immutable'let foo = { a: 'name' }let foo1 = { a: 'name' }console.log(is(foo, foo1)) // true在React中生命周期中运用shouldComponentUpdate(nextProps = {}...

RSA的node层应用由于前几天有朋友问我RSA的使用方式，便花了一些时间去看了一下文档自己做了一下前端和node端由来：由于表单提交的数据用f12或其他抓包工具可以看的一清二楚，所以前端在处理表单提交的时候会要求使用RSA/MD5等类似的加密工具加数据加密后再上传用到的类库： node-rsa 对称性加密 顾名思义，对称性加密就是两边的加密、解密方式用的是同一个秘方...

const LIST = [ 'script', 'css',]function appendDependencies() { const jsList = [ 'xxxx.xxxx.js', ] const cssList = [ 'xx.css' ] const fragment = document.createDocumentFragmen...

HTML基础1.前端需要注意哪些SEO合理的title、description、keywords： 搜索对着三项的权重逐个减小, title值强调重点即可, 重要关键词出现不要超过2两次，而且要靠前，不同页面title、description要有所不同;description把内容高度概括，长度合适语义化的HTML代码，符合W3C规范；语义化代码让搜索引擎容易理解网页2.Web...

MongoDB学习由于最近像后台看齐，所以特意来学一下MongoDB安装使用homebrew命令brew install mongodb配置mongod --config /usr/local/etc/mongod.conf启动新打开一个tab，输入mongo默认端口是27017,更换端口使用--port / --host参数之后便进入了mongodb的页面...

React-Native环境搭建最近要做一个移动端的app项目，所以在办公电脑上安装了一下rn的环境本人用的是mac噢，所以环境都是以mac为标准下载homebrew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"安装node...

前端与后台交互由于最近和大牛聊天，所得一些感悟，写下来，以勉励自己交互方式http请求（问答模式）通过传统的发送请求接收相应，一问一答的模式获得数据，主要负责传递参数，接收数据模版，渲染数据，对数据几乎不操作轮询（用于获取最新的数据）对于数据的实时性有要求时，可以采用轮询的方式，隔几秒钟发送一次请求询问后台是否有最新的数据，如果接收到了最新的数据，便更新自己的视图层...

记录一次配置前台模版的工作由于最近工作新建项目特别多，每次都要重新配置一些http.js 、 storage 、 项目结构，是一件特别冗余的工作，所以我在网上查了一下别人的做法，采用了scion + co实现的简单模版脚手架本质上只是对template.json的操作(读取、fs写入) + 执行terminal command（终端命令） 新建项目 本地安装好scion-cl...

简单实现EventEmitter尝试做了一下原理在一个页面监听某个时间在另一个页面触发源码Observer.jsclass Observer { constructor() { // initial the handlers as a empty array this.handlers = []; } // if you find o...

日结博客 18.04.18 HangZhou对于一次次从 window对象里面拿localStorage这种行为简直是深恶痛绝以下是我自己简单封装了一下storage在项目文件夹下新建一个storage.js get方法，传入key 和storage（可选，默认localStorage） export const get = (key, storage = localStorage) =>...

javascript是世界上最强大的编程语言，毋庸置疑。 现在，让我们来展示一下它的强大之处。 有时候写工具类的时候是否会烦恼一个类当作模块导出去以后类的内部在外部是一览无遗的，就像被扒光了裤子一样。 现在，让我们给我们的类穿上厚实的外衣//这里，我们创建了一个es5语法下的类（注意，类名要大写）function Demo(){ // 这是一个公有方法 function a(){

react-native 安卓打包 版本 0.49首先用命令生成一个签名文件（或者使用android studio） (my-release-key.keystore 是你的文件名）(my-key-alias是你签名名称) keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -

有些时候遇到post跨域问题的时候，这时候就需要把post里面的参数转换为get形式去请求     这里是把url传过来的参数转换为一个对象（es5写法，后为es6写法）function urlArgs(url){ var args = {}; var index = url.indexOf('?'); var query = url.substring(index

个人学习Vue上的一些总结，重新看了一遍Vue官方 api写了一个loading组件插件的话其实就是正常vue组件+挂载到原型 export default { data () { return { showFlag: false } }, created () {

ES6笔记拾遗这里是按记忆写的一些es6语法的笔记let、const箭头函数解构Promiserest运算符Async、AwaitGenerator模版字符串(``)Map、Filter、Reduce装饰器 以下根据目录顺序整理的一些代码和讲解let、const在es5或以前，由于JavaScript并没有作用域这一说法，而var 生命的变量由于有变量提升的弊端，导致代码不按正常逻辑运行，结果出错...

优化方式JavaScript压缩和模块打包源码解析的效率比字节码低。脚本的大小会对应用启动时间有着负面的影响模块打包将不同脚本打包在一起并放进同一文件，更少的http请求和单个文件解析都可以减少加载时间（CSS、图片都可以进行打包）按需加载资源资源的按需加载（惰性加载）减少向服务器发出的并发请求数量减少浏览器的内存使用率（更少的图片，更少的内存）减少服务器端的负载在使用DOM操作库时使用Arrar...

1.新生成一个Promise对象new Promise((resolve, reject) => { let func; if (method === METHODS[0]) { // 如果传进来的方法为'GET' func = fetch(_url) } else if (method === METHODS[1]) { // 如果传进来的方法为‘PO...

日结一篇博客系列： 4.15.18 HangZhou习惯了stylus / less /sass 写法去编写css ，刚入手React的时候实在不喜欢JSX内部定义CSS的写法，想我大前端Web怎么能区于满足Css那古板的写法呢，便整理了React中加载Stylus的写法，Less / Sass 后续有时间可以补上安装stylus / stylus-loader// 使用npm的方式npm i...

日结博客 16.04.18 HangZhouAntd作为阿里开发的一个React UI库（不仅仅是UI库）如何按需加载呢？其实很简单1.安装antdnpm install antd --saveyarn add antd2.引入antd的css库 在webpack.config.dev.js的module里的oneOf添加一下babel-loaderPS: 记住在webpack.config.p...

日结博客 17.4.18 HangZhouReact + Mobx对于各种spa页面或者各种前端页面的话，不拿一个状态管理工具如何完美地实现你的项目逻辑控制呢困扰于Redux的繁琐，mobx便横空出世了，为了简单你的状态管理而生做到完美状态管理，你只需要以下几步关于装饰器的编译，请看我另一篇博客：React + 装饰器安装 mobx mobx-reactnpm install mobx --sa...

在React文件做到对装饰器的编译，只需要简单几步弹出webpack配置npm run eject安装相关依赖npm install transform-decorators-legacy --save-dev编写.babelrc文件​ { "presets": [   "react-app" ], "plugins": [   "transform-decorator...

神奇的div实现textarea 文本编辑

日结博客 04.19.18 HZ对于每次都要从页面导入axios和配置路径的行为简直没完没了地厌恶，每次后台修改api地址都得从一大堆页面里寻找到那小小的一个axios.get，简直深恶痛绝请封装吧，万物皆能封装，封装治好了你多年的眼疾封装更合理的Axios操作类 1.导入axios至你的项目npm install --save axios2.在根路径创建http.j...

日结博客： 2018.04.24 HZObject.keys() 返回对象所有的键值组成的数组Object.entries() 返回对象所有的实体Object.values() 返回对象所有的值

###日结博客 20.04.18 HangZhou一直烦恼git如何把本地文件夹对应上1.进入本地项目文件夹git init (会创建一个.git文件)2.设置与远程仓库的链接git remote add xxx/xxx/xx.git (远程仓库地址)3.设置分支之间的联系git branch set-upstream=orgin/xxx xxx (origin下是仓库的分支名，另外一个是你的分支...

日结博客 5.3 HZNode中间层的作用随着项目的渐增，调用后台的接口的频率渐增，而页面的不一致需要不一样的数据结构后台如果根据页面去设计接口的话是很不灵活，所以这时候就出现了node层的出现  适配pc和移动端的数据结构 减少后台请求的次数  node端用来做请求的处理，路径/数据结构等等可以并发请求 后台可以采用HSF的形式 ...

###日结博客 10.5.18Jest相关笔记随着前端愈来愈多的代码，想要人工去测试某样功能段是否正常或者是api是否返回正常，这样无疑是耗费巨大的人工成本的，自动化测试便符合了这时我们的需要，以下便是作为单元测试的神器Jest一些用法导入yarn add --dev jest使用在src下创建相关test文件(src/test/sum.js)function sum(a, b) { ret...