- 博客(32)
- 收藏
- 关注
RSS订阅原创 CSS3: linear-gradient 线性渐变
日常开发中线性渐变是必不可少的技能之一，今天来简单聊一聊。线性渐变的优势就不赘述了，直接看看用法吧。渐变规则要想了解渐变的规则首先要明白渐变线的规则，渐变线是垂直向上的，在不指定角度时，如：background-image: linear-gradient(red,blue) 颜色是有上至下由红渐变为蓝色。可是这明显与渐变线垂直向上不符啊，其实在不显示指定渐变角度时，默认是180deg。在...
2019-10-18 14:42:58
776
原创 图片加载失败占位符
当网络不佳加载图片时会出现加载失败或者延时加载的情况，此时原本的图片位置会显示空白状态，这造成了不好的用户体验，所以我们需要加一个图片占位符。有两种方式可以实现：js其实这种方式也很简单，监听onerror事件就可以了。举个栗子：<img src="http://xxxx" onerror="{this.src='/statictest.png'}" />监听onerror...
2019-06-25 11:25:28
1865
原创 Vue--插槽 vs 高复用组件
为什么要用插槽！组件的最大特性就是提高复用性，而插槽的作用是最大程度的优化组件的可复用能力。组件的复用常见场景如多个页面有同样的UI结构，通过组件间通讯机制传递数据，以此达到同一套代码渲染不同数据的效果。然而，这种利用组件间通讯机制只能满足UI结构相同，展示数据不同的场景。设想一下：有两个相似的页面，它们大部分的结构相同，只有某个区域不同，以上办法就不适合了，也许你会说，在子组件中利用v-i...
2019-06-04 14:33:59
1082
原创 Vue--双向绑定
在React或者Vue这类MVVM框架中使用双向绑定是很常见的需求，最近项目中在使用Vue，今天来谈一谈Vue中双向绑定的实现。先来说几句废话：什么是双向绑定？把Model中的数据绑定到View中，然后更新Model时View会自动跟新，这叫单向绑定，而当用户改变View时Model中数据也能自动更新时，这叫双向绑定！如何实现Vue中的双向绑定？有两种方式可供参考：$emit 自定义事件处...
2019-05-30 16:17:13
486
原创 数据结构和算法--二维数组
数据结构和算法中最基础的就是数组了，关于数组的定义、存取、遍历等一些基础操作就不讲了，相信大家都已熟练掌握，我这里就不再赘述了。今天讲一讲二维数组。二维数组简单讲就是：数组元素是数组的数组（莫名拗口），但其实也不难理解。看个例子就完全明白了：var grades = [[10, 20, 30], [40, 50,60], [70, 80, 90]] 数组grades的每一个元素都是数组。相...
2019-05-28 17:06:48
1929
原创 根据输入实时发送请求（防抖函数）
有这样一种常见的需求：有一个搜索框，需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。最先想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。这样做的不足也很明显：其实我们并不需要用户每次输入时都发送请求，这样会给服务器造成不必要的压力。因为发送的是异步请求，有可能查询的结果和最后输入的内容并不匹配。如何解决以上两种问题呢？ 有两种解决...
2019-05-21 17:38:36
2404
2
原创 为什么解析 CSS 选择器时一定要从右往左解析
为什么解析 CSS 选择器时一定要从右往左解析？今天逛论坛时无意中看到这个熟悉的命题。勾起了一段心酸的往事，记得刚毕业面试时被这个问题ko过。今天总结一下算是祭奠下当年那个菜鸟的我。首先来了解下页面是如何渲染的：首先浏览器会把HTML文档解析为DOM tree，然后解析CSS为CSS tree，接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree，最终用来绘...
2019-05-21 15:45:45
606
1
原创 ES6的Module模块
设计思想ES6模块的设计思想是尽可能的静态化，使得编译时就能确定模块间的依赖关系。这也是与CommonJS和AMD运行时才能确定模块间的关系的主要区别。以CommonJS来说明一下运行时加载的原理。// CommonJS模块let { beef, wine, glass } require(material.js);//等价于let materials = require(mater...
2019-04-11 20:44:33
379
原创 keydown、input、keyup
我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容，所以他们的差异就不得不了解。先来看一个实验案例：<body> <input id='user' type="text" /></body><script> var user = document.getElementById('...
2019-04-09 12:09:33
1532
原创 Attribute和Prototype详解
最新有小伙伴问我Attribute和Prototype的区别，今总结如下：Attribute： 表述HTML标签的特性集合。Prototype： 表述DOM对象的属性，它属于Js里对象的范畴。举个栗子：<input id="test" placeholder="hello world" other="something" />var input = document.get...
2019-03-13 11:01:40
692
原创 instanceof和typeof 详解
判断变量是某种数据类型也是实际开发中常见的操作，总结如下：写在前面在介绍这两者之前先来回顾下js中的数据类型都有哪些。基础数据类型nullundefinedStringNumberBoolean引用数据类型Object、Array、Function、Date等typeoftypeof操作符返回一个字符串，我们先来看看使用typeof判断数据类型的结果typ...
2019-03-12 15:30:21
518
原创 重学原型链
一切源于一个简单的案例：function Foo(){ this.name = name; // 原始属性or方法}Foo.prototype.say = function(){ // 原型属性or方法 f}var f1 = new Foo();f1.say(); //helloFoo.prototype = {};var f2 = new Foo()...
2019-03-11 17:45:52
162
原创 CSS实现等高布局
等高布局的实现方式有很多种这介绍两种非常实用的主流的方法，如下：//html<div class='box'> <div class='left'> <div class='bor'></div> dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf </div> ...
2019-03-01 16:25:56
3614
原创 CSS实现垂直/水平居中
前端开发中经常用到水平/垂直居中，现总结如下。//html<div class="box"> <div class="content">this is content</div></div>//css .box { width: 600px; height: 400px; border: 1px solid ...
2019-03-01 11:45:18
133
原创 margin合并
从事前端工作的小伙伴都知道margin合并也叫做margin折叠。今天总结如下。定义块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距，这种合并行为叫做margin合并。注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。合并原则正正取最大，负负取最负，正负就相加分类1. 相邻元素之间margin合并相邻元素之间的margin合并规则很简单，按照上述的...
2019-03-01 10:42:53
2413
原创 sticky定位
我们都知道常见的定位方式有static、relative、absolute、fixed，今天来介绍一种‘粘性定位’sticky。定义粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixe...
2019-02-12 15:58:39
12209
原创 span间距问题
span布局中常常会遇到这种问题：由于父级元素设置了font-size且span(其实不止是span，确切说是子元素)设置了行内块样式，导致span间的空格和换行会有空隙 like this:<div> <span>11</span> <span>22<span></div>/* CSS */div...
2019-02-12 15:04:15
9082
翻译 输入银行卡，每4位加空格
前几天项目中用到这个，在网上查到一个很好的解决方案 特拿出来分享Dom<input type='tel' maxLength=25 class='bank' />js// 获取光标位置function getCursortPosition(textDom) { var cursorPos = 0; if (document.selection) { ...
2019-01-28 18:26:03
1050
原创 可以使用break/continue跳出的循环
js中对数组、对象的遍历方法众多，但并不是每个方法都可以使用break/continue跳出循环，这些方法我们经常使用却也很容易混淆，特总结如下：直接看代码吧！！var arr = ['beijing', 'shanghai', 'guangzhou', 'shenzhen', 'hangzhou', 'chengdu'], obj = { name: 'tom', age: 20, addr...
2018-11-07 16:27:38
1998
原创 深度学习React
相信学习过Rect的同学都有一个感觉，学习过react基础也能写一些小型的项目，但是当你的工程越来越复杂的时候需要更深入的了解Rect才能更得心应手的开发。 我们需要更多的技能来支撑项目的顺利进行。今天总结了一些常用的技能做了的Demo分享在https://github.com/hkwBest/deep-learn-react，如果你觉得有用，请动动你可爱的小手点个赞！大家多多指正！当然这不...
2018-08-14 17:05:42
433
原创 手写JSONP
jsonp在前端领域是个很常用的技术，面试中也可能会让你手写jsonp。相信很多同学都听过jsonp但对其实现原理并不是很清楚，今天咱们来一边手写jsonp一边介绍其原理。首先为什么会有jsonp这个技术呢？都是同源策略惹的祸。那什么又是同源策略呢？所谓同源是指，域名，协议，端口相同。举个简单的栗子，你在百度的站点通过ajax是访问不到新浪的页面的？那怎么解决这个问题呢，jsonp要闪亮登场了...
2018-08-07 16:53:02
1892
原创 操作数组之常用方法：map()、filter()、some()、every()、 forEach()
如标题所说这几个方法是操作数组最常用的几个方法。它们有怎样的区别呢？map(callback)返回一个新的数组。为每个元素执行callback方法let arr = [1,2,3,4];let newArr = arr.map((item,index)=>{return item*2}); //callback要有returnconsole.log(newArr); // [2...
2018-07-25 16:37:34
1674
原创 去掉字符串前后空格--trim
原生的js并没有提供像jQuery的trim方法，但是工作中又会经常用到，所以常常需要自己实现。去掉字符串前后的空格有很多种实现方式，正则无疑是最方便高效的一种，也是最常用的一种。原理也很简单。function Trim(){ String.prototype.trim = function(){ return this.replace(/(^\s*) | (\...
2018-07-25 14:55:00
4992
翻译 一个简单的笛卡儿积分享
前两天工作中用到笛卡儿积，一时间没有思路，在网上找个一个很不错的方法特记录分享如下：function cartesianProductOf() { return Array.prototype.reduce.call( arguments, (total, currItem) =>{ var ret = []; ...
2018-07-23 12:04:59
432
原创 理解this指向
this指向大致可以分为两种，一种是ES5中的this，另外一种是ES6中的this也就是箭头函数的this。 想要了解ES5中的this只要记住两点就可以了： this的指向在函数执行时才能确定， 而this指向 最近一次 调用的对象（不过也有几种特殊情况，后面会做说明。） 来看几个例子var n = 10;var obj = { n: 20, f...
2018-07-23 11:23:35
262
原创 javascript数组
js中的数组很基础，今天写下此文的原因是本人总是把slice和splice搞混，所以特此记下一笔，算是做个总结。 let arr = [1,2,3,4]常用方法 arr.push('5') //数组尾部添加元素 [1,2,3,4,5] arr.unshift('0') //数组头部添加元素 [0,1,2,3,4] arr.pop() //数组...
2018-03-08 10:47:35
325
原创 React--生命周期
React生命周期是使用React开发中非常重要的一环。概括来说React的生命周期分为三个阶段： Mounting、Updating、UnmountingMounting 阶段出发的方法有： constructor() componentWillMount() render() componentDidMount()Updating阶段出发的方法有： componentWillR
2017-12-04 11:50:57
659
原创 React之智能组件和木偶组件
智能组件和木偶组件（也有叫容器组件和UI组件的）。见名知意，智能组件就要做一些比较智能比较‘高端’的工作，智能组件负责逻辑处理、数据获取等比较‘智能’的工作； 而木偶组件就比较‘呆板’，它原则上只负责展示功能，像一只木偶，别人（智能组件）用线牵着它来控制它的展示内容。来看一个例子：class ListUI extends React.Component{ render(){
2017-12-01 16:36:55
2123
原创 ES6--对象
ES6中对对象的修改还是比较大的，增加了很多很实用的方法，让开发者使用对象时更加便利，小结一下。很多说明和理解都写在注释里了，欢迎指正~~/* Object.assign()方法用于对象的合并。将源对象的可枚举属性复制到目标属性。类似于jQuery的extend()*/var target = {a : 1};var source = {b : 2};var aim = Object
2017-11-30 16:32:40
324
原创 ES6--Set 和 Map
今天来说说Set和Map那些事，Set和Map都是ES6新引入的数据结构，了解Java的同学对这两个词不会感到陌生，事实上在ES6的概念中这两种数据结构和Java有很多想通之处。Set是一种新的数据结构，它类似数组，但成员都是**唯一的没有重复的值**let set = new Set();/*Set函数可以接受一个数组或类数组作为参数来初始化*/let s1 = new Set([1,2,3,
2017-11-30 16:26:07
243
原创 ES6--数组
写在前面： 我本前端小汪一枚，本着对前端知识的无比热爱的心情（其实最近比较闲~），工作之余整理了一些ES6的要点内容，特此分享与君共勉，会持续更新欢迎各路大神批评指正~今个儿头一天咱们来扯一扯数组的八卦： 对于前端的程序旺来说数组再熟悉不过了，不过最新的ES6规范中对数组进行了很多的扩展和改进，闲话不多说进入主题。/* Array.from()用于把类数组对象或可遍历的对象转化为真
2017-11-23 22:04:41
1841
原创 webpack3+react16+react-router3+react-redux实战项目
折腾了近一个月的时间终于把项目搞定。该项目运用了全新的react技术栈包括webpack3 react16 react-router3 react-redux ES6 等。 非常适合想要学习react技术栈的同学。本项目用的是react-router3 目前react-router已经升级到最新版4.0.0，API发生了较大的变化，路由结构也做了调整，最新版router支
2017-11-21 16:35:15
3411
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人