来者往者

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

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

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

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

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

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

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

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

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

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

把一个数组拆成两半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)...

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

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

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

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

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

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

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

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

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

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

日结博客 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 = {}...

日结博客 5.7.18 HZ Moment.JS获取时间差moment.js是一款现在对时间处理的强大的函数,使用安装 npm install moment import moment from 'moment' moment from 'moment' 获取两个日期之间的差 let date1 = moment('2018-02-02')let d...

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

日结博客 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...

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

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

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

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

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

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

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 -

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

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

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

日结博客 28.04.18 HZ数组的Every和Some方法every 对数组进行遍历，只有里面的每个数值都满足条件才返回真，否则假const arr = [1, 2, 3, 4]const flag = arr.every(item => item > 2) // falseconst flag = arr.every(item => item > 0) // t...

日结博客 27.4.18 HZJS里面的一个等式比较，会经过哪几个步骤呢？valueOf 返回一个数值，在该变量上调用该函数判断是否是个数值，如果是，则返回（Number）toString（返回一个字符串值）,在该变量上调用该函数判断是否是个字符串，如果是，则返回（String）经历了上面还没返回的话， 便会报错TypeError常见的值undefined: 0null: 0'1': 1true:...

###日结博客 11.5 18 HZ记录Jest运行的问题关于webpack里alias的问题由于在webpack配置了路径别名，所以在你shallow/mount/render时报路径错误解决方案// 在package.json Jest里加入 "moduleNameMapper": {      "^components(.*)$": "<rootDir>/src/compon...

日结博客 4.5 HZKoa设置下载属性一直以来都是研究怎么上传却不知道如何去下载一个文件此处以txt为例router.get('xxxpath', (ctx) => {   ctx.set('Content-disposition','attachment;filename='+'name.txt'); // 设置你的文件名    const data = new Buffer('Im...

###日结博客 26.4.18 HZ代码题如何让if(a == 1 && a ==2 && a ==3)成立？这里考验的是对valueOf的理解程度在对一个变量进行boolean判断的时候，JS引擎会自动调用他的valueOf去和等式另一边判断所以我们需要做的就是改写一下valueOflet a = 1a.prototype.valueOf = { re...