- 博客(40)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue —— 响应式解析
先上图接下来会将上图各部分分开解析使用<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue 响应式</title></head><body> <div id
2020-10-12 10:33:32
530
原创 vuex 解析 + 模拟实现
本文将简单实现 vuex 中的 state、mutations、actions和getters核心步骤先简单回归一下 vuexvuex 集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化store/index.jsimport Vue from 'vue'import Vuex from 'vuex'// 每个组件通过 this.$store 访问仓库Vue.use(Vuex)export default new Vuex.store({ // 状态应
2020-10-02 23:25:54
157
原创 vue-router 解析
本文将以最简单的方式解析vue-router实现原理，最全的实现过程请参考源码核心步骤先简单回顾一下原生vue-router的使用方式router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '@/views/Home'// 1.引入插件Vue.use(VueRouter) // VueRouter 是一个插件const routes = [ { path:
2020-10-02 16:24:04
259
原创 React 国际化配置
依赖yarn add react-intl重要目录结构练习时可以先按此目录结构把文件都新建好|- src| |-- i18n| | |-- message| | | |-- en-US.js| | | |-- zh-CN.js| | | |-- index.js| | || | |-- locales.js| | |-- provider.js| | |-- translate.js| | |-- index.js| || |-- App.js配置信息locales
2020-08-04 14:27:47
814
原创 underscore 架构解析
使用方式和JQ类似，underscore也占用了一个全局对象；但是underscore为用户提供了两种使用方式_.unique(); // 通过构造函数的静态方法调用_().unique(); // 通过实例化对象调用其原型链上方法架构我们由浅入深，一步步完善初始架构首先我们先支持两种调用方式(function (root) { // _ 是一个构造函数 var _ = function () { if(!(this instanceof _)){ retu
2020-05-14 23:33:13
326
原创 前端排序算法——插入排序
插入排序简介简单来说，插入排序就是从头开始两两相比，直到遍历到末端；这个排序算法一个明显的特点是，在排列过程中，前面的值是按顺序排好的，后面的值还是原来的样子，然后逐渐像前面的值那样变得有序；先看一下在JS中是怎么实现的插入排序代码function insertionSort(arr) { var len = arr.length; var preIndex, current; for (var i = 1; i < len; i++) { preI
2020-05-09 13:04:59
388
原创 决战前端设计模式——代理篇
代理有什么作用在使用某对象时多加条件限制，比如说需要达成什么条件才能使用某对象里的方法，这样可以在不修改原对象的前提下 限制或增加 原对象的功能包装某一函数，丰富其功能对象劫持 ( MVVM）代理原理这里拿 JOJO 这部番举例。。JOJO里有一种人叫替身使者，他们能将精神力具化成替身使者。这里我们将替身这一类理解成被代理对象，替身使者理解成代理对象；// 定义替身funct...
2020-05-08 00:16:59
278
原创 决战前端设计模式——单例模式篇
什么是单例模式单例模式可以理解成一个构造函数，无论进行多少次实例化都指向一个实例实现方式在第一次实例化之后通过给构造函数绑定一个静态属性来指向第一次的实例化对象，当第二次再实例化的时候将这个静态属性返回出去ES5function Terminator(name, height, target) { // 如果标记不为 undefined 则直接返回之前创建的实例 if( ...
2020-04-26 23:25:00
234
原创 Redux 原理 & 一般和异步使用
为什么要用 Redux在平时开发中，使用Redux最多的场景应该是进行React开发的时候了。而 React只是用于构建用户界面的 JS 库，如果涉及到复杂的组件通信仅仅使用React的话代码将变得非常冗余且难以维护；而Redux则是帮助组件通信的一个库，因此适当地使用 Redux 会使得有复杂组件通信逻辑的项目更加轻盈、易读。Redux 原理我们先从组件开始分析，当组件要想更改仓库的数...
2020-04-26 17:55:29
309
原创 决战前端设计模式——工厂篇
前言设计模式属于前端的高级内容，建议开始学习之前先确保已经可以熟练使用 JS，无论是ES5、ES6都能较好地运用，同时还要了解面向对象编程的概念，如果还学过TS那就最好了，不过没学过也没关系，因为其语法和 JS 大同小异，如果熟悉 JS 那么上手 TS 就不会那么难了。为什么要用设计模式在开发逻辑较为复杂的项目时，学会设计模式会使得代码更加清晰，同时还会增加开发效率。不过说白了设计模式也不是...
2020-04-24 17:11:18
394
原创 设计模式入门——面向对象
前言本文将通过一个选项卡案例带读者了解面向对象是个什么概念，同时对于面向对象的各个知识点不会面面俱到，只是简单地从ES5和ES6去看看面向对象是怎么实现的、同时比较这个和面向过程有什么区别。面向对象概念面向对象有三要素：继承、封装、多态 (可以不用马上理解)面向对象和面向过程有什么不同呢？可以这么来理解，面向过程大概就是 你指定某具体事物怎么做某事；而面向对象，则是 你规定了一类事物...
2020-04-19 23:42:02
267
原创 用 Vue 实现记住登录信息功能
前言最近做练习的时候遇到了记住登录用户信息的需求，我查了一些资料、看过几个人的博客，但是我看到的文章不是有错误就是格式及其糟糕，为此我会将我实现的原理用尽可能通俗易懂的方式告诉大家。使用的依赖ant-design-vuejs-base64实现原理如图所示，我们需要根据用户是否点击记住信息来决定是否保存用户信息；当用户决定要保存登录信息的时候，我们将使用cookie来保存信息，当...
2020-03-16 23:56:40
2149
1
原创 快速上手 react-redux
前言这篇文章就是介绍如何在 react 中使用 redux，至于其 redux 底层工作原理，我也不懂。就像开车一样，这篇文章只会教你怎么开车，至于车是怎么构成的我不知道，也不用知道。。框架封装出来就是直接拿来用的嘛，所以用就完事了。。redux 是用来干什么的？简单来说，redux 就是一个仓库管理工具。在一个项目中肯定有很多个组件，其中也有很多组件是有状态的，也就是说某些组件里保存了数...
2019-11-19 16:57:44
230
原创 同时展示多张图片的无缝轮播
前言这段时间在做练习的时候遇到了这个要展示多个轮播图的需求，现在大部分网页的轮播图每次都是展示一个的，就算是淘宝、天猫这样的大网站。一开始在做这个轮播图的时候在决定跳转的时刻同时防止用户短时间内频繁翻页这个地方卡了一会，最后终于做出来的时候决定将实现原理分享一下。首先看一下要实现的效果如图，一次性展示5张图片，向左或向右翻页时图片的展示顺序是固定的。本文将使用 JQ 实现这个效果，如果...
2019-10-31 16:23:49
13515
10
原创 canvas案例———太阳系
本文将结合面向对象和canvas来模拟太阳系当然有许多参数不太准确，不过重点是如何使用面向对象和canvas实现效果 侧重点要放在重点上不是很懂面向对象的小伙伴要先看一下相关的文章，面向对象的编程思想需要用到原型链，因此原型链也要复习一下先分析一下轨道的话用一个循环能画出来了，详情看代码每个星球都有自己的坐标(x,y)、半径(r)、周期(cycle)、颜色我们将以上...
2019-06-02 14:41:16
946
原创 canvas特效案例-----字母喷泉
今天介绍一下如何用canvas实现字母喷泉效果首先看一下效果图分析发射源始终位于屏幕中下方不断执行粒子会运动，同时粒子束越到后面越亮粒子数量有最大限制功能实现设置自适应大小函数，窗口大小发生变化时发射源会改变位置(始终位于屏幕的中下方)设置循环调用函数(请求动画帧)运动函数改变粒子位移的同时改变粒子样式每次循环清除多余粒子以上的总结虽然...
2019-06-01 15:38:51
584
原创 html5 合成详解
这篇文章主要说明一下html5中 合成 的使用方法先把公有部分的代码放出来，规定之后的代码块默认之前都有的代码<!--html--><canvas width='500' height='500'></canvas>// javaScriptconst oC = document.querySelector('canvas')const c...
2019-05-30 20:02:37
363
原创 canvas应用----刮刮乐
最近在学习html5，为了更好地学习和帮助其他人我决定把我写过的案例写下来~~先说一下刮刮乐这个程序实现的注意点材料：一张图片和canvas画布在html页面只要放图片元素，canvas由js生成。 这是为了保证canvas生成在img上面而且保证刚打开页面的时候不会看见图片生成的canvas涂层要保证大小和位置和图片的相同CSS*{padding:0;margin:0;}bod...
2019-05-28 22:06:18
204
原创 JavaScript原型链顶层原理
JS原型链是许多初学者的一道坎，出于对JS的热爱我花了一些时间专门研究了一下原型链的顶层实现原理，希望对你有帮助
2019-05-27 22:42:20
2321
空空如也
如何使antd的Select下拉框被一个按钮的点击事件重置回初始值?
2019-09-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人