前端基础进阶(九):函数与函数式编程
函数声明、函数表达式、匿名函数与自执行函数函数声明JavaScript中,有两种声明方式,一个是使用var/let/const的变量声明,另一个是使用function的函数声明。
在 前端基础进阶(三):变量对象详解 一文中有提到过,变量对象的创建过程中,函数声明比变量声明具有更为优先的执行顺序,即常常提到的函数声明提前。因此在执行上下文中,无论在什么位置声明了函数,都可以在同一个执行上下文中直接使用该函数。
fn(); // functionfunction fn() { console.log('function');}
函数表达式与函数声明不同,函数表达式使用了var/let/const进行声明,在确认它是否可以正确使用的时候就必须依照var/let/const的规则进行判断,即变量声明。使用var进行变量声明,其实是进行了两步操作。
// 变量声明var a = 20;// 实际执行顺序var a = undefined; // 变量声明,初始值undefined,变量提升,提升顺序次于function声明a = 20; // 变量赋值,该操作不会提升
同样的道 ...
前端基础进阶(十一):详解面向对象、构造函数、原型与原型链
对象的定义在ECMAScript-262中,对象被定义为“ 无序属性的集合,其属性可以包含基本值,对象或者函数 ”。
也就是说,在JavaScript中,对象无非就是由一些列无序的key-value对组成。其中value可以是基本值,对象或者函数。
// 这里的person就是一个对象var person = { name: 'Tom', age: 18, getName: function() {}, parent: {}}
创建对象可以通过new的方式创建一个对象。
var obj = new Object();
也可以通过对象字面量的形式创建一个简单的对象。
var obj = {};
想要给简单对象添加方法时,可以这样表示,
// 可以这样var person = {};person.name = "TOM";person.getName = function() { return this.name;}// 也可以这样var person = { name: "TOM", getName: function() { ...
添加Github徽标
github徽标
github徽标可以直接通过shields.io在线生成。
理论上可以放在页面的任何地方。教程案例是添加在页脚。
工具网站包括:
徽标生成网站:shields
图标查询网站:simpleicons
html压缩网站:htmlpack
转义字符查询
预览效果:
具体步骤
通过shields.io在线生成。
label:标签,徽标左侧内容
message:信息,徽标右侧内容
color:色值,支持支持十六进制、rgb、rgba、hsl、hsla和 css 命名颜色。十六进制记得删除前面的#号
输入相关信息后,点击make badge即可得到徽标的URL。可以用img标签引用,写法简单。不过正式写法建议用object标签引用,写法示例如下。<!-- label=Frame,Message=Hexo,color=blue -->https://img.shields.io/badge/Frame-Hexo-blue<!-- 在页面上可以使用img标签来引用 --><img src="https://img.shields.io/ba ...
基于 Hexo 从零开始搭建个人博客(五)
阅读本篇前,请先阅读前几篇文章:基于 Hexo 从零开始搭建个人博客(一)基于 Hexo 从零开始搭建个人博客(二)基于 Hexo 从零开始搭建个人博客(三)基于 Hexo 从零开始搭建个人博客(四)
前言
本站基于Hexo搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.2.2 。如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。
注意:我的博客根目录路径为 【G:/hexo-blog/blog-demo】,下文所说的根目录都是此路径,将用[BlogRoot]代替。如果不清楚根目录路径,请回到教程 基于 Hexo 从零开始搭建个人博客(二),查看你执行hexo init xxx这条命令时所选择的路径,例如我选择的路径是【G:/hexo-blog】,我的博客根目录即为【G:/hexo-blog/xxx】。修改站点配置文件_config.yml,路径为【BlogRoot/_config.yml】。修改主题配置文件_config.butterfly.yml ...
Web页面全链路性能优化指南
性能优化不单指优化一个页面的打开速度,在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化,大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中,能够让任何一个链路快一点,都可以被叫做性能优化。
本文会对web页面的全链路进行完整的讲解并针对每一步找到能做的性能优化点,本文的目标是极致的性能优化。
本文的大致流程为先讲理论知识,比如如何评价一个页面的性能好与不好、如果获取性能指标,如何使用各种性能相关工具,浏览器如何获取并渲染页面。
接下来我们会进入性能优化环节,在这个环节我会详细讲解在页面的整个流程中,哪些地方可以做哪些优化。
浏览器渲染原理我们需要知道浏览器是如何渲染一个页面的,我们才能知道如何对页面进行性能优化,所以这里我们对一些基础知识进行讲解。
进程与线程浏览器有多种进程,其中最主要的5种进程如下。
浏览器进程 负责界面展示、用户交互、子进程管理、提供存储等
渲染进程 每个页面都有一个单独的渲染进程,用于渲染页面,包含webworker线程
网络进程 主要处理网络资源加载(HTML、CSS、JS、IMAGE、AJAX等)
GPU ...
巧用 CSS3 filter(滤镜) 属性
效果预览这里仅展示黑白效果,更多效果移步实例。
filter: grayscale(100%);
定义和使用filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
默认值
none
继承
no
动画支持
是。详细可查阅 CSS 动画
版本
CSS3
浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 为指定浏览器的前缀。
属性
filter
18.0 -webkit-
不支持
35.0
6.0 -webkit-
15.0 -webkit-
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
CSS 语法filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | ...
基于 Hexo 从零开始搭建个人博客(六)
阅读本篇前,请先阅读前几篇文章:基于 Hexo 从零开始搭建个人博客(一)基于 Hexo 从零开始搭建个人博客(二)基于 Hexo 从零开始搭建个人博客(三)基于 Hexo 从零开始搭建个人博客(四)基于 Hexo 从零开始搭建个人博客(五)
前言
本站基于Hexo搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.2.2 。如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。
注意:我的博客根目录路径为 【G:/hexo-blog/blog-demo】,下文所说的根目录都是此路径,将用[BlogRoot]代替。如果不清楚根目录路径,请回到教程 基于 Hexo 从零开始搭建个人博客(二),查看你执行hexo init xxx这条命令时所选择的路径,例如我选择的路径是【G:/hexo-blog】,我的博客根目录即为【G:/hexo-blog/xxx】。修改站点配置文件_config.yml,路径为【BlogRoot/_config.yml】。修改主题配置文件 ...
Markdown语法支持的Emoji表情
前言Markdown 🏃 语法支持添加 emoji 表情喔 😋,快来试试吧 ~ 💓💓💓
通用代码 Unicode使用格式UnicodeMarkdown语法及效果预览&#x + unicode + ;
例如:😁
U+1F600
U+1F495
U+1F49E
U+1F4AF
U+1F645
U+1F647
U+1F9DC
U+1F69A
U+1F6A2
U+1F383
……
😀 😀
💕 💕
💞 💞
🙇 🙇
💯 💯
🙅 🙅
🧜 🧜
🚚 🚚
🚢 🚢
🎃 🎃
🤢 🤢
🥵 🥵
🥶 🥶
🤠 🤠
🥳 🥳
🥶 ᾒ ...