随笔分类 - 1.前端基础
摘要：SVG图形引用、裁切、蒙版，使用三个标签： 1. <use>标签创建图形引用 2. <clipPath>标签裁切图形 3. <mask>标签创建蒙版 <use>标签 <use>标签使用URI引用一个<g>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。复制的是原始的元素，因此
阅读全文
摘要：该部分为四个主要部分： 1. <text>和<tspan>标签详解 2. 文本水平垂直居中问题 3. <textpath>让文本在指定路径上排列 4. <a>插入超链接 <text>和<tspan>标签 <text>和<tspan>标签是定义文本的基本标签。 <text> 参数
阅读全文
摘要：课程分为四个方面： 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径，Path字符串是由命令及其参数组组成的字符串，是非常强大的绘图工具。 例如： 命令汇总 命令 含义 M/m (x,y) 移动当前位置 L/l (x,y)
阅读全文
摘要：颜色 RGB和HSL都是CSS3支持的颜色表示方法，一般普遍使用是RGB。PS：HSL浏览器兼容。 RGB RGB即是代表红、绿、蓝三个通道的颜色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。 表示方式 取值范围 优点 缺点 rgb(r, g,
阅读全文
摘要：SVG的画布、画布视区（viewBox）、浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域，理论上在所有维度上都是无限的。（也有人称为“SVG世界”，但我觉得叫画布比较合适） 画布视区（viewBox） 就是截取画布某一块矩形区域作为显示的区域。（有人也称为“视野”或“视区盒子”，但我觉得不够
阅读全文
摘要：这部分包括三个内容： 1. 基本图形 2. 基本属性 3. 基础操作API 基本图形 名称 描述 参数 图示 rect 定义一个矩形 x="矩形的左上角的x轴" y="矩形的左上角的y轴" rx="x轴的半径（round元素）" ry="y轴的半径（round元素）" width="矩形的宽度"。必
阅读全文
摘要：最近遇到SVG这个名词，于是查阅资料，做个笔记。 前言 图片的数字化。将图片存储为数据有两种方案。 位图。也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是RGB
阅读全文
摘要：这几天在兴趣下翻看了钉钉（工作协同）应用的前端源码，分析其目录结构、构建工具及框架使用等，进行前端技术研究，分享我的总结成果。 PS：不知道这应用的没关系，因为总结出来是前端通用的东西。 PS：其应用样子。 前言 我研究的是PC桌面版的钉钉应用，应用是由“chrome内核容器+ web页面”构成的，
阅读全文
摘要：meta标签作用 META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。 PS：便于搜索引擎机器人查找、分类，互联网应用应该要注意。 大网站都是怎么写？ 在了解这个标签之前，我查找了各个
阅读全文
摘要：上周末（2016/07/31）去了一个技术沙龙学习前端相关的东西，下面是各个主题我印象比较深的。 React + Redux 最佳实践 主题：本次分享，主要从React/Redux相关概念及其工具链，Webpack构建流程，如何Mock数据，如何测试以及一些开发小经验等方面，分享介绍如何使用Reac
阅读全文
摘要：JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出： 1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？ 2. 捕获型和冒泡型同时设置，谁生效？ 3. 冒泡能够阻止，那捕获能够阻止吗？ 4. jquery的on或bind是冒泡，还是捕获？ 5.
阅读全文
摘要：在进行实验和资料查询时，我遇到了几个关键问题： 1. window.onload到底是什么加载完触发？ 2. body为什么会有onload事件？ 3. 为什么是window.onload，而不是document.onload？ 4. document ready到底是什么ready，DOM渲染完成
阅读全文
摘要：1. 内容横向滚动的代码 2. 避免浏览器自动压缩空格问题。 有时在显示内容，文本中有多个空格相连，但是浏览器会自动压缩空格，这样就让多个空格看起来像一个空格。 方法1： 替换空格字符为 ，但是这种方法在英文文本的断词上会出问题，会无法很好的断词换行，所以并不是很好。 方法2： 既然浏览器
阅读全文
摘要：网上有一些js获取隐藏元素宽高的方法，但是可能会存在某些情况获取不了。 例如： test获取得了，但是test2_child是获取不到的。鉴于这种情况，于是自己写了一个方法解决。 解决思路： 1. 获取元素（拿宽高那个）所有隐藏的祖先元素直到body元素，包括自己。 2. 获取所有隐藏元素的styl
阅读全文
摘要：使用RequireJS做异步模块加载，有几点值得注意的地方： 1.模块定义两种写法 1. 存在依赖的函数式定义 如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。依赖关系会以参数
阅读全文
摘要：前言 每个函数都有自己的执行环境。当某个函数被调用时，会创建一个执行环境（execution context）及相应的作用域链，并把作用域链赋值给一个特殊的内部属性（即[[Scope]]）。然后使用this、arguments和函数参数、内部变量、内部函数引用来初始化函数的活动对象（activati
阅读全文
摘要：“计算机科学只存在两个难题：缓存失效和命名。” ——Phil KarIton 前言 命名一直是我编程过程中很头痛的事，有时为了一个恰当的名称是想了又想，还忍不住Google一下。命名真是一门艺术，好的命名那叫一个高大上。今天总结一些前端命名的规范，梳理一份自己的命名想法，从以下4种代码风格的命名规范
阅读全文
摘要：利用浏览器缓存，可以使得页面加载速度提高，也减轻服务端压力。有几个比较重要点如下： 1. 浏览器是如何判断缓存是否过期？ 2. 服务端如何判断缓存已失效？ 3. 为什么有了Last-Modified还要Etag？ 4. 200 OK( from cache )和 304 Not Modified的区
阅读全文
摘要：前言 以一个煮饭的例子开始，例如有三件事，A是买菜、B是买肉、C是洗米，最终的结果是为了煮一餐饭。为了最后一餐饭，可以三件事一起做，也可以轮流做，也可能C需要最后做（等A、B做完），这三件事是相关的，抽象起来有三种场景。 顺序做 先买菜，再买肉，最后洗米， 即 A->B->C。 并发做 买菜，买肉，
阅读全文
摘要：今天我总结了什么是HTTP三次握手，还有HTTPS握手的过程以及为什么HTTPS是安全的。 前提 在讲述这两个握手时候，有一些东西需要提前说明。 HTTP与TCP/IP区别？ TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。WEB使用HTTP
阅读全文