• 谈谈前端的设计模式

    |

    对于前端er来说,有些常见的设计模式需要掌握:

    • 创建型
      • 单例模式
      • 工厂模式
      • 原型模式
    • 结构型
      • 代理模式
    • 行为型
      • 观察者模式/订阅-发布模式

    其中构造型最为常见,它主要提供了一种在创建对象的同时隐藏创建逻辑的方式。

    PS:在考察Vue数据双向绑定时,可以提及代理模式和订阅-发布模式:

    vue 采用的是数据劫持结合发布和订阅者模式的方式,通过 Object.defineProperty 来劫持各个属性的 getter 和 setter,在数据变动时发布消息给订阅者,触发相应的监听回调

  • JavaScript中的内存空间

    虽然我们平时写前端代码很少会涉及到JS中的内存空间,但了解了JS中的内存空间,我们才能更好地理解闭包、引用与深/浅拷贝等问题。这同时还是前端面试的必备知识点。

  • 网页渲染及优化

    |

    0.引言

    浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎

    问题5

    • FOUC:由于浏览器渲染机制(比如firefox),再CSS加载之前,先呈现了HTML,就会导致展示出无样式内容,然后样式突然呈现的现象;
    • 白屏:有些浏览器渲染机制(比如chrome)要先构建DOM树和CSSOM树,构建完成后再进行渲染,如果CSS部分放在HTML尾部,由于CSS未加载完成,浏览器迟迟未渲染,从而导致白屏;也可能是把js文件放在头部,脚本会阻塞后面内容的呈现,脚本会阻塞其后组件的下载,出现白屏问题。

    具体参照:

    深入浅出浏览器渲染原理 - Fundebug的文章 - 知乎

  • TypeScript入门

    • 要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等概念

    • TypeScript 编译的时候即使报错了,还是会生成编译结果

  • 开发/生产环境下避免跨域的不同方案

    |

    CORS

    1
    跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

    但是我们要避免跨域请求!

  • Vue中的dom渲染

    | /

    Vue建议”数据驱动”,最好少直接操作dom。但很多时候想要写一些特殊动画效果时,不得不操作dom,一开始遇到了很多问题。但当我发现使用原生js是可以成功时,我明白是我对Vue中dom的渲染流程了解不足,于是去研究了相关内容。

  • 研读Vue官方文档(一) :基础 + 组件

    | /

    一、基础

    1.生命周期

    vue生命周期

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    beforeCreate(){
    //此时data和methods中的数据未初始化
    },
    created(){
    //此时,data和methods都已经被初始化了
    },
    beforeMount(){
    //模板已经在内存中编辑完成了,但未把模板渲染到页面上
    },
    mounted(){
    //内存中的模板已经真实地挂载到页面上了,用户可以看到
    },
    beforeUpdate(){
    //data已更新,页面未更新
    },
    updated(){
    //data和页面都更新了
    }