- 博客(30)
- 收藏
- 关注
RSS订阅
原创 移动端事件疑难杂症总结
移动端事件梳理click事件 300ms延迟禁用缩放<meta name="viewport" content="user-scalable=no"/>html { -ms-touch-action: manipulation; /* IE10及以下 */ touch-action: manipulation;}适用于：Chrome on And...
2019-07-07 13:09:29
260
原创 DOM获取尺寸、位置数据字典
关于DOM尺寸、位置相关的api，非常混乱且容易混淆，于是特别整理出一个数据字典。注意width()和offsetWidth、clientWidth在插入DOM树之前为0涉及CSS的定位，以子元素margin为准；否则以子元素border为准，例如element.style, jquery的position()标准模式下documentElement是html的尺寸，b...
2019-06-30 17:29:29
209
原创 HTML attribute特性和DOM property属性的区别
attr——映射到propHTML标签的属性——初始状态 checked 是个布尔值，只要存在该属性即为true checked=”checked”或checked=其它任意数据类型（false、空字符串）， 赋的只是字面量，不改变本身的属性值trueprop——不会影响attrDOM元素的特性——实时状态 <input>标签里有checked， prop的值即为tr...
2018-03-24 00:05:48
1161
1
原创 阻止事件冒泡和围绕.on()方法 [.selector]事件委托中冒泡情况的探讨
2019-7-23更新：1. document和body代理事件，在某些浏览器无效，目前发现在微信浏览器无效。2. 前端使用模板引擎渲染的节点，可能滞后与事件的绑定，因此这种情况下最适合事件代理。一、事件冒泡和阻止事件冒泡事件冒泡是JavaScript的核心概念之一，它的原理很简单，但真正应用起来还是有不少的坑。这里说一说关于阻止事件冒泡的本质。我们都知道阻止事件冒泡...
2017-10-04 23:02:15
2628
原创 Linux npm全局安装包无法执行的环境变量配置解决方案
也是服了网上的东抄西拼。这里给出终极的解决方案：1. 进入用户环境配置文件vim ~/.bashrc2. 修改PATH# 文件最后添加export NODE_PATH=`npm get prefix`export PATH=$PATH:$NODE_PATH/bin3. source指令读取配置文件或注销重新进入source ~/.bashrc...
2020-03-08 00:26:17
1460
原创 nvm-windows安装踩坑
nvm的目录不能带有空格，例如Program Files如果你是第一次下载，在use之前，C:\dev目录下是没有nodejs这个文件夹的，在输入比如： nvm use 5.11.0 之后，你会发现，C:\dev目录下多了一个nodejs文件夹，这个文件夹不是单纯的文件夹，它是一个快捷方式，指向了 C:\dev\nvm 里的 v5.11.0 文件夹。nodejs在windows下的...
2019-07-29 20:09:53
1162
原创 前端模块化总结
前端模块化演进函数封装 =》对象 =》立即执行函数 =》 CommonJS AMD CMD =》ES6 module & webpack函数封装缺点：污染了全局变量变量名重名模块成员之间没什么关系对象缺点：外部可以随意修改内部成员，安全问题立即执行函数优点：模块外部无法修改没有暴露出来的变量、函数CommonJSCommonJS规范是由NodeJS...
2019-07-16 12:40:54
248
原创 【移动端事件】swiper左右滑动时禁止页面上下滚动
某些swiper类插件，左右滑动时会导致页面上下滚动，如果在touchmove事件中直接使用event.preventDefault()，就会彻底阻止触摸滑动，给用户的感受就是划不动。以下是增加的fix code // 左右滑动时阻止页面上下滑动 var touchElement = {}; var $slides = $('.am-slider'); if ($...
2019-07-16 12:31:17
7053
原创 关于input元素和小程序input组件的差异、内容区高度、以及浏览器样式的问题
input元素：都有默认样式，HTML的input元素继承浏览器，小程序是组件设置的默认样式
2018-08-22 10:44:59
828
原创 sublime text3 使用技巧（网上不易查询到的）
修改主体方案在st安装目录下package文件夹中，将相应的后缀为-package的文件加扩展名.zip或.rar转为压缩包。解压缩，找到需修改的主体方案（.tmTheme），例如我要修改的主体方案Monokai.tmTheme，进行修改。完成后重新打包，并去掉扩展名，恢复原来的以-package结尾的文件。替换掉package文件夹中的此文件（此操作须关闭正在运行的st）。再次打开...
2018-06-13 10:45:58
964
原创 addEventListener事件监听使用匿名函数作为回调函数的问题
addEventListener事件监听绑定匿名函数，不能用removeEventListener解除绑定，JS认为这不是对应的那个函数。因此，如果多次执行addEventListener（例如addEventListener事件绑定写在在mousemove事件内），使用匿名函数作为回调函数就是进行了多个函数的绑定，触发事件时会执行多次；具名函数则是绑定的唯一这个函数，触发时只执行一次。...
2018-06-01 13:22:14
3333
原创 [JavaScript]元素尺寸定位总结[含兼容性、文档模式测试]
1. 基本概念相对于定位了的父容器注意不含滚动条宽度相当于content+padding注意不含滚动条宽度注意不含border相对定义了relative的父容器，以子元素margin左上角，父元素padding左上角为准offsetWidthclientWidthscrollWidt
2018-04-15 00:28:06
352
原创 debug过程中对加载顺序、对象属性、Vue数据传递和计算属性等问题的总结
异步加载JavaScrip脚本放在&amp;lt;head&amp;gt;内：文档页面加载之前装载（不执行代码， 需调用才执行或事件触发执行）。脚本放在&amp;lt;body&amp;gt;内：当页面被加载时执行，用来动态生成页面的一些内容。增加延迟脚本defer属性 ** – 只适用外部脚本文件 – 立即下载，但延迟执行，&amp;lt;/html&amp;gt;标签之后执行 – 多个
2018-03-11 16:08:27
1640
原创 从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery的remove()方法和原生js的removeChild()方法都是从DOM中删除节点，方法的返回值是：1. remove()方法：返回一个指向已被删除的节点的引用，这个节点元素还可以使用；2. removeChild()方法：删除的节点仍然存在于内存，只是没有添加到当前文档的DOM树中。可以总结为：remove()方法移除...
2018-01-23 00:57:10
11242
原创 JS原生数组迭代方法的应用
原生JS的数组迭代方法应用非常广，相比于for循环遍历，代码结构简单、规整，但使用也要非常注意。 以下是本人学习过程中对数组迭代方法的典型应用。1. map()和forEach()方法填坑。 这是Vue获取API新闻列表中的代码片段，计算属性processedPosts，对原始数组results添加imgUrl。 map()方法 forEach()
2018-01-18 02:18:41
351
原创 【干货】前端重要概念精炼总结--持续更新
1. Q: JavaScript脚本放在哪里 A: 放在header中的脚本，在页面加载之前就被装载，待调用（例如事件），类似函数声明；放在body中的脚本，在页面加载完成后就执行，类似于执行一个函数。
2018-01-17 19:34:53
435
原创 Vue2.0使用axios引入本地JSON文件踩的坑
今天学习Vue2.0使用axios引入本地JSON文件踩的坑。1.如何引入axios，import、prototype 本地JSON文件需放在static文件夹之下。（以及图片文件）。参见http://blog.csdn.net/Mr_YanYan/article/details/787830912.response是个Object对象，但是response.data才是本地
2017-12-28 01:30:29
18207
1
转载 浏览器中的 ES6 module 实现
捣腾了一晚上，发现在浏览器实现ES6 module必须，使用firefox54以上和chrome60以上，并且chrome仍然有问题，跨域报错，得放在服务器下，firefox可以实现。文章转载至众成翻译-文蔺http://www.zcfy.cc/article/ecmascript-modules-in-browsers-2744.htmlES6 的模块特性
2017-12-13 00:27:10
1548
原创 [JavaScript，ES6]函数声明提升和预解析的总结和试验
1. 变量的声明被提前到作用域顶部，赋值保留在原地2. 函数声明整个“被提前” （且后面不再重新“赋值”）3. 函数表达式时，只有变量“被提前”了，函数没有“被提前”4. 在块中定义的函数声明或函数表达式，只会提升其声明部分，也就是只提升变量名，不提升函数的定义哦。不要在块中声明函数！5.如果在提升的时候发生重命名了怎么办？ 首先还是都会提升（函数声明整个“被提前”，且后
2017-12-09 18:42:31
1228
原创 [Vue]不能使用索引直接修改数组，但可以使用索引更新对象数组内的属性
由于 JavaScript 的限制，Vue 不能检测以下变动的数组当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。
2017-12-02 01:33:04
7372
原创 [Vue][自定义事件]关于组件prop双向绑定的理解和程序调试
父组件使用 prop 传递数据给子组件。子组件通过自定义事件与父组件通信。自定义事件从子组件向父组件传递数据的步骤可大致归纳为：1. 子组件模板中的原生事件（如click）绑定回调函数2. 回调函数实现子组件内部数据的更新，同时触发自定义事件：$this.emit(//customEvent)3. 父组件模板中v-on监听自定义事件$emit+v-on偏向于事件函数的监听和触发
2017-11-27 22:09:58
1234
原创 [Vue][V-move]列表进入/离开的平滑过渡，官方教程学习释疑
列表的进入/离开过渡，对列表直接操作(增、删)的元素，封装并按常规的CSS或JS过渡即可；但在操作这些元素的位置变化时，由于DOM文档流的变化，会同时引起其它（邻近）节点元素的位置变化，例如在列表插入一个，插入点原本的会下移，删除一个，下面的会上移补充占据这个位置。 对于这些“被动”移动的元素来说，也可以实现过渡，这就用到了v-move 特性。 v-move 特性。会在元素的改变定位的过
2017-11-22 21:12:09
9312
4
原创 jQuery实现轮播效果及stop()和is(:animated)的用法区别
对《锋利的jQuery》中的案例进行了改编和自创。本项目总结出以下知识点和技巧：一、轮播图的编程逻辑滚动式:1. mouseenter/mouseover移动（1） 获得鼠标移到的tab序号（2） 获得当前高亮的tab序号（利用filter(":has(.chos)")筛选和index()方法获得序号）计算出即将展示图片的位置，计算出移动时间获得当前高亮的tab序号...
2017-10-11 21:43:30
855
原创 正常文档流block、inline、inline-block元素与浮动框之间的位置关系
今天在群里面回答了一个问题：起初以为是外层元素也浮动的缘故：又思考了一下，突然想到正常文档流下的块状元素的文本内容会避开浮动元素所处的空间。行内元素与文本内容是一个性质，也会避开。input、button是行内块状元素。按照提问者的描述，应该就是这个原因。行内块状元素也会避开浮动元素所处的空间！！！
2017-10-09 20:39:35
1218
原创 用jQuery编写放大镜效果以及图片异步加载的测试
自创jQuery放大镜效果，主要运用offset()、width()、height()、e.pageX、e.pageY等关于位置的方法。核心思想：缩略图的尺寸与放大图尺寸的比值 = 放大镜相对缩略图的坐标X(或Y)/放大图相对包裹它的外框坐标X(或Y)的比值其中有几个关键点需要注意，还有两个bug，调试过程没少为此绞尽脑汁，算是从坑里爬出来，最终得到这样一套程序。问题值得思考、研究和总结，...
2017-09-27 22:10:07
489
原创 关于JavaScript函数的参数按值传递而不是按引用传递的分析
这是个人自制的分析图，针对《JavaScript高级程序设计》第4.1.3节的例子，讲得非常精辟，但讲得还不是特别细，本人细细读了好多遍，按个人的理解做成以下图谱。 作为新手理解定有片面肤浅之处，望阅者多多指教。
2017-09-12 19:55:52
411
原创 关于嵌套absolute布局的padding-bottom问题
流动布局时父元素含有50px的padding，因为子元素溢出，所以padding-bottom没有表现出来。但实际上，子元素为了保证处于父盒子的content之中，已经把父盒子撑开了。只是因为这里强制对父盒子设置了高度，所以子元素溢出。 我们将滚动条拉到底部，可以发现子元素确实仍在父元素的padding之内。因此可以说：流动布局时，父元素设置了固定
2017-09-08 18:58:50
2637
原创 【更新--多行多列解决方案】不定高多栏设置等高的方法（正padding+负margin）
多栏布局有很多方法，但大多都针对的是已经固定设置各栏高度（height属性）的布局。对于定宽不定高的多栏布局，各栏的高度根据文字自适应，导致其高度不一。那如何设置其高度，使得各栏的高度都统一为文字最多的那一栏的高度呢？如图： 目标→ 方法一：表格table布局此方法，table的父元素height为默认的auto，根据table-cell的内容自适应，满足等高。
2017-08-19 20:27:01
1202
1
原创 关于圣杯布局和双飞翼布局的思路和细节
今天晚上从网上资源学习了圣杯布局和双飞翼布局。因为之前一段时间对CSS的布局有过比较系统的学习，所以对这两个布局模式理解起来还是较为简单。学习和使用行业精英总结出来并在行内广泛使用的方法（或者说框架）是简单的事情，但是学的过程还是要从其根源进行理解、分析，有助于拓展自己的思维，进而更深入地学习、理解、运用CSS，避免形成拿来主义的习惯。总结起来，圣杯布局和双飞翼布局的构造思路如下：
2017-08-15 23:29:09
610
原创 开始记录我Web前端自学之路了，希望与大家分享交流
从5月份开始自学，基本上把所有的业余时间用在学习上。 期间也遇到一些坎坷，但总的说来，能够一直坚持下来，说明对编程还是有足够的兴趣，我将继续疯狂学习下去。在这里分享我的学习心得，希望与大家互相交流，学到更多东西。从今天开始我将陆续把已经学习总结的干货和接下来的学习过程记录发表在博客上，请大家多多指教。
2017-08-15 22:49:26
360
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人