随笔分类 - 前端
摘要：一、背景 最近做 dashborad 图表时，涉及计算小数且四舍五入精确到 N 位。后发现 js 算出来的结果跟我预想的不一样，看来这里面并不简单…… 二、JS 与 精度 1、精度处理 首先明确两点： 1、小数才会涉及精度的概念 2、小数的（存储和）运算涉及 JS 的精度处理 在现实中，我们运算小数
阅读全文
摘要：一、什么是 CSS in JS 上图来源：https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一种设计模式，它的核心思想是把 CSS 直接写到各自组件中，而不是单独的样式文件里。 CSS in js 的发展： 最早就是内联样式 依
阅读全文
摘要：一、什么是 CSS methodologies CSS methodologies，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图： 上图来源：https://2019.stateofcss.com/technologies/ 你可能在日常开发中并不会专门花时间去注意和了解 C
阅读全文
摘要：一、介绍 Less （Leaner Style Sheets 简洁的样式表） 是一门向后兼容的 CSS 预处理语言，它扩展了CSS 语言。 less is more. 好处： 1、具有部分编程语言的功能，提高编码效率 2、提供模块化 3、结构清晰、易于拓展 4、完全兼容 css 缺点： 1、学习成本
阅读全文
摘要：一、背景 翻出我4年前看的《精通CSS》一书，可惜当初没有整理读书笔记的习惯，最近又很少写前端，遂很多东西、知识点遗忘了，恰且现在 css 也有些变化和进步，遂一起打包整理，输出成几篇 blog 系列，以犒自己。 二、文字 1、字体类型 （1）字型 字型分 serif(有衬线) 和 sans-ser
阅读全文
摘要：一、背景 翻出我4年前看的《精通CSS》一书，可惜当初没有整理读书笔记的习惯，最近又很少写前端，遂很多东西、知识点遗忘了，恰且现在 css 也有些变化和进步，遂一起打包整理，输出成几篇 blog 系列，以犒自己。 二、选择器 1、基本选择器 （1）标签选择器 —— （2）类别选择器 —— （3）ID
阅读全文
摘要：一、背景 前几年刚入前端的时候，还在使用 CSS 精灵图，还要适配恶心的老版本 IE，而现在，svg 都开始普及了，可喜可贺，遂记录为 blog 一篇。 二、演变过程 1、直接 `` 简单粗暴 2、CSS Sprites 雪碧图/精灵图 原理： `` + CSS 把一个个图标合并在一张图片上，再通过
阅读全文
摘要：一、背景 翻出我4年前看的《精通CSS》一书，可惜当初没有整理读书笔记的习惯，最近又很少写前端，遂很多东西、知识点遗忘了，恰且现在 css 也有些变化和进步，遂一起打包整理，输出成几篇 blog 系列，以犒自己。 二、HTML 1、什么是 HTML？ 超文本标记语言（英语：HyperText Mar
阅读全文
摘要：一、背景 以前做项目碰到发邮件的需求，邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的，但是确是 HTML 子集程度的支持，所以存在必须通过 <table> 排版的恶心之处，还有很多兼容性的坑。本质上是各家邮件商的标准有差异吧。 具体可参考阮一峰的这篇：http://www.ruan
阅读全文
摘要：环境： VSCode 1.33.1 Node.js 8.9.1 一、ESLint 1、介绍 ESLint是最流行的JavaScript Linter。 Linter 是检查代码风格/错误的小工具。其他类似的 Linter 工具还有：TSLint、stylelint。 它包含三个功能： （1）chec
阅读全文
摘要：一、背景 最近在翻看以前的老书《node.js开发指南》，恰好碰到 for 循环 + setTimeout 的经典例子，于是重新梳理了思路并记录下。 二、写在前面，setTimeout 和 setInterval 的执行机制 在日常编码中，你会发现，给 setTimeout 和 setInterva
阅读全文
摘要：零、区别 1、require/exports 是 CommonJS 的标准，适用范围如 Node.js 2、import/export 是 ES6 的标准，适用范围如 React 一、间接获取对象 （1）require/exports 方法一 间接 方法二 直接 方法三 别名 （2）import/e
阅读全文
摘要：ES6 一共有5种方法可以遍历对象的属性。 （1）for...in for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。 （2）Object.keys(obj) Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）。
阅读全文
摘要：一、背景 朋友这几天在准备公务员考试，闲聊之中，给我传来一道题，是一道逻辑推理题，问我答案为何？ 让我这个工作好几年的老油条再做这种题，真的伤脑筋，我说：“干脆我用编程做做看吧”，于是便有了此文…… 二、正文 这里我用的是javascrpt编程语言 1、定义变量 定义小王为 wang; 定义小张为
阅读全文
摘要：myWaterfall jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ Github https://github.com/xjnotxj/myWaterfall Usage
阅读全文
摘要：背景： 本人的一个移动端H5项目，需求如下: 需求一：手机相册选取或拍摄照片后在页面上预览 需求二：然后绘制在canvas画布上 这里，我们先看一个demo（http://jsfiddle.net/q3011893/83qfqpk8/embedded/） 需求一：drawTempPhoto方法 需求
阅读全文
摘要：背景： 本人开发移动端h5时，想让页面禁止向下滑动，最初的代码如下： 在chrome移动端调试工具中可以，但是用iphone的微信打开，失效了。 解决方案： 方法一： 方法二： 参考资料：移动端如何禁用横向滚动条? - 前端开发 - 知乎
阅读全文
摘要：背景： 在一次移动端H5开发中，需要监听输入框值的实时变动。 onchange事件肯定抛弃，因为只能失去焦点才触发。 而keyPress在Android可以触发，iOS不可以。 又不想用Android和iOS都可以触发的keyDown和keyUp。 于是，百度出了新东西：oninput！【需要配合p
阅读全文
摘要：背景： 在清空input file标签选中值时，分别用了以下方法，发现有的对有的错： 为什么同样是改变value值，得到的结果却不同呢？ 释疑： 查阅stackoverflow《jQuery .val() vs .attr(“value”)》Question，里面解答如下： The gist is
阅读全文
摘要：事件： touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续的触发。调用preventDefault()可阻止滚动 touchend:当手指从屏幕上移开时触发 touchcancel:当系统停止跟踪触摸时触发。关于此事件的确
阅读全文
