- 博客(35)
- 收藏
- 关注
RSS订阅原创 生成器函数传参数小记
Generator函数是可以传参数，一直用的不明不白的，今天写个例子，运行一下，记录一下过程，如下面这个小例子：//简单的序列生成，主要看next传参数的时机let test = { getId : function*(data){ let id = 0, param=null; while(id < 4){ console.log(`上一次param:${pa...
2019-03-21 15:20:25
778
翻译 ECMA-262, 9th edition部分译文之chapter 6 part3
6.2 ECMAScript Specification Types 规范类型原文：A specification type corresponds to meta-values that are used within algorithms to describe the semantics of ECMAScript language constructs and ECMAScript l...
2019-02-18 09:41:31
225
翻译 ECMA-262, 9th edition部分译文之chapter 6 part2
接上一篇，是第六部分中关于对象类型的标准阐述。6.1.7 The Object Type原文：An Object is logically a collection of properties. Each property is either a data property, or an accessor property:A data property associates a ke...
2019-01-27 21:30:22
243
翻译 ECMA-262, 9th edition部分译文之chapter 6 part1
最近比较忙，时不时翻译点儿，这是第6部分语言数据类型内容第一部分——数值类型6 ECMAScript Data Types and Values6.1 ECMAScript Language Types（ECMAScript 语言类型，即实际编程中使用的类型，区别后面的规范类型）6.1.6 The Number Type原文：The Number type has exactly ...
2019-01-24 21:25:15
259
翻译 ECMA-262, 9th edition部分译文之chapter 4
最近开始研究标准文档——ECMA-262, 9th edition标准 （http://www.ecma-international.org/ecma-262），这可以说是JavaScript的根本了，标准文章很庞大，希望通过研究能够了解更多JS的运行实质。之后会时不时的发布该文档的部分译文，供大家参考，也希望大家能指出翻译中的不妥之处，共同完善。今天翻译了第四章的部分内容，大部分内容和我们平...
2019-01-13 21:18:04
271
原创 js数组常用方法兼容实现
js的数组提供了很多简便的操作方法。如forEach,map,every,some,filter,reduce。这些方法极大的简化了数组的操作，甚至将一些类数组数据，如DOM元素，通过es6的[...XXX]解构或者[].slice.call(XX)转成数组后，也可以方便的使用。但是，这几个方法是从IE9才支持的，如果项目不需要兼容IE8及以下的，大可以放心的使用，但是如果需要兼容，就不能开心的玩...
2019-01-07 21:31:43
389
1
原创 几种制作页面动画的总结
往昔流行的页面flash动画，已经逐渐被日益强大的CSS，Canvas和Js动画取代，多种多样的动画实现API，可能会给前端开发带来一些选择恐惧症，尤其对于新人，所以这里总结一下几种动画的使用，方便日后选择使用，提示：本文不是细致的API使用介绍，是对于几种动画开发API的使用场景的总结。一、Canvas首当其冲的，当然是H5的canvas了，当然它虽然是H5的标签，但是具体的实现，完全要...
2018-12-21 21:34:00
786
原创 CSS中几种元素隐藏及应用场景
之前写了一篇关于display和visibility隐藏的区别，其实CSS还有很多隐藏元素的方式，本篇就小总结一下，顺便说说应用场景；一、display显隐界的一把手，出场率最高，上一篇已经提到过了。特性：完全隐藏元素，不存在于渲染树中，js无法获取元素的宽高等信息，就是彻底的“消失”，干净利落。问题：完全的消失，导致出现时，发生重排，重绘，影响性能；页面会抖动，尤其元素较为复杂时...
2018-12-14 22:37:54
363
原创 35岁危机？别自己吓自己！
不知道从什么时候开始，35岁危机似乎成了职场的一段“佳话”，大有愈演愈烈之势，引得无数职场人，尤其是研发行业，危机感重重，我不知道这个结论从哪得出来，也许就是看了看“中兴跳楼”，“华为裁员”的事件，一些跟风鼓吹者就开始了。首先请问，一个人如果从22岁毕业开始工作，到60岁退休，35岁正当年，而如果研究生毕业，35岁也不过才工作了10年左右，到60岁，还有将近25年的工作时间！这个年龄阶段，正是...
2018-12-10 21:25:39
2399
1
原创 CSS：visibility和display的显隐性
控制页面元素的显隐性，大家用的比较多的还是display属性，通过none和block或者其他值的切换，来完成显示与隐藏的功能。但其实visibility属性，也是控制显隐性的，大家应该也都知道，只是平时用到的可能比较少，一个是因为它只是可见性的切换，还一个原因可能是这个属性比较长（哈哈）。但是我要说的，在某些场合下，visibility属性却要比display更加有用，并且性能更优。可识别性...
2018-12-04 21:26:09
595
原创 CSS3 Flex盒模型深入研究
CSS3大力推出的Flex盒模型，应该是现在布局世界中的一大神器，各种属性使用和介绍比比皆是，然而CSS本身就是一个相互作用和影响的世界，弹性盒子也一样。最近利用Flex盒子布局时，偶遇一些怪异现象，比如flex-shrink无效，align-item失效等等，决定好好研究一下这些属性之间的相互作用和影响，以后能够准确的使用。说明：1. 本文是一篇研究结论文章，没有实例（主要是各种属...
2018-11-21 21:14:30
258
原创 Vue各生命周期及相关功能触发的研究
唠叨一句用了很长时间Vue了，但是对于它的各种生命周期及钩子时而清楚，时而糊涂，时常会掉进这些钩子的坑里不能自拔，今天干脆研究一下他们的顺序，给自己和与我有相同经历的同学们解惑。这里只用很简短的示例，演示了一些执行顺序，不涉及整个的Vue应用。这些顺序很重要。代码一套先放上示例代码，有兴趣的同学可以贴去自己查看，加深印象，其实可以不用看代码，直接去后面看结论。<script...
2018-11-13 21:11:57
655
原创 Vue开发登录组件（附下载）
终于搞定了登录组件，省的以后总写了，下次直接加载使用，组件的说明如下，文末有github下载地址，可以去下载，也欢迎大家一起完善，代码开源。组件开发核心点：Vue基础的那几部分就不多说了，使用Vue的应该都会，这里就说一下登录页面各项联动的实现：1.登录验证，主要是利用watch功能，监控各个输入框的输入情况，以及验证码的准确情况，以此来改变登录按钮的可使用状态；2.利用wat...
2018-11-07 21:50:46
3072
原创 canvas动态背景插件
断断续续好几天，终于把canvas动态背景图插件搞定了，大体总结一下要点吧。核心简介除了面向对象，封装，其实最核心的还是canvas转换图片的功能，该部分代码如下：//绘图__draw(i, _width, _height, len) { let _this = this; //惰性载入 if(arguments.length) { //全屏多图切换 this.__d...
2018-11-05 21:51:22
2109
原创 CSS：nth-child和nth-of-type的深入理解
啰嗦一句这两个选择器，可不是看起来那么简单的使用，如果没有彻底理解，蒙圈那是必须的——-如下代码：<style>div .div:nth-of-type(1) { background: #ff0000;}</style><body> <div> <h1>第一个h1标题</h1> <div&
2018-11-02 21:37:23
1945
原创 ES6数组兼容方法
几个ES6兼容方法碎碎念babel转码可以解决大部分ES6问题，但总有例外。最近就遇到了Array.from转码后依然没变的问题，然后，IE就闹了。所以趁热乎，自己写了几个小的兼容实现，可以嵌在代码里用，而且不影响其他正常的实现。polyfill都是和数组有关的，几个新方法：//Array.fromArray.from || (Array.from = function(o...
2018-11-01 21:26:20
420
原创 Canvas实现图片切换功能
这几天研究canvas制作动态背景的时候，发现这个东西稍微改改就变成图片切换的功能了，可以代替动态修改img标签的src属性，实现图片定时切换功能。先奉上代码：function switchPic(containerId, pics, { speed = 1000, width = 100, height = 100, callback = function(pic) {}} = ...
2018-10-25 14:52:06
4449
原创 利用canvas制作进度条实践
开门见字之前写过一篇H5新标签progress进度条的使用文章，当时觉得研究的还行，但是发现，这个标签在不同浏览器中样式表现是不一致的，如下：chrome中：，一抹蓝色划过天际；火狐中：，一片绿色大森林；IE中：，一群小点排排坐。够了，完全不着边际的不一致，就这三大家都各有各的想法，不敢想象其他人了，且本人不才，没有研究出CSS修改progress的方法。当然如果不在乎这些差别...
2018-10-23 11:23:01
1437
转载 键盘 Key Code对照表
字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D...
2018-10-19 09:24:04
1034
原创 JS正则表达式和replace二三事
引言最近一段时间认真研究了一下正则表达式，这东西这是入门容易，越学越难，奇幻怪异的写法，各种变量配比。之前只是用的时候在网上现找，但是没想到，正则的水这么深，不去深入了解一下，还是不行，否则写出来的正则表达式非但不能完成任务，还有可能调入回溯陷阱，这次是搞明白了捕获应用和结合replace的替换，记录一下。捕获应用首先来说说捕获是什么：官方话不说了，直接白话，就是正则表达式分组（）...
2018-10-15 13:26:41
4586
转载 CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transition-timing-function、过渡延迟时间 transition-delay、Keyframes、调用动画、设置动画播放时间、设置动画播放方式、设置动画开始播放的时间、设置动画播放次数、设置...
2018-10-09 13:40:10
1255
原创 Promise和生成器函数组合简化递归函数
简单聊聊循环也好，递归也罢，都是编程语句中最常见的操作。这二者通常来说在完成效果上没有什么太大区别；从性能角度来讲，一个处理欠佳的递归函数，会导致函数嵌套引用，从而出现内存溢出的错误，影响性能，因此如果没有掌握递归的精髓，还是尽可能用循环完成，否则得不偿失。但是如果循环中加入了异步操作，比如ajax,或者reader.onload事件，同时，最终结果又依赖于所有异步操作返回的结果，此时就不得...
2018-10-09 10:40:36
440
原创 CSS实现3D动画有感
开篇小论最近折腾个人网站的开篇动画，好好学习了一把3D动画制作，当然这个兼容性是坎，看到动画得IE10以上了。原本不想太复杂，但是构思了一下，想要一种开门见山的感觉，所以就想到了要开一扇门，还要走进去，然后出现。结果发现，这些如果不用3D效果，那就是生硬的摩擦感，于是乎就好好研究了一番，发现3d动画也难也简单，难的是实现思路和逻辑，简单的是就那么几个属性控制，所以就先来啰嗦啰嗦属性。动画属...
2018-09-27 13:57:28
1417
原创 原生js实现addClass,removeClass和toggleClass
综述Jquerys实现class的add,remove和toggle是十分方便的。而H5新增的classList方法，也让原生js的各种class操作变得方便起来。然而，兼容性来了，classList只兼容IE10及以上（这里只提IE吧，IE是前端过不去的兼容坎），因此十分想方便的用原生js，又纠结在了兼容性上，干脆，那就自己来实现一下吧，都给它扔进去，兼容的就classList，不兼容的就用...
2018-09-25 14:40:10
558
原创 scrollTop，offsetTop，scrollIntoView配合实现简单的定位功能
js的各种offsetXXX和scrollXXX的介绍非常多，其使用也非常广泛，特别是在需要对页面定位的时候，最近实现一个简单的目录点击定位内容及滚动屏幕定位目录标题的小功能，完全是靠这两个属性实现，当然事件监听啥的，这肯定是必要的。直接上代码：一、页面滚动，自动定位目录：//滚动页面目录自动定位显示let autoActive = function(){ let html_to...
2018-09-11 15:46:06
3477
转载 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHei...
2018-09-11 15:08:12
219
原创 scrollIntoView()实现简单的锚点定位
综述锚点定位是一个再熟悉不过的操作了，通常会用a标签href=#XX去实现，不过这样做，有一个问题，就是页面会有刷新感，而且地址栏会有变化，F5刷新，则#XXX还是显示在地址栏里，这样如果要进一步进行有关地址栏url的操作，就不得不再做些判断，所以寻找一些新的方法。如果要求不是很高，scrollIntoView()这个方法就可以取代传统锚点定位，它是利用滚动原理，来将相应的元素滚动到可是区...
2018-09-11 10:51:05
15759
转载 Flex 布局教程：语法篇
Flex 布局教程：语法篇作者： 阮一峰日期： 2015年7月10日网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页...
2018-09-11 08:46:12
116
原创 Vue框架设置响应式布局
最近折腾自己的网站，在自适应方面发现有了很多新的方法，感叹前端的技术真是日新月异，从以前只能这样，到现在除了这样，还可以那样，甚至再那样......技术永无止境啊。回到主题，自适应响应式布局这个话题古老而新颖，从最早的不同分辨率的屏幕，到现在遍布各个生活角落的移动设备，响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中，bootstrap一直是响应式的头号选择，的确，其中的各种xl，...
2018-09-03 09:51:20
82578
16
原创 slice,substring,substr的区别
这三个方法都是用来截取字符串或数组的，之前一直想起来那个就用了，直到有一天。。。。。然后发现其实应该研究研究，毕竟，如果没有区别，为啥要弄三个看起来功能一样的方法。各大博客关于这个三个方法的区别文章比比皆是，可以说研究的已经很透彻了，这里记录一下，主要也是自己做一个总结，看别人的东西，终归是别人的，自己实际体会一把，才能变成自己的。回归正题：参数及方法就不啰嗦，耳熟能详了 ，这里直接用代码...
2018-08-28 13:18:49
5694
3
原创 整理零碎的Vue知识点
研究了好一阵子Vue，有些细小的知识点，慢慢的才理解过来，虽然零碎，但是也要系统的总结一下。1. v-model ：表单神器，这个就不说了，主要说这个指令还可以用在父子组件通信，是个语法糖，相当于引用了“input”事件，这样就不需要在父组件实例化中再定义方法了，子组件$emit()交互就可以驱动数据变化；2. props： 接受父组件参数，并传递给子组件。如果直接应用在子组件上（不通过d...
2018-08-23 11:19:12
138
原创 一波CSS选择器总结
常用的css选择器用多了，最近突发奇想，研究了一下其他选择器，感觉css的强大，让我惊叹了，看来还是要深入研究研究，不能只停留在几个常用的方式上。ps：顺序没有先后，大部分是CSS3新增的，纯属研究，使用需结合实际情况。1. :target——CSS3新增，这是需要a标签锚链接方式激活的选择器，当点击相应的锚链接，会突出显示被激活的锚点，锚点设置为自身（非a标签）时，可以实现选中高亮效果；看...
2018-08-22 10:06:15
113
原创 造轮子，模态窗口开发小结
用了差不多一周多的业余时间，终于造完了轮子，开发了一个简单的模态窗口。实现的功能有tips提示框，警告框，确认框，还有弹出窗口操作。将此组件命名为easyUtil_poped，以下用poped简称。先说句题外话，easyUtil是我自己开发的一系列组件插件css样式包的前缀名，意思是简化开发流程，也希望这能成为自己的一个小品牌。这个系列现在已经有一套全局css,内含各种常见布局样式，一套Jqu...
2018-08-17 12:40:22
148
原创 拖动事件小记
H5新增了拖动事件，根据一些文档描述如下：在拖动目标上触发事件(源元素):ondragstart - 用户开始拖动元素时触发ondrag- 元素正在拖动时触发ondragend- 用户完成元素拖动后触发释放目标时触发的事件:ondragenter- 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover- 当某被拖动的对象在另一对象容器范围内拖动时触发此...
2018-08-03 14:39:19
269
原创 H5 progress js结合实现动态进度条显示小记
开通csdn好久了，出于工作原因，一直不能在网上记录，但是终究觉得还是得留下些东西，所以开始整理笔记，调出可以记录的描述一下，目的也是为了看到自己的成长，与大家共享。今天这个是最近刚用过的，一直听说H5的进度条标签，一直也没用过，这两天刚好提出了需求，走起，小试一把，然后就记录一下吧，其实还是蛮简单的，重点就是建立好轮询。出于一些原因，有些地方我会用伪代码来标识。第一步：就是在页面里写...
2018-08-02 09:53:15
7831
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人