道招

从vuecli3学习webpack记录(三)基类Tapable和Hook分析

在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码

compiler.hooks.done.tap('vue-cli-service serve',() => {});
// 或者
compilation.hooks.buildModule.tap("
从Javascript引擎、编译器和作用域来理解函数声明、普通的变量声明

首先声明本文内容主要来自《You Don’t Know Js: Scope & Closures》中文版《你不知道的Javascript 上卷》,本人对于Javascript引擎、编译器和作用域的理解也主要源于该书与自己在控制台的调试,欢迎和大家一同学习交流。

编译原理

一般分为三个步骤:

1. 分词/词法分析

用div+css模拟类excel表格对角线(斜线)

我们先看html代码吧

<table>
    <caption>用div+css模拟类excel表格对角线(斜线)</caption>
    <tr>
      <th style="width:80px;">
        <
用webpack的require.context优化vue store和router文件

早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧

store 首先看我的store的目录结构:

vue里面使用debounce,throttle注意点

我们有时在自己的vue项目中不可避免的要监听类似scroll事件的,这是如果相对性能影响少点,只能会想到debounce防抖之类的。但是我们要注意了,addEventListener和removeEventListener必须要是同一个函数才行哦,不然removeEventListener是无法移除事件的,这样就容易造成内存泄露了。

平时我们的debounce一般这么用

element-ui表单源码解析之el-input

关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里面有如下代码的

this.$on('el.form.blur', this.onField
element-ui表单源码解析之el-form-item

上一篇看了el-form,功能比较简单,现在来看看el-form-item

<!--el-form-item源码-->
<template>
  <div class="el-form-item" :class="[{
      'el-form-
element-ui表单源码解析之el-form
Vue2.6.10源码分析(一)vue项目怎么神奇的跑起来的

先看index.html的代码吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport&quo
准备做点开源前端练手小项目

今天将自己自己最近写的练手代码整理放到了github上,主要是 一个是后端,github地址: