分类: 前端
字符编码
字符编码讲解文章：
前端历史课：那些来自洪荒时代的编码知识
JavaScript 有个 Unicode 的天坑
ASCII
编码
缩写
说明
编码
字符
编码
字符
编码
字符
0
NUL(null)
空字符
33[……]
前端图片懒加载
https://mp.weixin.qq.com/s/JYglEGYN9tnGpDg7ARPx7w
http://gitlab.66xue.com/xdf-fe/LoadOnDemand[……]
前端坑汇总（浏览器Bug）
1 Safari里面如果声明一个没有赋值的全局变量，浏览器会自动在DOM中找id为这个变量名的元素赋值给变量。
<div id="test"></div>
<script>
var test;
console.log(test); // [object[......]前端扩展插件
模拟数据
Easy Mock
野狗
JavaScript 交互
waypoints 滚动到某元素触发某事件
JavaScript UI工具
autosize 自动调整textarea输入框大小
clipboardjs 剪切板
jQuery custom content scroller 滚[……]
IE下载保存base64文件
如果一个超链接的链接地址是一个base64的代码，如下：
<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYW[......]网页使用html5录音
实现原理
通过 HTML5 的 getUserMedia 接口，可以让页面在浏览器当中访问客户端的硬件设备（摄像头和麦克风）。然后配合 Web Audio API 使用 <audio> 标签来存储录音。
具体解释：https://www.html5rocks.com/zh/tut[……]
Discuz论坛不能批量上传图片
1.任何网站实现批量上传都需要借助flash或者sliverlight（微软的，几乎歇菜了），Discuz的批量上传是借助flash的。
2.因为flash如此强大，可能获取到用户的客户端信息，所以现代浏览器（尤其是谷歌浏览器）目前都是默认不自动执行flash的。
以上就是原因。解决方案[……]
前端跨域方法总结
什么是 AJAX 跨域
端口不同，域名（包括子域，层级）不同，协议不同。
前端跨域
- 超链接、重定向、表单提交
- 资源引入<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font[……]
Flex布局
2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
浏览器支持：IE10 F22 C21 O12.1 S6.1
教程参考：
– Flex 布局教程：语法篇 – 阮一峰
-[……]
JavaScript匿名函数的写法
// 最常用的两种写法
(function(){ /* code */ }()); // 老道推荐写法
(function(){ /* code */ })(); // 当然这种也可以
// 括号和JS的一些操作符（如 = && || , 等）可以在函数表达式和函数声明上消除歧义[......]stopPropagation()，preventDefault()和return false
阅读本文之前你最好了解JavaScript在浏览器中 事件冒泡 和 事件捕获 两个概念。
因为HTML结构中存在着父、子节点的事件冒泡，以及浏览器默认动作，所以我们使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagat[……]
CSS3的一些新奇属性和用法
1 clip
2 渐变 IE10+
background:linear-gradient(45deg,#fff,#fff);
radial-gradient
3 混合模式 mix-blend-mode/background-blend-mode[……]
前端技能图谱
前端基础
├ HTML
│ ├ 标准、语义化
│ ├ iframe、form(表单)
│ ├ Media(媒体)
│ │ ├ WebRTC
│ │ └ AudioContext
│ ├ [history & hash](https:/[......]JavaScript 几个需要注意的知识点
1 for in
for in 循环可以取得对象所有可枚举的属性，包括继承的属性。
Object.keys() 不能取得继承的属性，而 Object.getOwnPropertyNames() 可以替代 for in。
2 使用 new 操作符创建对象，如果构造函数内部有 return 语[……]
JavaScript操作Checkbox，以及获取选中状态
基于jQuery
1 选中状态
1.1 选中的元素
[js]
$(‘input[type=checkbox]:checked’)
$(‘input:checkbox:checked’)
[/js]
2.2 是否选中
[js]
$(‘input:checkbox’).is[……]
如何开发Chrome扩展程序
Chrome扩展程序为谷歌浏览器提供了丰富的扩展功能。
那如果开发一个谷歌Chrome浏览器的扩展程序呢？
首先，我正在翻译谷歌浏览器开发者平台的中文版（Chrome开发文档中文版），现在已经翻译完成了扩展程序开发最基本的几篇内容：
Object.defineProperty()默认值是false的误解
在JavaScript中，通过Object.defineProperty()方法来定义对象的属性，详情可以参照《JavaScript高级程序设计》第3版第6章6.1.1属性类型（第139页）。
书中指出：
“注意在调用Object.defineProperty()方法时，如果不指定， c[……]
React验证器propTypes
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
[javascript]
React.[……]
JavaScript创建对象的方法
[javascript]
//工厂模式
function Person1(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = functio[……]
CSS伪类、CSS伪元素详解
定义
CSS伪类 用于向某些选择器添加特殊的效果。
CSS伪元素 用于将特殊的效果添加到某些选择器。
这TM不一样吗？？？
CSS中的类选择器（class）是为了方便过滤（选择）元素，给这类元素添加样式，class是定义在HTML文档树中的。但是这在一些情况下是不够用的，比如用[……]