- 博客(25)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vuex源码分析（手写完成部分功能帮助理解）
简单理解就是Vuex就是一个class，在class中实现vuex该有的功能，再去引用。其中我只实现了部分功能，有兴趣的大佬可以自行补充完成，好了记得私信我我好复制你的更新这些代码hhhh。详细看下文代码，注释都有理解起来很方便//Store类class Store{ constructor( options = {} ){ //结构我们的state等并挂载在this上 let { state, mutations, plugins} = option
2021-09-11 00:22:29
161
原创 Vue3.0响应式原理分析（2.0演变为3.0中的响应式区别）
接本人之前的一篇关于Vue2.0文章，可移步先浏览一遍，再阅读本章，效果更佳，理解更清晰。点击下方立即查看~Vue2.0的响应式原理+异步更新队列的实现+computed分析+watch分析https://blog.youkuaiyun.com/shi_Avicii/article/details/105895227众所周知，Vue 3.0 使用的是Proxy，是对getter和setter进行一次代理,去做到依赖收集和更新操作。而为什么要改为Proxy，是因为2.0中的defineProperty不能监听
2021-09-10 00:33:18
251
原创 Vue组件通讯的多种方式（个人记录）
一：常用写法父组件<template> <div> <aa class="abc" :snycTest.sync="test" ></aa> {{'外面的值：' + test}} <button @click="fn"> 外面改变里面 </button> </div></template> <script>imp..
2021-09-07 23:47:51
200
原创 vuex模块化懒加载 vuex模块化 懒加载 vuex按需加载
说明这是一个解决大型项目中，vuex数据臃肿庞大导致的性能问题。对vuex进行模块化并执行懒加载模式文件目录说明|--src|--|--assets 样式文件|--|--components 组件目录|--|--router 路由目录|--|--store vuex目录|--|--views 视图目录|--|--vuexmodulespl 怎么实现vuex懒加载的js(重要)
2020-06-15 10:04:30
1277
原创 Vue2.0的响应式原理+异步更新队列的实现+computed分析+watch分析+set方法的实现
Vue 2.0 Object.defineProperty Vue 2.0中 使用Object.defineProperty来将Data中的属性都遍历一遍,转换为getter和settergetter为依赖收集 当变量修改时,可能涉及到很多地方依赖变量,所以将模板中依赖这个变量的地方都收集起来 setter为通知依赖更新Vue 3.0 Proxy 就是对getter和sett...
2020-05-02 21:33:34
830
1
原创 提高代码质量的设计模式（策略模式和状态模式；外观模式；迭代器模式；备忘录模式；）
高质量代码,方便后续的一切操作;方便他人阅读 什么是代码质量 代码整洁 结构规整,没有漫长的结构 阅读好理解策略模式和状态模式行为型目的：优化if-else分支,场景：当if-else分支过多时,一：基本结构策略模式假设要编写一个计算器,有+-×÷,我们把可以一层一层的if判断变化成这样的形式function Strategt(type,a,b...
2020-05-02 00:13:44
331
原创 可扩展型的设计模式（适配器模式-结构性；装饰者模式-结构性；命令模式-行为型；观察者模式-行为型；职责链模式-行为型；访问者模式-技巧型。）
什么是好的可扩展性 需求发生变更时不需要重新改旧代码 代码修改不会引起大规模变动 方便加入新模块 低耦合适配器模式ps：结构性 (接口)目的：通过写一个适配器，来代替替换应用场景：面临接口不通用的问题一：基本结构用log代替console.log var log = (function(){ return window.console.log})...
2020-05-01 16:39:22
548
原创 结构型设计模式-提高可复用性（桥接模式、享元模式、模板方法模式）
复用性要点： 对象可以再重复使用,不用修改 重复代码少 模块功能单一桥接模式目的：通过桥接代替耦合,应用场景：减少模块之间的耦合,一：基本结构// 有三种形状,每种形状都有三种颜色// 把颜色方法抽离出来 三种形状再调用function rect(color){ showcolor(color)}function circle(color){ sh...
2020-04-30 23:38:46
265
原创 创建型设计模式-封装和对象（工厂模式，建造者模式，单例模式）
要点: 定义变量不会污染外部 能够作为一个模块调用 遵循开闭原则什么是好的封装: 变量外部不可见 调用接口使用 流出扩展接口A.封装对象时的设计模式1.工厂模式目的:方便我们大量创建对象(大量多个)应用场景:当某一个对象需要经常创建的时候(分页;弹窗等)1.1基本结构function Factory(type){ ...
2020-04-28 00:07:00
344
原创 理解JavaScript、node.js中的发布和订阅模式以及运用
一：JavaScript中的发布订阅首先我们有这么一个需求function ajax(url, callback) { // 实现省略}ajax("./test1.json", function(data) { console.log(data); ajax("./test2.json", function(data) { console.lo...
2020-03-28 18:23:39
413
原创 【前端小白】Event Loop理解 异步 JavaScript Node.JS
首先，event loop是一个执行模型，在浏览器中和node.js中实现不一样。浏览器中，Eventloop是基于html5标准，而node.js是基于libux。首先有宏任务与微任务一：宏任务macrotask包括：script setTimeout setInterval setImmediate（这是node.js的方法） I/O UI renderi...
2020-03-23 23:36:20
273
原创 （菜鸟理解）复合函数compose
compose函数指的是，将需要嵌套执行的函数平铺。而嵌套执行指的是，一个函数的返回值将作为另一个函数的参数。而compose函数的作用是，实现函数编程中的Pointfree,使我们专注于转换而不是数据。let add = x => x + 10;let multiply = y => y*10;let compose = function(){ let arg...
2020-02-12 18:02:32
1364
1
原创 【算法从入门到放弃】深入理解学习 最长公共子序列
在前端组件框架里面，很常见的dom处理就是将一个dom树切换为另外一个dom树，现代的mvvm框架基本都是在dom树的每一层上去做diff的。简化的来看就是要以最小的开销从"abcde"切换到"ace"。首先，我们了解一下基本概念:1：子序列(subsequence)： 一个特定序列的子序列就是将给定序列中零个或多个元素去掉后得到的结果(不改变元素间相对次序)。例如序列<A,B...
2020-02-11 00:41:51
417
原创 vue的自动化路由+分模块管理+路由懒加载
近期单独做了一个系统项目，项目不大但是页面太多了，为了后期维护管理容易，做了个自动化加载路由以及模块化的管理。在此记录一下。直接撸代码1.首先看目录router下的index.js是路由配置文件。views下每个目录为一个模块，目录下每个pages文件夹存放页面。每个模块有一个单独的.router.js去管理。2.先以asupmatset.router.js为例子//...
2019-12-10 16:39:21
1014
原创 关于iview中Menu 导航菜单 循环嵌套 多级嵌套
介绍：菜单通过后端接口请求数据来进行渲染达到图中所示例的效果（ps：图中仅展示二级菜单，可根据需求三级四级）开始撸代码。这是官方的菜单代码。 <Menu :theme="theme2"> <Submenu name="1"> <template sl...
2019-07-01 17:15:25
4252
2
转载 Vue项目中封装axios
// 配置API接口地址与服务器静态文件地址var root = 'http://192.168.1.108:8082';// 引用axiosvar axios = require('axios')var qs = require('qs')axios.defaults.headers.post['Content-Type'] = 'application/json'//全局封装错...
2019-06-28 17:27:45
521
原创 关于ajax的url,data,success,error封装方法。（易与后期修改维护）
var hostName = "http://url";//接口公共的ip或者域名var path={ "login":hostName + "/ace-app/user/login",//登录接口 "定义名称":hostName+"后缀名",//某某接口};function ajax(url,data,success,error){ $.ajax({ cache: false,...
2018-01-24 11:51:00
1880
转载 gulp压缩使用记录
首先全局安装gulp。npm install --global gulp 然后在项目根目录下安转环境包npm install gulp --save-devgulp需要组件配合使用：压缩js，css等需要组件这里提供一条命令直接运行即可npm install gulp-minify-css gulp-jshi
2018-01-23 12:06:36
340
原创 个人记录vue的脚手架准备
npm install -g vue-cli//安装脚手架vue -V//查看vue版本vue init webpack myvue//使用webpack模板 放入myvue文件夹之后弹出来1：是否命名 (myvue)2：输入描述3：作者信息4：信息5：是否加载vue-router Y6：是否检查代码风格 N7：做不做测试 N
2017-11-11 16:24:56
313
原创 关于隐藏元素的细节问题。更为稳妥的布局
页面布局上，我们常常需要隐藏元素来实现更好的布局。所以有两种方法。一种为display：block一种为visibility: hiddendisplay：block隐藏元素，但是不占有空间。visibility: hidden隐藏元素，但占有空间若适当的使用好这两者，将会跟好的帮助新手布局
2017-07-29 09:57:49
362
转载 一些非常好看的背景颜色渐变
渐变是css3的其中一项，但是基本都没人用，因为不兼容IE8，但渐变颜色好看基本就为你的网站提供了飞跃般的提升，若要使用请抠图做背景。渐变色系网站http://color.oulu.me/ 下面我提供几串色系代码。更多的选择请移步链接 div{ width: 200px; height: 200px; border-radius:50% ;
2017-07-29 09:15:16
14978
转载 布局常用标签名
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：
2017-07-28 19:33:04
1060
转载 关于清除浮动的问题。一招解决
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}原理：IE8以上和非IE浏览器才支持：after，原理有两点类似的，zoom可以解决ie6，ie7浮动问题。优点：浏览器支持好，不容易出问题。缺点：代码多。新手基本不理
2017-07-28 18:05:33
313
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人