Javascript继承

| 字数 1839

      Javascript的继承是基于原型的,之前理解的比较简单,直到最近在用 es5 写星级评分组件的时候遇到了些问题,解决之后理解深了一些。总结归纳,以便后用。

星级评分

原本的需求有俩个:

  1. 根据后台返回的评价分数单纯进行5颗星的展示
  2. 用户可以在5颗星上为商品进行打分,单击后上传

开始用最笨的方法,从业务出发很快速的把俩个需求都实现了。最后想着能不能利用继承来优化,方便后期扩展可以进行半星或者四分之一星评分。

具体效果如下:
star

利用原型分别实现满星与半星

前端代码编写注意事项

| 字数 778

变量

  1. 声明不用,数据只使用一次或不使用就无需装到变量中

  2. 变量命名,驼峰、简洁、易懂

  3. 特定变量:

    1
    2
    3
    4
    5
    const MAX_INPUT_LENGTH = 8;
    if (value.length < MAX_INPUT_LENGTH) {
    // 一目了然,不能超过最大输入长度
    ....
    }
  4. 使用说明性的变量(即有意义的变量名)

译文:Understanding the Virtual DOM

| 字数 2498

本文为译文,原文地址:

Understanding the Virtual DOM

        我最近在写一些如何正确区分 dom 与 shadow dom 的文章。总的来说,dom 是HTML文档的基于对象的表示,以及操作该对象的接口。shadow dom 可以被认为是轻量级版本的 dom。它同样是以原生对象为基础的 html document,但是它并不是完整的。可能有些难懂,换一种说法来看,shadow dom 允许我们去将我们的 dom 划分的更小,更轻,可以跨文档使用。(这里作者想表达的意思是我们可以根据需要截取部分 dom 生成 vdom,而不用每次从 html 标签开始写 vdom 直到 html 标签闭合)

        另一个你可能遇到过的相似说法称 “shadow dom” 为 “virtual DOM”。尽管

Event Loop总结

| 字数 2175

之前也有 event loop 的概念,但一直都是琐碎的。直到阅读以下三篇文章后,琐碎的点串在了一起。

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

这一次,彻底弄懂 JavaScript 执行机制

Event Loop的规范和实现

为了印象深刻,还是决定自己写一写。总结如下:

1、进程与线程的区别

1、什么是进程?

在计算机操作系统中,只有进程才能在系统中运行。所以要使程序运行就必须为其创建进程。当我们打开浏览器时就已经创建了进程。创建进程之后,系统会为其分配资源(内存等)供其使用。

进程是程序(指令和数据)的真正运行实例。若干进程有可能 …

Javascript面向对象笔记

| 字数 1473

        说到面向对象,大多数人都想到的是高级语言:c++、java,但是我认为对于一名coder来说不论什么语言,一定要有面向对象这种思想(封装、继承、多态),我们只需要用语言这个工具把思想表达出来即可。本文只讨论继承。

Javascript 中创建对象

new 关键字做了什么?

利用 new & 构造函数 创建新的对象。这个创建新对象的过程分为三步:

  • 声明新的变量 basketball

手撕值传递&对象深浅拷贝

| 字数 1491

值传递

  1. JS 中的基本类型&引用类型分别是什么?
  2. 基本类型&引用类型如何存储?
  3. 值传递的由来&举例说明值传递的过程
  4. 扩展阅读(call-by-sharing)

JS 中的基本类型

JS 中的基本类型分别是:Number、String、Boolean、undefined、null;引用类型分别是:Function、Object、Array 等。

基本类型&引用类型存储

基本类型均存储在栈中而且

手撕闭包

| 字数 1190

既然说到了手撕那么我们就按照下列顺序一步步来看。

  1. 闭包是什么?
  2. 闭包产生过程详解
  3. 闭包常用场景示例

闭包是什么?

  1. 高程三:闭包是指有权访问另一个函数作用域中的变量的函数。
  2. Javasript Ninja:闭包是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域。

  3. 总结一下,闭包是有权操作除自己外函数作用域中变量的函数。

手撕作用域与上下文

| 字数 3156

 先来抛出结论:

  1. 作用域与上下文肯定不是一回事
  2. 作用域是由 function 进行声明的而非代码块({ })。
  3. 除了全局作用域,函数只要被声明(创建了),它就有了独立的作用域。
  4. 我们常说的上下文指的是 this,这里其实对 this 更准确的说法应该被称为函数上下文(function context)
  5. 各大网文与部分书籍中所讲解的上下文,其实是执行环境(execution context)有的地方也称为执行上下文/执行上下文环境。这个执行环境不仅确定了 this (即我们常说的上下文对象),还确定了将各个作用域联系起来的作用域链
  6. 执行环境并不是我们常说的上下文,而是用来确定它的指向。
  7. 本文中将采用高程3的说法 — 执行环境。

作用域

在 Javascript 中,作用域是由 function 声明的,而不是代码块。声明的作用域创建于代码块,但不终于代码块(其他语言终于代码块)。查看以下代码:

1
2
3
4
if (window) {
 var x = '123';
}
alert(x);

在其它语言中,x 终结于大括号关闭处,alert 弹出 undefined。

webpack笔记

| 字数 2043

  
webpack 2.0 用了小一个月了,一直都是照猫画虎。这俩天开始细读官网的部分文章结合一些讲解视频,深入学习一下。小结一发来汇总知识点。   

  1. webpack 的由来?

已存在的模块打包器对于大型应用(大型的SPA)来说并不适合。发展另一个模块打包器最迫切的原因那就是代码分割(Code Splitting)并且可以让静态资源能够无缝的适用于模块化。

  1. webpack 可以做的事情?
  • 将项目间的依赖分割成代码块并按需加载