js程序高级设计

1.JSON对象

json对象与js对象字面量的区别

• 没有变量声明，在json中没有变量的概念
• 没有末尾的分号
• json对象在任何时候的属性名都要加上双引号而不是单引号，对属性名加单引号或者不加引号都会报错

2.对象序列化

json对象其实就是js语法的子集，在编程中一般使用json对象的地方就是进行序列化和解析。

如果将一个js对象进行序列化，首选的方法就是JSON.Stringfy()，它的作用就是将一个js对象序列化为JSON字符串。

// 先定义一个js对象
const obj = {
  title: "book",
  money: "24"
}
// 将js对象序列化，保存在objCopy中
const objCopy = JSON.stringfy(obj);

我们使用的JSON.stringfy()方法无非就是这样，但是它还可以接受两个参数（可选的），一个参数可以是数组或者函数，这个参数的作用就是过滤对象。如果传入数组的话，里面的元素必须是字符串，函数的话会传入两个参数分别是key，value，但是key一定保证是字符串（一般很少用）。另一参数就是对序列化的JSPON字符串进行格式化，如果传入的是数值，则会进行格式化（缩进个换行），如果传入的是一个字符串，则会以该字符串进行缩进格式化。

const obj = {
  title: "book",
  money: 24
}
// 将js对象序列化，保存在objCopy中
const objCopy1 = JSON.stringfy(obj, ["money"]);  // 过滤的结果字符串：{"money": 24}
// 格式化后的结果:
// {
          "money": 24 
//  }
const objCopy2 = JSON.stringfy(obj, ["money"], 4); 

3.JSON字符串解析

这里就是调用的JSON.parse()方法进行解析，将JSON字符串解析为js对象。

// 根据上面的objCopy1字符串进行解析
const jsObj = JSON.parse(objCopy1); // js对象：{"money": 24}

4.Ajax请求

进行表单post请求时，需要将传输的数据进行序列化，这里有两种选择，分别是在send()方法中，传入序列化的数据。一种就是使用serialize(form)将表单元素作为参数传进去，但是这种需要设置请求头xhr.setRequestHeader("Content-type", application/x-www-form-urlencoded" );另一种就是创建FormData的实例，将form元素的参数传进去，new FormData(form)这种不需要设置请求头，会更方便。同样也可以在创建的FormData的实例中调用append()方法，接受两个参数，分别为key，value的字符串，可以在里面进行自定义的数据传递。

5.防止对象篡改

• 防止对象的扩展

  防止对象的篡改，可以使用Object对象的属性方法preventExtensions()里面的参数就是要防止扩展的对象。一旦使用了这个方法，就不能往对象里添加成员，但是对原来的成员仍然可以修改和删除。

const obj = {
  name: "cs",
  age: 24
}
// 防止对象的扩展
Object.prevetExtensions(obj);
obj.weight = 65;
cosole.log(obj.weight); // undefined
// 判断一个对象是否被禁止添加成员可以使用isExtensible()方法，它会返回一个bool值
const judgeVal = Object.isExtensible(obj);
console.log(judgeVal); // false;

• 对象密封

  对象密封，简单的说就是对象不可扩展、删除，但是对象可以修改属性。使用的是Object对象的属性方法seal()，里面的参数就是当前操作的对象。

  const person = {
    name: "cs"
  }
  Object.seal(person);
  preson.age = 24;
  console.log(preson.age); // undefined
  delete person.name;
  console.log(person.name); // cs;
  // 不可扩展和删除但是可以进行修改
  person.name = "cs1";
  console.log(person.name); // cs1
  // 判断一个对象是否密封，可以使用isSealed()，返回bool值
  const sealVal = Object.isSealed(person);
  console.log(sealVal); // true，不可扩展和删除
  

  • 冻结对象

    冻结对象，是最高级别的防止对象篡改的方法，它不可扩展、删除、修改成员属性和方法，这里使用了Object的成员方法freeze()，参数是当前要操作的对象。

    const car = {
      price: 100000,
      brand: "buck"
    }
    // 队成员进行冻结，不能扩展、删除、修改对象成员
    Object.freeze(car);
    // 扩展成员
    car.color = "white";
    console.log(car.color); // undefined;
    // 删除成员
    delete car.brand;
    console.log(car.brand); // buck
    // 修改成员属性
    car.price = 150000;
    console.log(car.price); // 150000
    // 判断一个对象是否被冻结，使用的方法是isFrozen()，返回bool值，同样也可以验证对象是否可以扩展以及是否密封
    const extensionVal = Object.isExtensible(car); // false，不能被扩展
    const sealVal = Object.isSealed(car); // true，不能扩展和删除
    const freezeVal = Object.isFrozen(car); // true，不能扩展、删除和修改属性
    

    注意：对象一旦设置为不可篡改，就不能再撤销了，这里设置篡改的操作，主要是防止开发业务中，对对象进行操作，引起其它业务模块的问题。

    对于以上防止对象篡改的级别，再次梳理一下：

    • 第一级：冻结，对对象的操作性最低，不可扩展、删除、修改
    • 第二级：密封，对对象的操作性仅限于修改，不可扩展、删除、只能进行修改
    • 第三极：不可扩展，对对象的操作性很高，不可扩展对象成员，可以删除和修改成员属性

6.定时器小扩展

使用定时器函数一般是要在间隔的时间段内重复执行一段代码，这就需要不断的向js进程的队列中掺入函数，虽然是有时间间隔，但是这种间隔也只是在进程中空闲的时候是标准化的，当进程中一直有函数执行时，则后面的函数都要推迟执行，对于定时器函数可能会造成连续执行（中间没有间隔），导致达不到间隔执行的效果。

这里的一种解决方法就是，在定时器函数中再次执行一个定时器函数，只不过这里面的第一个参数是对当前执行函数的引用。

setInterval(function() {
  setInterval(arguments.callee, 250);
}, 250)

上面这种写法的好处有两个：

• 在前一个定时器执行完成之前，不会向进程队列中再添加新的定时器代码，确保时间间隔不会跳过
• 保证了至少在指定的时间间隔之后执行定时器代码，不会造成函数的连续执行