JosephGao
JosephGao
《精通 CSS》往期陪读章节： - [第 1 章 基础知识](https://mp.weixin.qq.com/s/ELMTBs3kK8SyiCzluQdxZQ) - [第 2 章 添加样式](https://mp.weixin.qq.com/s/p8yLu5cXjuinYNkWT-m18g) - [第 3 章 可见格式化模型](https://mp.weixin.qq.com/s/_PgRcQHLPcHz9TV7yf_Ttg) --- 或许大家会觉得排版都是设计师的工作，前端开发按照已经排版好的设计稿复原就行。当然，这样理解也没有太大问题，但是过于依赖于设计师往往会限制我们的脚步。作为前端开发，对于排版我们要有自己的认知，而且更好地理解 CSS 中关于网页排版的技术，我们也能更得心应手地还原设计稿。 本章原书用了近 40 页的篇幅来介绍排版，歪马会尽量精简地将其中的核心内容传达给大家。 同原书，借助维基百科中一篇关于月亮的文档来给大家介绍排版。分别包括以下几部分内容： 1. 基础排版：包括文本颜色、字体相关、间距、对齐、折行连字符等 2. 文本特效 3....
本书《精通CSS》之前的章节： * [第1章 基础知识](https://mp.weixin.qq.com/s/ELMTBs3kK8SyiCzluQdxZQ) * [第2章 添加样式](https://mp.weixin.qq.com/s/p8yLu5cXjuinYNkWT-m18g) --- 第3章仍是本书的基础章节。本章将会给大家介绍盒模型相关的概念、几种常见的可见格式化模型（包括定位、浮动、格式化上下文）以及新型布局模块，其中较新的布局方式将在后续章节详细介绍。 > 本章文中示例代码托管在[CodeSandbox](https://codesandbox.io/embed/jingtongcss-l8tye?fontsize=14&hidenavigation=1&theme=dark) ## 3.1 盒模型 盒模型是CSS的核心概念，描述了元素如何显示以及(在一定程度上)如何相互作用、相互影响。 页面中所有的元素都被看作一个矩形盒子，这个盒子包含元素的**内容、内边距、边框和外边距**。 如下图所示：  *内容区*是元素内包含的内容所在区域。 *内边距*(padding)是内容区周围的空间，给元素应用的背景会作用于元素的内容、内边距和边框（默认值到边框，但实线边框看不出来，虚线可看出，可以通过`background-clip`属性修改这一行为）。 *边框*(border)会在内边距外侧增加一条线框，可以是**实线、虚线或点划线**。 *外边框*(margin)在边框的外侧，是围绕在盒子可见部分之外的透明区域，用于控制元素之间的距离。 此外，还有一个与边框类似的属性，即*轮廓线*(outline)，这个属性会在边框盒子外围画出一条线，但这个线**不会影响盒子的布局，即不会影响盒子的宽高**。 如下，我们在模拟的边框上加一个虚线的轮廓，其只是在外围包括了一层轮廓，并不影响布局。  最后，内边距、边框和外边距都不是必需的，因此它们的默认值都是0。不过，浏览器默认的样式往往会给很多元素添加外边距和内边距，但不同浏览器添加的样式并不统一。这时可以用我们第二章提到的样式重置，推荐大家使用Eric Meyer的[CSS Reset](https://meyerweb.com/eric/tools/css/reset/)和[Nicolas Gallagher的Normalize.css](http://nicolasgallagher.com/about-normalize-css/)。 ###...
本书《精通CSS》之前的章节： * [第1章 基础知识](https://mp.weixin.qq.com/s/ELMTBs3kK8SyiCzluQdxZQ) --- 有效且结构良好的文档是添加样式的基础。上一章，我们一起学习了相关的知识。现在是时候学习一下如何添加样式了。 本章笔者在读完之后，根据原文的解构做了一些调整，主要包括选择器及其详解、层叠与特异性及继承、以及如何应用样式，最后延伸了一下性能的知识。希望你看完之后能够有收获。 ## 2.1 CSS选择器 首先，为了让大家对于选择器有一个总的概念。我将CSS选择器分为：独立选择器和组合选择器。 独立选择器是指有着明确定义的独立的选择器。组合选择器是独立选择器的各种组合。 独立选择器： |选择器|格式|描述| |---|---|---| | 类型(标签)选择器 | `` | 这种基本选择器会选择所有匹配给定元素名的元素。如`input` 将会选择所有的 `` 元素。 | | 类选择器 | `.classname` |...
> 你多久没有读完一本技术书了？ > 你是否列了长长的待读书单，却迟迟没有行动？ > 你是否每逢购物节，就血拼了一堆回来？ > 又或者你觉得一个人读书太过枯燥？ > 如果你是，那从现在跟歪马一起，歪马陪你一起云读书。 > 歪马会选一本技术类书籍，每2~5天学习并总结一个章节供大家一起围观，欢迎大家监督共进，后期大家可以推荐选材，内容局限于前端周边🤓。 ## 写在开始 > *引自图书原文* > 人类天生好奇，喜欢摆弄东西。那天在办公室收到了新的遥控四轴飞行棋Parrot AR Drone，我们都没有看说明书，就开始动手组装起来。我们喜欢自己琢磨，喜欢按照自己认为的事物运作方式来思考和解决问题。零件只要能拼上就行，除非拼不上了，或者事实跟我们的想法相背离，才不得已去翻翻安装指南。 通过动手练习来学习一项新的技术是很好的方式，但是如果对整体的概念没有一个清晰的了解就很容易犯错或者给自己挖坑。 很多人对于CSS的学习就是这样，通过很多生动有趣的例子学习了CSS的知识，却没有系统地去了解过。这一点笔者在招聘面试的过程中就深有感触，很多同学都表示掌握CSS，但是在对一些基本概念进行发问的时候，往往答得并不理想，甚至可以说有点差。给出的理由多是会用但是没有系统地学习过，或者之前看过忘记了，又或者很久没有用了。 诚然，在框架盛行的今天，我们不用学CSS也能够写出还算“过的去”的页面。但是作为前端开发，这不是我们不学CSS的理由，我们不仅要学，还要系统一些地学。只有系统地学习CSS，你才会规避一些奇奇怪怪的问题，才会在逐渐的深入中明白CSS的魅力所在。 **《精通CSS - 高级Web标准解决方案（第3版）》**一书就会很系统地给大家**介绍了CSS并且会有很多实用的实践，会带领大家领略CSS的美丽，帮助大家更有效地使用CSS**。 ...
内容摘要： 1. 什么是混杂模式、近标准模式和标准模式 2. 如何查看页面的渲染模式 3. 文档类型的种类 4. 标准类型下的怪异行为（很有意思哟） --- 在开始学习前端之前，你总会需要创建一个HTML。在HTML标签之前，还有一个你可能不会注意到的``标记。虽然它不显眼，但我们需要知道它为什么存在。 HTML文件中，**``是必须的，需要放到整个文档的顶部，格式为``**。它存在的意义在于**阻止浏览器在渲染文档时进入混杂模式(Quirks Mode)**。也就是说``这一文档类型可以确保浏览器**尽可能地**使用遵循规范的模式来渲染，而不是使用某些不符合规范的渲染模式。 ## 一、混杂模式和标准模式 很久很久以前，web页面主要运行在两类浏览器：网景的Navigator和微软的IE。后来W3C制定了web规范之后，为了保证现有页面可用，各大浏览器不能立马使用新规范。 于是，浏览器厂商们引入了两种模式来区别对待符合新标准的站点和旧的遗留站点：混杂模式（Quirks Mode）和标准模式（Standards Mode）。在过渡阶段还存在一种接近标准模式（Almost Standards Mode）。 * **混杂模式**，也成为**怪异模式**，会兼容Navigator 4和IE 5的非标准行为。 * **近标准模式**会兼容少数的混杂行为，可以理解为过渡模式。 * **标准模式**只兼容符合标准描述的行为。 请确保把...
 > 本文作者：[高峰](http://verymuch.site/)，360奇舞团前端工程师，W3C性能工作组成员，同时参与WOT工作组的学习。 ## 一、引言 W3C的标准很多，你看或不看，它都在那，有增无减。既然如此，那我们为什么要读标准呢？笔者认为可能有以下4点原因： 1. 有一颗贡献标准的心，想要通过自己的努力为标准作出贡献； 2. 对知识内容有执着的追求，想通过标准来彻底了解某些知识点； 3. 熟悉标准已经成为我们应聘时的加分项甚至是基本项，我们不得不学； 4. 当然，我们还可以通过学习W3C标准来提升英语阅读能力以及写作缜密性。 或许你阅读标准的理由不是上面之一，但我们总归是要开始读标准了，不是吗？开始之前，我们准确地了解下W3C是什么。 **万维网联盟（World Wide Web Consortium，以下简称W3C）**创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。它的使命是开发促进万维网发展、确保万维网互操作性的通用协议，从而尽展万维网的全部潜能。 W3C一共有**36个工作组**（截止至2018年8月21日，本文书写时间），已经制定了**200多个标准**。如此多的工作组是如何**有序而又保证质量地**完成如此多的标准制定的呢？正所谓没有规矩不成方圆，如此庞大的工作必然需要一个准则，所以W3C制定了[流程文档](https://www.w3.org/2018/Process-20180201/#tag-participation)1。**该文档描述了W3C的组织结构以及为完成W3C自身使命而履行的职责和职能相关的流程。** 流程文档的主要受众是标准制定相关成员，但是其中也有一部分内容有助于作为读者的我们理清阅读的思路，笔者即将这一部分提取出来，以供大家阅读。 那么，我们先从简单了解Web技术标准化的过程概览开始吧。 ## 二、Web技术标准化过程概览 通常情况下，W3C标准的标准化过程包括以下几步： 1. 首先，有人开始对某个特定的话题产生兴趣。 2. 当这个特定话题的关注度越来越高时，W3C主任会宣布为一个或多个兴趣组以及工作组开发提案章程。W3C成员审查提案章程。 3....
 歪马是一名IT男，30岁，单身，之前每年的情人节、七夕节、圣诞节...可以说是没少被“撒狗粮”。这不，歪马今年决定要改变这一现状。而故事就是从这里开始的。 为了避免跑题，笔者表示要强势切入，下面我们先简单介绍下物联网和万维物联网。 ## 一、物联网和万维物联网 在最近几年里，物联网（Internet of Things，简称IoT）已经成为了在技术和商业上最有前途、最激动人心的发展领域之一。相信大家对于物联网已经或多或少有些了解。大家也一定使用过类似的产品，如可以远程实时查看录像、同步进行语音通话的360智能摄像机；可以远程控制家用电器开关的智能插座；可以智能检测心率和睡眠的智能手表以及其他一系列智能产品。 **物联网**是一个物理对象系统，其中的电子设备通过各种各样的网络接口进行通信，从而可以被发现、监控、控制交互，最终可以连接到更大的网络。上面所提到的几种产品即可以认为是其中的电子设备。 **万维物联网**（Web of Things，简称WoT）是物联网的一种实现方式，它主要致力于建立一种通用的语言，从而让不同厂商的智能产品具有彼此实现互相操作的可能。 Web比较适合用来建立这样一种通用的语言，它具备以下4个优点： 1. 更容易编程：万维网协议可以很容易地用来读写设备数据，而且特别简单易用，比复杂的物联网协议学起来更快。 2. 更加开放和可扩展：万维网标准如此流行的原因即因为它们是完全开放和免费的。使用它们能够确保数据可以被快速、方便地跨系统转移，可扩展性更高。 3. 能够快速简单部署、维护与集成。 4. 安全和隐私机制使用的更加广泛。 好了，关于物联网和万维物联网的基本介绍就到这里了，本文将主要以一种生动有趣的方式着重介绍下WoT的6种连接场景。 ## 二、WoT的连接场景 故事继续，为了改变每年都被别人“撒狗粮”情况，歪马决定改变现状。歪马从小比较喜欢小动物，尤其是聪明温顺的狗狗，这回歪马决定养一只狗狗陪伴自己。这样每次被“撒狗粮”时，可以真真切切的撒回去（不管你觉不觉得这逻辑可爱，笔者觉得挺可爱的）。 歪马养了一只短腿小柯基，并为其起名为大屁，因为柯基一扭一扭的屁股甚是可爱。下面我将带着歪马和大屁一起先介绍下WoT的第一种连接场景。 ### 2.1 场景1：通过Web服务进行设备的控制 第一个要说的连接场景是通过Web服务进行设备的控制。...
> 前言：本文将引入两个 Vue 中比较特殊的使用场景，带领大家熟悉一下`null`和`undefined`的区别，然后再分析一下 Vue 中是怎么对 Props 做校验的，最后给出大佬是怎么解释的。 一直以来，笔者在使用 Vue 时，习惯于在需要表示 prop 属性未定义时，使用`undefined`，而不是`null`。因为“_`undefined`才是没有值，`null`是有值，但是值为空的对象（注意不是空对象`{}`）_”。 基于这一习惯，笔者规避掉了很多问题，对此也没有深究。 直到最近，参与项目的一些同学习惯于指定`null`为初始值，我也没有强制性统一。根本原因是，我自己也觉得没什么，每个人都有自己的习惯，只要大的风格不出偏差就可以接受，毕竟项目紧嘛。 直到今天遇到了下面的场景，我才发现，原来这么做会有一些奇怪的小问题。 ## 一、场景再现 ### 1.1 场景一：prop 的值是`null`，会使用 default 的值吗？ 阅读以下代码，你觉得有问题吗？ HTML： ```html ``` JS： ```js...
> 歪式絮叨：原本打算只用一篇文章总结下防抖和节流的，但是写着写着发现挺有意思的。所以准备会分成3-4篇来写了，单独的防抖和节流的实现，然后在去分享一下知名库的源码。今天先跟歪马一起看看防抖的实现吧。其他内容敬请期待~！ --- > **歪老师**：“马同学，防抖和节流你知道吗？起来说一下。” > > **马同学**：“老师，我不知道呀，都没听说过。” > > **歪老师**：“好吧，那今天我们就先来讲讲**防抖**吧。先从基本的概念以及使用场景说起”。 ## 一、概念 防抖 `debounce` 和节流 `throttle` 的概念并不是JS所特有的。它们是在对函数持续调用时进行不同控制的两个概念。今天我们先介绍防抖。 **防抖**是为了避免用户无意间执行函数多次。比如有些用户喜欢在点击的时候使用double click双击，或者就是手抖连续点了两下，这就可能会导致一些意想不到的问题。 通过防抖可以**在事件触发一定时间后没有再次触发同一事件时**，再去执行相关的处理函数。 就好比你去菜市场买菜，到某个小摊上开始挑菜，接连挑好一袋又一袋放在摊主面前，摊主并不会每一袋都给你结账，而是会等着问你：“还要别的吗？”，等你确认完不要了，才会结账。 你可以通过歪马写的这个demo查看常规无限制函数调用和防抖(节流)之后的[可视化对比]([https://nyqe9.csb.app](https://nyqe9.csb.app/) )，完整demo地址如下： [https://codesandbox.io/s/yibubupiannigaodonghanshufangdouhejieliu-nyqe9?file=/index.html](https://codesandbox.io/s/yibubupiannigaodonghanshufangdouhejieliu-nyqe9?file=/index.html)。 ## 二、作用&应用场景 在具体实现之前，我们先简单了解一下防抖和节流的作用以及在哪些业务中会用到。 防抖和节流(这里先包含它吧)主要能够给我们带来以下好处： 1....
## 一、引言 在实现3D地球时，球面是通过地理贴图渲染的。所以我们所说的地理坐标和三维空间坐标的转换，是指将地理贴图上的坐标，转换为[球面坐标](https://en.wikipedia.org/wiki/Spherical_coordinate_system)，即three.js中的三维坐标。 在介绍他们之间如何转换之前，我们先来了解下这两种坐标。 ## 二、地理坐标（贴图坐标） 一个完整的[地理贴图坐标](https://zh.wikipedia.org/wiki/%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB)如下，其中第一张为简图，能够帮我们快速理解经纬度与地理坐标，第二张为详细经纬度分布图。   可以看出贴图横向表示经度，范围**[-180(西经),180(东经)]**，竖向表示纬度**[-90(南纬), 90(北纬)]**，因此坐标转化就成了经纬度到球面坐标的转化。 ## 三、球面坐标 在three.js中，创建球体时有以下几个重要参数： * 半径(radius)以及分段数 * 水平方向起始角度(phiStart) * 水平方向角度大小(phiLength) * 垂直方向起始角(thetaStart) * 垂直方向角度大小(thetaLength) 其中phiStart的默认值0，起始点为x轴负方向。thetaStart的默认值也为0，起始点为z轴正方向。如下图所示：  如上图，其中phi的值为0-Math.PI\*2，对应的经度范围为-180到180，所以与经度对应的phi应为**180+lng**（lng为经度longitude）。theta的值为0-Math.PI，对应的纬度为90到-90，所以与纬度对应的theta值应为**90-lat**（lat为纬度latitude）。 ## 四、坐标转换 ###...