雷雪松的个人博客

雷雪松的博客，一个优秀的个人技术博客。
-

WEB前端

WEB前端包括HTML标签、CSS样式和JS编程等相关的知识。雷雪松的博客WEB前端栏目主要是分享作为WEB前端工程师在WEB前端开发的过程中WEB前端技巧，优秀的JS插件，有趣的JS效果，常用的CSS技巧以及HTML5最新技术。

SVG基础知识入门教程

WEB前端

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。SVG 是属于对图像的形状描述得文本文件，体积较小，放大不会失真，其他图像格式都是基于像素处理的。SVG 文件可以直接插入网页，成为 DOM 的一部分。也可以被img、object、embed、iframe等标签插入网页。SVG 文件也可以在JavaScript 和 CSS 中使用 。SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。下面雷雪松给大家分享一下SVG基础知识入门教程。
阅读原文 »

截取网页或屏幕快照插件-html2canvas

WEB前端

html2canvas是一个截取网页或屏幕快照插件。通过读取DOM和元素的不同样式，将当前页面呈现为画布图像。一般在需要将h5页面生成海报的时候用。html2canvas库使用Promise，如果浏览器不支持Promises，可以先加载一个es6-promise的补丁。之前雷雪松的博客中介绍过HTML转图片的JS插件-rasterizeHTML.js。今天雷雪松给大家分享一个截取网页或屏幕快照的插件html2canvas。
阅读原文 »

Three.js介绍

WEB前端

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。Three.js（类似于JQuery）在浏览器提供的 WebGL 接口之上又做了一层封装。WebGL 是在浏览器中实现三维效果的一套标准。WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 前端开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。下面雷雪松就简单介绍一下Three.js。
阅读原文 »

JS如何将字符串转化为数字数组

WEB前端 、

在使用Vue的时候，我们需要注意数据的类型。比如，Elment select 组件选中的值是有字符串和数值之分的。很多时候，明明给了一个一样的数字，却不能选中就是因为这个原因。那么就需要将字符串数字转换成数字或者将数字转换成字符串。下面雷雪松给大家介绍一下JS如何将字符串转化为数字数组。
阅读原文 »

CSS预处理工具Stylus简介

WEB前端 、

Stylus是一个CSS预处理器，提供一种高效、动态和富有表现力的方式来生成CSS。Stylus 比较激进，利用缩进、空格和换行来减少需要输入的字符。不过同时也兼容CSS语法。下面雷雪松详细的介绍一下如何使用预处理工具Stylus。
阅读原文 »

如何让文本中的 \n 在HTML中换行？

WEB前端

在实际前端开发中，在textarea中用户输入大段文本时，可能会有换行。这时获取到的字符串是\n。在展示的时候如何还原用户输入时的样式呢？可能有的人会说用正则表达式来把\n替换成 HTML 换行标签<br>。有没有更简单的办法呢？答案就是使用CSS的white-space属性。今天雷雪松给大家讲解一下如何让文本中的\n在HTML中换行。
阅读原文 »

Vue中重置data的数据为初始状态

WEB前端

在 Vue 开发的过程中，需要重新使用data中的数据，但是data中的数据已经被赋值改变了，那么怎么重置data的值为初始状态呢？通常有两种方法，一是：一个个直接赋值是肯定可以的，第二种：使用this.$options.data()获取初始data的值，Object.assign()复制对象。下面雷雪松详细的介绍一下Vue中重置data的数据为初始状态的方法。
阅读原文 »

移除未使用 CSS 工具 PurgeCSS 详解

WEB前端 、

PurgeCSS 是一个能够通过字符串串对比，来决定移除不不需要的 CSS 的工具。PurgeCSS 通过分析你的内容和 CSS 文件，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 css 中删除未使用的选择器，从而生成更小的 CSS 文件。对于 PurgeCSS 的配置因项⽬目不不同⽽而异，它不不仅可以作为 webpack 的插件，还可以作为 postcss 的插件。下面雷雪松就详细得讲解一下移除未使用 CSS 工具 PurgeCSS。
阅读原文 »

JS 删除树状结构数据中空children

WEB前端

如何让自己在开发中能成长更快？开发效率更高？答案就是：不断学习，不断总结。在实际前端开发中，使用组件可以很快的开发出一个功能，比如ElementUI树形结构组件。那么使用组件就得返回组件规定的数据结构。数据大部分是在后端处理后直接返回需要的数据，比如PHP、JAVA等后端语言。可有时候也需要前端自己处理数据。下面雷雪松就给大家分享一个删除树状结构数据中空children的函数。
阅读原文 »

Flex 常用属性详解

WEB前端

Flex 是2009年W3C 提出了一种新的方案。Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，可以很方便得给 HTML 元素布局。在 Flex 布局出来之前，主要是通过 CSS 的 float 浮动和 position 定位来布局，在实现一些布局时非常不方便，比如：水平垂直居中，全屏上中下铺满。但是如果使用 Flex 就非常容易。下面雷雪松就详细得讲解一下Flex 常用属性。
阅读原文 »