- 博客(32)
- 收藏
- 关注
原创 CSS3: linear-gradient 线性渐变
日常开发中线性渐变是必不可少的技能之一,今天来简单聊一聊。线性渐变的优势就不赘述了,直接看看用法吧。渐变规则要想了解渐变的规则首先要明白渐变线的规则,渐变线是垂直向上的,在不指定角度时,如:background-image: linear-gradient(red,blue) 颜色是有上至下由红渐变为蓝色。可是这明显与渐变线垂直向上不符啊,其实在不显示指定渐变角度时,默认是180deg。在...
2019-10-18 14:42:58 803
原创 图片加载失败占位符
当网络不佳加载图片时会出现加载失败或者延时加载的情况,此时原本的图片位置会显示空白状态,这造成了不好的用户体验,所以我们需要加一个图片占位符。有两种方式可以实现:js其实这种方式也很简单,监听onerror事件就可以了。举个栗子:<img src="http://xxxx" onerror="{this.src='/statictest.png'}" />监听onerror...
2019-06-25 11:25:28 1901
原创 Vue--插槽 vs 高复用组件
为什么要用插槽!组件的最大特性就是提高复用性,而插槽的作用是最大程度的优化组件的可复用能力。组件的复用常见场景如多个页面有同样的UI结构,通过组件间通讯机制传递数据,以此达到同一套代码渲染不同数据的效果。然而,这种利用组件间通讯机制只能满足UI结构相同,展示数据不同的场景。设想一下:有两个相似的页面,它们大部分的结构相同,只有某个区域不同,以上办法就不适合了,也许你会说,在子组件中利用v-i...
2019-06-04 14:33:59 1128
原创 Vue--双向绑定
在React或者Vue这类MVVM框架中使用双向绑定是很常见的需求,最近项目中在使用Vue,今天来谈一谈Vue中双向绑定的实现。先来说几句废话:什么是双向绑定?把Model中的数据绑定到View中,然后更新Model时View会自动跟新,这叫单向绑定,而当用户改变View时Model中数据也能自动更新时,这叫双向绑定!如何实现Vue中的双向绑定?有两种方式可供参考:$emit 自定义事件处...
2019-05-30 16:17:13 499
原创 数据结构和算法--二维数组
数据结构和算法中最基础的就是数组了,关于数组的定义、存取、遍历等一些基础操作就不讲了,相信大家都已熟练掌握,我这里就不再赘述了。今天讲一讲二维数组。二维数组简单讲就是:数组元素是数组的数组(莫名拗口),但其实也不难理解。看个例子就完全明白了:var grades = [[10, 20, 30], [40, 50,60], [70, 80, 90]] 数组grades的每一个元素都是数组。相...
2019-05-28 17:06:48 1989
原创 根据输入实时发送请求(防抖函数)
有这样一种常见的需求:有一个搜索框,需要根据用户的输入进行实时的查询。也就是说用户每输入一个字符就要发送一次请求。最先想到的做法是监听输入框的keyup时间然后在回调里发送异步请求。这样做的不足也很明显:其实我们并不需要用户每次输入时都发送请求,这样会给服务器造成不必要的压力。因为发送的是异步请求,有可能查询的结果和最后输入的内容并不匹配。如何解决以上两种问题呢? 有两种解决...
2019-05-21 17:38:36 2436 2
原创 为什么解析 CSS 选择器时一定要从右往左解析
为什么解析 CSS 选择器时一定要从右往左解析?今天逛论坛时无意中看到这个熟悉的命题。勾起了一段心酸的往事,记得刚毕业面试时被这个问题ko过。今天总结一下算是祭奠下当年那个菜鸟的我。首先来了解下页面是如何渲染的:首先浏览器会把HTML文档解析为DOM tree,然后解析CSS为CSS tree,接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree,最终用来绘...
2019-05-21 15:45:45 630 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 397
原创 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 1599
原创 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 732
原创 instanceof和typeof 详解
判断变量是某种数据类型也是实际开发中常见的操作,总结如下:写在前面在介绍这两者之前先来回顾下js中的数据类型都有哪些。基础数据类型nullundefinedStringNumberBoolean引用数据类型Object、Array、Function、Date等typeoftypeof操作符返回一个字符串,我们先来看看使用typeof判断数据类型的结果typ...
2019-03-12 15:30:21 562
原创 重学原型链
一切源于一个简单的案例: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 174
原创 CSS实现等高布局
等高布局的实现方式有很多种这介绍两种非常实用的主流的方法,如下://html<div class='box'> <div class='left'> <div class='bor'></div> dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf </div> ...
2019-03-01 16:25:56 3627
原创 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 143
原创 margin合并
从事前端工作的小伙伴都知道margin合并也叫做margin折叠。今天总结如下。定义块级元素的上外边距或下外边距有时(直接接触/相邻时)会合并为一个外边距,这种合并行为叫做margin合并。注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。合并原则正正取最大,负负取最负,正负就相加分类1. 相邻元素之间margin合并相邻元素之间的margin合并规则很简单,按照上述的...
2019-03-01 10:42:53 2492
原创 sticky定位
我们都知道常见的定位方式有static、relative、absolute、fixed,今天来介绍一种‘粘性定位’sticky。定义粘性定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。也就是说sticky会让元素在页面滚动时如同在正常流中(relative定位效果),但当滚动到特定位置时就会固定在屏幕上如同 fixe...
2019-02-12 15:58:39 12259
原创 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 9182
翻译 输入银行卡,每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 1067
原创 可以使用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 2031
原创 深度学习React
相信学习过Rect的同学都有一个感觉,学习过react基础也能写一些小型的项目,但是当你的工程越来越复杂的时候需要更深入的了解Rect才能更得心应手的开发。 我们需要更多的技能来支撑项目的顺利进行。今天总结了一些常用的技能做了的Demo分享在https://github.com/hkwBest/deep-learn-react,如果你觉得有用,请动动你可爱的小手点个赞!大家多多指正!当然这不...
2018-08-14 17:05:42 447
原创 手写JSONP
jsonp在前端领域是个很常用的技术,面试中也可能会让你手写jsonp。相信很多同学都听过jsonp但对其实现原理并不是很清楚,今天咱们来一边手写jsonp一边介绍其原理。首先为什么会有jsonp这个技术呢?都是同源策略惹的祸。那什么又是同源策略呢?所谓同源是指,域名,协议,端口相同。举个简单的栗子,你在百度的站点通过ajax是访问不到新浪的页面的?那怎么解决这个问题呢,jsonp要闪亮登场了...
2018-08-07 16:53:02 1913
原创 操作数组之常用方法: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 1688
原创 去掉字符串前后空格--trim
原生的js并没有提供像jQuery的trim方法,但是工作中又会经常用到,所以常常需要自己实现。去掉字符串前后的空格有很多种实现方式,正则无疑是最方便高效的一种,也是最常用的一种。原理也很简单。function Trim(){ String.prototype.trim = function(){ return this.replace(/(^\s*) | (\...
2018-07-25 14:55:00 5015
翻译 一个简单的笛卡儿积分享
前两天工作中用到笛卡儿积,一时间没有思路,在网上找个一个很不错的方法特记录分享如下:function cartesianProductOf() { return Array.prototype.reduce.call( arguments, (total, currItem) =>{ var ret = []; ...
2018-07-23 12:04:59 444
原创 理解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 269
原创 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 337
原创 React--生命周期
React生命周期是使用React开发中非常重要的一环。概括来说React的生命周期分为三个阶段: Mounting、Updating、UnmountingMounting 阶段出发的方法有: constructor() componentWillMount() render() componentDidMount()Updating阶段出发的方法有: componentWillR
2017-12-04 11:50:57 671
原创 React之智能组件和木偶组件
智能组件和木偶组件(也有叫容器组件和UI组件的)。见名知意,智能组件就要做一些比较智能比较‘高端’的工作,智能组件负责逻辑处理、数据获取等比较‘智能’的工作; 而木偶组件就比较‘呆板’,它原则上只负责展示功能,像一只木偶,别人(智能组件)用线牵着它来控制它的展示内容。来看一个例子:class ListUI extends React.Component{ render(){
2017-12-01 16:36:55 2149
原创 ES6--对象
ES6中对对象的修改还是比较大的,增加了很多很实用的方法,让开发者使用对象时更加便利,小结一下。很多说明和理解都写在注释里了,欢迎指正~~/* Object.assign()方法用于对象的合并。将源对象的可枚举属性复制到目标属性。类似于jQuery的extend()*/var target = {a : 1};var source = {b : 2};var aim = Object
2017-11-30 16:32:40 365
原创 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 248
原创 ES6--数组
写在前面: 我本前端小汪一枚,本着对前端知识的无比热爱的心情(其实最近比较闲~),工作之余整理了一些ES6的要点内容,特此分享与君共勉,会持续更新欢迎各路大神批评指正~今个儿头一天咱们来扯一扯数组的八卦: 对于前端的程序旺来说数组再熟悉不过了,不过最新的ES6规范中对数组进行了很多的扩展和改进,闲话不多说进入主题。/* Array.from()用于把类数组对象或可遍历的对象转化为真
2017-11-23 22:04:41 1851
原创 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 3432 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人