web前端学习记录3-javascript

校验表单数据发展出来的语言
两部分组成
ECMAScript（语法）
Browser Objects（DOM，BOM）

JS深入
1. 函数
  1. 本质
  2. 定义方式
  3. 调用
  4. 参数
2. 变量
DOM相关
错误调试
ECMAScript
1. 类型转换
  1. 数值转换
  2. 文本转换
2. 操作符
3. 函数
4. 内置对象
  1. Array
  2. String
    1. 定位
    2. 截取
    3. 分割
  3. Math
  4. Date
📟JS
1. Uglifyjs 使用

JS深入

函数

.和[]
in, ‘property’ in ‘object’

匿名函数
window.onload = function() {}

本质

调用，可以调用
是对象

作为参数
当作数值来操作
当作返回值

定义方式

字面量方式
- function 声明
- var赋值表达式
构造函数
- new Function()

调用

直接调用

普通函数调用 add()
匿名函数调用 function(){}; 那就是 function(){}();，但是这样是有报错的，因为浏览器默认你定义了函数而不是调用，应该 var add=function(){}();

// 避免 funcin开头的立即执行的匿名函数
(function(){})(); //函数是对象，对象外面加个括号，没意义但是不报错
(function(){}()); 
!+~function(){}();

对象属性什么时候加引号，什么时候不加引号，非法的名称加引号，用[]引用

构造函数调用，必须 new 开头，返回对象

间接调用

call(window,1,2)
apply(window,[1,2])

参数

power = power || 2;
如果power为假，那么表达式要返回2来决定表达式是真还是假；
如果power为真，那么直接返回power来决定表达式是真。

arguments
类数组
arguments.callee, 指代函数本体，”use strict”; 严格模式，不能用 callee

形参的个数，arguments.length，实参的个数，add.length，也就是方法名的长度就可以

变量

类型，以及存储方式，比较相等，赋值

基本类型，存储在栈
引用类型，存在堆，指向同一个引用才相等

形参传的都是值
function setName(obj) {
   obj.name = 'xm';
   obj = {}; //传入了另一个对象的地址，也就是新对象
   obj.name = 'xh'
}
var person = {};
setName(person);
console.console.log(person.name); // xm

变量类型检测

typeof
instanceof

作用域，没有块级作用域

全局作用域
局部作用域：函数作用域，没有块级作用域

变量对象，全局作用域的变量对象就是 window
作用域链，当前作用域没有的变量会不断遍历直到 widnow 对象。局部变量速度快，全局慢。就像 jquery 里把 window 对象传给方法提里是一样的，局部变量速度快，代码压缩的时候方便。
延长作用域链，基本不用。

js解析机制

预解析，var 后面的变量和func，变量默认都是 undefined，如果func和变量重名，那么变量被干掉
逐行解析

① undefined
console.log(a); //
var a = 1;

② error
console.log(a); //
a = 1;

③
console.log(a); // a()
var a = 1;
console.log(a); // 1
function a() {
   console.log(2);
}
console.log(a); // 1
var a = 3;
console.log(a); // 3
function a() {
   console.log(4);
}
console.log(a); // 3
a() // error 

④
var a = 1;
function fn() {
   console.log(a); // undefined
   var a =2;
}
fn()
console.log(a); // 1

var a = 1;
function fn() {
   console.log(a); // 1
   a =2;
}
fn()
console.log(a); // 2

var a = 1;
function fn(a) { // 参数a就是局部变量，预解析
   console.log(a); // undefined
   a =2;
}
fn()
console.log(a); // 1

var a = 1;
function fn(a) { // 
   console.log(a); // 1
   a =2;
}
fn(a);
console.log(a); // 1

内存问题

垃圾收集机制
自动
手动

原理
标记清除
引用计数，循环引用

JS
DOM，文档对象模型
BOM，浏览器对象模型

方法就是主动给全局变量设置为 null

DOM相关

DOM 操作

crud，增删改查

增加节点

增加节点，慢

document.createElement() 标签
document.createTextNode() 文本
document.createDocumentFragment() 文档片段
document.createComment() 注释

<script>
// 立即执行的方法，只在这个作用域起作用
  (function () {
    
  })
</script>

增加节点，高效

innerHTML，不包含调用元素自身，可以创建也可以读取节点
outerHTML，包含调用元素自身
innerText，设置或获取对象起始和结束标签内的文本。firefox textContent 类似
outerText

function getInnerText(ele) {
   return (typeof ele.textContent == "string") ? ele.textContent : ele.innerText;
}
function setInnerText(ele, text) {
   if (typeof ele.textContent == "string") {
      ele.textContent = text;
   } else {
      ele.innerText = text;
   }
}

查找节点

两套 api
第一套

firstChild, lastChild, parentNode
nextSibling, previousSibling
childNodes[0], childNodes.item(0)

document.documentElement
onerDocument
hasChildNodes()

节点遍历

var s = "";
function travel(space, node) {
   if (node.tagName) {
      s += space + node.tagName + "<br/>";
   }
   var len = node.childNodes.length;
   for (var i=0; i < len; i++) {
      travel(space + "|-", node.childNodes[i]);
   }
}
travel("", document);
document.write(s);

面对空白节点，产生第二套 api 方法，只返回元素节点。

firstElementChild, lastElementChild,
nextElementSibling, previousElementSibling
children[0], childElementCount

类数组对象

NodeList 对象的特点，也就是childNodes里保存的对象的特点
1. Nodelist 类数组对象，保存一组有序节点
2. 可通过方括号语法访问 Nodelist 的值，有 item 和 length 属性
3. 并不是 Array 实例，没有数组对象的方法
HTMLCollection, namedItem(‘td’)
1. Ele.getElementsByTagName()
2. document.scripts
3. document.links
4. document.images
5. document.forms
6. document.all
7. tr.cells
8. select.options
9. …
NamedNodeMap，ele.attributes

类数组对象的动态性

动态的
基于DOM结构动态执行查询的结果，自动反映DOM结构变化
始终保持最新

节点查找的方法

getElementById, 必须用 document.
getElementsByName，必须用 document.
getElementsByTagName, getElementsByTagName(*)，返回所有节点
getElementsByClassName
querySelector()，返回一个对象，
querySelectorAll()，返回一组对象，

操作节点

appendChild
insertBefore
replaceChild
cloneNode
normalize, 合并文本节点
splitText

删除节点

removeChild
removeNode
innerHTML
deleteContents
textContent

DOM 属性

DOM 事件

错误调试

debugger，单步调试
throw new Error(‘’) 抛出一个错误，离它最近的 try 语句里
try {} catch {} finally {}

ECMAScript

简单数据类型，基本数据类型
- Undefined，没有初始值的变量
- Null，空指针对象。undefined 由 null 派生出来的
- Boolean
- Number，NaN是特殊的一种number，NaN跟任何数值都不相等，包括它自己
- String
复杂数据类型，对象

typeof() 或者 type x

类型转换

数值转换

Number()，不常用
parseInt()，必须是数字开头的字符串之类的，否则是 NaN（non a number）
parseFloat()
isNaN()，检查非数字。这里有个陷阱，这个方法会尝试转成数值，所以 isNaN(“16”) 是false

文本转换

toString()
String()

boolean转换
Boolean()

0之外的所有数字，转成 boolean 都是true
所有字符串除了空””转是false，其他都是 true
null和 undefined转布尔，都是false

操作符

比较操作符
== 比较值是否相等
=== 比较值是否相等，同时比较数据类型是否相等
console.log(null==undefined)为true

函数

函数参数的，arguments对象
ECMAScript中的参数在内部用的一个数组来表示，也就是通过arguments对象来访问这个数组

function inner() {
  console.log(arguments.length, arguments[0]);
}
inner(1,2)

内置对象

Array, String, Math, Date

Array

初始化

var a = new Array()
var a = [a,b]

a.length

操作

push 添加到尾部，返回数组的新长度
unshfit 添加最前面，返回数组的新长度
shift 删除第一个元素，返回被删除的元素
pop 删除最后一个元素，返回被删除的元素
join() 把所有元素放到一个字符串，默认逗号隔开
reverse() 颠倒数组的元素顺序
sort() 默认比较的也是字符串，自动转成字符串然后比较；可以接收一个比较函数
concat() 链接数组
slice(start，end) 从数组返回指定的元素
splice() ，强大的功能
- 删除，splice(index, count)，返回被删除的元素的数组，count=0 不删除
- 插入，splice(index,0,item1,…,itemx)，返回空数组
- 替换，splice(index, count, item1,…,itemx)
indexOf(search, startIndex)，查找，没有找到是-1
lastIndexOf

String

定位

charAt()
charCodeAt() 字符编码
indexOf()
lastIndexOf()

截取

slice()
substring()，当参数为负数时候，参数自动为0，其他跟slice一样
substr(start, len)

分割

split(seperator) 拆分成数组
replace

toUpperCase()
toLowerCase()

Math

min()
max()
ceil() 向上取整
floor() 向下取整，也就是整数部分
round() 四舍五入
abs()
random() 0-1之间的随机数 n-m之间的随机整数 Math.floor(Math.random()*(m-n+1)+n)

Date

new Date()， new Date(year, month, day + 50)
getFullYear() 4位数年份
getMonth()

📟JS

js相关的部分

Uglifyjs 使用

有时候为了让js阅读起来没那么流畅，就会用到压缩和混淆，这是最基础的一个用法。

npm install uglify-js -g
# -o 导出文件
# -m 符号化方法名
uglifyjs js/tlConfig.js -m -o js/tlConfig.min.js