<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wang_kai_7的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wang_kai_7</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wang_kai_7]]></copyright><item><title><![CDATA[构建过程：从源码到dist文件]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/128277646</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/128277646</guid><author>wang_kai_7</author><pubDate>Sun, 11 Dec 2022 19:21:16 +0800</pubDate><description><![CDATA[目前实现从源码到可用的静态文件，我们都是借助打包工具实现的，目前用的比较多的是, 那么以上问题也可以描述为“构建工具是如何进行构建的？”， 本文主要以为例，对以上问题进行阐述，需要说明的是v0.34.9版本的rollup功能基本完善，后续的版本是在现有基础上的迭代，原理是一样的文章关注的是实现构建功能的核心流程，不涉及插件、钩子等概念，因此没用过rollup也是不要紧的看了https://mp.weixin.qq.com/s/JndBu8maXC-f9r1Ghw8kgg 此篇文章之后，我发现。]]></description><category></category></item><item><title><![CDATA[vite1.x 热更新(HMR)的实现原理]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/127173450</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/127173450</guid><author>wang_kai_7</author><pubDate>Wed, 05 Oct 2022 16:18:25 +0800</pubDate><description><![CDATA[将近一年前自己尝试阅读vite源码（2.x），虽然也有些收获但整体并没有到达我的预期，对于vite也是停留在一知半解的程度上。最近想重新开始学习vite，但回顾之前的学习历程，感觉不太想继续之前的方式，自己的水平有限，读起来太费劲，经常在不同的函数调用间迷失自己，最后草草收场。想起之前看文章很多人是看代码的最初实现版本的，于是也想尝试一下，选择阅读vite的最初版本分支1.x，效果是明显比之前好的，后续我觉得再阅读最新版本的代码的话是有很大帮助的。]]></description><category></category></item><item><title><![CDATA[简版vue响应式实现]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/124192419</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/124192419</guid><author>wang_kai_7</author><pubDate>Fri, 15 Apr 2022 12:55:45 +0800</pubDate><description><![CDATA[前言
此为自己学习vue源码响应式部分的一个小demo，按照自己的理解实现改变变量a,变量b也跟着改变的效果，整体实现较为简单，不考虑任何复杂场景，如有问题请大家指正
效果
data.age改变后，comouted.computedB的值也改变了
node index.js
// hello, computedb is 22
// hello, computedb is 59

代码
可以直接复制到浏览器控制台运行
// 发布者
class Observer {
  constructor() {
    ]]></description><category></category></item><item><title><![CDATA[vue2学习笔记-组件化]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/124192406</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/124192406</guid><author>wang_kai_7</author><pubDate>Fri, 15 Apr 2022 12:54:49 +0800</pubDate><description><![CDATA[前言
跟着黄轶大神学习的 vue，做一些简单记录。
import Vue from 'vue'
import App from './App.vue'

var app = new Vue({
  el: '#app',
  // 这里的 h 是 createElement 方法
  render: h =&gt; h(App)
})

流程图

步骤
1 $mount 之前
这里的逻辑和数据驱动中的大致逻辑是一样的，都是在做初始化，到了下一步在会有所区别
2 $mount

位置：vue/src/core]]></description><category></category></item><item><title><![CDATA[vue2学习笔记-数据驱动]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/124192384</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/124192384</guid><author>wang_kai_7</author><pubDate>Fri, 15 Apr 2022 12:53:45 +0800</pubDate><description><![CDATA[前言
跟着黄轶大神学习的 vue，做一些简单记录。
&lt;div id="app"&gt;
  {{ message }}
&lt;/div&gt;


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})


流程图

步骤
1 初始化
位置：
vue/src/platforms/web/entry-runtime-with-compiler.js
vue/src/platforms/web/runtim]]></description><category></category></item><item><title><![CDATA[vue2源码学习-数据驱动]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/123615619</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/123615619</guid><author>wang_kai_7</author><pubDate>Sun, 20 Mar 2022 16:30:17 +0800</pubDate><description><![CDATA[跟着黄轶大神学习vue2源码，这里是自己的一些学习笔记]]></description><category></category></item><item><title><![CDATA[vite预构建源码梳理]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/119717274</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/119717274</guid><author>wang_kai_7</author><pubDate>Sun, 15 Aug 2021 18:04:35 +0800</pubDate><description><![CDATA[对于“为什么要进行依赖预构建?"这个问题vite 文档已经解释的很清楚了，那么预构建大概的流程是什么样的呢？
启动预构建
从文档中我们知道在服务启动前会进行预构建，对应源码位置在src/node/server/index.ts,预构建的函数名是optimizeDeps
...
const runOptimize = async () =&gt; {
    if (config.cacheDir) {
      server._isRunningOptimizer = true;
      try {
]]></description><category></category></item><item><title><![CDATA[vite源码梳理]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/118860356</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/118860356</guid><author>wang_kai_7</author><pubDate>Sat, 17 Jul 2021 18:01:42 +0800</pubDate><description><![CDATA[简介
vite 一共有dev | build | optimize | preview四种命令，文章对 vite 整个流程做了梳理，对于dev | build的主要步骤做了简答的拆分，便于大家对 vite 源码形成一个整体的认识，有不对的地地方欢迎大家指正。
启动
vite 项目默认的两条命令npm run serve npm run build都是启动了 vite 命令，打开/node_modules/.bin目录,找到vite文件，发现其最主要的流程就是执行start函数，加载 node/cli 文件
]]></description><category></category></item><item><title><![CDATA[vite2 + vue3全家桶来了]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/117969586</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/117969586</guid><author>wang_kai_7</author><pubDate>Wed, 16 Jun 2021 23:32:23 +0800</pubDate><description><![CDATA[前言
为了学习vite和熟悉vue3语法，做了这个仿网易云音乐的h5，欢迎大家的讨论。
预览效果

地址

在线访问地址： online
git地址： vite-demo

技术栈

vue3 + vue-router4 + vuex4
vant3 (ui框架)
typescript

目录结构

├── README.md
├── dist
│   ├── assets
│   ├── favicon.ico
│   └── index.html
├── hosts
├── index.html
├── ]]></description><category></category></item><item><title><![CDATA[vue组件间数据传递（provide/inject & $attrs/$listeners）]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/116990801</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/116990801</guid><author>wang_kai_7</author><pubDate>Tue, 18 May 2021 15:22:04 +0800</pubDate><description><![CDATA[vue组件间数据传递（provide/inject &amp; $attrs/$listeners）前言provide / inject使用场景（多级组件间传值，以element-ui设计为例）自己实现（props / $emit）element-ui 实现自己实现(provide / inject)看下vue官网的介绍provide / inject 源码\$attrs / \$listeners场景（二次封装组件）自己实现(props / $emit)vue官网介绍 \$attrs /  \$liste]]></description><category></category></item><item><title><![CDATA[windows环境下使用nvm初体验]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/102745619</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/102745619</guid><author>wang_kai_7</author><pubDate>Fri, 25 Oct 2019 17:03:34 +0800</pubDate><description><![CDATA[了解
名称：nvm即node.js version management （node包管理工具）
用途：电脑上有多个node版本时，需进行版本的管理
注意：nvm只适用于linux, 因此在windows上我们需要使用nvm-windows（至于两者之间的区别大家有兴趣可以去探索一下，我只知道两者之间并没有关系，并不是简单移植，但作用是一样的）
安装
网上的相关教程很多，我参考的是nvm安装
no...]]></description><category></category></item><item><title><![CDATA[vue练手项目实战]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/90640618</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/90640618</guid><author>wang_kai_7</author><pubDate>Tue, 28 May 2019 15:39:02 +0800</pubDate><description><![CDATA[vue中文社区的实现
## 说明
使用vuejs中文社区提供的api实现整个社区
vuejs中文社区
项目地址
安装方式
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run...]]></description><category></category></item><item><title><![CDATA[尝试实现vue分页组件，并发布npm包]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/90270404</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/90270404</guid><author>wang_kai_7</author><pubDate>Thu, 16 May 2019 19:34:29 +0800</pubDate><description><![CDATA[原文写在https://juejin.im/post/5cd80c006fb9a0322f7ca945了，欢迎大家参考
]]></description><category></category></item><item><title><![CDATA[vue-router新增参数或者修改原有参数]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/89603612</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/89603612</guid><author>wang_kai_7</author><pubDate>Sat, 27 Apr 2019 16:41:22 +0800</pubDate><description><![CDATA[vue-router 修改或添加新参数
上面是我卸载掘金的解决方法以及整个思路，仅供参考和讨论

]]></description><category></category></item><item><title><![CDATA[原生js实现懒加载效果]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/88759543</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/88759543</guid><author>wang_kai_7</author><pubDate>Sat, 23 Mar 2019 13:20:09 +0800</pubDate><description><![CDATA[demo
view
阅览
图片地址
参考

关于懒加载的实践部分主要参考原生js实现图片懒加载（lazyLoad） - 天之蓝源的文章 - 知乎
关于节流部分的使用主要参考的是JS简单实现防抖和节流

说明

本次懒加载实现主要使用getBoundingClientRect() 这个api
throttle 函数两个都可以用
data-default 用来判断是否加载过了


...]]></description><category></category></item><item><title><![CDATA[冒泡、选择、归并、快速、堆排序JavaScript实现]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/88368788</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/88368788</guid><author>wang_kai_7</author><pubDate>Sat, 09 Mar 2019 17:23:16 +0800</pubDate><description><![CDATA[在学习《学习JavaScript数据结构与算法》的过程中，结合书中的思路实现了大部分的实例，这一部分是关于排序的算法：

地址：常用排序

同时还有其他部分的实现：

地址：栈、队列、字典、树等
...]]></description><category></category></item><item><title><![CDATA[nodejs可以用来做什么]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/88286429</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/88286429</guid><author>wang_kai_7</author><pubDate>Thu, 07 Mar 2019 09:52:09 +0800</pubDate><description><![CDATA[本文属于转载，原文地址：https://blog.youkuaiyun.com/xllily_11/article/details/50482468

Node.JS&amp;nbsp;学习路线图






　　从零开始nodejs系列文章， 将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的 Javascript引擎。chrome浏...]]></description><category></category></item><item><title><![CDATA[webpack-dev-server 配置服务器外部（内网）可以访问]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/86287326</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/86287326</guid><author>wang_kai_7</author><pubDate>Fri, 11 Jan 2019 09:34:08 +0800</pubDate><description><![CDATA[webpack-dev-server官网的说明是：配置host， 如下：



我自己的相关配置如下：


// webpack.config.js
devServer: {
    port: 8888,
    host: '0.0.0.0
}

// 命令行中
webpack --host 0.0.0.0

然后发现访问失败，但是访问：localhost:8888和127.0.0.1:888...]]></description><category></category></item><item><title><![CDATA[一个备忘录/todolist]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/85038302</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/85038302</guid><author>wang_kai_7</author><pubDate>Sun, 16 Dec 2018 16:58:57 +0800</pubDate><description><![CDATA[网页预览

version1

version2

是根据用户实现的

代码地址：github

功能描述

version1 version2 实现的效果相同，不同点在于version2中加入了：

本地保存（localstorage）
	模块化（es6模块化）
	响应式布局
涉及到的知识

bind/apply/call的区别
	弹出框的设计
	原生js动画的实现
	js原始值和引用值的区分
...]]></description><category></category></item><item><title><![CDATA[关于js addEventListener传参不能被识别的问题]]></title><link>https://blog.youkuaiyun.com/wang_kai_7/article/details/84956888</link><guid>https://blog.youkuaiyun.com/wang_kai_7/article/details/84956888</guid><author>wang_kai_7</author><pubDate>Tue, 11 Dec 2018 16:21:56 +0800</pubDate><description><![CDATA[问题描述

想要把全局定义的变量传递给addEventListener，虽然知道可以不用传参，直接可以获取，但是想通过参数传递试一下，于是出现了问题

代码


var temp = {};
temp.index = 0;
document.getElementById('d').addEventListener('click', function (e, temp) {
  console.lo...]]></description><category></category></item></channel></rss>