跳到主要内容

前端

  • 组件化/模块化开发
  • 工程化（webpack、vite）
  • ESLint 词法检测
  • browserlist 规范，设置浏览器的兼容情况

MVC 与 MVVM 思想​

操作 DOM （❌） ==> 数据驱动 （✅）

  • React 使用的 MVC 体系。 （单向驱动）
  • Vue 使用的是 MVVM 体系。 （双向驱动）
前端框架内部构建了一套虚拟 DOM -> 真实 DOM 的渲染体系。有效避免了 DOM 的重拍与重绘。

开发的时候，只需要修改数据（**不需要直接操作 DOM**），框架会自动重新渲染 DOM。性能比直接操作 DOM 好。

MVC​

Model、View、Controller（控制层）

数据驱动视图更新。

MVVM​

Model、View、ViewModel（数据/视图监听层）

Vue 实现了 数据与视图 的双向监听。

JS 对象​

冻结​

  • 冻结对象：Object.freeze(obj);
  • 检测是否被冻结: Object.isFrozen(obj);

被冻结的对象不能进行下面的操作。

  1. 不能修改成员值
  2. 不能新增成员
  3. 不能删除成员
  4. 不能给成员做劫持 Object.defineProperty
let obj = {
    x: 10,
    y: 20
}

console.log(Object.isFrozen(obj)); // false
obj.y = 123;
delete obj.y;

console.log(obj);

Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true

// obj.x = 11; // error
// delete obj.x; // error

密封​

  • 密封对象 Object.seal(obj);
  • 检测是否被密封 Object.isSealed(obj);

被密封的对象

  1. 可以修改成员值
  2. 不能删除成员值
  3. 不能新增成员值
  4. 不能劫持成员值

扩展​

  • 将对象变成不可扩展 Object.preventExtensions(obj);
  • 检测是否可扩展 Object.isExtensible(obj);

不可扩展的对象

  1. 可修改成员值
  2. 可删除成员值
  3. 不能新增成员值
  4. 可劫持成员值