发表于 | 分类于 ， ，

函数声明和函数表达式区别

  • 函数声明会被变量提升到顶部作用域
  • 函数表达式只有执行到此处才会赋值,执行必须在表达式之后
  • 函数声明必须有函数名
阅读全文 »

发表于 | 分类于 ， ，

白话理解

  • JavaScript基于原型链的继承,访问一个对象的属性时,如果找不到,则会顺着原型链向上层查找,以此类推,直到找不到为止
  • 每个构造器都有一个prototype属性,代表该构造函数的原型对象
  • prototype有个constructor属性,指向它的构造函数,构造函数的constructor指向自身
  • 实例化对象有个__proto__,指向它的原型prototype
  • 不管哪种继承方式,prototype上的属性都是共享的,所以原型链上最好是增加的是方法,基本属性放到构造函数中,除非你确定你的基本属性是需要共享所有实例对象的
阅读全文 »

发表于 | 分类于 ， ，

FormData

概念

FormData接口提供一种表示表单数据的键值对的构造方式.可以通过JavaScript模拟表单控件操作.可以通过XMLHttpRequest的send方法异步提交表单

使用

FormData

初始化表单对象,可以传入dom元素,可以为空

1
2
3
4
5
//创建一个空的FormData对象
let formData = new FormData();
//创建一个存在的form对象 这个对象包含这个表单的数据
const formOne = document.getElementById("myform");
let formData = new FormData(formOne);
阅读全文 »

发表于 | 分类于 ， ，

转布尔

使用Boolean函数将类型转换成布尔类型

除了👇的情况,其他都转换成true

1
2
3
4
5
6
7
8
console.log(Boolean()) 
console.log(Boolean(false)) 
console.log(Boolean(undefined))
console.log(Boolean(null))
console.log(Boolean(0))
console.log(Boolean(+0))
console.log(Boolean(NaN))
console.log(Boolean(""))
阅读全文 »

发表于 | 分类于 ， ，

instanceof 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * obj是否在targetObj的原型链上
 */
function myInstanceOf(obj, targetObj) {
  let objProto = obj.__proto__, //instanceof 左边的值
    targetProto = targetObj.prototype; //instanceof 右边的值


  while (true) {
    if (objProto === null) return false;
    if (targetProto === null) return false;
    if (objProto === targetProto) return true;
    //如果未发现相等,则像上级寻找原型,一直到顶级原型链,返回null为止
    objProto = objProto.__proto__;
  }
}
阅读全文 »

发表于 | 分类于 ， ，

判断设备来源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 判断设备来源
 */
function deviceType() {
  const ua = navigator.userAgent;
  const agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
  for(let i= 0, len = agent.length; i < len; i++ ) {
    if(ua.indexOf(agent[i]) > 0) {
      return agent[i];
    }
  }
}

/**
 * 微信判断
 */
function isWx() {
  const ua = navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i) === 'micromessenger') {
    return true;
  }
  return false;
}
阅读全文 »

发表于 | 分类于 ， ，

去除字符串中最后一个指定的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 去除字符串中最后一个指定的字符
 * @param {String} str 
 * @param {String} del 
 */
function delLast(str, del) {
  if (typeof str !== "string") throw new Error("必须为字符串");
  //查找字符串的位置
  let index = str.lastIndexOf(del);
  //index之前的字符串+index之后的字符串
  if(index > -1) return str.substring(0, index) + str.substring(index + 1, str.length);
  return str;
}
阅读全文 »

发表于 | 分类于 ， ，

优雅降级和渐进增强

  • 优雅降级是优先考虑新版本浏览器可用性,使用最新写法,最后兼容老版本
  • 渐进增强是优先考虑老版本浏览器,最后考虑新版本增强写法

viewport

手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

1
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
属性名 取值 描述
width 正整数 (device-width) 定义视口的宽度，单位为像素
height 正整数 (device-height) 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable yes | no 定义是否允许用户手动缩放页面，默认值yes
阅读全文 »

发表于 | 分类于 ， ，

HTML中常用行内,块级元素

行内元素

  • a—超链接
  • b—粗体(不推荐使用)
  • br—换行
  • i–区分普通文本,通常斜体
  • span
  • strong—粗体显示
  • input
  • select
  • button
  • form
  • label
  • textarea
阅读全文 »