当前分类 / Web前端 / 总共36篇

Google Fonts 国内使用方案

2020-08-31 · 大约 100 个字 · 预计 1 分钟读完

概述

当前 WordPress 等许多开源网站大部分的主题都在使用 Google 的在线字体方案 —— Google Fonts，Google 服务在大陆的崩溃情况使得大量的独立网站字体无法加载，大大影响到了国内相关网站的网页响应速度，现将解决方案总结如下：

Google Fonts 国内使用方案概览图

解决方案一：本地加载字体包（推荐）

在 CSS 中找到被导入的 Google Fonts

1
2
#此处以该字体为例#
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,800|Lora:400italic|Playfair+Display:700);

ECMAScript 6 入门学习笔记

2020-01-20 · 大约 1100 个字 · 预计 5 分钟读完

JavaScript · Web · Web前端

ES6 · ECMAScript · let · const · Symbol · Promise · Proxy

本文是基于阮一峰的《ECMAScript 6 入门》做的个人学习笔记，方便今后查阅，所以以下内容基本上绝大部分出自阮一峰的博客。

笔记1：数据类型和语法块

简单说，ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。

let 命令

ES6 新增了 let 命令，用了声明变量，使用它声明的变量只在所在的代码块中有效。

1
2
3
4
5
6
7
{
    let a = 10;
    var b = 11;
}

console.log(a);  //Error  is not defined
console.log(b);  // 11

for 循环的计数器就很合适使用 let 命令。

1
2
3
4
for(let i = 0; i < 10; i++){
    //...
}
console.log(i);  //Error

而且 let 不存在变量提升（变量可以在声明之前使用），也就是说我们一般需要先使用 let 来声明变量才能使用。

1
2
3
4
5
6
7
//var
console.log(foo);  //undefined
var foo = 2;

//let
console.log(bar);  //Error bar is not defined
let bar = 3;

JavaScript 高级程序设计（第3版）学习笔记

2020-01-14 · 大约 1500 个字 · 预计 7 分钟读完

JavaScript · Web · Web前端

JavaScript · 面向对象 · 继承 · 原型模式 · 构造函数模式 · 组合继承

笔记2：面向对象部分

这是阅读《JavaScript 高级程序设计》书籍的学习笔记，整理和归纳，方便自己今后复习和查阅，这里总结的基本上都是一些比较特殊的知识点，和 Java 等其他高级语言重复的地方不在归纳范围内。建议先阅读第一部分非面向对象部分。此部分主要是理解 JavaScript 中的面向对象的实现思路以及如何实现继承。

理解对象

ECMAScript 中有两种属性：数据属性和访问器属性。

数据属性

数据属性有 4 个描述其行为的特征。

[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true.

[[Enumerable]]：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true.

[[Writable]]：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true.

[[Value]]：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined.

1
2
3
var person = {
    name : "XiaoMing"
}

JavaScript 高级程序设计（第3版）学习笔记

2020-01-14 · 大约 1200 个字 · 预计 6 分钟读完

JavaScript · Web · Web前端

JavaScript · 变量 · 数据类型 · 函数 · 类型转换 · with语句 · 字面量对象 · 数组 · 内置对象

笔记1：非面向对象部分

这是阅读 《JavaScript 高级程序设计》 书籍的学习笔记，整理和归纳，方便自己今后复习和查阅，这里总结的基本上都是一些比较特殊的知识点，和 Java 等其他 高级语言 重复的地方不在归纳范围内。第一部分是基础部分（即非面向对象部分），基本上是围绕变量和函数展开的。

分号

ECMAScript 中的语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾，如下例所示：

1
2
var sum = a + b                 // 即使没有分号也是有效的语句——不推荐 
var diff = a - b;               // 有效的语句——推荐

推荐使用封号

变量

ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用 var 操作符（注意var是一个关键字），后跟变量名（即一个标识符），如下所示：

1
var message;

此时变量 message 会保存一个特殊的值 undefined，定义变量的时候可以赋予初始值：

1
2
var message = "hi";
message = 100;   //有效，不推荐

虽然支持松散类型，但是不推荐给变量设置不同类型的值

webpack 安装和使用

2020-01-09 · 大约 700 个字 · 预计 4 分钟读完

Web · Web前端

webpack · node · npm · 前端 · JavaScript · module · dist

webpack 是什么

webpack 是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含 less / sass）、图片等都作为模块来使用和处理。 webpack 的核心是依赖分析,把依赖分析出来了，其他都是细枝末节了。

安装 webpack

前提，你的电脑需要安装 node 和 npm.

使用 npm install webpack 安装 webpack.

入门示例

我们创建两个 js 文件：

src/bar.js

1
2
3
export default function bar() {
  //
}

src/index.js

1
2
3
import bar from './bar';

bar();

阿里开源游戏引擎 Hilo

2019-08-02 · 大约 1800 个字 · 预计 9 分钟读完

Web前端 · 框架

Web前端 · 框架 · Hilo · 游戏 · Canvas · WebGL

HelloWorld

Hilo 的库是模块化的，下载地址：https://github.com/hiloteam/Hilo/tree/dev/build

Hilo 除了提供一个独立无依赖的版本（Standalone）外，还提供AMD、CommonJS、CMD、CommonJS等多种模块范式的版本。开发者可以根据自己的习惯，下载Hilo的不同范式版本使用。

1
2
3
4
5
6
7
hilo/
└── build/
    ├── standalone/     #Standalone独立版本
    ├── amd/            #RequireJS(AMD) 版本
    ├── commonjs/       #CommonJS 版本
    ├── kissy/          #SeaJS(CMD) 版本
    └── cmd/            #Kissy 版本

我们暂不考虑其他范式版本，引入 hilo-standalone 独立版本。

1
<script type="text/javascript" src="hilo-standalone.js"></script>

最基础的 Hilo 必须包含舞台（Stage），定时器（Ticker），可是对象（View）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body onload="init();">
    <div id="game-container"></div>
    <script type="text/javascript">
        function init(){
            //初始化舞台
            var stage = new Hilo.Stage({
                renderType: 'canvas',
                container: 'game-container',
                width: 320,
                height: 480
            });

            //启动舞台定时器
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            //创建一个图片对象
            var bmp = new Hilo.Bitmap({
                image: 'fish.png',
                rect: [0, 0, 174, 126],
                x: 75,
                y: 50
            }).addTo(stage);
        }
    </script>
</body>

上面我们将一个长图（包含很多精灵的动作）显示第一帧，然后将舞台绑定到 game-container 中，实际上在里面创建了一个 canvas 对象。

HTML5 Canvas 技术探究

2019-08-02 · 大约 1300 个字 · 预计 7 分钟读完

Web前端 · Canvas

Web前端 · HTML5 · Canvas

概述

在前一篇《Canvas 基础图形3D框架 Zdog》中我们已经尝试了使用 Canvas 框架 Zdog 实现有趣的 3D 图形，而本篇我们来探究一下 Canvas 的使用和原理，还是先从这两个矩形开始吧。

Canvas绘制两个矩形

1
2
3
4
5
6
7
8
9
<canvas id="testcanvas" width="500" height="500"></canvas>
<script>
    var c = document.getElementById('testcanvas');
    var p = c.getContext("2d");
    p.fillStyle = "#FF0000";
    p.fillRect(0, 0, 300, 300);
    p.fillStyle = "rgba(0,0,255,0.5)";
    p.fillRect(200,200,500,500);
</script>

Canvas 基础图形3D框架 Zdog

2019-07-30 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · 框架

Web前端 · 框架 · Zdog · 3D · 图形图像 · Canvas

框架介绍

Zdog 是一个开源的基于 Canvas 和 SVG 的 3D 图形渲染引擎，官网地址：https://zzz.dog/

Zdog引擎示例

Canvas基础

Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

1
<canvas id="testcanvas" width="500" height="500" style="border:1px solid red"></canvas>

例如在上面的 200x200 画布内绘制两个矩形：

1
2
3
4
5
6
7
var c = document.getElementById('testcanvas');
var p = c.getContext("2d");

p.fillStyle="#FF0000";
p.fillRect(0, 0, 300, 300);
p.fillStyle="rgba(0,0,255,0.5)";
p.fillRect(200,200,500,500);

使用Canvas绘制两个矩形

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

CSS 背景混合模式

2019-07-30 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · 背景混合 · 混合模式

混合模式

现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式，喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解，我们先来普及一下什么是图像的混合模式。

要理解混合模式需要理解，图层、通道、RGB模式原理。

图层比较好理解，就是我们的图像通过一层一层的叠加，最终形成我们所看到的图像，换句话说就是拆解图像到不同图层进行编辑。通道一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。

颜色通道

上面显示的是 RGB 通道，每个通道的像素都代表这种种颜色从 0~255 之间的一个值，三个通道叠加就会形成这个图像，而 alpha 通道是一个虚拟通道，比如我们可以创建一个选区来生成一个 alpha 通道。

alpha 通道

RGB模式 RGB是光色三原色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

目前的显示器大都是采用了 RGB 颜色标准，在显示器上，是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的，目前的电脑一般都能显示32位颜色，有一千万种以上的颜色。如下图所示，假设三个灯都不开就是 0x000000 (黑色)，只开红灯就是 0xff0000 (红色），三个灯都开就是 0xffffff (白色)， rgb 三个值为等值的时候如 0x666666 是灰值（没有色相），RGB 模式称之为加色模式（相加成白色）。

RGB模式叠加示意图

CSS 中的混合模式是通过 background-blend-mode 和 mix-blend-mode 实现的。

CSS 滤镜

2019-07-29 · 大约 200 个字 · 预计 1 分钟读完

Web前端 · CSS

Web前端 · CSS · 滤镜 · blur · 高斯模糊 · 亮度 · 对比度 · 灰度 · 饱和度 · 色调

CSS 滤镜是功能强大的新工具，它使浏览器能实现一些图像后期处理软件的功能。滤镜属性使浏览器可以实现像模糊、图像调整，甚至下拉阴影之类的效果。

滤镜的语法很简单：滤镜类型后面跟上滤镜 filter 属性，如模糊 blur，括号内加上它的值。

1
2
3
.filter {
    filter : blur(3px); 
}

高斯模糊 blur

CSS 多背景和渐变

2019-07-29 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · 背景 · 渐变 · background · linear · radial · gradient

设置多个背景

1
2
3
<body>
    <section></section>
</body>

1
2
3
4
5
section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景（用逗号隔开），默认第一个背景图片在最上面（image2.gif），类似的我们可以添加多个背景。

边框

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素，这样在我们设置 100% 的窗口的时候就计算起来特别麻烦，后来引入了一个 border-box 来解决这个问题。

1
2
3
4
5
6
section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}

1
2
3
4
5
6
7
section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}

CSS flexbox弹性布局

2019-07-26 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · flex · flexbox

初识flex

之前我们写布局都是基于浏览器的盒模型，通过浮动的方式来排列界面的，这种方式有很多浏览器的 bug 和困扰我们的问题，而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。

flexbox 是基于两个坐标轴来实现的，类似于 Android 中的线性布局 LinearLayout，如果我们要使一个容器成为 flexbox 就需要设置 display: flex;。

flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下：

基本使用

我们先来定义一个 flexbox 容器, 在里面放几个 flexitem：

1
2
3
4
5
6
7
<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

.flexitem{
    background:brown;
    color:white;
}