destinytaoer-CSDN博客

转载 Chrome 插件英雄榜

引自掘金文章：Chrome插件英雄榜其 GitBook 地址：https://zhaoolee.gitbooks.io/chrome/content/App 是手机的灵魂，插件是 Chrome 的灵魂，然而国内很难连接到 chrome 应用商店获取插件，所以国内的大多数 Chrome 只是一个浏览器，本文展示一个为 Chrome 赋予灵魂的方法。这个项目作者还在持续更新中，需要查看更多的...

2019-02-28 10:08:22 1376 1

转载 JS 中扯不完的分号问题

前言无论哪个团队，代码风格统一的争论是一个无解的话题，每次争论起来，各有各理，或执着或偏激或丧心病狂拍桌愤然离去：）如果团队强制性用了一种代码风格后，符合自己心中标准的同学，欣然乐嘻嘻；不符合的可能会心中『圈养』草泥马暗然敲码；最厉害的情况是，自己之前写的代码在团队流程工具统一编译代码的时候被暗中格式化了，此时心中就不再是一圈草泥马了，至少是一个动物公园。我们之所以为代码风格统一争论，因为...

2019-02-28 10:06:55 307

转载前端工程师的未来在哪里？

本文引自：前端工程师的未来在哪里？阿里妹导读：很多童鞋在上次的问卷调查里表示，希望多推出一些前端方向的内容。今天为大家分享一篇关于前端工程师职业发展的文章，抛砖引玉，期待与大家一起交流探讨。我是成曰，目前在蚂蚁金服数据平台部任职前端工程师，从事数据中台产品的研发。目前对前端架构与质量、用户体验、TypeScript比较感兴趣。以下我说的都是个人观点，比较宏观粗浅，主要针对的是前端工程师...

2019-02-28 10:05:21 317 1

原创 VuePress 入门

VuePress 入门VuePress 是一款使用 Vue 驱动的静态网站生成器，是 Vue 的作者 Evan You 为了方便文档的编写而开发的。默认主题与 Vue 官方文档一致简洁，少配置，高性能Markdown 专为技术文档提供拓展自带 PWA自定义主题，可定制程度完全由自己决定官方文档：由于 1.x 还处于测试阶段，可能随时变更，所以建议选用 0.x 版本0.x 版...

2019-02-21 21:51:29 622

原创 JS 函数的创建和执行机制

1. 普通函数的创建执行机制函数作为引用类型，也是按照引用地址来操作的。【创建函数】首先开辟一个新的堆内存，把函数体中的代码当作字符串存储在内存中（对象存储的是键值对）在当前上下文中声明函数（变量），函数声明和定义会提升到最前面把开辟的堆内存地址赋值给函数名（变量名）此时输出函数名 fn（不是 fn()），代表当前函数本身，如果我们要执行函数，就要加上小括号即 fn()。这是两种不...

2018-09-27 09:53:12 1406

原创 JS 函数

在 JS 中，函数就是一个方法，一般都是为了实现某个功能。1. 函数的作用和创建var total = 10;total += 10;total = total/2;total = total.toFixed(2); //=> 保留小数点后面两位，toFixed 时候数字包装对象的方法，用来保留小数点后面的位数在后续的代码中，依然想实现相同的操作，就需要重新编写代码。这样的方式...

2018-09-26 09:02:36 133

原创 JS 作用域和作用域链

1. 作用域作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。全局执行环境是最外围的一个执行环境。根据 ECMAS...

2018-08-27 16:23:33 8177

原创 JS 堆栈内存

堆栈内存的作用JS 中的内存堆内存和栈内存，所有堆栈内存的处理，浏览器会自行在内部执行栈内存： - 提供一个供 JS 代码自上而下执行的环境（作用域，代码都是在栈内存中执行的） - 由于基本类型比较简单，它们都是直接在栈内存中开辟一个位置，直接把值存储进去的堆内存：引用值对应的空间存储引用类型的（对象：键值对，函数：代码字符串）堆内存的释放让所有引用堆内存空间地址的...

2018-08-23 11:01:53 439

原创 JS 变量提升

1. 变量提升的概念变量提升的概念：当栈内存（作用域）形成，JS 代码自上而下执行之前，浏览器首先会把所有带 var / function 关键字开头的进行提前声明或者定义，这种预先处理机制称为“变量提升”。声明（declare）：var a （默认 undefined）定义（defined）：a = 12（定义其实就是赋值操作）变量提升阶段： - 带 var ...

2018-08-20 19:34:53 678

原创 DOM的映射机制

前言这在我们平常操作 DOM 的时候司空见惯。就比如：我通过获取一个元素来改变其样式，自然而然的反映到 HTML 页面中。但是，我们操作 JS 对象的时候，本质上操作的是 JS 堆内存，为什么会反映到页面中呢？就是因为浏览器存在这个 DOM 的映射机制。1. 什么是 DOM 的映射机制？我们使用 JS 从页面获取到的元素对象，或者自己手动创建的已经插入页面的元素对象，与页面中的...

2018-08-12 22:52:30 684

原创 JS类型转换总结

前言JS 令人头疼的一点就是它属于弱类型语言，一个变量存储的值可以是字符串、数值、布尔值或者对象等，可以随时变更。获取一个变量，你不会知道其存储的值是什么类型的，所以很多时候都需要进行类型检测。除了手动变更类型之外，有些情况下，JS 内部也会自动进行类型转换，以满足部分操作符以及语句等的执行。下面就是我对 JS 类型转换的一些总结，其中大部分来自《JavaScript 高级程序设计》这...

2018-08-06 17:00:37 164

原创 JS变量的创建机制

前言JS 怎么创建变量？相信大家都会：var a;function b(){}那么它们具体存储在哪里，又是怎么运行的呢？这次，就聊一聊 JS 的堆栈内存和变量的创建机制。（这里只介绍 ES5 的机制）1. 堆栈内存在了解变量创建机制之前，先来了解一下变量的存储空间。存储空间分为栈内存和堆内存。栈内存：作用域 - 提供一个供 JS 代码自上而下执行的环境（...

2018-08-06 16:59:47 592 1

转载 Markdown 添加 Latex 数学公式

Markdown 中添加公式Latex 数学公式语法角标上下标分式根式求和与积分上下划线上下括弧数学重音符号堆积符号定界符占位宽度集合相关的运算命令矩阵参考Markdown 中添加公式行内公式$行内公式$行间公式$$行间公式$$Latex 数学公式语法角标（上下标）上标^{}下标_{

2017-12-09 20:45:57 3118

原创 ESLint （二）配置文件

一、配置方式注释形式：使用 JavaScript 注释将配置信息直接嵌入到文件中文件形式 .eslintrc.js.eslintrc.yaml 或者 .eslintrc.yml.eslintrc.json package.json 文件中创建 eslintConfig 属性.eslintrc.js 文件module.exports = { root: true, parser:

2017-11-30 22:52:16 6881

一、关于ESLint 是一个由 Nicholas C. Zakas 于 2013 年 6 月创建的开源 JavaScript linting 实用程序。codelinting 是一种静态分析，常用于查找不符合某些样式指南的有问题的模式或代码。JavaScript是一种动态和松散类型的语言，特别容易出现开发人员错误。如果没有编译过程的好处，通常会执行 JavaScript 代码以查找语法或其他错误。像

2017-11-30 22:51:28 1284

原创 Canvas 画五角星

前言学习 canvas，更多的是需要动手实践，下面就从一个相对简单的例子：五角星开始吧！不懂 canvas 的同学，请先学习：Canvas 画布一、几何模型由上图可以清晰的得到大概的思路，大圆和小圆上的点相间相连，就可以的到五角星。我的做法是从右下角开始画。因为 canvas 的坐标系的第一象限，实际上是右下角，而不是右上角。这样，就可以避免纠结于 sin() 和 cos()

2017-11-30 22:50:29 5718

原创 Canvas 画时钟

前言不管学习什么，不动手去做，永远不能熟练掌握。学习了 canvas API，会觉得只要按照直线、圆等画法去画，canvas 太简单了。可是，当你真正去画的时候，会遇到许多的问题。下面介绍的是 canvas 时钟，主要是与大家分享我的学习过程。不懂 canvas 的同学，请先学习：Canvas 画布一、相关几何知识钟面是一个圆，主要包含每个小时数字、以及刻度，它们的位置坐标应该如何计

2017-11-30 22:49:54 5859 1

原创 HTML5 地理位置

一、简介地理位置特性能够识别你所在的地理位置并且在你允许的情况下，把位置信息分享给别人。识别地理位置的方法： - 通过 IP 地址 - 只能用于电脑上的位置信息定位利用基站获取去收集网络的介入位置大致位置，不够精确精确到用户所属的城市街区，获取用户房源一公里的范围内通过卫星定位获得经纬度信息的 GPS 设备几米的误差内准确定位专用 GPS 芯片耗电快GPS 芯片默认关闭，开启需要时

2017-11-30 22:48:47 1235

原创 HTML5 微数据

一、什么是微数据一个页面的内容，不仅要给用户看，还要让机器可识别。而目前机器智能程度有限，要让其知会特定内容含义，我们需要使用规定的标签、属性名以及特定用法等。如使用 <h1> 标签包裹页面标题信息就是为了让机器识别（搜索引擎 SEO）微数据本质是给网页中可见的数据提供附加语义的标准化方式。允许我们在网页元素中嵌入自定义属性。是为了方便机器识别而产生的东西。适合于精细地优化那些已经在 DOM 中的数

2017-11-30 22:48:10 620

原创浅谈响应式

前言由于移动设备的增多，携带便利，人们在移动设备上浏览网页的时间不断增加，甚至要超过PC端。但是PC端的网页放到移动端，就会出现各种问题，如字体太小、图片不清晰等。浏览体验变得很差。于是，就有了响应式网页的诞生。在多种设备的不同尺寸的屏幕上，精巧设计和制作出最佳视觉体验的网页。下面，就跟大家分享一下如何做一个响应式的网页。我学习响应式时做的网页：理财网站一、如何做响应式网页元

2017-10-31 09:52:40 428

原创像素与viewport概念

一、像素的概念px ：逻辑像素，浏览器使用的抽象单位dp、pt：物理像素dpr：设备像素缩放比ppi：屏幕每英寸的像素数量，即单位英寸内的像素密度ppi120160240320dpr0.751.01.52.0ppi 越高，像素数越高，图像越清晰。Retina屏即高清屏，dpr 大于等于 2。二、viewportweb初期，

2017-10-31 09:52:37 247

原创 sass的使用

前言在介绍之前，请大家先弄清楚下面的问题：什么是 sasssass 是 css 的预处理器（css preprocessor）为什么使用 sass1、它能够帮我们更快更高效的编写更好维护的 css 。2、它自带很多原生 css 没有的功能，如变量（现在 css 中已经实现）、条件语句等如何使用sass1、安装 sass ：ruby环境、sass编译2、 sass的语法

2017-10-31 09:52:34 1338

转载说说CSS学习中的瓶颈

前言本文是在自己重新开始学习CSS的过程中看到的，与其说它是讲如何深入学习CSS，更多的是警醒的作用，看了文章之后，才真正认清自己的浮躁，也庆幸自己回头恶补。本文不涉及技术，但是希望大家都能看一看。本文转载自说说CSS学习中的瓶颈 " 张鑫旭-鑫空间-鑫生活**。0 写在前面虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不做没有跟拍的表演，同样，想到写CSS

2017-10-31 09:52:31 542

原创 CSS实现元素的居中显示

前言元素的水平及垂直居中是在写CSS样式中最常遇到的问题之一。相信会CSS的同学肯定都有自己的解决方法，但是并不一定都能熟练运用，并且知道其中原理。下面，我就将自己总结的实现方法分享给大家。ps：重点是第四，疑惑在第三，第一、第二也较常用为本文制作的demo：元素居中显示一、单行文本这里的单行文本不仅是指单行显示的文本以及行内元素（设置了display: inline;的也是行内元

2017-10-31 09:52:28 292

原创给不了解前端的同学讲前端

前言这篇文章，是在前几天逛知乎的时候看到的文章，觉得很棒，正好也有这个需求，想向不了解前端的人介绍何为“前端”。不然，自己所在的群体中好像很少人能明白我一天到晚钻研的东西是什么。下面与大家分享。ps：本文为PPT演讲的形式所作的图文介绍，图片较多。本文转自知乎：前端 101：给不了解前端的同学讲前端本演讲原作者css魔法，文末有作者简介简介本文改编自魔法哥为 “百姓网暑期实习生训

2017-10-31 09:52:25 1034

原创关于Flex布局

前言本文引自阮一峰的网络日志：Flex 布局教程：语法篇阮一峰老师的文章确实很棒，在他的博客学到了很多的知识，通俗易懂。讲讲布局，传统的布局，是基于盒子模型，依赖 display + position + float属性。它对于特殊的布局非常不方便，如：垂直居中。Flex布局是W3C在2009年提出的新方案，可以简便、完整、响应式地实现各种页面布局。已经得到所有浏览器的支持。是未

2017-10-31 09:52:22 223

原创层叠上下文和层叠顺序

引自：张鑫旭的博客本文地址：http://www.zhangxinxu.com/wordpress/?p=5115前言原文是在前面对transform引起的z-index“失效”探究过程中找到的，非常棒，所以转载分享。本文大多摘自原文，进行了压缩，也加入了我自己的理解，希望对大家有帮助。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生。

2017-10-31 09:52:20 771

原创 Transform 引起的 z-index "失效"

前言重新学习CSS后的第三天，学习制作阴影的过程中，发现的问题：设置了box-shadow后展现的阴影：添加transform:rotate(10deg);后的效果：查看CodePen例子：阴影效果一脸懵逼！再修改z-index完全没有效果。百度之后，找到了问题的答案，也自己摸索着找到了这个问题的解决办法。下面与大家分享。一、原因给元素设置transform属性会

2017-10-31 09:52:17 833

原创关于inline-block问题

前言在重新学习css，做自己的学习demo时，设置一堆div在一行显示，呈现对比。结果如图，设置了display:inline-block之后，出现了部分下沉现象。改为float之后，又恢复正常对齐。不过，很快就得到了解决。于是，就写了这篇关于inline-block问题的文章，包含了以前分享过的间距问题，在这里与大家分享。一、下沉问题原因1. 行内元素有一个基线，所有在这一

2017-10-31 09:52:11 476

原创 CSS渐变的简单使用

前言重拾css后的文章，在观看了慕课网上的视频《重拾CSS的乐趣》中，看到了一些有意思的css效果。想起当初自己初学CSS3时画的哆啦A梦，总结了一番css制作的各种图形。渐变效果是在实现弧边三角的时候学习的。分享一下CodePen中的代码效果：弧形demo三角形demo多重边框demo一、渐变简介渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这

2017-10-31 09:52:08 4364 1

原创 gulp 自动化构建工具

前言gulp简介gulp是一款常用的自动化构建工具，用于压缩、打包你的项目代码与文件。其他的类似的工具有grunt、webpack等。gulp的优点易于使用通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。构建快速利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。插件高质Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

2017-10-31 09:52:05 269

原创 Sublime Text 使用插件介绍

前言这是一款个人特别喜欢的编辑器，用来写前端代码。特别棒的是最新版本的文件栏中，中文不再出现乱码。本文主要是为自己做笔记以及备份的，介绍自己使用的sublime text插件。希望对大家也有所帮助。官网地址：Sublime Text插件官网：packageControl大神文章：详细插件介绍packageControl最新版本的sublimetext不再需要复制代码到控制台

2017-10-31 09:52:02 210

原创 hexo + next主题高级配置

前言配置完yilia后，发现缺少一些东西，百度之下，找到了特别喜欢的主题——next。跟大家分享配置经验。首先，本文是根据我自己的博客配置而写的，并不全面，其他美化配置在文末提供了相应的参考链接。欢迎浏览我的博客：destiny'Note其次，本文中有部分自己的改进方案，并非全部摘自他文我的博客原文链接：hexo + next主题高级配置一、主题下载git clone htt

2017-10-31 09:52:00 1987 1

原创 Hexo + yilia 主题 +githubpages博客添加友言评论功能

前言Hexo博客的Yilia主题中评论系统只提供了畅言、网易云跟帖、多说和Disqus。由于多说评论、网易云跟帖已经关闭系统，畅言需要域名备案，而github是国外的，没有备案，所以尝试了其他第三方评论系统——友言。友言使用极其简单，本地成功实现，但是上传上github后发现无法出现评论。在多次查找与尝试下，终于成功，下面与大家分享我的方法。欢迎关注我的博客：destiny'Note

2017-10-31 09:51:57 4018 1

原创 hexo+gitHubPages 快速搭建个人博客

前言本文仅仅是使用hexo以及gitHubPages 快速搭建个人博客，后续还会分享详细的内容官方中文文档：https://hexo.io/zh-cn/docs/index.html欢迎关注我的博客：destiny'Note本文引自：hexo+gitHubPages 快速搭建个人博客一、准备Node.js作用：node.js用来创建hexo博客框架Git客户端作用：把本地

2017-10-31 09:51:54 1048

原创 javascript 面向对象编程

引自：阮一峰的博客Javascript面向对象编程（一）：封装Javascript面向对象编程（二）：构造函数的继承Javascript面向对象编程（三）：非构造函数的继承JavaScript 对象封装一、构造函数 function Cat(name,color){ this.name = name; this.color = color;

2017-10-31 09:51:52 260

原创前端学习资源收集

前言本文是在现阶段自学过程用到过的优秀资源的总结，并与大家分享。希望可以对大家，尤其是像我一样的初学者有所帮助，少走弯路。主要包括：视频网站、文本网站、书籍、博客以及优化工具等等一、视频学习网站就自学而言，我感觉还是看视频教学来得轻松些，也容易理解。下面就介绍几个视频网站慕课网——程序员的梦工厂我个人极力推荐的一个学习网站，前端的启蒙网站，主要针对互联网的开发。课程有前端开发、

2017-10-31 09:51:49 262

原创去除inline-block元素间间距的N种方法

原文转自：张鑫旭-鑫空间-鑫生活本文地址：去除inline-block元素间间距的N种方法一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：间距就来了~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-

2017-10-31 09:51:46 201

原创 mardown学习总结

一、 markdown简介Markdown 是一种用来写作的轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）优点纯文本，所以兼容性极强，可以用所有文本编辑器打开它用简洁的语法代替排版，使我们专心于码字格式转换方便，Markdown 的文本你可以轻松转换为 html、PDF等Markdown 的标记语法有极好的可读性对于从事写作、文字编辑以及想写博客的人来说，非常有

2017-10-31 09:51:43 317

原创对文字和行高的理解

文字与行高对照上图 1. 文字大小是顶线与底线之间的距离 2. 行高大小是基线与基线之间的距离 3. 行高=文字大小+上下两个间距浏览器默认浏览器默认的文字大小为16px，其中chrome浏览器有最小文字限制，最小为12px 默认的行高大小为18px行高的单位技巧：文本的垂直居中当文本的父容器设置行高与高度一致、或者父容器不设置高度，只设置行高时，能够使父容

2017-10-31 09:51:40 995

空空如也

空空如也