Skip to content

Latest commit

 

History

History
307 lines (237 loc) · 7.35 KB

JavaScript Tips-1.md

File metadata and controls

307 lines (237 loc) · 7.35 KB

Table of Contents generated with DocToc

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]);
	}
}