随笔分类 - Web 前端
摘要：灵感的源泉来源于不断的接受新鲜事物。 Chrome 89 新功能一览，性能提升明显，大量 DevTools 新特性！ 文章中的新特性，掌握了对日常开发，很受益，赶紧更新浏览器版本吧。 谈谈其中提到的：新的颜色对比度算法-先进感知对比度算法(APCA)。 启用该功能设置：选中 Settings > E
阅读全文
摘要：声明：未经允许，不得转载。 Web Components 现世很久了，所以你可能听说过，甚至学习过，非常了解了。但是没关系，可以再重温一下，温故知新。 浏览器原生能力越来越强。 js 曾经的 JQuery，是前端入门必学的技能，是前端项目必用的一个库。它的强大之处在于简化了 dom 操作(强大的选择
阅读全文
摘要：忙里偷闲，打开平时关注的前端相关的网站，浏览最近最新的前端动态。佼佼者，平凡的我做不到，但还是要争取不做落后者。 "前端中的IoC理念" ，看到这个标题就被吸引了。IoC 理念，不认识呢，点击去一看，果然没让我失望，原文结合案例把概念诠释的很清楚。原来 Ioc 是 控制反转 或 依赖倒置 。 控制反
阅读全文
摘要：树形操作数据整理总结，这篇是第二篇。本篇是关于树节点拖拽组合，实现或、且的关系，并支持删除节点。demo 是基于 jquery 及 easy ui 库实现的。 前言： "demo 预览" "github 源代码" 实现功能点： tab 切换展示树数据 树形展示、筛选 左侧节点支持拖拽到右侧，并且可组
阅读全文
摘要：最近，打算换个编辑器，而 vscode 是一个不错的选择。大部分快捷键和 sublime 还是很像的，但有些也不一样。特此整理一份小笔记。 参考： "vscode: Visual Studio Code 常用快捷键" "非常全的VsCode快捷键" 常用快捷键 主命令 ：ctrl + shift +
阅读全文
摘要：主要描述的是如何运用 css 绘制一个抽奖转盘，并运用原生 js 实现转盘抽奖效果。 先来张效果图： 布局 一般来说，转盘一般有四个部分组成：外层闪烁的灯、内层旋转的圆盘、圆盘上的中奖结果、指针。 所以html的结构如下： 其中灯需要一直闪烁，而抽奖的时候转盘需要转动连带其中的中奖结果，而转盘指针不
阅读全文
摘要：看到 ，似曾相识，但又感觉很模糊，于是乎，又重新翻阅文档，学习了一遍，顺便把相关知识学习了一下，比如 ,`workbox3`。 PWA 概念： 全称：Progressive Web APP, 渐进式 Web 应用。 实际上是通过 Web 技术编写出的一个网页应用，加上 和`Service Worke
阅读全文
摘要：效果图 概述 在线签名，现在在很多场景下都能看到，而且在移动端见的比较多。 用 和`svg`都可以实现，而且跨平台能力也很好。 基于像素，提供 2D 绘制函数，提供的功能更原始，适合像素处理、动态渲染和大量数据绘制，可控性高，绘制完了基本不记录过程，绘图性能会更好一点，各大厂商也早都实现了 的硬件加
阅读全文
摘要：DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。 DNS Prefetch，即DNS预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点： 一个是减少DNS的请求次数，另一个就是进行DNS预获取 。 DNS 作为互联网的基础协议，其解析的速度似乎很
阅读全文
摘要：html 的meta标签对网页渲染及SEO搜索引擎起着不可忽视的作用。详细的写法一段时间不写，容易忘，所以整理了一下，方便需要时查看。
阅读全文
摘要：如果想通过纯前端技术实现文件下载，直接把a标签的href属性设置为文件路径即可，如下： 但是，对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载，而是会直接打开，这时候一个新属性就要上场了--【download】 download属性不止可以实现下载，其属性值还可以规定下
阅读全文
摘要：format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置： meta name="format-detection" content="telephone=no" meta
阅读全文
摘要：借鉴：http://www.jianshu.com/p/4aba847b3e8c 功能 1. 支持加载JavaScript各种模块化的写法：AMD、CommonJS、标准化的ES6模块... 2. 包管理器：能从不同的源安装不同的包，默认的源有npm、github...，安装好包后，在代码中只需要一
阅读全文
摘要：http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) : Windows 下使用: 在站点目录下开启命令行输入 访问: http://localhost
阅读全文
摘要：官网：https://yarnpkg.com/zh-Hans/docs/installing-dependencies 简介：包管理工具，和npm类似主要特点：快速、安全、可靠 快速：本地安装包后，会进行缓存，下次再安装时，直接从缓存中取，不需要再请求网络 安全：通过相关机制，在安装之前，会检查包的
阅读全文
摘要：经验，是前行路上，磕磕碰碰，不断探索，最终留下的结晶；亦是下一次，快速高效，寻求到结果的快捷方式。 datatable插件具体可参考： 官网：http://datatables.club/ 参数说明：http://www.cnblogs.com/hyywaq/p/5919412.html html页
阅读全文
摘要：插件官网：https://select2.github.io/examples.html 页面引入： 调用select2 注意：注释的代码可以实现分页功能, 鼠标拖动滚动条往下滚时，再去请求再显示下一页的效果；但是需要后台支持，根据请求参数page的页数，返回响应的数据。 设置默认值或回填值： 显示
阅读全文
摘要：一、call、apply、bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向，它们是call、apply、bind。它们3个非常相似，但是也有区别。下面表格可以很直观看出三者的不同 (context,arg1,arg2,arg3...) 第二个参数之后都是实参 func
阅读全文
摘要：一个轻量级的cookie 插件，可以读取、写入、删除 cookie。 配置 首先包含jQuery的库文件，在后面包含 jquery.cookie.js 的库文件。 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script
阅读全文
摘要：Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： Zen coding下的编码演示 一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固
阅读全文
