JavaScript Tips-1.md

Table of Contents generated with DocToc

• JavaScript Tips-1
  • 文件上传处理
  • 通过拖拽上传文件
  • js 动态加载 CSS
  • js 动态加载 js
  • 给通过 JS 动态生成的元素绑定事件
  • 使用 JavaScript 获取 CSS 伪元素属性
  • 禁止右键点击
  • 检查图片是否加载完成
  • 自动修改破损图像
  • 验证元素是否存在于 jquery 对象集合中
  • 确认/取消对话框
  • 发送邮件
  • 监测浏览器窗口的大小改变
  • 监测按键
  • 在 head 区域替换整张样式表
  • null & undefined
  • typeof检测原始类型
  • instanceof检测引用类型
  • for..in循环

JavaScript Tips-1

文件上传处理

<input type="file" onchange="processFile(this.file)"/>

const processFile = (files) => {
  let file = files[0];
  let fileName = file.name;
  let reader = new FileReader();
  reader.onload = (e) => {
    // if file is a image
    // let url = e.target.result;
  }
  reader.readAsText(file); // 只能处理包含文本内容的文件
  reader.readAsDataUrl(file); // 处理图片文件
}

通过拖拽上传文件

<div id="dropFile">拖拽上传</div>

$(function() {
  let dropFile = document.getElementById('dropFile');
  dropFile.ondragenter = ignoreDrag;
  dropFile.ondragover = ignoreDrag;
  dropFile.ondrop = drop;

  const ignoreDrag = (e) => {
    e.stopPropagation();
    e.preventDefault();
  }
  const drop = (e) => {
    e.stopPropagation();
    e.preventDefault();
    let data = e.dataTransfer;
    let files = data.files;

    processFile(files)
  }
})

js 动态加载 CSS

<script>
	var link = document.createElement( "link" );
	link.type = "text/css";
	link.rel = "stylesheet";
	var url = "//static.nutsbp.com/css/user/css/profile.css"
	link.href = url;
	document.getElementsByTagName( "head" )[0].appendChild(link);
</script>

js 动态加载 js

document.write("<script src='http:\/\/static.nutsbp.com\/js\/user\/me_form.js'><\/script>");

给通过 JS 动态生成的元素绑定事件

$(document).on("click", ".target", function() {
	//获取目标元素
	var $target = $(e.target);
	// do something..
});

使用 JavaScript 获取 CSS 伪元素属性

// 获取 .element:before 的 color 值
var color = window.getComputedStyle(
	document.querySelector('.element'),
	':before'
).getPropertyValue('color');

// 获取 .element:before 的 content 值
var content = window.getComputedStyle(
	document.querySelector('.element'),
	':before'
).getPropertyValue('content');

禁止右键点击

$(document).ready(function() {
	$(document).bind("contextmenu",function(e) {
		return false;
	});
});

检查图片是否加载完成

$('img').load(function() {
	console.log('image load successful');
});

自动修改破损图像

$('img').on('error', function() {
	$(this).prop('src', 'img/broken.png');
});

验证元素是否存在于 jquery 对象集合中

if ($('#id').length) {
	// do something
}

确认/取消对话框

<script>
	like=window.confirm("how do you do?");
	if (like === true) {
		document.write("fine"); // confirm
	} else {
		document.write("nothing to say"); // cancel
	}
</script>

发送邮件

<a href=“mailto:xxx@xxx.com”></a>
// 或者在 js 中
window.location.href = 'mailto:' + address;

监测浏览器窗口的大小改变

$(window).on('resize', function() {
	// do something
});

监测按键

$(document).on('keydown', function(event) {
	var keyCode = event.keyCode;
	// do something
})

在 head 区域替换整张样式表

如果样式变动很多，那么可以将它独立出来，通过@media放在 head 区域

<link rel="stylesheet" meida="(max-width:600px)" href="mobile_style.css">

null & undefined

注意null与undefined的区别:

• null 可用于初始化一个变量
• undefined 代表变量未被初始化

不要用 null 来检测是否传入了某个参数

// 反面教材（用 null 检测是否传入参数）
function deSomething(arg1, arg2, arg3) {
	if (arg3 != null) {
		// do something..
	}
}

不要用 null 来检测一个未初始化的变量

// 反面教材（变量没有初始化就和 null 比较）
var person;
if (person != null) {
	// do something..
}

应该将 null 当做占位符使用

var person = null;
// ....

if (person != null) {
	// do something..
}

尽量避免使用特殊值 undefined

可以有效确保只在一种情况下typeof返回undefined：当变量为声明时

使用 null 初始化变量

var person = null;
console.log(person === null); // true
console.log(person === undefined); // false

typeof检测原始类型

JavaScript 中的五种原始类型：字符串(string)、数字(number)、布尔值(boolean)、null、undefined

可使用typeof检测 字符串、数字、布尔值、undefined 的类型

未定义的变量和值为 undefined 的变量通过typeof都将返回undefined

let
name = "ecmadao",
num = 5,
isTrue = true,
jsUndefined;

typeof name; // string
typeof num; // number
typeof isTrue; // boolean
typeof jsUndefined; // undefined

可用typeof检测函数

function myFun() {};

typeof myFun; // function

instanceof检测引用类型

typeof检测引用类型的时候，会返回object

typeof []; // object
typeof {}; // object
typeof new Date(); // object

for..in循环

for..in循环用于遍历对象属性，返回属性名

循环不仅遍历对象的实例属性，也遍历原型属性

可使用hasOwnProperty()方法进行过滤

var props;
for (props in object) {
	if (object.hasOwnProperty(props)) {
		console.log(object[props]);
	}
}