顽石个人博客

一个专注于Web前端开发技术分享的博客网站


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

  • 站点地图

  • 搜索

使用Jest进行单元测试

发表于 2019-07-25 | 分类于 单元测试

Jest 是 facebook 开源的基于node.js的单元测试框架,Jest 的一个理念是提供一套完整集成的 “零配置” 测试体验。使用 Jest, 可以有效降低编写单元测试的难度。

阅读全文 »

简析JSX语法

发表于 2019-07-24 | 分类于 React

JSX,是一个 JavaScript 的语法扩展。是React组件编写UI逻辑的语言扩展(JSX除了能在React中使用之外还可以用于别的地方)。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。

阅读全文 »

JavaScript管道语法提案

发表于 2019-07-22 | 分类于 JavaScript

管道语法引入了一个 |> 类似于 F#, OCaml, Elixir, Elm, Julia, Hack和LiveScript的新运算符,以及UNIX管道。它是一种向后兼容的方式,以可读,功能的方式简化链式函数调用,并提供了扩展内置原型的实用替代方法。

阅读全文 »

使用SVG symbols建立图标系统完整指南

发表于 2019-07-21 | 分类于 SVG

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

阅读全文 »

CSS隐藏元素滚动条

发表于 2019-07-09 | 分类于 CSS

如何隐藏滚动条,同时仍然可以在任何元素上滚动?

首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。想要完全隐藏滚动条只需设置overflow:hidden即可,但是这样一来将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。

阅读全文 »

使用custom elements创建自定义元素

发表于 2019-06-05 | 分类于 Web组件标准

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。这篇文章将会介绍如何使用HTML的custom elements。

阅读全文 »

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

发表于 2019-04-28 | 分类于 前端构建工具

关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个,Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此,Gulp 构建 ES6 开发环境的方案有很多,例如:webpack-stream、rollup-stream 、browserify等,本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。

GitHub地址:https://github.com/JofunLiang/gulp-translation-es6-demo

阅读全文 »

使用 Webpack 与 Babel 配置 ES6 开发环境

发表于 2019-03-11 | 分类于 前端构建工具

Webpack 和 Babel 几乎是现在前端开发必备的工具,Webpack 是一个现代 JavaScript 应用程序的静态模块打包器,Babel 是一个 ES6 编译器,由于目前浏览器对 ES6 的兼容性有差异,无法直接在项目中使用 ES6,需要使用 Babel 编译器转换成 ES5 才能在浏览器中运行。使用 Webpack 和 Babel 也开发了几个项目,使用时间少说也有两三年了,本文就讲解一下使用 Webpack 与 Babel 配置 ES6 开发环境。

阅读全文 »

使用HTML5原生对话框元素,轻松创建模态框组件

发表于 2019-03-05 | 分类于 HTML

HTML 5.2草案加入了新的dialog元素。但是是一种实验技术。

以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找到一种将消息传递出去的方式对话……这真的很复杂。对话框元素解决了上述所有问题。

阅读全文 »

前端静态资源自动化处理版本号防缓存

发表于 2019-03-01 | 分类于 前端构建工具

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

阅读全文 »
12345
顽石

顽石

44 日志
18 分类
91 标签
RSS
© 2018 — 2020 顽石