10 年开发者，每周帮你试一个 AI 新玩法https://mmailab.com/zh-cnhttps://mmailab.com/posts/chu-tan-han-shu-jie-liu-he-han-shu-fang-douyi-xian/https://mmailab.com/posts/chu-tan-han-shu-jie-liu-he-han-shu-fang-douyi-xian/最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚至是奔溃，那么我们如何解决这个问题呢，**...Sun, 30 Jul 2017 00:00:00 GMThttps://mmailab.com/posts/chu-tan-mo-kuai-xi-tong-shen-me-shi-mo-kuai/https://mmailab.com/posts/chu-tan-mo-kuai-xi-tong-shen-me-shi-mo-kuai/我们在日常的开发中，经常使用诸如webpack,requireJS,seaJS 等前端资源模块化管理工具，这些工具让我们在开发的过程中，基于"模块"进行代码的编写。那么到底什么是模块化呢？Tue, 04 Jul 2017 00:00:00 GMThttps://mmailab.com/posts/chu-tan-mo-kuai-xi-tong02ru-he-rang-mo-kuai-zhi-ch/https://mmailab.com/posts/chu-tan-mo-kuai-xi-tong02ru-he-rang-mo-kuai-zhi-ch/前段时间在看一些前端模块化方面的知识，现在自己就来写一个符合amd／cmd 和commonjs标准的模块。在文中会穿插一些AMD／CMD，commonjs的基础知识，主要是为了让自己复习一下。了解的同学们可以直接略过。Sat, 10 Feb 2018 00:00:00 GMThttps://mmailab.com/posts/chu-tan-npm-jiao-ben/https://mmailab.com/posts/chu-tan-npm-jiao-ben/npm脚本在我们日常工作中用到的还是非常多的，如果大家用webpack作为打包工具的话，相信npm run dev/bulid 之类的命令大家一定都使用的非常多了。那么为什么只需要输入npm run dev就能开启一个虚拟服务器？为什...Fri, 23 Jun 2017 00:00:00 GMThttps://mmailab.com/posts/chu-tan-xiang-ying-shi-bu-ju-yi-xiao-xiang-mu-wei/https://mmailab.com/posts/chu-tan-xiang-ying-shi-bu-ju-yi-xiao-xiang-mu-wei/最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小...Fri, 07 Jul 2017 00:00:00 GMThttps://mmailab.com/posts/chu-tanflex-bu-ju/https://mmailab.com/posts/chu-tanflex-bu-ju/flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。也可以比较灵活的处于容器的的某一位置上。所以flex的应用场景很多，比如我们碰到需要元素居中的应用...Thu, 24 Aug 2017 00:00:00 GMThttps://mmailab.com/posts/chu-tanperformance-api/https://mmailab.com/posts/chu-tanperformance-api/前段时间在读Vue源码的时候，发现了这样一个API——Window.Performance。当时完全不知道这是什么？在查阅了一些资料后，大致明白了这个API的作用。下面一起来看看什么是Performance。Wed, 01 Aug 2018 00:00:00 GMThttps://mmailab.com/posts/clean-architecture-miniprogram/https://mmailab.com/posts/clean-architecture-miniprogram/核心小程序业务架构升级实践：从耦合严重的组件架构，到基于 DDD 和分层架构的整洁架构演进过程。Sat, 18 Feb 2023 00:00:00 GMThttps://mmailab.com/posts/cong-vue2-ji-cheng-ts-lai-kan-zhuang-shi-qi-zai-qi/https://mmailab.com/posts/cong-vue2-ji-cheng-ts-lai-kan-zhuang-shi-qi-zai-qi/最近团队准备对旧的 vue2 项目进行一波升级，其中很重要的一步就牵扯到 vue2 项目和 ts 的集成。Sun, 09 Jun 2019 00:00:00 GMThttps://mmailab.com/posts/css-xiang-dui-ding-wei/https://mmailab.com/posts/css-xiang-dui-ding-wei/相对定位：从这个名字我们就可以知道，这是一种相对某个元素定位的一个方法。Wed, 09 Mar 2016 00:00:00 GMThttps://mmailab.com/posts/dai-ni-quan-mian-le-jie-git-xi-lie-02-chang-yong/https://mmailab.com/posts/dai-ni-quan-mian-le-jie-git-xi-lie-02-chang-yong/上篇文章主要给大家介绍了 Git 的内部原理，整体比较偏理论。那本篇文章则主要会结合大家日常使用 Git 的 10 个高频场景，给大家讲解 Git 的一些实用技巧，那也希望大家在看完本篇文章之后能把一些技巧应用到实际的工作中，帮助大家...Tue, 09 Mar 2021 00:00:00 GMThttps://mmailab.com/posts/dai-ni-quan-mian-le-jie-git-xi-lie-03-git-chang-y/https://mmailab.com/posts/dai-ni-quan-mian-le-jie-git-xi-lie-03-git-chang-y/该系列的前面两篇文章主要讲了 Git 相关原理和 Git 常见的一些操作，接下来这篇文章给大家介绍一下业界常见的 Git 工作流。Thu, 15 Apr 2021 00:00:00 GMThttps://mmailab.com/posts/docker-quick-start/https://mmailab.com/posts/docker-quick-start/以将一个 Node.js 应用装入 Docker 为例，介绍 Docker 的核心概念、镜像构建、容器运行以及整体架构。Tue, 08 Mar 2022 00:00:00 GMThttps://mmailab.com/posts/dynamic-form/https://mmailab.com/posts/dynamic-form/随着各个企业数字化转型的不断推进，越来越多的企业开始重视业务流程自动化，其中表单处理是一个重要和复杂的环节。传统的表单处理方式通常需要开发人员编写大量的代码，而“动态表单”可以在无需开发人员介入的情况下，帮助企业快速地生成符合业务需求...Fri, 20 Jan 2023 00:00:00 GMThttps://mmailab.com/posts/es6-let-neng-dai-tivar-ma/https://mmailab.com/posts/es6-let-neng-dai-tivar-ma/let:声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。[let声明的定义](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statem...Tue, 16 May 2017 00:00:00 GMThttps://mmailab.com/posts/git-de-yi-xie-zui-ji-chu-cao-zuoyi-xiang-mu-wei-li/https://mmailab.com/posts/git-de-yi-xie-zui-ji-chu-cao-zuoyi-xiang-mu-wei-li/在自己刚接触git的时候，心里一直有一个疑问，那就是什么是git？git能用来干什么呢？Fri, 12 May 2017 00:00:00 GMThttps://mmailab.com/posts/ji-yi-ci-vue-xiang-mu-zhong-shi-yong-scss/https://mmailab.com/posts/ji-yi-ci-vue-xiang-mu-zhong-shi-yong-scss/在讲如何在vue项目中使用scss之前，我们先来简单了解一个概念，那就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html...Sun, 20 Aug 2017 00:00:00 GMThttps://mmailab.com/posts/ji-yi-cia-biao-qian-yang-shi-ji-cheng-de-wen-ti/https://mmailab.com/posts/ji-yi-cia-biao-qian-yang-shi-ji-cheng-de-wen-ti/我们知道，诸如font-size,color等一些属性是可以通过继承父元素得到的。那么，为什么当我们想让a标签去继承父元素的颜色时，结果却常常不能如我们所愿呢？Sat, 10 Jun 2017 00:00:00 GMThttps://mmailab.com/posts/ji-yi-ciatom-mu-lu-shu-gun-dong-tiao-shi-ling/https://mmailab.com/posts/ji-yi-ciatom-mu-lu-shu-gun-dong-tiao-shi-ling/昨天打开atom进行编码的时候，突然发现左侧目录树不能滚动了。很懵逼，不就是放假几天没怎么用它嘛？难道就闹脾气了。折腾了一小会儿，发现滚动条失灵的原因是**安装的Atom Material主题出现了问题**。（应该是该主题的一个bug...Fri, 09 Jun 2017 00:00:00 GMThttps://mmailab.com/posts/ji-yu-vue2-ji-shu-zhan-ji-cheng-ts-de-ke-xing-xing/https://mmailab.com/posts/ji-yu-vue2-ji-shu-zhan-ji-cheng-ts-de-ke-xing-xing/安装typescript和ts-loader，注意ts和ts-loader版本需要配套。由于当前技术栈的vue版本为2.5.2，建议typescript版本选择2.7.2,对应的ts-loader版本为2.0.3。Sat, 09 Mar 2019 00:00:00 GMThttps://mmailab.com/posts/kua-duan-ye-wu-zu-jian-ku-fang-an-diao-yanji-yu-h5/https://mmailab.com/posts/kua-duan-ye-wu-zu-jian-ku-fang-an-diao-yanji-yu-h5/前段时间在公司推了一套跨端组件库的方案，趁着这段时间稍微有点空把调研的过程记录下来。背景如下Thu, 03 Mar 2022 00:00:00 GMThttps://mmailab.com/posts/monorepos-dynamic-form/https://mmailab.com/posts/monorepos-dynamic-form/在实际工作中，经常会出现需要同时维护多个相互依赖项目的情况。比如 C 项目是一个底层的项目，被抽成了一个 NPM 包。而 A 项目和 B 项目都同时依赖 C 项目的代码。随着 A 项目的开发，可能要不时修改底层 C 项目的代码。那如何...Wed, 11 Aug 2021 00:00:00 GMThttps://mmailab.com/posts/new-array-1-he-undefined-yi-yang-ma/https://mmailab.com/posts/new-array-1-he-undefined-yi-yang-ma/最近在开发中碰到一个很奇怪的问题，请看下面代码Thu, 12 Apr 2018 00:00:00 GMThttps://mmailab.com/posts/ni-zhen-de-le-jiecss-xiang-su-ma/https://mmailab.com/posts/ni-zhen-de-le-jiecss-xiang-su-ma/在日常开发中，px一定是大家接触过最多的css单位，但是你真的了解px嘛？1px在屏幕中到底是多大呢？另外不知道大家有没有过下面这些疑惑:Sun, 08 Oct 2017 00:00:00 GMThttps://mmailab.com/posts/pretext/https://mmailab.com/posts/pretext/如果你最近在做 AI 相关的前端项目，大概率遇到过这个场景：Sun, 12 Apr 2026 00:00:00 GMThttps://mmailab.com/posts/qian-dan-javascript-zuo-yong-yu-de-you-xu-xing/https://mmailab.com/posts/qian-dan-javascript-zuo-yong-yu-de-you-xu-xing/我们知道，变量对于程序来说是至关重要的，如果没有变量存储和访问值，整个程序会受到限制。那么问题来了，既然程序这么需要变量，那么它到底是怎么样去存储变量和使用变量的呢？存储变量这里暂且不提，到时候会有专门一篇博客来说明这个问题。我们这次...Wed, 10 Jan 2018 00:00:00 GMThttps://mmailab.com/posts/qian-tan-es6-jie-gou-fu-zhi/https://mmailab.com/posts/qian-tan-es6-jie-gou-fu-zhi/在学习ES6新的特性解构赋值之前，我们先来看看为什么要使用解构，以前如果我们需要获取对象或者数组里面的数据，并且把它们存入数组，需要写很多代码。如下Sat, 20 May 2017 00:00:00 GMThttps://mmailab.com/posts/qian-tan-yi-xiawindow-chuang-kou-de-ge-zhong-kuan/https://mmailab.com/posts/qian-tan-yi-xiawindow-chuang-kou-de-ge-zhong-kuan/在日常开发的时候，我们常常需要用到这几个高度信息。浏览器的视口高度和宽度，浏览器的卷动高度，正文内容的总高度等等信息，我在下图中列出了在工作中最常用的几个宽度和高度信息。并在本篇文章中对各种常见宽高进行说明。Wed, 17 May 2017 00:00:00 GMThttps://mmailab.com/posts/qian-xijavascript-diao-yong-zhan/https://mmailab.com/posts/qian-xijavascript-diao-yong-zhan/大家在进行javascript开发的时候，有没有想过，我们写的代码是怎么样运行的呢？下面我们就来剖析一下代码的执行过程。Thu, 01 Mar 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie-yivue-y/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie-yivue-y/阅读Vue的源码，或者阅读一个框架的源码，了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。Fri, 27 Jul 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie02vue-go/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie02vue-go/上篇博文中说到了Vue源码的目录结构是什么样的，每个目录的作用我们应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象，所以我们在这个目录下面去寻找Vue构造函数。果然我们找到了Vue的构造函数定义。Sun, 12 Aug 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie03resolv/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie03resolv/上篇文章介绍了Vue构造函数的部分实现，当前Vue实例不是组件时，会执行mergeOptions方法。Mon, 20 Aug 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie04resolv/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie04resolv/上一篇文章中说道，resolveConstructorOptions函数要分两种情况进行说明，第一种是Ctor为基础构造器的情况，这个已经向大家介绍过了，今天这篇文章主要介绍第二种情况，Ctor是Vue.extend创建的"子类"。Sun, 02 Sep 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie05mergeo/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie05mergeo/前几篇文章中我们讲到了resolveConstructorOptions，它的主要功能是解析当前实例构造函数上的options，不太明白的同学们可以看本系列的前几篇文章。在解析完其构造函数上的options之后，需要把构造函数上的op...Wed, 12 Sep 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie06mergeo/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie06mergeo/上篇文章，我们讲到了mergeOptions的部分实现，今天接着前面的部分讲解，来看代码，如果大家觉得看讲解枯燥可以直接翻到本文的最后看mergeOptions的整个流程图。Sat, 29 Sep 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie07initpr/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie07initpr/前几篇文章中，我们主要讲了merge options的一些操作。今天我们回到init方法往下讲。Tue, 09 Oct 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie08initli/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie08initli/上篇文章，我们讲了vm. renderProxy相关的内容。主要是通过Proxy为我们vm属性添加一些自定义的行为。今天我们回到init方法中，为大家讲解initLifecycle。Sat, 13 Oct 2018 00:00:00 GMThttps://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie09initev/https://mmailab.com/posts/ren-ren-dou-neng-dong-devue-yuan-ma-xi-lie09initev/上篇文章中，我们主要讲了initLiftcycle方法，它的作用是初始化vm实例中和生命周期相关的属性。今天为大家介绍另一个方法——initEvents。Mon, 12 Nov 2018 00:00:00 GMThttps://mmailab.com/posts/shen-rusourcemap-yuan-li/https://mmailab.com/posts/shen-rusourcemap-yuan-li/Source Map,顾名思义，是保存源代码映射关系的文件，相信用过webpack的开发者对它应该不会陌生。在项目开发完进行打包后，在打包的文件夹里通常除了js，css,图片字体等资源文件外，大家一定还见过xxx.js.map的文件。...Tue, 08 Jan 2019 00:00:00 GMThttps://mmailab.com/posts/shi-xian-yi-ge-chao-jian-dan-depromise/https://mmailab.com/posts/shi-xian-yi-ge-chao-jian-dan-depromise/Promise函数是es6中一个比较有用的特性，一般用来处理异步操作。让你的代码中不再只有回调函数套回调函数。Tue, 01 Aug 2017 00:00:00 GMThttps://mmailab.com/posts/vscode/https://mmailab.com/posts/vscode/Fri, 13 Jun 2025 00:00:00 GMThttps://mmailab.com/posts/vue-pomodoro-fan-jia-zhong-zu-jian-ji-yuvue2x/https://mmailab.com/posts/vue-pomodoro-fan-jia-zhong-zu-jian-ji-yuvue2x/本人一直是一个番茄工作法的簇拥，所以决定写一个基于vue 2.x开发的番茄钟 demo 来练练手。灵感来自于另一个组件[vue-radial-progress](https://github.com/wyzant-dev/vue-ra...Mon, 10 Jul 2017 00:00:00 GMThttps://mmailab.com/posts/yi-wei-shen-me-yao-you-jian-tou-han-shu/https://mmailab.com/posts/yi-wei-shen-me-yao-you-jian-tou-han-shu/我们在日常开发中，可能会需要写类似下面的代码Sat, 13 May 2017 00:00:00 GMThttps://mmailab.com/posts/yigood-code-vs-bad-code/https://mmailab.com/posts/yigood-code-vs-bad-code/> - 原文地址: [Good code Vs Bad code](https://codeburst.io/good-code-vs-bad-code-35624b4e91bc)Tue, 03 Apr 2018 00:00:00 GMThttps://mmailab.com/posts/yiwebpack355-code-splitting/https://mmailab.com/posts/yiwebpack355-code-splitting/对于大型web app来说，如果把所有的文件都打包到一个文件中是非常低效的，特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载。其他的一些打包工具叫它们图...Mon, 01 Jan 2018 00:00:00 GMThttps://mmailab.com/posts/zheng-ze-biao-da-shi-zhiyan-zheng-you-xiang/https://mmailab.com/posts/zheng-ze-biao-da-shi-zhiyan-zheng-you-xiang/昨天在开发项目的时候，有一个验证邮箱的需求，本来想着自己写一个正则表达式来验证的，但是写的时候却发现很多关于正则的知识都忘的差不多了。有些东西想记住真的就要重复练习，看明白了没有用，要天天练习才行。Sat, 05 Aug 2017 00:00:00 GMThttps://mmailab.com/posts/zhong-gao-dai-ni-quan-mian-le-jie-git-xi-lie-01-s/https://mmailab.com/posts/zhong-gao-dai-ni-quan-mian-le-jie-git-xi-lie-01-s/对大多数程序员同学来说，Git 应该是日常工作中接触的最多的工具之一了。我们每天都在和 Git 打交道，通过 Git 提交代码，在 Github 上寻找优秀的开源项目，参与技术讨论。那不知道大家有没有真正去了解过 Git，它为什么会出...Mon, 04 Jan 2021 00:00:00 GMT