锋利的二丫-CSDN博客

原创 web前端交流群

前端交流群前端业内氛围比较好的群欢迎大家入群第一二维码是QQ 第二个是群主微信QQ群:1077796232微信群: 加群主微信 phpbigboy 我拉你进群

2020-08-15 21:58:03 5729 4

原创前端架构学习笔记（四）Vue初始化流程

前端架构学习笔记（四）Vue初始化流程如果有问题，或者有更好的解决方案，欢迎大家分享和指教。交个朋友或进入前端交流群：-GuanEr-。本笔记的目的是了解在 new Vue() 源码执行的基本过程。并且知道在初始化过程中，每个阶段都实现了什么内容。其中有一些过程还是没有写到很细致，欢迎大家提出建议讨论。...

2021-09-06 15:23:39 167

封装一个简单的 Vue.js如果有问题，或者有更好的解决方案，欢迎大家分享和指教。交个朋友或进入前端交流群：-GuanEr-本笔记的目的是更加深入完善的理解响应式。一、最终目标编译DOM，解析插值表达式，将表达式对应的值渲染在页面上（简单解析，不考虑 {{}} 中复杂的运算）；编译元素节点，解析到元素上绑定的指令，执行对应操作，html 指令，text 指令，model指令；解析元素节点上绑定的 @xxxx 的事件数据的动态响应和双向绑定效果二、重要的类Vue 类，创建 Vue 实

2021-08-05 17:27:43 245

原创前端架构学习笔记（二）封装一个简单的 Vuex

前端架构学习笔记（二）封装一个简单的 Vuex如果有问题，或者有更好的解决方案，欢迎大家分享和指教。一、最终目标在任意组件中可以使用 $store 访问 store 中的数据state 都是响应式数据实现通过 commit 调用 mutations实现通过 dispatch 调用 actions实现 getters，并借用 computed 计算属性缓存 getters 的值（getters）也是响应式数据二、目录在 src 文件夹下新建以下文件my-store store.j

2021-08-03 11:32:45 173

原创前端架构学习笔记（一）简单实现 VueRouter

学习笔记（一）简单实现 VueRouter本系列笔记来源，开课吧前端架构课程这个练习非常简单，只考虑 history 模式下路由和嵌套路由的实现。主要目的是理解路由的核心思想。至于更完善，更深入的内容，可以在学习完这些内容之后，阅读源码。如果有问题，或者有更好的解决方案，欢迎大家分享和指教。*最终效果我们在这个练习中需要实现的效果如下：考虑 hash 模式实现 router-link 组件通过 to 属性切换路由实现 router-view 渲染路由对应的组件实现在任意组件内通过 th

2021-08-02 11:44:07 212

原创 Canvas基础绘制例子三-躁动的小球

Canvas基础绘制例子三-躁动的小球本篇用 Canvas 结合面向对象的编程思想来绘制一个小的效果，主要是初步感受面向对象的更多用处。可以看完这篇之后再去看贪吃蛇大作战。一、小球跳动版1.1 效果图1.2 分析通过效果图我们能看出来，小球是一个类，每个小球都有半径、颜色、初始位置、x/y 方向的速度等属性。在绘制刚开始时，我们要生成若干个小球，并且为它的属性赋初值。用计时器不断地绘制若干小球，在绘制的过程中，改变每个小球的位置，并且在改变位置时，做碰壁反弹的处理（碰壁反弹原理

2021-05-24 11:05:36 193

原创 Canvas 基础绘制例子二-贝塞尔曲线工具

Canvas 基础绘制例子二-贝塞尔曲线工具博主微信号 -GuanEr-。Canvas 提供的基础绘制函数绘制出的形状都是比较标准的，如果我们想要用 Canvas 绘制出一个非标准形状的形状，比如任意形状的椭圆，我们就需要使用贝塞尔曲线去绘制。在使用贝塞尔曲线工具时，我们要知道一个曲线的控制点位置，才能绘制出对应的曲线，我们可以根据我们的绘制习惯，制作出一个贝塞尔曲线工具，然后利用这个工具去获取任意曲线的控制点位置。一、效果图二、思路为了能让我们的工具更贴近生活，我们可以将画布的中心点设置成

2021-05-21 10:17:27 534 3

原创 Canvas 基础绘制例子一

Canvas 基础绘制例子一这个系列本来准备出很多 Canvas 系列游戏，但是想到有很多朋友对于 Canvas 怎么动态高效的使用还不是很熟悉，所以我把之前授课过程中讲的Canvas的所有基础教程的例子出个文档（不包含基础函数的介绍，这些在任何简易教程中都有）。这个基础教程包含 Canvas 基础绘制练习，动态绘制，结合面向对象的使用等等。以下示例中，所有画布宽均为1000，高均为600，只在 1.2 的代码示范中给出 HTML 和 CSS 代码，之后的示例就不重复了。一、Canvas 绘制网格背

2021-05-20 15:21:34 248

原创 Vue-cli3.x 中使用cross-env配置项目变量

Vue-cli3.x 中使用 cross-env 配置不同环境下的项目变量在实际开发过程中，我们有时候需要在不同的环境、不同的服务器上运行我们的项目，或者项目测试环境有多个，这个时候我们就需要根据不同的环境配置不同的变量，让项目在不同的环境下都能正常使用。一、安装插件yarn add cross-env或npm i cross-env --save二、修改配置 package.json安装好 cross-env 之后，我们可以通过修改 package.json 中跟 build 有关的 sc

2021-03-08 11:12:14 1919 2

原创日历日程插件FullCalendar在Vue中的使用指南

Vue 中好用的日历日程插件FullCalendar使用指南参考资料链接：FullCalendar官网FullCalendar中文文档功能：实现 PC 端日历及日历中添加事件提醒。本文极尽所能找到了常用功能的设置，并不是全部功能，想要查看特别完成的文档，请移步官网。一、版本和基本介绍1.1 版本Vue：2.6.10Vue-cli: 3.x@fullcalendar/vue: 5.5.0 FullCalendar 从4.x 开始支持 Vue1.2 形态FullCalendar

2021-02-02 16:25:51 8647

原创在 React 中使用 React-Redux 的示例

在 Create-React-App 中使用 React-Redux 的示例在实现这个例子之前，请先去官网查看基本概念和 redux 的要素。安装npm i redux react-redux --save配置我们需要手动新建状态管理的目录，一般情况下，我们会在 src 下新建一个store 的文件夹，来管理状态。// store/reducer.js// 默认状态const defaultState = { count: 0};// 用 reducer 来处理具体想要操作

2020-11-23 10:42:19 448 2

原创 win10 非管理员权限安装 Node.js 并配置环境变量

win10 非管理员权限安装 Node.js 并配置环境变量应用场景由于公司安全管控，不能下载 Node 安装器进行安装，也不能配置系统的环境变量。所以下载非安装版本，并且配置当前用户的环境变量。在官方文档下载想要版本的非安装压缩包解压之后长这样然后将这些文件放到一个你喜欢的目录中，比如我在 C 盘下新建了一个 nodejs 的文件夹，将上面的内容放到了这个文件夹中，那么 C:\nodejs 就是我的 node 的安装目录。配置当前用户的环境变量由于设置了安全管控，没有权限配置系统的环境变

2020-11-10 15:30:41 3745

原创 Proxy代理

Proxy代理及其实际应用什么是 Proxyproxy 的意思是代理，是为了让对数据的操作变得更安全，我们可以使用proxy拦截某些操作，直接对其进行过滤和改写。官方将这种拦截、过滤和改写称为代理。一个简单的示例let boy = { name: '小明', age: 18, money: 100};let px = new Proxy(boy,{ get(target, propKey) { console.log(target, propKey

2020-11-06 16:15:31 3357

原创数据结构与算法JS描述之栈和队列

数据结构与算法JS描述之栈和队列参考资料数据结构与算法JS描述，[美] Michael McMillan 著，王群锋杜欢译写在前面写该系列的博客，初衷是帮助自己和初学者，奠定更高层次的编程基础和理念，能让大家对 JS 有更深层次的认知，并且借助 JS 了解高级的编程思想。所有对于某个数据结构的算法的示范，并不是标准答案，只是我根据经验模仿了各种资料和其他成熟语言中的写法，如果有写的不精致的地方，或者更好的写法，联系我，我加以改正。本来想用构造函数的形式实现这些数据结构，但是既然技术在更新，用

2020-09-23 16:32:23 216

原创数据结构与算法JS描述之列表

数据结构与算法JS描述之列表参考资料数据结构与算法JS描述，[美] Michael McMillan 著，王群锋杜欢译写在前面写该系列的博客，初衷是帮助自己和初学者，奠定更高层次的编程基础和理念，能让大家对 JS 有更深层次的认知，并且借助 JS 了解高级的编程思想。所有对于某个数据结构的算法的示范，并不是标准答案，只是我根据经验模仿了各种资料和其他成熟语言中的写法，如果有写的不精致的地方，或者更好的写法，联系我，我加以改正。本来想用构造函数的形式实现这些数据结构，但是既然技术在更新，用新的

2020-09-22 14:40:36 207

原创浏览器数据库 IndexDB 封装示例

浏览器数据库 IndexDB 封装示例感谢阮一峰大佬的技术分享JS 封装示例// indexDB.js // 打开或创建数据库(如果已经存在就打开，否则就创建)var dbName = 'project';// success, error 可以不传function openDB(version, success, error) { var req = indexedDB.open(dbName, version); req.onsuccess = function() {

2020-09-15 10:38:41 513

原创 JS 常见算法的解析和代码实现

JS 常见算法的解析和代码实现一、欧几里得定理（辗转相除法）1. 条件求 A 和 B 的最大公约数，A 和 B 都是大于等于 0 的整数。2. 应用场景欧几里得定理，在数学上，用来计算两个非负整数的最大公约数。辗转相除法就是 JS 实现欧几里得定理的具体方式。3. 分析欧几里得定理: 两个整数的最大公约数等于其中较小的那个数和两数相除余数的最大公约数。用代码描述：a 和 b 相除余数如果为 0，最大公约数直接是 b，如果余数是个不为 0 的数 c，接着往下计算，b 如果能整除 c，代表 b

2020-08-18 16:56:17 4977 7

原创 Canvas烟花效果 HTML代码烟花特效源代码

Canvas 烟花效果一个非常简陋的没什么含金量的小效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #cv { background: #000; } &lt

2020-08-11 11:09:52 16877

原创 Vue 利用 addRoutes 动态创建路由完整 Demo

这个包含登录之后对于路由的处理，动态添加，以及刷新后的为了防止动态路由丢失做的操作。这只是个小 demo，因为路由这块儿牵扯到的内容还挺多的，比如权限限制，Token 验证等等操作，这些都需要根据具体项目具体处理。当然这个 Demo 我个人觉得结构还算清晰，不会影响项目中其他业务逻辑的处理，该单独封装的，都封装了。

2020-07-13 11:53:47 7989 3

原创 React脚手架（5）Props和PropTypes检查类型

Props组件的优势就是将项目中需要展示的内容划分成小的UI模块，方便复用，降低代码冗余。组件被封装时，某些数据是不确定的，只有在组件被调用时确定，也就是说，在调用组件时，可以向被调用的组件传参，组件可以用props获取这些数据并渲染。示例一（用函数封装的组件）：// App.jsimport React, { Component } from 'react';const handso...

2020-07-01 09:05:10 4340

原创 Vue 数据双向响应机制

Vue 中数据双向响应的机制参考资料（感谢各位前辈的分享和资料）尤雨溪讲解 Vue 源码Vue 源码解析-Vue 中文社区小马哥 Vue 源码解析小马哥 Vue 源码解析代码示范vue-cli 源码MDNVue 的特点是数据驱动视图，也就是说，数据变化时视图随之变化，所以要先监听到数据的变化，然后再去响应依赖该数据的视图，Vue 使用 Object 的 defineProperty 函数劫持数据的变化，用 Complite 源码解析器解析我们编写的 Vue 代码，用 Dep 类收集数据依

2020-06-30 11:51:42 4414

原创 Vue-cli 请求代理配置，封装 Axios

Vue-cli 请求代理配置及封装 Axios大佬止步，小白往下。HTTP 请求代理配置vue-cli 2.x// /config/index.jsproxyTable: { '/api-1': { target: 'path1', changeOrigin: true, pathRewrite: { '^/api-1': '' // 以 /api-1 开头的请求路径都会被 'path1' 代理 } }, '/api-2': { ta

2020-06-28 14:52:53 5400

原创 Vue-cli+Element-UI 利用递归动态生成菜单栏

Vue-cli + Element-UI 利用递归动态生成菜单栏菜单项列表文件// menu.jsexport default [ { title: '住院病人病情评估表', key: '0', meta: '', }, { title: '医护各类常用表格', key: '1', meta: '', children: [{...

2020-05-07 17:58:27 5086

原创 Vue-cli 中的打印功能(window.print)

Vue-cli 中的打印功能(window.print)print.js 的封装// print.jsexport default { initIframe(printOption) { let printIframe = document.getElementById('easyPrintIframe'); if (!printIframe) { print...

2020-04-14 16:27:13 5100 4

原创 React + Ant Design 利用递归动态生成菜单栏

React + Ant Design 利用递归动态生成菜单栏自定义菜单配置文件// menu-list.js// 引入菜单向需要的图标import { HomeOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, BarChartOutlined, LineChartOutlined, Unorde...

2020-03-14 12:07:50 5943

原创 Canvas 扫雷

我就写了核心基础逻辑HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #cv { display: block; marg...

2019-10-23 17:17:48 6675 4

原创 Canvas 贪吃蛇大作战

阅读需知这个游戏是给小白练手的，大神请饶命只有一条蛇，别说我骗你目的是为了练习 JS + Canvas 的逻辑代码虽然不难，但由于本人能力有限，所以计算过程还是有一丢烧脑，所以 … 谁抄咬谁，转载啥的，注明出处效果蛇的小眼睛看到了吗，很 Q 有没有代码如下html:<!DOCTYPE html><html lang="en"><head&gt...

2019-10-09 17:44:29 5182 9

原创 webpack4.0 的配置及简单使用

webpack学习 webpack 能极大的扩充前端开发视野，所以推荐前端开发工程师，使用 webpack 构建工具。webpack 4.0 相对于之前的版本，有了更多的变化，开发速度更快，大型项目能节约 90% 的构建时间。webpack 4.0 内置了更多的默认配置，变更了许多 API。webpack 的简单介绍在面向对象的编程思想出现以前，我们都是使用面向过程的方式做网页开发的。要...

2019-09-09 09:09:22 4506

原创 Angular-cli环境搭建,组件的数据渲染,父子组件传值

Angular cli-1Angular 脚手架的脚本是 TypeScript环境搭建使用 node.js 配置 Angular-cli 的环境。命令：npm install -g @angular/cli创建新的项目ng new my-appng new 命令执行时，会提示要把哪些特性添加到应用中，按 Enter 或 Return 键可以接收默认值。运行项目cd my-a...

2019-08-27 16:57:14 4572

原创 React脚手架（6）React-router配置，传参

React Router 是完整的 React 路由解决方案。React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。你第一个念头想到的应该是 URL，而不是事后再想起。路由的环境搭建和配置使用一下命令安装 React 的路由。react-router: 实现了路由的核心功能react-rout...

2019-08-22 16:41:46 4566

原创 Vue-6 Vuex

Vue-6 Vuex（state, getters, mutations, actions, modules）在项目研发过程中，组件和组件之间的结构关系非常复杂，到处存在数据交互。 props，$emit，路由传参是远远不足以支撑复杂的数据交互。Vue 单独提供了 vuex 来做项目的状态管理，vuex 提供了公共数据的存储和操作方式，让组件之间的数据交互变得更简洁。vuex 的核心理念就是...

2019-08-05 17:31:52 4672

原创 Vue-5 路由参数的传递和获取（query 和 params)，导航守卫和路由元信息，History模式

Vue-5 路由传参的几种方式（query和params），获取路由参数，导航守卫和路由元信息，History模式除了 props 和 $emit 之外，路由时也可以携带数据，即通过路由传参。一、路由参数的传递和接收1. 动态路由的匹配示例需求：有个商品详情的组件，点击任何商品都会渲染这个组件，点击商品时向详情组件传递商品的 id，详情组件在被渲染时接收这个 id，请求对应的数据，渲染在详...

2019-08-02 17:41:11 7161

原创 Vue-4 路由

Vue-4 路由的配置和调用，命名路由和命名视图，嵌套路由，重定向和别名Vue-router的安装和基本配置路由是 Vue 通过操作切换或调用组件的另一种方式。常见应用场景就是后台管理系统中的选项卡操作。比如某个后台管理系统的侧边栏有商品管理、用户管理、订单管理选项，在点击左侧的菜单时，右侧内容部分展示对应的管理模块。要在 vue-cli 中使用 vue 的路由，要先在当前项目中安装 v...

2019-08-02 11:49:01 4435

原创 Vue-3 一些组件的基础语法

Vue-3 props，$emit，slot，render，JSX和createElementProps 和 $emit使用 Vue 开发项目时，我们将项目中的内容按照模块划分，但是有时候模块和模块之间会存在数据交互。在真正的项目开发中，父子、兄弟组件之间需要互相传值。最传统的传值方式就是 props 和 $emit。一、PropsProp 是你可以在组件上注册的一些自定义特性。当一个值传...

2019-08-01 13:14:13 6927

原创 Vue-2 vue-cli，生命周期，computed，watch，自定义指令

Vue-2 vue-cli，生命周期，computed，watch，自定义指令vue-cli环境配置、项目安装、目录树我们使用webpack也可以手动安装配置vue脚手架环境，但是有一套更简单一点的vue-cli的构建工具，大大降低了webpack的使用难度。一、配置vue的脚手架环境npm install -g vue-cli完成之后查看vue版本:vue -V如果终端承认vu...

2019-07-31 14:57:27 5559

原创 Vue-1 Vue的基础语法

Vue-1 Vue的基础语法三大主流框架的对比背景版本小结Angular09年发布，Google1.x,2.x,4.x,5.x(beta)基于html的大而全的MVC框架ReactFacebook于2013年5月开园最新版本: 16.x基于js的视图层框架Vue尤雨溪团队2014年2月开源0.1x,1.x,2.x,虞姬2019年下半年发布3....

2019-07-31 12:34:51 4414

原创 ECMAScript 6 字符串和数值的拓展

一、模板字符串在我们的变成过程中，有时候我们需要在字符串中编写大量的HTML结构代码：const obj = { img: 'http://www.baidu.com/test.png', title: '离思', subTitle: '取次花丛懒回顾，半缘修道半缘君。', mess: ['唐','元稹']};let el = '<div>'+...

2019-07-08 17:16:04 4050 1

原创 ECMAScript 6 Module的语法和加载实现

Module的语法和加载实现一、ES6模块的简单介绍历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍...

2019-07-06 10:28:50 4314

原创 ECMAScript 6 类和类的继承

类和类的继承一、类的声明JS中到处都是对象，它是一门基于对象的语言，JS代码的执行都依托于对象，利用对象产生各种具备关联性的上下文环境，JS代码才能正常运行。但是我们都知道在ES5中，没有class，我们只是利用函数、new关键词、原型等方式实现类的概念和基本使用，但是随着技术的发展和编程语言的互相靠拢，只使用构造函数或者工厂模式去实现类的封装调用很不现实，代码不明确，容易让学习者和开发者产...

2019-07-05 17:45:42 4044

原创 React脚手架（4）数据渲染方式

JSX中的表达式JSX语法允许{}在结构中使用表达式。一、在{}中直接渲染数据// src/components/login/login.jsimport React from 'react'const str = '我从污秽和淤泥中复苏，我是灼热的青莲，我是，唯一的美。';class Login extends React.Component { render() { r...

2019-04-25 09:55:31 4367

空空如也

空空如也