- 博客(34)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 React-Redux初实践
这礼拜终于把手头的需求完结的差不多了，终于有时间沉淀下这段时间学习到的新技术了。redux，我是在阮一峰大神的教程里学习的，先粘上传送门，大神在3篇连续的教程中，很详细的讲解了redux和React-Redux 的原理和用法，而我接下来主要是整理下我的学习笔记，和我在实践中走过的坑。一.我对redux理解众所周知，用react去做页面逻辑的时候，页面所见的所有dom元素，都可以被拆分成...
2018-11-27 09:52:28
455
原创 react中（父子/祖先/路由）数据和事件的通信方法总结
好久没更博了啊，0.0，最近手头的一个前端控制台项目，我是用阿里开源的ant框架搭建的，用着还是蛮顺手了，在使用过程中，碰到一些数据通信的问题，有些和vue相同，有些不一样的地方还是踩了些坑的，特地整理了下。1.子组件调用父级的数据和方法父级组件代码如下，把数据和方法通过props向下传递，在子组件中调用this.props.text即可获得父级数据，调用this.props.checkb...
2018-11-27 09:52:21
2311
原创 js排序(二维数组/英文/中文)方法封装
在实际业务中，往往会碰到排序的问题，今天我就特地梳理下我常用到的几个小方法，放到公共util里能提高不少效率呢！1.一维数组排序(1)js原生sort /* * @Name 数组排序 * @Param * list {array} 原始数组 * mode {string} 默认asc升序 desc降序 * @Author [email protected] */...
2018-11-27 09:52:15
1126
1
原创 在linux服务器上进行vue2的动态编译
之前有提到，我这边进行的前端项目是基于vue2搭建的，编译一直是在本地进行的，然后合并到master分支上，再上线代码，这样做有一个问题就是，因为编译后的dist目录时存在于git代码库里的，后期分支多了，开发人员多了，经常merge和pull操作的时候，dist目录经常会发生冲突！so，正确的做法是把dist目录从git代码库里去掉，只保留src源文件，而编译的过程放到server上进行。说...
2018-11-27 09:52:04
1945
1
原创 vue2中（路由/父子/组件/事件）数据通信方法总结
最近一直在搞我司官网控制台的重构，被产品虐的这叫一个死去活来，今天终于有时间，整理下最近用到的vue数据通信的几种场景。1.组件通信这是最普通的交互场景，如下图中，报表页面用到了一个自己写的下拉菜单的组件，用户在子组件内部勾选完成后，通过触发emit把勾选的数据传递给父子的data层父级html <domainPopSelect v-bind:domainbizty...
2018-11-27 09:51:13
12491
原创 vue2.0结合DataTable插件实现表格的动态刷新
今天周六啊！一想到我的凤九和东华要生小滚滚，我就归心似箭无心敲代码！产品提出的需求是这样的，很普通的一个统计server端task完成率和状态的表格，要自动刷新其中的数据，并且当单个task完成的时候report给server端，看起来好easy好easy的一个需求啊！且听我说完哈！我这边使用的是框架是vue，表格自然用v-for渲染，然后我们这边分页搜索神马的都是前端弄，也就是说后端只管...
2018-11-27 09:51:06
68885
9
原创 vue2.0开发过程中踩的坑！
昨天素素终于跳了诛仙台，我好开心呀！今儿个特地整理了下vue2.0开发过程中踩得坑！希望和大家交流！一、声明周期声明周期钩子详见这张图 https://segmentfault.com/q/10100000077041141.0的ready替换成了mounted，即模板编译挂载之后数据data要写成function的形式了，像这样 data () { retur...
2018-11-27 09:50:56
11613
原创 vue2.0实现父子通信（基于之前我写的复选框组件）
不久前分享了我自己写的多选框组件（http://download.csdn.net/detail/lemon_zhao/9705162），基于vue1.0写的，最近写的项目是vue2.0的，顺道把这个组件做了下升级，1.0和2.0差别还是蛮大的，走了不少弯路，特地总结一下！！1.套用官网上的一句话总结父子通信的问题，props down, events up，父级往子集通信用props属性，子集...
2018-11-27 09:50:48
2161
原创 网速前端计算&系统探测
最近做一个web的检测工具，主要探测对单个节点的网速测试，和当前客户端的系统和浏览器，学到了不少东西哈！特地分享下！！1.计算网速封装的函数，传入ajax起始时间，ajax成功返回时间，数据容量，返回3个网速的参数，最常见的就是kBps，注释写的很清楚了哈，在下面！ /* * 计算网速 * * @paras * ajaxStartTimeStamp ajax开始时间戳 单位(...
2018-11-27 09:50:30
1326
原创 实际业务中碰到的几种ajax请求方法总结
最近在做一个针对单个节点测速的功能页面，测速的逻辑是，测上传速度时，前端传5m数据给server，记录上传和返回数据的时间，测下载速度时，从server下载1m的数据，记录下载和下载成功的时间，上传和下载用的是ajax同步以避免客户端带宽阻塞的问题，并进行3次取平均值。在开发过程过，因为ajax同步异步的问题，走了不少弯路，特地也把之前遇到的业务逻辑整理汇总一下。1.普通的ajax，async...
2018-11-27 09:50:18
5954
1
原创 基于antd的上传文件进度条
最新新搭了一个控制台，是基于阿里antd框架搭建的，总体上来讲，antd从UI交互和组件的api上来看，还都是很好的框架了，不过还是踩了不少坑的，哈哈，后面慢慢整理出来。这里碰到的情况是，有个上传大文件的需求，需要在前端展示出上传的进度，刚接到需求的时候，我想到的方法是，由server端动态返回上传进度的百分比，前端一直不停的调用这个接口就行了，后来百度了下，发现前端自己就可以实现这个需求，是...
2018-11-27 09:50:10
15621
5
原创 vue实现多种复选框，含搜索
最近在重构一个复选框组件，原型是select2这个jquery插件， 有兴趣的可以去搜下，封装的很好，但是并不能满足业务所有需求，最要命的是jquery插件这种以dom驱动数据的库，并不能和vue和angular这种数据驱动dom的框架很好的结合，所以我用vue的component重构了一下，走了不少弯路，做的demo分享出来，还请大家指点一二！download地址：http://downlo...
2018-11-27 09:49:31
12855
原创 grunt自动化加密js
Grunt配置方法前段时间终于搞定了grunt自动化加密js，整理了下流程，省的大家走弯路哈！整个包的下载地址：http://download.csdn.net/detail/lemon_zhao/95988901.从https://nodejs.org/en/下载node安装包 安装nodeJs环境检查nodeJs是否安装成功，cmd下输入node -v检查当前node版本号2....
2018-11-27 09:49:25
1008
1
原创 基于浏览器的m3u8和flv的播放器
最近手头的一个项目，基于浏览器的要做一个视频播放器，h5的新标签只支持mp4和ogg，还有webm三种格式，我这边的需求是flv和m3u8，flv还好说，很多sfw媒体都支持，m3u8流媒体就不成了，也是折腾了半天哈，从老外那边找到的解决办法！废话不多说，上代码！demo下载地址：http://download.csdn.net/detail/lemon_zhao/9674339老外原网站...
2018-11-27 09:48:35
17294
2
原创 前端记住密码功能
上周给运营系统补了个记住密码的功能，好像很容易的需求啊，还真费了不少劲，补充了不少cookie方面的知识~特地总结下！大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号信息存到cookie当中，效果图如下：浏览...
2018-11-27 09:48:27
53964
10
原创 基于vueJs框架的翻页组件
翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vueJs写的，同样适用于angular哈！封装下载地址：http://download.csdn.net/detail/lemon_zhao/9611920效果截图：整体实现逻辑，当用户点击页码时，ajax从后端获取数据，包括：records（当前页查询到的记录），totalRecords: 121（所有记...
2018-11-27 09:48:20
4527
原创 纯前端js生成csv文件下载
昨天公司的一个需求，页面上导出excel，按之前我的做法都是后端生成这个file，放到服务器上，返一个下载link给前端，前端通过link下载，这样做的缺点就是等待的时间比较长，后端创建文件，http通信都会影响响应速度，在网上折腾半天，终于完成纯前端生成csv文件，再也不依赖后端了哈！通过a标签和字符串拼接的方式实现！封装了个demo如下：下载连接 http://download.csdn....
2018-11-27 09:48:10
5776
原创 vue2.0环境搭建（含router路由）
现如今这四海八荒都在用vue啊！年前我手头新做一个运营平台，截图如下，前后端分离，费了半天劲终于把环境搭建起来了，年后有功夫了，特地整理下，希望大家能少走些弯路！一、搭建环境用官方的脚手架cli一步一步按流程走，我整理出的流程如下，参考官网指导 https://cn.vuejs.org/v2/guide/installation.html#NPM1. npm install vue-c...
2018-11-27 09:48:02
13738
原创 VueJs $watch()方法总结！！
最近公司用vue框架写交互，之前没怎么写过，但是很多数据双向绑定的东东跟angular很像！所以上手很快！哈哈今天就碰到一个vue的问题啊！！产品需求是，datetimepick时间选择器一更改时间，就重新ajax获取数据渲染图表，很简单的需求啊！用angula ng-change监听inpu框框，分分钟搞定啊！用特么js原生 on-change也分分钟搞定啊！问题是尼玛的VueJs对inpu...
2018-11-27 09:47:46
51188
4
原创 js原生滚动条动画
说起滚动条动画，之前一直用的jQuery，今天比较闲，用js手写了一个，比jQ的好用哈，jQ是匀速滑动，我这个有减速效果！1.调用scroll_to，传入指定位置的高度参数就可以用了！2.减速的效果是用步长实现的，即每次滚动都是剩余距离的1/40，所以越滚越快！ 学到的几个js获取位置方法：1.当前页滚动高度： document.body.scrollTop2.元素距离文档...
2018-11-27 09:47:09
9347
原创 基于angular路由的requireJs按需加载js
最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！）angular路由作为单页面应用，切换页面的时候都是一个页面，所以切换controller和按需加载控件js就成了大问题！！折腾了我半天啊，angular-route内置的办法也没有解决这个问题，最终我是用requireJs解决的...
2018-11-27 09:46:31
5137
1
原创 封装几个特别好看的弹窗！
刚从国外网站看到两个特别好看的弹窗，迫不及待赶紧把代码爬下来！哈哈，error和alert弹窗的圆环是用canvas做的啊！效果非常赞！！下载：http://download.csdn.net/detail/lemon_zhao/9598887 ...
2018-11-27 09:45:48
1782
原创 封装一个特别好看的进度条样式！
这可是我一个属性一个属性从国外网站上爬下来的啊！超炫的动态进度条啊，有木有！，效果如下：demo下载地址：http://download.csdn.net/detail/lemon_zhao/9596906...
2018-11-27 09:45:43
1933
原创 封装一个特别好看的选项卡样式！
之前做项目，仿照国外的网站，封装了一个特别好看的选项卡样式，今天有空，特地和大家分享下！效果如下！demo封装地址 http://download.csdn.net/detail/lemon_zhao/9596904 ...
2018-11-27 09:45:38
1211
原创 angular 组件化
在做sass产品页面的时候，往往每个页面的header和footer都是一样的，还有最近我做的页面，类似datetimepicker这种组件，其实都是可以复用的代码，所以如果能把这些公用的UI组件提取出来，对于维护就会方便很多啦！！angular框架就支持这种组件化管理，不过也有优缺点，我先来说实现方法哈！index.html：没有用到路由，所以js都是src生引进来的 <...
2018-11-27 09:45:09
11002
1
原创 angularjs 路由切换
之前有在服务器端接触到angular路由切换，今天想在本地实现路由，捣鼓半天终于成功了，特把步骤整理分享下，免得大家走弯路！1.首先引入angular.min.js和angular-route.min.js2.然后我们来写框架index.html，index里面装的是所有页面都有的nav导航和footer页脚（我这个demo里只有nav），模板文件page1.html，page2.html...
2018-11-27 09:44:55
2757
原创 js 生成随机字符串
今儿碰到这么一个小问题啊，要前端生成一个随机字符串的token，特地写了个小算法，生成随机数字，和随机字符串！ //800~1500随机数var num = Math.random()*700 + 800num = parseInt(num,10)console.log(num)//1~32的随机整数for (var i=0; i<1000; i++){ var a1...
2018-11-27 09:44:38
5781
原创 echarts tooltip格式化！
echarts中，鼠标悬停在图表上会有悬停框提示，但是格式化是个问题啊！不处理的话，如下图1，看了半天api啊，这个tooltip的format函数和一般的format函数不一样！！！我写的格式化函数如下： var formatter = function (value, index) { //var value = (value/86400).toFixed(2) ...
2018-11-27 09:44:29
24974
原创 js处理时间（一）
最近正好闲下来了！整理了一下时间处理的方法，都是自己写的哈！！本篇封装：(1) js取得2016-08-11 19:46:01格式的时间(2) js取得本周第一天/最后一天(3) js取得本月第一天/最后一天 <script type="text/javascript"> /* 输出2016-08-11 19:46:01的格式 */ var t...
2018-11-27 09:43:39
994
原创 js处理时间（二）
紧接上篇；本篇封装：(1)unix时间戳相互转化(2)两天相隔 <script type="text/javascript">/*unix时间戳转正常时间*/var unixtime=1359727392;var unixTimestamp = new Date(unixtime* 1000); commonTime = unixTimestamp.toL...
2018-11-27 09:43:17
332
原创 js对象的深度克隆！
js中创建的对象指向内存，所以在开发过程中，往往修改了一个对象的属性，会影响另外一个对象。尤其是在angular框架中，dom是由数据驱动的，在增删改查对象的操作中，对象属性的继承关系是很让人头痛的！我之前遇到的问题就是，在编辑页面，操作了对象数据，影响到了展示数据的展现！我整理了两种深度克隆对象的方法，供大家参考！首先var 一个假数据 var schedule = {...
2018-11-27 09:41:55
5731
原创 ecahrts绘图 yAxis数值大于10亿的问题
最新用echarts绘图，发现一个小问题啊！！当y轴数值大于10亿的时候，显示就有问题啊！如下图网上找了半天，也没有好的解决办法，自己写了一个format方法，做下转义，搞定！ axisLabel: { formatter: function (value, index) { if (value>=100000000){ return...
2018-11-27 09:41:37
1479
原创 js生成邀请码(随机6位 数字+大小写字母)
前段时间用js写了个小工具，随机生成500个邀请码，并导出csv，邀请码的格式是 数字+大小写字母，长度为6。实现很简单，主要用到了生成随机数和导出csv的方法，具体实现如下，需要额外注意的是，生成的邀请码需要校验唯一。var header = ['邀请码(随机6位 数字+大小写字母)'];var content = [];var chars = 'ABCDEFGHIJKLMNOPQ...
2018-11-27 09:41:16
7542
原创 js秒数格式化
前端经常会从后端获取到时间，比如我今天就碰到，后端只返回秒数，只能我自己转义，就写了个小方法，把3921转化为1小时5分钟21秒这样的格式，总的来说就是不断遍历自身的秒数。用起来非常的简单！！！ var secdons = 3921var timeFormat = ''function timeFilter(secdons){ if (secdons<60){ var ...
2018-11-27 09:39:02
3448
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人