![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
文章平均质量分 88
wang_kai_7
这个作者很懒,什么都没留下…
展开
-
构建过程:从源码到dist文件
目前实现从源码到可用的静态文件,我们都是借助打包工具实现的,目前用的比较多的是, 那么以上问题也可以描述为“构建工具是如何进行构建的?”, 本文主要以为例,对以上问题进行阐述,需要说明的是v0.34.9版本的rollup功能基本完善,后续的版本是在现有基础上的迭代,原理是一样的文章关注的是实现构建功能的核心流程,不涉及插件、钩子等概念,因此没用过rollup也是不要紧的看了https://mp.weixin.qq.com/s/JndBu8maXC-f9r1Ghw8kgg 此篇文章之后,我发现。原创 2022-12-11 19:21:16 · 1075 阅读 · 1 评论 -
vue2源码学习-数据驱动
跟着黄轶大神学习vue2源码,这里是自己的一些学习笔记原创 2022-03-20 16:30:17 · 1054 阅读 · 0 评论 -
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 · 1681 阅读 · 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 · 416 阅读 · 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 · 855 阅读 · 3 评论 -
windows环境下使用nvm初体验
了解名称:nvm即node.js version management (node包管理工具)用途:电脑上有多个node版本时,需进行版本的管理注意:nvm只适用于linux, 因此在windows上我们需要使用nvm-windows(至于两者之间的区别大家有兴趣可以去探索一下,我只知道两者之间并没有关系,并不是简单移植,但作用是一样的)安装网上的相关教程很多,我参考的是nvm安装no...原创 2019-10-25 17:03:34 · 351 阅读 · 0 评论 -
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 · 8429 阅读 · 0 评论 -
冒泡、选择、归并、快速、堆排序JavaScript实现
在学习《学习JavaScript数据结构与算法》的过程中,结合书中的思路实现了大部分的实例,这一部分是关于排序的算法:地址:常用排序同时还有其他部分的实现:地址:栈、队列、字典、树等...原创 2019-03-09 17:23:16 · 156 阅读 · 0 评论 -
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 · 24171 阅读 · 0 评论 -
原生js实现懒加载效果
demoview阅览图片地址参考关于懒加载的实践部分主要参考原生js实现图片懒加载(lazyLoad) - 天之蓝源的文章 - 知乎关于节流部分的使用主要参考的是JS简单实现防抖和节流说明本次懒加载实现主要使用getBoundingClientRect() 这个apithrottle 函数两个都可以用data-default 用来判断是否加载过了...原创 2019-03-23 13:20:09 · 554 阅读 · 0 评论 -
vue-router新增参数或者修改原有参数
vue-router 修改或添加新参数上面是我卸载掘金的解决方法以及整个思路,仅供参考和讨论原创 2019-04-27 16:41:22 · 5541 阅读 · 0 评论 -
尝试实现vue分页组件,并发布npm包
原文写在https://juejin.im/post/5cd80c006fb9a0322f7ca945了,欢迎大家参考原创 2019-05-16 19:34:29 · 188 阅读 · 0 评论 -
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 · 5135 阅读 · 1 评论 -
关于js addEventListener传参不能被识别的问题
问题描述想要把全局定义的变量传递给addEventListener,虽然知道可以不用传参,直接可以获取,但是想通过参数传递试一下,于是出现了问题代码var temp = {};temp.index = 0;document.getElementById('d').addEventListener('click', function (e, temp) { console.lo...原创 2018-12-11 16:21:56 · 2062 阅读 · 1 评论 -
tab(选项卡)
模仿layui效果图如下:两者除了css方面不同,一个用border属性实现,一个用伪元素实现,其他逻辑都相同,在readme.md中有详细介绍在线预览:demo1.html在线预览:demo2.html代码及思路地址:代码及思路思路截图: ...原创 2018-10-11 15:45:40 · 826 阅读 · 1 评论 -
写了一个模仿网易云音乐APP轮播图的小demo
效果图:放在了github上,里面有比较详细的注释和思路的转变效果演示:效果演示代码地址:l轮播图代码地址实现功能:定时切换(3s) 鼠标放上去停止切换 点击左右图片进行图片切换 鼠标放上去显示向左向右按钮,鼠标移下来再次隐藏 点击向左向右按钮进行相应切换 鼠标放到下方的线上,停止定时切换,并进行相应的切换 鼠标离开下方的线,重新开始定时切换 ...原创 2018-09-27 11:17:55 · 2442 阅读 · 5 评论 -
一个水平、垂直的导航demo
模仿layui做的水平和垂直导航代码地址:代码地址阅览地址:预览页面gif:原创 2018-10-06 17:20:16 · 1316 阅读 · 0 评论 -
模仿天猫图片放大demo
演示网址代码实例用到的知识和思路也写在了github里:网址为:https://github.com/wkstudy/smallplugs/blob/master/picEnlarge/README.md欢迎探讨原创 2018-09-29 17:38:10 · 304 阅读 · 0 评论 -
完成类似于jqueryui 缩放组件
效果图:代码地址:代码地址演示页面:demo写demo过程中用到的knowledge、关键思路和犯的error:记录md进行的判断包括:1. 阻止文本被选中2. 鼠标的在不同边时的样式3. 改变大小4. 子元素不能超过父元素 ...原创 2018-11-09 12:05:18 · 161 阅读 · 0 评论 -
javascript数据结构实现(栈和队列)
根据《学习JavaScript数据结构与算法》一书实现。除了一般栈、队列的实现,还有优先队列、循环队列(以击鼓传花游戏为例)的实现。均有es5/es6的语法传送地址:栈队列...原创 2018-11-19 12:02:08 · 178 阅读 · 0 评论 -
折叠面板小插件
效果图:在线页面:页面预览代码地址:https://github.com/wkstudy/smallplugs/tree/master/panel说明:只需保证页面最多有一个面板是显示状态就行了原创 2018-11-18 16:31:55 · 541 阅读 · 0 评论 -
进度条实现
效果图:网页预览:demo代码地址:地址写的过程中遇到的一些问题等也写在这里原创 2018-11-24 18:43:11 · 249 阅读 · 0 评论 -
实现JavaScript数据结构链表
模仿《学习JavaScript数据结构与算法》一书, 包含单向链表和双向链表 有es5、es6语法 经过测试代码地址:单向链表:单向链表(一般链表)双向链表:双向链表可能有错误,欢迎指正...原创 2018-11-24 22:18:24 · 176 阅读 · 0 评论 -
日历组件(模仿jqueryui)
效果图:网页预览:demo代码地址:代码地址实现功能:改变日期(增大、减少) 显示当前日期(不同颜色标识) 选择日期原创 2018-11-26 21:59:22 · 1284 阅读 · 2 评论 -
学习《学习JavaScript数据结构与算法(第2版)》一书
完成第七章字典和散列表部分代码的编写代码地址: 字典:dictionary 散列表: hashtable代码和书中的实现方式不一定一样,有自己的思路 将写代码过程中的一些知识点和自己的想法也记录了下来...原创 2018-12-02 20:33:28 · 430 阅读 · 0 评论 -
JavaScript数据结构 集合
根据《学习JavaScript数据结构与算法》一书学习传送地址: 地址内容对对集合的操作 除了基本的添加、删除方法外,还有补集、子集、并集、交集等方法 可能有错误,欢迎 发现问题的眼睛...原创 2018-11-28 09:37:40 · 106 阅读 · 0 评论 -
一个备忘录/todolist
网页预览version1version2是根据用户实现的代码地址:github功能描述version1 version2 实现的效果相同,不同点在于version2中加入了:本地保存(localstorage) 模块化(es6模块化) 响应式布局涉及到的知识bind/apply/call的区别 弹出框的设计 原生js动画的实现 js原始值和引用值的区分...原创 2018-12-16 16:58:57 · 470 阅读 · 0 评论 -
解决bootstrap中大于1200px的显示问题
bootstrap默认超过1200px的宽屏,container类的宽度为(1140px + @grid-gutter-width),可以通过定制bootstrap来进行修改。原创 2017-12-04 18:05:59 · 8063 阅读 · 0 评论