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