- 博客(33)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 构建过程：从源码到dist文件
目前实现从源码到可用的静态文件，我们都是借助打包工具实现的，目前用的比较多的是, 那么以上问题也可以描述为“构建工具是如何进行构建的？”， 本文主要以为例，对以上问题进行阐述，需要说明的是v0.34.9版本的rollup功能基本完善，后续的版本是在现有基础上的迭代，原理是一样的文章关注的是实现构建功能的核心流程，不涉及插件、钩子等概念，因此没用过rollup也是不要紧的看了https://mp.weixin.qq.com/s/JndBu8maXC-f9r1Ghw8kgg 此篇文章之后，我发现。
2022-12-11 19:21:16
1013
1
原创 vite1.x 热更新(HMR)的实现原理
将近一年前自己尝试阅读vite源码（2.x），虽然也有些收获但整体并没有到达我的预期，对于vite也是停留在一知半解的程度上。最近想重新开始学习vite，但回顾之前的学习历程，感觉不太想继续之前的方式，自己的水平有限，读起来太费劲，经常在不同的函数调用间迷失自己，最后草草收场。想起之前看文章很多人是看代码的最初实现版本的，于是也想尝试一下，选择阅读vite的最初版本分支1.x，效果是明显比之前好的，后续我觉得再阅读最新版本的代码的话是有很大帮助的。
2022-10-05 16:18:25
1922
原创 简版vue响应式实现
前言此为自己学习vue源码响应式部分的一个小demo，按照自己的理解实现改变变量a,变量b也跟着改变的效果，整体实现较为简单，不考虑任何复杂场景，如有问题请大家指正效果data.age改变后，comouted.computedB的值也改变了node index.js// hello, computedb is 22// hello, computedb is 59代码可以直接复制到浏览器控制台运行// 发布者class Observer { constructor() {
2022-04-15 12:55:45
915
原创 vue2学习笔记-组件化
前言跟着黄轶大神学习的 vue，做一些简单记录。import Vue from 'vue'import App from './App.vue'var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h(App)})流程图步骤1 $mount 之前这里的逻辑和数据驱动中的大致逻辑是一样的，都是在做初始化，到了下一步在会有所区别2 $mount位置：vue/src/core
2022-04-15 12:54:49
703
原创 vue2学习笔记-数据驱动
前言跟着黄轶大神学习的 vue，做一些简单记录。<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})流程图步骤1 初始化位置：vue/src/platforms/web/entry-runtime-with-compiler.jsvue/src/platforms/web/runtim
2022-04-15 12:53:45
574
原创 vite预构建源码梳理
对于“为什么要进行依赖预构建?"这个问题vite 文档已经解释的很清楚了，那么预构建大概的流程是什么样的呢？启动预构建从文档中我们知道在服务启动前会进行预构建，对应源码位置在src/node/server/index.ts,预构建的函数名是optimizeDeps...const runOptimize = async () => { if (config.cacheDir) { server._isRunningOptimizer = true; try {
2021-08-15 18:04:35
4759
原创 vite源码梳理
简介vite 一共有dev | build | optimize | preview四种命令，文章对 vite 整个流程做了梳理，对于dev | build的主要步骤做了简答的拆分，便于大家对 vite 源码形成一个整体的认识，有不对的地地方欢迎大家指正。启动vite 项目默认的两条命令npm run serve npm run build都是启动了 vite 命令，打开/node_modules/.bin目录,找到vite文件，发现其最主要的流程就是执行start函数，加载 node/cli 文件
2021-07-17 18:01:42
1494
5
原创 vite2 + vue3全家桶来了
前言为了学习vite和熟悉vue3语法，做了这个仿网易云音乐的h5，欢迎大家的讨论。预览效果地址在线访问地址： onlinegit地址： vite-demo技术栈vue3 + vue-router4 + vuex4vant3 (ui框架)typescript目录结构├── README.md├── dist│ ├── assets│ ├── favicon.ico│ └── index.html├── hosts├── index.html├──
2021-06-16 23:32:23
388
2
原创 vue组件间数据传递（provide/inject & $attrs/$listeners）
vue组件间数据传递（provide/inject & $attrs/$listeners）前言provide / inject使用场景（多级组件间传值，以element-ui设计为例）自己实现（props / $emit）element-ui 实现自己实现(provide / inject)看下vue官网的介绍provide / inject 源码\$attrs / \$listeners场景（二次封装组件）自己实现(props / $emit)vue官网介绍 \$attrs / \$liste
2021-05-18 15:22:04
611
3
原创 windows环境下使用nvm初体验
了解名称：nvm即node.js version management （node包管理工具）用途：电脑上有多个node版本时，需进行版本的管理注意：nvm只适用于linux, 因此在windows上我们需要使用nvm-windows（至于两者之间的区别大家有兴趣可以去探索一下，我只知道两者之间并没有关系，并不是简单移植，但作用是一样的）安装网上的相关教程很多，我参考的是nvm安装no...
2019-10-25 17:03:34
319
原创 vue练手项目实战
vue中文社区的实现## 说明使用vuejs中文社区提供的api实现整个社区vuejs中文社区项目地址安装方式# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run...
2019-05-28 15:39:02
5114
1
原创 尝试实现vue分页组件，并发布npm包
原文写在https://juejin.im/post/5cd80c006fb9a0322f7ca945了，欢迎大家参考
2019-05-16 19:34:29
182
原创 原生js实现懒加载效果
demoview阅览图片地址参考关于懒加载的实践部分主要参考原生js实现图片懒加载（lazyLoad） - 天之蓝源的文章 - 知乎关于节流部分的使用主要参考的是JS简单实现防抖和节流说明本次懒加载实现主要使用getBoundingClientRect() 这个apithrottle 函数两个都可以用data-default 用来判断是否加载过了...
2019-03-23 13:20:09
525
原创 冒泡、选择、归并、快速、堆排序JavaScript实现
在学习《学习JavaScript数据结构与算法》的过程中，结合书中的思路实现了大部分的实例，这一部分是关于排序的算法：地址：常用排序同时还有其他部分的实现：地址：栈、队列、字典、树等...
2019-03-09 17:23:16
129
转载 nodejs可以用来做什么
本文属于转载，原文地址：https://blog.csdn.net/xllily_11/article/details/50482468Node.JS 学习路线图 从零开始nodejs系列文章， 将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的 Javascript引擎。chrome浏...
2019-03-07 09:52:09
24081
原创 webpack-dev-server 配置服务器外部（内网）可以访问
webpack-dev-server官网的说明是：配置host， 如下：我自己的相关配置如下：// webpack.config.jsdevServer: { port: 8888, host: '0.0.0.0}// 命令行中webpack --host 0.0.0.0然后发现访问失败，但是访问：localhost:8888和127.0.0.1:888...
2019-01-11 09:34:08
8266
原创 一个备忘录/todolist
网页预览version1version2是根据用户实现的代码地址：github功能描述version1 version2 实现的效果相同，不同点在于version2中加入了：本地保存（localstorage） 模块化（es6模块化） 响应式布局涉及到的知识bind/apply/call的区别 弹出框的设计 原生js动画的实现 js原始值和引用值的区分...
2018-12-16 16:58:57
437
原创 关于js addEventListener传参不能被识别的问题
问题描述想要把全局定义的变量传递给addEventListener，虽然知道可以不用传参，直接可以获取，但是想通过参数传递试一下，于是出现了问题代码var temp = {};temp.index = 0;document.getElementById('d').addEventListener('click', function (e, temp) { console.lo...
2018-12-11 16:21:56
2014
1
原创 学习《学习JavaScript数据结构与算法（第2版）》一书
完成第七章字典和散列表部分代码的编写代码地址： 字典：dictionary 散列表： hashtable代码和书中的实现方式不一定一样，有自己的思路 将写代码过程中的一些知识点和自己的想法也记录了下来...
2018-12-02 20:33:28
401
原创 JavaScript数据结构 集合
根据《学习JavaScript数据结构与算法》一书学习传送地址： 地址内容对对集合的操作 除了基本的添加、删除方法外，还有补集、子集、并集、交集等方法 可能有错误，欢迎 发现问题的眼睛...
2018-11-28 09:37:40
101
原创 日历组件（模仿jqueryui）
效果图：网页预览：demo代码地址：代码地址实现功能：改变日期（增大、减少） 显示当前日期（不同颜色标识） 选择日期
2018-11-26 21:59:22
1251
2
原创 实现JavaScript数据结构链表
模仿《学习JavaScript数据结构与算法》一书， 包含单向链表和双向链表 有es5、es6语法 经过测试代码地址：单向链表：单向链表（一般链表）双向链表：双向链表可能有错误，欢迎指正...
2018-11-24 22:18:24
139
原创 javascript数据结构实现（栈和队列）
根据《学习JavaScript数据结构与算法》一书实现。除了一般栈、队列的实现，还有优先队列、循环队列（以击鼓传花游戏为例）的实现。均有es5/es6的语法传送地址：栈队列...
2018-11-19 12:02:08
150
原创 折叠面板小插件
效果图：在线页面：页面预览代码地址：https://github.com/wkstudy/smallplugs/tree/master/panel说明：只需保证页面最多有一个面板是显示状态就行了
2018-11-18 16:31:55
524
原创 完成类似于jqueryui 缩放组件
效果图：代码地址：代码地址演示页面：demo写demo过程中用到的knowledge、关键思路和犯的error：记录md进行的判断包括：1. 阻止文本被选中2. 鼠标的在不同边时的样式3. 改变大小4. 子元素不能超过父元素 ...
2018-11-09 12:05:18
151
原创 tab(选项卡)
模仿layui效果图如下：两者除了css方面不同，一个用border属性实现，一个用伪元素实现，其他逻辑都相同,在readme.md中有详细介绍在线预览：demo1.html在线预览：demo2.html代码及思路地址：代码及思路思路截图： ...
2018-10-11 15:45:40
796
1
原创 模仿天猫图片放大demo
演示网址代码实例用到的知识和思路也写在了github里：网址为：https://github.com/wkstudy/smallplugs/blob/master/picEnlarge/README.md欢迎探讨
2018-09-29 17:38:10
274
原创 写了一个模仿网易云音乐APP轮播图的小demo
效果图：放在了github上，里面有比较详细的注释和思路的转变效果演示：效果演示代码地址:l轮播图代码地址实现功能：定时切换（3s） 鼠标放上去停止切换 点击左右图片进行图片切换 鼠标放上去显示向左向右按钮，鼠标移下来再次隐藏 点击向左向右按钮进行相应切换 鼠标放到下方的线上，停止定时切换，并进行相应的切换 鼠标离开下方的线，重新开始定时切换 ...
2018-09-27 11:17:55
2418
5
原创 解决bootstrap中大于1200px的显示问题
bootstrap默认超过1200px的宽屏，container类的宽度为(1140px + @grid-gutter-width)，可以通过定制bootstrap来进行修改。
2017-12-04 18:05:59
7986
空空如也
bootstrap使用修改样式
2017-12-02
TA创建的收藏夹 TA关注的收藏夹
TA关注的人