风雨过后见彩虹

对web前端的爱好与兴趣而来，收集、发表有意义的文章随笔问题，让知识沉淀积累，方便自己查阅，方便网友交流。

CSS基础篇--CSS3 calc实现滚动条出现页面不跳动

风雨后见彩虹 1 天前发布
收藏

什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pa...

JS进阶篇--命名空间模式解析

风雨后见彩虹 10月9日发布
4 收藏

简介在SF上看到这样一个提问：如题，因为不得已的原因，需要写若干个全局函数。但又不想这样： {代码...} 题主问有什么好的写法？解答：如果你用 jQuery，你可以这样写 {代码...} 如果你不用 jQuery，可以直接实...

Vue2 几种常见开局方式

风雨后见彩虹 9月5日发布
4 收藏

在SF问题中看到了一个关于vue-cli中的template问题，问题是这样的：用vue-cli工具生成的main.js中： {代码...} 然后问友的问题是：【template: '<App/>'】这句是什么意思？是指使用app.vue模板吗？但在vue...

webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

风雨后见彩虹 9月4日发布
1 收藏

资源相对引用路径问题描述一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么...

CSS基础篇--CSS中IE浏览器的hasLayout，IE低版本的bug根源

风雨后见彩虹 8月28日发布
3 收藏

什么是hasLayout？ hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout...

获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

风雨后见彩虹 8月19日发布
2 收藏

基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 {代码...} document.documentElement.clientWidth与document.doc...

JS基础篇--JS对url进行编码和解码（三种方式区别）

风雨后见彩虹 8月18日发布
2 收藏

Javascript语言用于编码的函数，一共有三个，最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从它讲起。 escape 和 unescape 实际上，escape(...

JS进阶篇--JS数组reduce()方法详解及高级技巧

风雨后见彩虹 8月18日发布
4 收藏

基本概念 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接...

JS基础篇--JS中的可枚举属性与不可枚举属性以及扩展

风雨后见彩虹 8月18日发布
收藏

在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举...

JS进阶篇--JS中的反柯里化( uncurrying)

风雨后见彩虹 8月16日发布
3 收藏

反柯里化相反，反柯里化的作用在与扩大函数的适用性，使本来作为特定对象所拥有的功能的函数可以被任意对象所用.即把如下给定的函数签名， {代码...} 转化成一个函数形式，签名如下： {代码...} 这就是反柯里化...

JS进阶篇--JS中的柯里化(currying)

风雨后见彩虹 8月16日发布
2 收藏

何为Curry化/柯里化？ curry化来源与数学家 Haskell Curry的名字（编程语言 Haskell也是以他的名字命名）。柯里化通常也称部分求值，其含义是给函数分步传递参数，每次传递参数后部分应用参数，并返回一个更具...

你需要了解的一些web前端常见概念整理

风雨后见彩虹 8月16日发布
5 收藏

谈谈对web标准的理解 Web标准不是某一个标准，而是由一系列标准组合而成。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和HTML以及XML，表现标准语言主要包括CSS...

CSS进阶篇--CSS3实现流彩文字效果+图片模糊效果+边框伸展效果实现

风雨后见彩虹 8月15日发布
2 收藏

前言首先第一步，先布局html代码如下： {代码...} 上面一看第一个图片img 就是实现图片模糊效果的DOM元素，text-gradient实现的是流彩文字效果的DOM元素，border实现的是边框伸展效果的DOM元素想一想样式该咋写...

CSS基础篇--CSS3 Filter详解（改变模糊度亮度透明度等方法）

风雨后见彩虹 8月14日发布
12 收藏

前言 CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下...

JavaScript易错知识点整理

风雨后见彩虹 8月10日发布
3 收藏

前言本文是我学习JavaScript过程中收集与整理的一些易错知识点，将分别从变量作用域，类型比较，this指向，函数参数，闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解，其中也涉及了一些ES6的知识点...

12个非常实用的JavaScript小技巧

风雨后见彩虹 8月8日发布
32 收藏

使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!vari...

webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇

风雨后见彩虹 8月8日发布
6 收藏

新建项目开始（确认已经安装node环境和npm包管理工具） 1、新建项目文件名为start_vuedemo 2、npm init -y 初始化项目，我的win7系统，工程在d盘的vue_test_project文件夹下的名为start_vuedemo的工程文件夹如...

HTML5 拖放（Drag 和 Drop）详解与实例

风雨后见彩虹 8月4日发布
5 收藏

简介拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先点击一个小例子：在用户开始拖动 <p> 元素时执行 JavaScript {代码...} 提示：链...

JS基础篇--JS与CSS阻止元素被选中及清除选中的方法总结

风雨后见彩虹 8月3日发布
2 收藏

有时候，我们希望阻止用户选中我们指定区域的文字或内容。举个栗子，有时候用户在一个区域执行频繁的点击操作，一不小心傲娇地点多了，就会选中当前区域的内容。再举个栗子，制作轮播组件的时候，点击下一页，...

JS基础篇--搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内

风雨后见彩虹 8月2日发布
3 收藏

onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。给下面一...