小呀嘛麻-CSDN博客

原创 Vue3.0项目工程升级记录

Vue3 Beta 版出来半年多了，估摸着相关 loader 及 plugin 应该跟着升级的差不多了，于是最近开始琢磨着开始上手写几个demo。在静态页面写的时候都没啥问题，一放到 Webpack 工程里面跑，各种报错，简直让人头大 T_T秃头警告，不过最终还是跑起来了~~~喜大普奔以下总结了这两天在 Webpack 配置时遇到的几个问题依赖安装 vue 和相关插件、loader 都安装最新版本 @next cnpm/npm i vue@next vuex@next vue-router@n

2020-12-17 18:01:36 450

原创 Vue.$nextTick 原理

$nextTick 方法的具体实现，依赖于浏览器对于异步操作的一个处理机制，就是 Event Loop 事件循环中的 MarcoTask 和 MicroTask 。浏览器的事件循环（Event Loop） /* */ var callbacks = []; var pending = false; function flushCallbacks() { pending = false; var copies = callbacks.slice(0); callbacks.le

2020-11-25 17:11:08 217

原创浏览器的事件循环（Event Loop）

Event Loop （事件循环）是一个很重要的概念，指的是计算机系统的一种运行机制。 JavaScript 采用的就是这种机制，来解决单线程运行带来的一些问题。 JavaScript 是一种单线程语言，所有任务都是在一个线程上执行，如果一个任务等待时间长，会在成页面“假死”。如果采用多线程，会占用多倍的系统资源，也闲置多倍的资源。 Event Loop 就是为了解决这个问题提出的。 “Event Loop是一个程序结构，用于等待和发送消息和事件。（a programming construct that

2020-11-25 16:41:37 369

原创 Promise 扩展学习

上一篇文章学习了 Promise 的基本使用方法后，这一章进行拓展练习。使用 reject 而不是 throw Promise 的构造函数和被 then 方法调用的函数基本上是在 try...catch 代码块中执行的，所以在这些代码中及时使用 throw ，程序本省也不会因为异常而终止。如果在 Promise 中使用 throw ，会被 try...catch 捕获到，最终 promise 对象也会变为 rejected 状态。 var promise = new Promise((resolve,

2020-08-26 11:46:30 300

原创 ES6 Promise 的基本用法

标语平时积累的零碎的知识，要达到灵活应用的程度，还需要将其系统化。注：此为记录贴。什么是 Promise Promise 是抽象异步处理对象及对齐做各种操作的组件。 getAsync("fileA.txt", function(error, result){ if(error){// 取得失败时的处理 throw error; } // 取得成功时的处理 }); Node.js 在处理异步时，回调函数中的第一个参数一定是 error ，但是怎么操作 er.

2020-08-21 18:37:05 281

原创使用Webpack解析Markdown文件

传送门 Github地址 M-UI 搭建一个简单的前端组件库可能有人要问，什么是 Markdown 文件（传送门：Markdown 教程）？为什么这里要讲到如何解析 Markdown 文件？我们接着往下看： Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。注意，Markdown 可以导出 HTML ，我们在网页中需要展示代码，如果我们自己往文件中填入 pre、code 内容，需要消耗大量时间和代码，而 Markdown 文件已经提供了这种转换.

2020-08-18 14:36:46 2275

原创搭建一个简单的前端组件库

平时开发时大都会用到组件库，因为用组件库确实能节省不少开发时间，而且第一次使用的时候就觉得好好用，当时就想这要不自己也写一个出来。虽然拖了一年之久，好歹也是开始了，现在记录下开发历程~ 组件注册我们先考虑功能，自定义的组件要在全局都能使用，而且也要支持按需引入。注册 Vue.js 全局组件: Vue.component('my-component-name', { /* ... */ }) 注册 Vue.js 全局方法： Vue.prototype.$XXX = XXX; 安装 Vue.js 插

2020-08-06 17:22:20 944

原创手势密码解锁插件

最近一个移动端的页面用到了手势密码，所以就花了点时间封装了一个插件，使用的是canvas来进行画图，比起操作dom来要流畅，文件地址放到了GitHub库里： https://github.com/Mollyll/plugins/tree/master/lock 示例： var unlockFlag = !1; var lock = new Lock({ strokeColor:...

2019-04-08 16:40:24 1125

原创 Webpack v3 -> v4 大家一起找不同

继之前的webpack3的简单应用，这篇来讲webpack的升级，讲讲我在升级中遇到的不同。。 Webpack是我们进行前端开发时常用的打包工具之一，因此，当webpack出了4之后，我们还是要跟上它升级的步伐，跟着用起来，不然Webpack要是升到了5，一下跨两个版本，差别还是挺大的。所以我们先升一下v4，找找不同。 webpack的不同要升级到v4，首先肯定package不同，我们在项目中会...

2019-03-09 15:08:03 950

原创 GitHub for Mac

GitHub Installation Manual for Mac（GitHub在Mac上的简单使用）这段时间有空写一些个人项目，记录一下GitHub for Mac的使用方法，也是防止自己忘记准备工作去GitHub官网下载GitHub for Mac，按照指示在本地进行安装 Official Website：https://desktop.github.com/ 你需要在GitHub注册...

2019-02-28 14:30:19 747

原创 Webpack3 + Vue2搭建一个简单的开发框架

全局环境下安装node以及npm 去Node官网下载最新稳定版，一般node安装完成后会自带npm，但是需要检查一下npm的版本 Windows升级命令 npm i -g npm@latest Mac升级命令 sudo npm i -g npm@latest 安装完成后，检查一下版本信息 node -v npm -v 初始化目录除了使用npm初始化，也可以选择vue-cli快速创建webp...

2019-02-27 16:11:22 530

原创微信小程序的学习笔记--（一）iconfont的引入

本人刚开始接触微信小程序的开发，写博客在于记录自己的学习历程，也希望各位大神能够指导一下小白*^_^* 1、微信小程序开发的准备工作开发微信小程序前，首先去微信小程序官网下载微信小程序开发工具，官网地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，安装完成后，要进行后续项目的开发，需要申请一个...

2018-10-24 16:48:26 1622