自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端交流FlowGuanEr的博客

前端vue react Angular jquery js学习交流微信QQ群

  • 博客(36)
  • 收藏
  • 关注

原创 web前端交流群

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

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

原创 在 Create-React-App 中使用 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 11

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

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

2020-11-10 15:30:41 49

原创 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 228

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

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

2020-09-23 16:32:23 56

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

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

2020-09-22 14:40:36 68

原创 浏览器数据库 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 95

原创 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 4551 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 7073

原创 Vue 利用 addRoutes 动态创建路由,并在页面刷新后保留动态路由的完整 Demo

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

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

原创 React脚手架(5)Props和PropTypes检查类型

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

2020-07-01 09:05:10 3995

原创 Vue 数据双向响应机制

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

2020-06-30 11:51:42 4004

原创 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 4822

原创 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 4173

原创 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 4256 4

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

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

2020-03-14 12:07:50 4625

原创 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 6409 4

原创 Canvas 贪吃蛇大作战

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

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

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

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

2019-09-09 09:09:22 4097

原创 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 4092

原创 React 脚手架(6)React-router 安装,配置,调用,嵌套,传参

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

2019-08-22 16:41:46 4227

原创 Vue-6 Vuex(state, getters, mutations, actions, modules)

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

2019-08-05 17:31:52 4384

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

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

2019-08-02 17:41:11 5263

原创 Vue-4 路由的配置和调用,命名路由和命名视图,嵌套路由,重定向和别名

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

2019-08-02 11:49:01 4189

原创 Vue-3 props,$emit,slot,render,JSX和createElement

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

2019-08-01 13:14:13 5107

原创 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 4963

原创 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 4186

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

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

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

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

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

2019-07-06 10:28:50 4102

原创 ECMAScript 6 类和类的继承

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

2019-07-05 17:45:42 3908

原创 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 4088

原创 React脚手架(3)组件的样式和styled-components

组件的样式一、简单使用我们可以为每个组件单独创建一个css样式文件,然后在js文件中,直接导入使用:// header-nav.js...import './header-nav.css'...但是这种方式导入的样式会作用于全局。如果要让当前样式只生效于当前组件,可以在选择器上加以限制。比如在声明组件时为当前组件的根元素添加一个唯一的id或类名。然后在样式列表中加上这个选择器标识即...

2019-04-22 19:09:02 4316

原创 React脚手架(2)组件的结构和JSX

组件的创建前端的文件目录树,除了特定的配置文件之外,其他都可以按照自己的项目需求创建,但是要层次结构分明,一般情况下,我们按照组件功能或者路由来生成项目的目录树(示例在src目录下新建一个components文件夹,然后在其中新建组件)。组件的文件React中的组件都是以JS文件的形式呈现的。新建HeaderNav组件,那就新建一个header-nav.js组件的代码React...

2019-04-22 16:02:27 4322

原创 React脚手架(1)安装项目

脚手架环境配置从node官网下载node安装react脚手架环境npm install -g create-react-app安装react项目用终端打开你要安装项目的父级目录create-react-app myapp运行项目cd myappnpm start入口文件逻辑入口:src/index.js结构入口:public/index.html根组件:...

2019-04-22 09:28:08 3977 1

原创 JS中的this

本文不讨论let和const关键次Context上下文Context这个概念猛看起来比较晦涩,其实是很好理解的。你可以将其理解为代码“社交”的场所和范围。一个函数执行时可能要使用到一些变量,或者调用其他函数,这就是“社交”,既然是“社交”就跟生活中的社交一样,有场所,有范围。代码是机器语言,有严格的规范和标准,如果没有允许,是不能随意互相调用任何数据的,最明显的限制就是局部作用域和全局作用域。...

2019-04-17 17:55:39 4494 1

原创 如何快速入门新的H5前端框架

H5的框架近三年多以来发展的特别快,且各个公司用的框架不尽相同,有时候好不容易研究会了其中一种,结果入职新公司或者换项目时,又换框架了。很多时候前端都要快速的用一种没有用过的框架去写项目。这篇文章只说怎么快速入门,至于框架本身深层次的理念和底层代码逻辑,需要自己去深挖。如果你刚接触前端不久,那这篇文章的帮助可能没那么大(没有帮助也可能因为我写的不好)。如果有人接触过很多种的H5框架,那么就大概...

2019-04-17 16:43:17 4573

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除