![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
实践思考
文章平均质量分 62
Creabine
时无重至,华不再扬
展开
-
关于React 中All in js的浅尝辄止(React 柱状图,环形图)
什么是 All in js前段时间在别人的项目上了解到了styled-components插件,它能够用js来写css,方便的在其中加上需要的逻辑。React本身用过jsx已经把html用js来写了,再加上styled-components,就能够实现All in js 这种编码方式。如何看待All in js了解之后跟小伙伴在群里讨论了一下,这种All in js的方式比较有争议,不...原创 2019-02-15 11:03:02 · 1373 阅读 · 0 评论 -
Vue全家桶实践(六)---自定义指令(directive)
最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算简单梳理一下思路。相关博客:Vue全家桶实践(一)—vue-cliVue全家桶实践(二)—iViewVue全家桶实践(三)—axiosVue全家桶实践(四)—vue-routerVue原创 2018-01-07 17:21:11 · 2064 阅读 · 0 评论 -
javascript递归的实际应用场景
递归是各种书里经常讲到的东西,但是今天才在工作中遇到合适的使用场景,用过一次之后对他的理解也更具体了,在这里整理一下。递归 递归的概念简单来说,就是在函数里边调用函数本身。 比如一个阶乘函数:function factorial (n) { if(n === 1){ return } return n * factorial原创 2018-01-10 19:56:21 · 5952 阅读 · 1 评论 -
Vue过渡的应用及技巧
Vue中提供了`<transition>`和`<transition-group>`来为元素增加过渡动画。文档写的很清楚,但是实际使用起来还是费了一番功夫。这里做一个简单的记录:单个过渡使用`<transition>`元素把要过渡的部分包裹起来,`<transition>`不会在DOM中渲染出来,只是做一个标记。其中常用的属性主要是:- name : 匹配相应的过渡类名,当没有name的时候默认原创 2016-11-16 15:05:51 · 8088 阅读 · 0 评论 -
call,apply,bind的作用及使用场景
网上讲这些的文章数不胜数,之前也看过有理解一些。前段时间在工作中遇到了一个场景又用到了,正好来重新总结一下,整理思路,加强记忆。参考资料:深入浅出 妙用Javascript中apply、call、bindcall,apply,bind的作用 js在开发的过程中经常会用到this,来表示当前运行环境本身,通过this来取得当前环境下的各种数据和方法。但是,有时候我们想要让a对象借b对象的方法用一原创 2017-10-20 14:33:00 · 2312 阅读 · 0 评论 -
Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式
访问器属性的介绍参考资料:《JavaScript高级程序设计》(第三版)第六章js的对象有两种属性: 数据属性和访问器属性。1.数据属性数据属性包含一个数据值的位置。这个位置可以读取和写入值。数据属性也就是我们最常见的对象属性。数据属性有4个描述他行为的特性:Configurable: 能否用delete删除属性从而重新定义属性。默认为trueEnumerable: 能否通过for-in遍历原创 2017-03-05 18:54:59 · 4972 阅读 · 1 评论 -
JavaScript中label语句的使用
之前在读《javascript高级程序设计》的时候,看到过lable语句,当时看完感觉好像很少用到,但是今天,刚好在项目终于到了合适的场景,合理使用label可以大幅度优化性能。首先来简单描述一下这个场景:var itemsId = [1,3];var all = [[{id:1,name:hehe},{id:3,name:hehe}],[{id:2,name:hehe},{id:4,name:原创 2017-03-15 16:13:59 · 6672 阅读 · 6 评论 -
常见浏览器兼容性问题记录
1.360浏览器有多种模式,包含不同的内核,有时候在不同模式下网页不能正常显示(我的是在360极速浏览器安全模式下显示出错)。此时在<head>标签中加入://<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />其中:1)「http-equiv=”X-UA-Compatible”」这个是IE8的专用标记,是用来指定Inte原创 2016-06-15 18:30:30 · 967 阅读 · 0 评论 -
神奇的meta标签处理兼容性
今天发现了官网的兼容性问题,在360极速浏览器下,默认使用兼容模式,导致显示错误,查了查之后,看到360官方文档中有使用meta标签来设置该页面默认的渲染内核:<meta name="renderer" content="webkit"> 即可设置默认使用极速模式来渲染页面。官网连接但是使用之后发现效果并不好,又发现了另一个meta标签:<meta http-equiv = "X-UA-Comp原创 2017-02-02 13:51:20 · 2566 阅读 · 0 评论 -
Gulp构建前后端分离的最佳实践
之前已经写过量篇博客来说Gulp了,分别是Gulp入门和使用Gulp构建前端自动化解决方案那为什么还要第三篇呢,因为在使用的过程中,我的gulpfile.js不断完善,慢慢找到了更好的方式,所以在这里记录下来,这也应该是我的最后一篇关于Gulp本身的博客了。以后如果变动,也会继续更新在这篇博客上。这里单纯的记录我认为的最佳实践方式,如果还不了解Gulp,建议先去看看本文开头提到的两篇博客。下边是我在原创 2017-02-14 15:47:00 · 2382 阅读 · 3 评论 -
Vue全家桶实践(五)---渲染函数&JSX
最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算简单梳理一下思路。相关博客:Vue全家桶实践(一)—vue-cliVue全家桶实践(二)—iViewVue全家桶实践(三)—axiosVue全家桶实践(四)—vue-routerVue原创 2018-01-07 17:09:22 · 4519 阅读 · 0 评论 -
Vue全家桶实践(三)---axios
最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算前端梳理一下思路。相关博客:Vue全家桶实践(一)—vue-cliVue全家桶实践(二)—iViewVue全家桶实践(三)—axiosVue全家桶实践(四)—vue-routerVue原创 2017-12-27 19:43:47 · 5238 阅读 · 0 评论 -
ES6知识整理(一)--- let/const/箭头函数
早在17年初就读了《ES6 标准入门》并在博客上做了笔记(《ES6 标准入门》读书笔记),工作中也有用到一些。一年后再回过头来看这些知识,又跟初看的时候的感觉完全不同了。对很多新特性的好处有了更具体的认识。也有一些知识依然了解不够,所以在这里重新整理一波,夯实基础。箭头函数 箭头函数主要有两个好处: 1. 减少代码量 2. 绑定函数定义时的作用域 对于1,这里记原创 2018-01-09 20:47:53 · 773 阅读 · 0 评论 -
Promise.all结合async/await
在日常编码中,async/await明显比promise写起来方便。但是当遇到多个可以同时执行的异步时,就必须使用promise.all,这时候把每个异步函数包装成promise又很麻烦,这时候就要结合起来。之所以能够结合,是因为async/await本身就是promise的语法糖,他就是promise,所以可以直接这样写:const a = async (x) =&gt; {};cons...原创 2019-02-15 10:12:57 · 9971 阅读 · 1 评论 -
记一道有意思的题目
昨天遇到了一道题目,一开始没解出来,后来再大佬的提示下做出来了。记录在这里。题目// 给定一个数组 arr,数组中的每个元素形式是{ id: 0, parent: 0, // 指向数组中的另一个元素 body: "xxx"}data:[ { id: 0, parent: 1, body: "wefw" }, { id: 1, body: "sdwe" },...原创 2018-11-30 10:14:01 · 281 阅读 · 0 评论 -
小程序修改文件不自动更新
使用mpvue写小程序,正常情况下npm run dev后修改文件并保存,会自动编译并在微信开发者工具中热重载。但有时候会失效,此时按如下步骤解决:查看微信开发者工具中设置-编辑设置-编辑-保存时自动编译小程序 是否勾选。清空dist文件夹。在微信开发者工具-项目管理中删除该项目,选择空的dist文件夹重新添加。重新执行npm run dev修改文件试试,发现已解决。...原创 2018-10-10 11:01:01 · 3551 阅读 · 0 评论 -
小程序图片上传和Promise.all
之前写过一篇ES6异步处理方式: Promise / async await,对Promise和async await 有了简单的理解,但后来才发现我的理解太浅了,只是记录了基本知识而已。 在上家公司,遇到过需要发送多个总数不定的ajax的需求,当时的解决方式是使用递归,一个请求结束之后再发另一个,当时还以为自己很机智,写了这篇博客:javascript递归的实际应用场景。 所以...原创 2018-07-06 16:08:25 · 4204 阅读 · 0 评论 -
小程序实践踩坑总结
六月份实在太忙,只能把遇到的问题简单记录,今天小程序二期的开发基本上结束了,才有空来总结整理在开发过程中遇到的问题。 在上一篇博客小程序学习实践总结中,我以为小程序的开发没太多可说的,使用mpvue,只要了解vue和小程序的api就可以了。事实证明我还是太年轻了,当时只是做一些简单维护,6月份开发小程序二期的时候,才发现有很多坑点。这里边有自己不熟悉的坑,有mpvue的坑,甚至还有微信...原创 2018-07-04 17:45:24 · 1434 阅读 · 0 评论 -
初识React的一些感受
新公司的后台管理用了React技术栈。小程序维护告一段落后,马上给了我一个后台任务之前对React的了解基本只有名字,这次带着需求,看文档,看代码,写代码,因为有vue基础,上手还是蛮快的,两周内终于按时搞定了,对React也多了一些了解,在这里简单记录一下。因为是先看了Vue再看React,不可避免的会把他们放在一起进行比较。由于现在对于React的了解不够深入,所以比较得出的大多数...原创 2018-05-31 18:00:28 · 1036 阅读 · 0 评论 -
小程序学习实践总结
新公司入职之后的第一个任务就是接手小程序【北美省钱快报】的维护和开发。我接手的时候一期的开发已经基本完成了,使用mpvue生成来写,基本写法跟vue很接近,经过一个月左右的边学变写,算是有一些认识了,这边做一些总结,之后的第二期和第三期会由我来开发,到时候有什么新的心得,再进行补充。开发流程mpvue的优势在于可以直接使用绝大部分vue的特性进行编程,然后由框架打包生成小程序文件。...原创 2018-05-31 17:27:41 · 4633 阅读 · 0 评论 -
初窥设计模式----策略模式及相关应用场景
一直觉得设计模式是非常高端的东西,之前也简单的了解过一些,但总是没有找到合适的应用场景,所以也没能深入的去理解他。直到最近在工作中,需要写一个通话记录的功能,每个记录后边要显示该条记录是多久之前产生的。写完的时候用了很多的if else来判断,看起来很不优雅,请教了leader之后,给我指点了一下,按照思路尝试之后,一下子有种豁然开朗的感觉。其实设计模式并非高不可攀或是难以应用的东西,很多代...原创 2018-05-03 17:43:41 · 352 阅读 · 0 评论 -
Vue子组件向父组件通信
子组件向父组件通信,发送事件//子组件<child>this.$emit('eventName')//父组件<div> <child @eventName="func" ref="child"></child></div>//在父组件调用子组件的方法func(){ this.$refs.chil原创 2018-04-03 19:36:01 · 350 阅读 · 0 评论 -
innerHTML和innerText造成的乱码现象 以及 background-image放入.css中失效
在使用innerHTML或者innerText的时候,替换内容为中文的时候,替换接锅在网页中显示乱码。这是因为html文件的编码格式为UTF-8而js文件不是。这种情况,只要使用记事本打开js文件,并且另存为UTF-8编码格式的文件,即可正常使用。原创 2016-01-22 23:26:02 · 5081 阅读 · 1 评论 -
jQuery循环绑定不同参数的函数
重读博客发现自己以前跟个智障一样……这里直接用事件委托就行了= =|||详情可以看这里以下是以前写的原文项目中遇到了一个问题:需要循环创建多个li,并且给每个li中的div绑定相同的带参函数。但是带参函数中的参数不同。一开始直接使用下边的写法进行绑定:for(var i = 0 ; i <data.list.length; i ++){ var li= documen原创 2016-05-23 14:37:35 · 1045 阅读 · 0 评论 -
jquery常用表单&DOM操作方法
**项目中有很多用jquery写的表单交互,在写的过程中发现很多常用的表单和DOM操作方法经常记不住,这次搞定了,下次到这里又忘了是怎么写。在这里总结一下,方便查阅记忆。**表单元素操作:1.<input tyle="texy" placeholder="你的姓名..."/> 中,使用placeholder做占位提示。2.<textarea placeholder="Please input ..原创 2016-07-26 17:52:19 · 485 阅读 · 0 评论 -
如何在网页中加入title图标
HTML中,如何在title标签的文字前加入例如下图圆圈中的图标呢?首先,要加入图标,需要.ico格式的图片才可以。可以在:http://www.bitbug.net/ 这里上传图片,制成.ico格式的文件。然后在html的标签中插入:若插入之后不显示,重启浏览器即可。原创 2016-01-22 23:19:12 · 15557 阅读 · 0 评论 -
css3替代JavaScript实现hover变色功能
在项目中遇到了hover变色的功能,一开始我使用事件onmouseover和onmouseout来监听是否hover,然后用JavaScript函数进行变色,如下://当鼠标移入时圆角矩形变色。 function change_rounded_1(val){ if(val=="mfsy"){ mfsy.style.backgroundColor="#F0EA00"; }else原创 2016-01-22 23:42:39 · 2532 阅读 · 0 评论 -
【项目练习】遇到的问题和解决方法
2016.1.4日开始做自己的项目进行实际操作练习,之前的学习中都是跟着书籍或者视频来敲代码,现在真的从无到有的开始做,还是有点难度。这里记录我在练习中遇到的问题和解决方法:原创 2016-02-19 20:46:02 · 1540 阅读 · 0 评论 -
百度上传组件web uploader介绍+快速入门案例
百度上传组件web uploader入门公司的项目需要文件上传的功能,之前使用的是SWFUpload这个上传组件,我将其替换成了web uploader。SWFUpload组件SWFUpload 最初是Vinterwebb.se 开发的客户端文件上传工具。它联合javascript和flash,在浏览器中提供一个优于传统上传标签 的功能(和良好的用户体验)。SWFUpload 的主要特性:文件浏原创 2016-03-25 18:32:00 · 24177 阅读 · 3 评论 -
Jquery自动生成当前年份日期筛选框
项目需要,写了这个自动生成年份和月份的筛选框。其中年份可以从指定年到今年,月份默认生成今年已经到达的月份,并默认选中今月。并且当年份筛选框改变时,联动改变月份筛选框。注意:都是在jQuery下写的//首先是工具函数:给select添加optionfunction addtosel( sel_id, op_id, op_name ){ if( sel_id == undefined ||原创 2016-04-22 18:05:37 · 3989 阅读 · 2 评论 -
数据呈现&图表插件Highcharts介绍+图表联动案例
由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库插件。Highcharts简介下边的介绍来自Highcharts中文网 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等原创 2016-04-28 13:58:46 · 5810 阅读 · 0 评论 -
前端性能优化入门
最近简单的了解了一下前端性能的优化,看了网上的许多文章,从无到有的知道了一些皮毛,知道了一些基础又简单易用的优化方式,记录在这里。减少请求次数1.使用CSS Sprite制作雪碧图: 当网页中有多张图片的时候,浏览器会发送多个请求给服务器,逐个得到。通过制作雪碧图,把多个图片整合成一张大图,然后再通过background-position来得到相应的小图,这样可以有效的减少请求次数。2.合并、压原创 2016-05-11 16:49:06 · 859 阅读 · 0 评论 -
5分钟彻底搞懂Border画多边形原理
在网上看到大神用border属性来讲div变成三角形,梯形等等各种形状。也详细解释了原理,我看了半天也弄懂了。接下来这篇我希望能用5分钟让前端小白们毫无压力的彻底理解这个原理,这样以后要用的时候也不懂百度了,画个草图直接开写。第一步:理解盒子模型中的border先看图: 这里,我分别标出了4个边框border-top //redborder-left //greenborder-ri原创 2016-07-01 18:22:10 · 5186 阅读 · 0 评论 -
纯CSS&Canvas画哆啦A梦
前段时间看到有人呢用纯CSS画大白,当时觉得很神奇。最近有空了解了一下,其实就是简单的div加上border-radius,transform,把div变成所需的各种形状再定位拼接,其实没有什么高深的技术。但是还是试着做了个小demo,大家都画大白,我就画个别的,最后选了哆啦A梦。最后的结论是,这种方式可以画一些简单的图,但是基本上没什么意义,也就是闲的蛋疼作为练习,熟悉一下定位和css属性。刚好前原创 2016-07-05 16:15:13 · 2826 阅读 · 0 评论 -
简单好用的文本编辑器《Simditor》插件快速入门实例
项目需要文本编辑器,我在网上找到了Simditor这个插件,感觉简单好用,在这里记录一下,也推荐给更多的人。Simditor能做什么简单来说,Simditor能够将web页面中的textarea文本域变成一个简单的富文本编辑器。能够实现常用的加粗加斜下划线,标题表格字体颜色等功能,并且输出所见即所得的html代码。Simditor如何使用可以在Simditor的官网查看demo,文档和github下原创 2016-07-07 11:12:28 · 8669 阅读 · 6 评论 -
对象数组通过对象的属性进行排序
项目中遇到了要给对象数组排序的问题,这时候就不能简单的使用sort()来解决了。在脚本之家这里找到了解决方法,代码贴在最下边了。功能虽然靠复制粘贴实现了,还是得搞清楚原理: 首先,我们看一下JavaScript的sort()方法,这个方法其实是可以带参数的:当sort()方法不带参数的时候,将按照数字,字母(字符编码)的顺序进行排序。当sort()想要按照其他标准进行排序的时候,就需要传入参数原创 2016-05-24 18:00:16 · 6411 阅读 · 0 评论 -
Django 模板复用include
在开发中,很多页面的部分其实是一样的,比如header和footer等,我们把这部分抽离出来,单独写成子模板,然后在需要的地方引入,避免了冗余代码,同时方便维护,只要修改子模板,所有引入子模板的页面都会生效。我在写公司官网的时候,就把header和footer抽出来了,Django的子模板很简单好用:1.子模板:__child.html: 为了便于区分,我将子模板以 __ 为开头,表示其不会单独原创 2016-12-26 12:01:02 · 2427 阅读 · 1 评论 -
新的一年从造轮子开始
在做公司官网的过程中要做一个简单的轮播,不想用插件,自己写了。写完之后顺便看了看github上别人的轮播插件源码,发现原来造轮子也并不难,只要用面向对象的思想把功能封装起来就可以了。那不如把我自己写的轮播封装成一个简单的小插件试试。于是就有了Creabine-Carousel,这是一个从各个方面来说都非常简陋的小东西,但是确实已经是一个插件了。还是很开心的,原来觉得很高大上的东西,自己做一做发现也并原创 2017-01-11 16:33:51 · 596 阅读 · 0 评论 -
Django实现发送邮件功能
最近用python写了官网的后台。官网的后台功能比较简单,一个多语言支持,一个联系我们,即给公司发邮件的功能。多语言支持的方式写在另一篇博客了。这里先来说一说Django的发送邮件功能。其实python本身自带了发送邮件的功能,Django在其基础上进行了封装,使其更加简单易用。仅仅几行代码就可以实现发送邮件的功能。但是在实际开发的时候,遇到了两个大坑,折腾了3天才真正搞定,在这里做一个简单的记录原创 2016-12-24 12:02:24 · 12338 阅读 · 5 评论 -
Django通过session实现多语言切换
公司官网需要多语言支持(中文/英文),了解了一通之后,发现Django虽然有自带的国际化多语言功能,但是仅限于翻译单词,官网这种有很多大段落介绍的内容,就不太适合了。所以自己来实现。 实现的思路也很简单,就是中英文使用不同的模板,在命名上进行区别,如index.html和index_en.html,然后在用户的session中加入config对象,包含language和templateName两个原创 2017-01-18 19:55:54 · 3240 阅读 · 0 评论