<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[123的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/lemon_zhao</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; lemon_zhao]]></copyright><item><title><![CDATA[React-Redux初实践]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/80506007</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/80506007</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:52:28 +0800</pubDate><description><![CDATA[这礼拜终于把手头的需求完结的差不多了，终于有时间沉淀下这段时间学习到的新技术了。

redux，我是在阮一峰大神的教程里学习的，先粘上传送门，大神在3篇连续的教程中，很详细的讲解了redux和React-Redux 的原理和用法，而我接下来主要是整理下我的学习笔记，和我在实践中走过的坑。

一.我对redux理解

众所周知，用react去做页面逻辑的时候，页面所见的所有dom元素，都可以被拆分成...]]></description><category></category></item><item><title><![CDATA[react中（父子/祖先/路由）数据和事件的通信方法总结]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/80401001</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/80401001</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:52:21 +0800</pubDate><description><![CDATA[好久没更博了啊，0.0，最近手头的一个前端控制台项目，我是用阿里开源的ant框架搭建的，用着还是蛮顺手了，在使用过程中，碰到一些数据通信的问题，有些和vue相同，有些不一样的地方还是踩了些坑的，特地整理了下。

1.子组件调用父级的数据和方法

父级组件代码如下，把数据和方法通过props向下传递，在子组件中调用this.props.text即可获得父级数据，调用this.props.checkb...]]></description><category></category></item><item><title><![CDATA[js排序(二维数组/英文/中文)方法封装]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/76661161</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/76661161</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:52:15 +0800</pubDate><description><![CDATA[在实际业务中，往往会碰到排序的问题，今天我就特地梳理下我常用到的几个小方法，放到公共util里能提高不少效率呢！

1.一维数组排序

(1)js原生sort

 


/*
 * @Name 数组排序
 * @Param 
 * list {array} 原始数组
 * mode {string} 默认asc升序 desc降序
 * @Author zhaopeng@xunlei.com
 */...]]></description><category></category></item><item><title><![CDATA[在linux服务器上进行vue2的动态编译]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/78492396</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/78492396</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:52:04 +0800</pubDate><description><![CDATA[之前有提到，我这边进行的前端项目是基于vue2搭建的，编译一直是在本地进行的，然后合并到master分支上，再上线代码，这样做有一个问题就是，因为编译后的dist目录时存在于git代码库里的，后期分支多了，开发人员多了，经常merge和pull操作的时候，dist目录经常会发生冲突！so，正确的做法是把dist目录从git代码库里去掉，只保留src源文件，而编译的过程放到server上进行。

说...]]></description><category></category></item><item><title><![CDATA[vue2中（路由/父子/组件/事件）数据通信方法总结]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/76604948</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/76604948</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:51:13 +0800</pubDate><description><![CDATA[最近一直在搞我司官网控制台的重构，被产品虐的这叫一个死去活来，今天终于有时间，整理下最近用到的vue数据通信的几种场景。

1.组件通信

这是最普通的交互场景，如下图中，报表页面用到了一个自己写的下拉菜单的组件，用户在子组件内部勾选完成后，通过触发emit把勾选的数据传递给父子的data层



父级html

 


&amp;lt;domainPopSelect v-bind:domainbizty...]]></description><category></category></item><item><title><![CDATA[vue2.0结合DataTable插件实现表格的动态刷新]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/55666914</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/55666914</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:51:06 +0800</pubDate><description><![CDATA[今天周六啊！一想到我的凤九和东华要生小滚滚，我就归心似箭无心敲代码！

产品提出的需求是这样的，很普通的一个统计server端task完成率和状态的表格，要自动刷新其中的数据，并且当单个task完成的时候report给server端，看起来好easy好easy的一个需求啊！且听我说完哈！

我这边使用的是框架是vue，表格自然用v-for渲染，然后我们这边分页搜索神马的都是前端弄，也就是说后端只管...]]></description><category></category></item><item><title><![CDATA[vue2.0开发过程中踩的坑！]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/55510589</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/55510589</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:50:56 +0800</pubDate><description><![CDATA[昨天素素终于跳了诛仙台，我好开心呀！今儿个特地整理了下vue2.0开发过程中踩得坑！希望和大家交流！

一、声明周期

声明周期钩子详见这张图  https://segmentfault.com/q/1010000007704114

1.0的ready替换成了mounted，即模板编译挂载之后

数据data要写成function的形式了，像这样

 


data () {
    retur...]]></description><category></category></item><item><title><![CDATA[vue2.0实现父子通信（基于之前我写的复选框组件）]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/54601831</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/54601831</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:50:48 +0800</pubDate><description><![CDATA[不久前分享了我自己写的多选框组件（http://download.youkuaiyun.com/detail/lemon_zhao/9705162），基于vue1.0写的，最近写的项目是vue2.0的，顺道把这个组件做了下升级，1.0和2.0差别还是蛮大的，走了不少弯路，特地总结一下！！
1.套用官网上的一句话总结父子通信的问题，props down, events up，父级往子集通信用props属性，子集...]]></description><category></category></item><item><title><![CDATA[网速前端计算&系统探测]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/62881843</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/62881843</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:50:30 +0800</pubDate><description><![CDATA[最近做一个web的检测工具，主要探测对单个节点的网速测试，和当前客户端的系统和浏览器，学到了不少东西哈！特地分享下！！

1.计算网速封装的函数，传入ajax起始时间，ajax成功返回时间，数据容量，返回3个网速的参数，最常见的就是kBps，注释写的很清楚了哈，在下面！

 


/*
 * 计算网速
 *
 * @paras
 * ajaxStartTimeStamp ajax开始时间戳 单位(...]]></description><category></category></item><item><title><![CDATA[实际业务中碰到的几种ajax请求方法总结]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/62884773</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/62884773</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:50:18 +0800</pubDate><description><![CDATA[最近在做一个针对单个节点测速的功能页面，测速的逻辑是，测上传速度时，前端传5m数据给server，记录上传和返回数据的时间，测下载速度时，从server下载1m的数据，记录下载和下载成功的时间，上传和下载用的是ajax同步以避免客户端带宽阻塞的问题，并进行3次取平均值。在开发过程过，因为ajax同步异步的问题，走了不少弯路，特地也把之前遇到的业务逻辑整理汇总一下。

1.普通的ajax，async...]]></description><category></category></item><item><title><![CDATA[基于antd的上传文件进度条]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/79065288</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/79065288</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:50:10 +0800</pubDate><description><![CDATA[最新新搭了一个控制台，是基于阿里antd框架搭建的，总体上来讲，antd从UI交互和组件的api上来看，还都是很好的框架了，不过还是踩了不少坑的，哈哈，后面慢慢整理出来。

这里碰到的情况是，有个上传大文件的需求，需要在前端展示出上传的进度，刚接到需求的时候，我想到的方法是，由server端动态返回上传进度的百分比，前端一直不停的调用这个接口就行了，后来百度了下，发现前端自己就可以实现这个需求，是...]]></description><category></category></item><item><title><![CDATA[vue实现多种复选框，含搜索]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/53513766</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/53513766</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:49:31 +0800</pubDate><description><![CDATA[最近在重构一个复选框组件，原型是select2这个jquery插件， 有兴趣的可以去搜下，封装的很好，但是并不能满足业务所有需求，最要命的是jquery插件这种以dom驱动数据的库，并不能和vue和angular这种数据驱动dom的框架很好的结合，所以我用vue的component重构了一下，走了不少弯路，做的demo分享出来，还请大家指点一二！

download地址：http://downlo...]]></description><category></category></item><item><title><![CDATA[grunt自动化加密js]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/52161988</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/52161988</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:49:25 +0800</pubDate><description><![CDATA[Grunt配置方法

前段时间终于搞定了grunt自动化加密js，整理了下流程，省的大家走弯路哈！整个包的下载地址：http://download.youkuaiyun.com/detail/lemon_zhao/9598890

1.从https://nodejs.org/en/下载node安装包 安装nodeJs环境

检查nodeJs是否安装成功，cmd下输入node -v检查当前node版本号

2....]]></description><category></category></item><item><title><![CDATA[基于浏览器的m3u8和flv的播放器]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/53053827</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/53053827</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:48:35 +0800</pubDate><description><![CDATA[最近手头的一个项目，基于浏览器的要做一个视频播放器，h5的新标签只支持mp4和ogg，还有webm三种格式，我这边的需求是flv和m3u8，flv还好说，很多sfw媒体都支持，m3u8流媒体就不成了，也是折腾了半天哈，从老外那边找到的解决办法！废话不多说，上代码！

demo下载地址：http://download.youkuaiyun.com/detail/lemon_zhao/9674339

老外原网站...]]></description><category></category></item><item><title><![CDATA[前端记住密码功能]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/69390175</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/69390175</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:48:27 +0800</pubDate><description><![CDATA[上周给运营系统补了个记住密码的功能，好像很容易的需求啊，还真费了不少劲，补充了不少cookie方面的知识~特地总结下！

大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号信息存到cookie当中，效果图如下：



浏览...]]></description><category></category></item><item><title><![CDATA[基于vueJs框架的翻页组件]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/52303035</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/52303035</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:48:20 +0800</pubDate><description><![CDATA[翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vueJs写的，同样适用于angular哈！

封装下载地址：http://download.youkuaiyun.com/detail/lemon_zhao/9611920

效果截图：



整体实现逻辑，当用户点击页码时，ajax从后端获取数据，包括：records（当前页查询到的记录），totalRecords: 121（所有记...]]></description><category></category></item><item><title><![CDATA[纯前端js生成csv文件下载]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/53642247</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/53642247</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:48:10 +0800</pubDate><description><![CDATA[昨天公司的一个需求，页面上导出excel，按之前我的做法都是后端生成这个file，放到服务器上，返一个下载link给前端，前端通过link下载，这样做的缺点就是等待的时间比较长，后端创建文件，http通信都会影响响应速度，在网上折腾半天，终于完成纯前端生成csv文件，再也不依赖后端了哈！通过a标签和字符串拼接的方式实现！封装了个demo如下：

下载连接 http://download.csdn....]]></description><category></category></item><item><title><![CDATA[vue2.0环境搭建（含router路由）]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/55509903</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/55509903</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:48:02 +0800</pubDate><description><![CDATA[现如今这四海八荒都在用vue啊！年前我手头新做一个运营平台，截图如下，前后端分离，费了半天劲终于把环境搭建起来了，年后有功夫了，特地整理下，希望大家能少走些弯路！

一、搭建环境

用官方的脚手架cli一步一步按流程走，我整理出的流程如下，参考官网指导 https://cn.vuejs.org/v2/guide/installation.html#NPM

1. npm install vue-c...]]></description><category></category></item><item><title><![CDATA[VueJs $watch()方法总结！！]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/52191527</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/52191527</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:47:46 +0800</pubDate><description><![CDATA[最近公司用vue框架写交互，之前没怎么写过，但是很多数据双向绑定的东东跟angular很像！所以上手很快！哈哈

今天就碰到一个vue的问题啊！！产品需求是，datetimepick时间选择器一更改时间，就重新ajax获取数据渲染图表，很简单的需求啊！用angula ng-change监听inpu框框，分分钟搞定啊！用特么js原生 on-change也分分钟搞定啊！问题是尼玛的VueJs对inpu...]]></description><category></category></item><item><title><![CDATA[js原生滚动条动画]]></title><link>https://blog.youkuaiyun.com/lemon_zhao/article/details/52064179</link><guid>https://blog.youkuaiyun.com/lemon_zhao/article/details/52064179</guid><author>lemon_zhao</author><pubDate>Tue, 27 Nov 2018 09:47:09 +0800</pubDate><description><![CDATA[说起滚动条动画，之前一直用的jQuery，今天比较闲，用js手写了一个，比jQ的好用哈，jQ是匀速滑动，我这个有减速效果！

1.调用scroll_to，传入指定位置的高度参数就可以用了！

2.减速的效果是用步长实现的，即每次滚动都是剩余距离的1/40，所以越滚越快！

 

学到的几个js获取位置方法：

1.当前页滚动高度： document.body.scrollTop

2.元素距离文档...]]></description><category></category></item></channel></rss>