哎呀呀の博客

在平时的工作开发中，若遇到可重复使用的内容，或者代码块过长，经常会把代码封装成组件，减少重复代码，提高开发效率。写的较多的还是业务组件，主要和业务绑定比较深入，最近，尝试写了一下ui组件，模仿element.ui的样式和使用写了一个aiyaya-ui，并且发布在了npm上。总结一下这次ui组件开发过程中遇到的点和经验： Dialog组件中sync的妙用我们需要对一个父组件传进来的visible进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。只能通过$emit，主动调起父组件中的事件。vue官方推荐以update：myPropName的模式触发事件来解决该问题 ui子组件代码中 123456<div class="ya-dialog__wrapper" style="z-index: 2002" v-show="visible" @click.self="handleClick"> < ...

真正的手写一次promise的实现,能更加深入理解运用promise。 俗话说的好，知其然须知其所以然，首先要了解promise的语法和使用。promise是书写异步代码的一种方式，在ES6语法之前，异步操作一般通过回调函数实现，但是异步回调往往容易造成回调地狱，挨个嵌套的问题，promise应运而生，主要用于解决回调嵌问题，使得异步操作更为清晰。promise是一个对象，存在三种状态 pedning(等待中), fulfilled（成功状态）, rejected（失败状态）基本语法： 123456789const p = new Promise((resolve, reject) => {// resolve 和 reject都是内部提供的// resolve 是成功的时候需要调用的函数 将promise状态由 pending =>fulfilled// reject 是失败的时候需要调用的函数 将promise状态由 pending =>rejected// promise内部一般有一个异步操作 文件读写 ajax请求等==// 异步操作 有成功 有失 ...

后台管理的用户权限实现，自己在之前的开发过程中，可能了解到的仅限于权限的设计分配是按照建立角色，赋予角色权限，将角色分配给不同账号，来进行分配处理，没有仔细梳理过权限的方方面面，趁着有时间，简单做了一个后台管理系统，梳理了一下权限相关的内容。 菜单权限首先，考虑不同的用户，对系统的操作要求不一样，管理员肯定比一般的操作人员能看到更多的菜单，所以一开始渲染的时候，不同角色的用户获取到的菜单都是不一样的，我们一般通过后端接口拿到菜单权限，进行渲染，我用mock在本地模拟了一下后端数据，将菜单权限数据放在登录接口中，成功获取到菜单权限数据后，将数据放在vuex中，供主页页面进行菜单渲染：后端数据 123456789101112131415161718192021222324252627282930313233343536rights: [{ id: 100, authName: "我的首页", path: '/home',}, { id: 101, authName: "用户管理 ...

19年的时候因为去修电脑，不小心删除了本地的博客文档，导致博客搁浅了两年多，趁着没有事情在家里，再度拾起，新的开始，新的记录。测试哈哈哈

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment

之前无论是新开始一个vue项目还是一个react项目，都是直接用的现成的脚手架，简单方便。最近在bilibili看react相关的视频，顺便也顺手学了把自己用webpack新建一个项目。使用一个新事物之前，先了解新事物出现的用途，webpack官方文档的解释： webpack 是一个现代 JavaScript 应用程序的静态模块打包工具 我的理解，对于一个大型的项目来说，必然会应用到很多的包和模块，以及各个文件中需要引用到别的javascript文件等，通过webpack进行打包，可以较为方便处理这些复杂的相关关系，最后生成统一的文件。 安装webpack首先在本地新建一个项目,然后通过npm init初始化项目,初始化项目主要是通过生成package.json文件记录项目的一些信息，比如一开始初始化的时候让你填写的一些项目名称，作者信息等内容，如下图：初始化项目完成后，可以看到在项目目录下生成了package.json文件然后在项目目录下安装webpack包，或者可以全局安装webpack命令如下： 12npm insatll webpack -g // 全局npm inst ...

关于overflow，w3school的定义： overflow 属性规定当内容溢出元素框时发生的事情。 要确定会不会出现滚动条一类的问题，首先要找对元素框和内容，其次，满足条件，内容溢出元素框。对于浏览器来说，默认就是 1overflow:scroll; 当设置一个div的宽度或者高度，大于浏览器目前的高度或者宽度（指浏览器被压缩移动之后），自然会出现滚动条，但是当你设置的div的高度或者宽度是100%或者不设置的时候，就不会出现滚动条了。 而且，overflow这个属性是针对于父亲元素（包裹元素）来设置的，而不是内容元素。

一直以来对vuex 不是很了解，抱着平时能不用就不用的心态，一直都没重视。但是无论是看工作中项目的代码，还是真的遇到组件之间复杂传值的情况，vuex的使用技能还是要get的。vuex官网的解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 好抽象，硬着头皮跟着官网教程往下走，给了一个vue的demo 12345678910111213141516new Vue({ // state data() { return { count: 0 } }, // view template: <div>{{ count }}</div>, // actions methods: { increment () { this.count++; ...

接触项目以来一直用的是框架，原生很多东西很基础自己却没掌握好，总结一下关于dom事件。dom事件指的就是dom.Event,表示在dom 中发生的任何事件,大致可以包括：用户交互操作产生（例如鼠标或键盘事件），或者由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等）。dom的事件流分为三个阶段： 捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。事件由页面元素接收，逐级向下，到具体的元素。 目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。具体的元素本身。 冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。跟捕获相反，具体元素本身，逐级向上，到页面元素（我们平时用的事件绑定就是利用的事件冒泡的原理）。 事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发。事件冒泡：当 ...

vue的路由模式，vue中实现前端路由主要模式有两种，hash模式和history模式。vue中路由默认使用hash模式，hash模式是基于javascript的onhashchange()方法，可以从MDN上看一下： 当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（参见 location.hash）。 在 mozilla官网可以测试一波 12345 window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash;} 改变url中#后面的部分，查看效果: history模式主要使用了html5中的对history中栈的操作，可以看一下它的几个api 使用 back(), forward()和 go() 方法来完成在用户历史记录中向 ...