Potter's Blog

概要内容

1. npm init -y
2. 安装依赖
3. 创建webpack.config.js
4. 创建index.js
5. 创建调试launch.json
6. 启动调试

由于工作中遇到一个问题，需要根据环境编译代码，比如：ios平台需要某项功能，pc平台不需要这个功能，所以就可以用过编写一个自定义的loader解决此问题。虽然可以通过打例子的方式来调试代码，但是这种方式太低效了，如果日后还想知道webpack的工作原理，打日志的方式就太可行了，不能单不跟踪、实时看到各变量的当前情况，调用堆栈等等，所以来了解一下vscode里面如何调试webpack代码。

概要内容

• 实现目标
• 实现步骤

概要内容

• 常用继承方式
  • 方式一：调整类型原型的 proto 、 Object.setPrototypeOf 、Object.create
  • 方法二：利用自定义createObject
  • 方式三：利用ES6 Class extends
• 总结

概要内容

• 原型
• 总结

在接触JS之前，我工作过程中基本都是采用Java、C#、C++开发，也就是面向对象编程，对于类、继承都很熟悉，所以在构建数据结构的时候，就会下意识的采用类来定义结构，而使用JS开发的时候，创建可以通过new 方法名来创建对象，定义属性和方法放到不同位置，会出现属于类的、属于实例的还是属于原型的？这让我搞得很懵逼，面向对象结构都定义在类上，没有这么复杂，为了搞清这些概念决定仔细学习一下。

概要内容

• 问题描述
• 解决方法

问题描述

起因：一个vue页面组件都2645行，而且功能有多，实在太难维护，所以决定进行功能拆分重构。

调整之前结构

• PageScene.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
		...
		<!-- #ifdef APP-PLUS || H5 -->
    <canvas
      canvas-id="canvas"
      class="canvas"
      :style="{ width: canvasWidth, height: canvasHeight }"
    ></canvas>
    <!-- #endif -->

    <!-- #ifndef APP-PLUS || H5 -->
    <canvas
      canvas-id="canvas"
      id="canvas"
      class="canvas"
      :style="{ width: canvasWidth, height: canvasHeight }"
    ></canvas>
    <!-- #endif -->
		...
</template>