- 博客(30)
- 收藏
- 关注
RSS订阅原创 Mockjs
什么是Mockjs在Mockjs的官网中，就直接能看到这样的一句话：生成随机数据，拦截Ajax请求。这句话集中体现了Mock.js能够干什么！Mockjs的使用场景如今，前端所承载的东西越来越多，前后端分离开发已经渐渐成为趋势。前端开发，离不开数据展示，这个时候，需要一些相对真实的，能够模拟数据的需求就越发的强烈了，而Mockjs就应运而生！它可以真实的模拟接口调用，直...
2018-03-27 15:07:15
533
转载 完全理解高阶组件
高阶组件定义a higher-order component is a function that takes a component and returns a new component翻译：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。理解了吗？看了定义似懂非懂？继续往下看。函数模拟高阶组件我们通过普通函数来理解什么是高阶组件哦~最普通的方...
2018-03-26 14:37:07
8481
原创 redux教程（四）异步的actions
问题描述异步的action中，我们有一个中间件的概念。什么是中间件，我们先不用管。但是我们要看到，我们上面的处理逻辑的不足之处。目前只有同步的dispatch。而没有异步的dispatch。为了解决这个问题，redux有了中间件的概念。在这些中间件中，redux-thunk是最常用，最实用的一个中间件，允许我们进行异步dispatch。也就是我们可以dispatch一个fu...
2018-03-25 23:28:51
1366
原创 redux教程（三）在react中使用redux
react-reduxredux实现了一种机制，灵活的存储state，提供了获取state的方法——getState。提供了改变state的唯一方式：dispatch一个action。也提供了一种state的监听机制——subscribe。但是在一个react项目中，redux还没有做到——如何把state注入到每一个组件容器中，以及组件如何接收state的值！这就需要使用一种在react...
2018-03-25 20:52:39
731
原创 redux教程（二）redux的相关示例以及实现原理
简单示例前面一个章节，我介绍了一下redux的基本概念，那么利用前面讲的那些基本概念，我在这里，写一个关于redux的最简单的示例。import { createStore } from 'redux';const store = createStore(function(){ return { userName:'mapbar_front', a...
2018-03-25 19:52:31
801
原创 redux教程（一）——理解redux
redux是干什么的react的页面应用越来越复杂，数据和状态的管理也越来越复杂，甚至夹杂着ajax异步请求对数据状态的变更。不知从什么时候开始——react框架的数据状态的管理已经越来越难以控制和预测！！redux就是针对难以处理的数据管理，提出的一种解决方案。它能够让你的页面的数据管理更轻松。为什么要用redux当问到为什么要使用redux的时候，我觉得有一句话特别经典。当...
2018-03-25 00:09:49
5058
原创 react-router-dom示例讲解（9）模糊匹配
react-router-dom的官方示例中，模糊匹配是比较简单的一个示例。效果图如下： 在App.js中：import React, {Component} from 'react';import { BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react...
2018-03-22 21:44:54
2121
原创 react-router-dom示例讲解（8）侧边栏
在react-router-dom的官方示例中，侧边栏是非常容易实现的一个示例，奇实现的核心就是展示两组Routes。本示例的效果图如下： 相关的核心代码：import React, {Component} from 'react';import { BrowserRouter as Router, Route, Link, Switch, ...
2018-03-22 00:19:42
2827
原创 react-router-dom示例讲解（七），路径递归
在react-router-dom的官方示例中，路径递归不是最难的，但是绝对是一个比较难理解的示例demo。本示例的效果图如下： 相关示例核心代码：import React, {Component} from 'react';import { BrowserRouter as Router, Route, Link, Switch, Re...
2018-03-21 23:26:32
1455
原创 react-router-dom示例讲解（六）——未匹配（404页面）
react-router-dom的官方示例中，未匹配的示例也是一个比较简单的示例了。其核心就是Switch组件的匹配规则——仅仅匹配第一个符合条件的Route。实现的效果图： 相关示例代码：import React, {Component} from 'react';import { BrowserRouter as Router, Route, L...
2018-03-20 00:13:54
6715
原创 react-router-dom示例讲解（五）——阻止导航
在react-router-dom的官方示例中，阻止导航也是一个较简单的示例。其核心就是Prompt组件。它有一个message属性，当导航离开当前page的时候，会提示这个message信息。它的另一个重要的属性是when属性，when属性的作用是当它的值为true时，才会触发消息提示，值为false的时候，不会触发消息提示。效果图： 相关代码示例：import React, ...
2018-03-19 23:31:55
2265
原创 react-router-dom示例讲解（四）——自定义链接
在react-router-dom的官方示例中，自定义链接算是一个比较简单的功能了。其核心就是Route以及其children属性的使用。效果示例的展示： 相关代码：//在App.js中import React, {Component} from 'react';import { BrowserRouter as Router, Route, Lin...
2018-03-19 22:53:19
2026
原创 react-router-dom示例讲解（三）——认证功能
在官方的示例中，认证是属于比较难的一个示例，主要是它涉及到数据的管理问题。实现的效果图如下所示： 登录成功后： 实现的整体思路：在整个页面中，定义一个状态，叫 isLogin。由这个状态进行控制protected page的展示问题。相关代码的示例：//在App.js中import React, {Component} from 'react';import {...
2018-03-19 22:05:25
2910
原创 react-router-dom示例讲解（二）——url路径参数
react-router-dom的官方教程中，第二个示例是路径参数，是一个比较简单的示例。这个示例给了我们一个如何匹配路径参数的示例或者方法。本示例实现的效果如下： 在路由设计中，我是这样实现的：import React, { Component } from 'react';import { BrowserRouter as Router, Route, ...
2018-03-18 22:59:28
8525
原创 react-router-dom示例讲解（一）——基本使用
在react-router-dom的官方教程中，一共给出12个示例，但是个人认为，着12个示例看着真的很累人，很多写法，不是标准的企业项目应用的写法，所以针对这个现状，我想用企业项目开发的要求，对教程中的每一个示例进行重写，这篇教程就是它的第一个示例——基本使用。原则上，我默认为你已经搭建好了关于react-router-dom的脚手架开发环境，这里不进行赘述。如果有不明白的，具体可查看这篇文...
2018-03-18 22:09:56
14513
原创 RegExp是什么
RegExp是JavaScript语言中的内置对象，$1是这个内置对象的一个属性。在MDN中这样介绍：属性的值是只读的而且只有在正确匹配的情况下才会改变.括号匹配项是无限的, 但是——RegExp对象能捕获的只有九个.也就是 RegExp.$1RegExp.$2RegExp.$3…RegExp.$9到底是什么意思呢？从代码中看：var reg = /(\d...
2018-03-16 21:05:47
1990
原创 React教程（六）——使用 create-react-app 快速构建 React 开发环境
1、create-react-app是什么？ 做一个react项目，构建其开发环境对初学者来说是很困难的！所以，facebook专门出了create-react-app命令，用于react项目开发环境的构建！create-react-app是基于webpack+ES6创建的。2、如何使用。 依次在命令行执行以下命令就能完成项目的构建。cnpm install -g create...
2018-03-16 15:49:54
20188
7
原创 React教程（五）——生命周期函数
生命周期函数，是react框架的难点内容，你要知道，每一个生命周期函数是干什么的？它们的使用场景是什么？当某一种条件下，它们有着怎样的执行顺序？每一个生命周期函数，应该注意的点是什么？react中，周期函数主要有九个： 函数名 作用描述 constructor 定义页面的状态，仅初始化的时候调用一次 componentWillMount 组件挂载之...
2018-03-14 21:33:55
1537
原创 React教程（四）——组件传值和通信
组件传值，是react中的重点知识，当然对于初学者，也是难以理解的重点知识。React有两个特殊概念——props、state。state用于界面状态管理。props用于组件传值。它的使用分为两种，一种是父传子，另一种是子传父！父传子父元素传递给子元素，只需要在父元素的对应组件上写上props。然后在子元素直接读取到props。 父元素：<Com title...
2018-03-14 17:16:06
762
原创 React教程（三）——样式和图片加载问题
1、样式样式是一个界面的展示问题的核心，在样式方面，react和一般的web网页的区别还是挺大的。第一、在react中，不使用class属性来添加样式，而是使用className属性。第二、在react中，它的内联对象是使用对象的方式来表达的，而一般的web网页的内联样式，是一个字符串。示例如下：//css.colorRed{ color: red;}//re...
2018-03-13 21:43:36
9193
原创 React教程(二)——jsx语法、条件渲染、列表渲染
1、JSX 语法在react中，就是使用jsx的语法，来实现DOM元素的展示。一个基本的jsx语法的react模板如下：<div>{this.props.title}</div>这种方式的本质是：在html中嵌入js表达式！！那到底编译器如何对jsx语法进行编译的呢？规则就是这样的： 遇到以“<”开头以“>”结尾就按照HTML的语法来解析，遇到“...
2018-03-13 00:01:14
4538
原创 react教程(一)——react优势以及组件、state、props介绍
1、react是什么？它的优势在哪？ react是在前端的单页面应用领域中，处于领导地位！它使用虚拟DOM和组件化开发的方式，重新定义了前端开发的方式。如果说react的优势在哪？我认为是这两点！第一点、虚拟DOM。 虚拟DOM的方式，能够极大的提高react项目的性能问题！ 那浏览器的性...
2018-03-12 16:14:07
1278
1
原创 基于vue、vue-router、axios的App项目的总结
项目需求我的项目的github地址： https://github.com/liwudi/VueProject.git 1、基本的登录注册功能 2、主页面的商品展示、商品分类、轮播。购物车的功能、我的订单的功能、用户中心的相关功能。相关界面的展示1、登录注册 2、主界面——首页 3、主界面——购物车 其他界面信息可以自行在我上面提供的github地址去查看。...
2018-03-09 23:19:27
4301
原创 微信小程序知识体系梳理
小程序介绍17年一月9号，小程序刚发布的时候，个人很幸运的成为第一批吃螃蟹的人，当然也是第一批采坑的人。小程序是基于微信的一种应用，使用微信自定义的组件，让我们使用JavaScript的方式，达到匹配原生应用的效果。小程序的一大优势就是，你只要有个微信，你就能搜索你所需要的点餐、买票、旅游等一些日常需求的小程序，而且——用完即毁、无需下载。小程序开发所需要的技能小程序是最适合前...
2018-03-09 17:11:51
2495
原创 设计模式——Observer（观察者）模式
解决的问题代码中，通常有这样的一种需求。几个松散耦合的对象，或者组件，如何进行有效的通信，或者说，当其中的一条数据改变，其他组件的相应数据也会跟着改变，我们该如何实现？观察者模式，通常是用来解决这一类的问题的！概念观察者模式的概念是什么？一个或者多个对象如果对目标的状态感兴趣，通常会将自己依附在这个对象上，以便于获取自己感兴趣的内容。当目标状态发生改变，就会发送一个通知消息...
2018-03-07 02:02:42
392
原创 设计模式——Singleton（单例）模式
Singleton（单例）模式限制了类的实例化次数只能一次。该实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的新实例。如果该实例存在，则会则会返回该对象的一个引用。应该有这样的一种理解，单例模式既不是对象，也不是返回的一个类，而是描述了一种结构。var singleton = { var instance; function init(){ ...
2018-03-06 09:12:13
257
原创 设计模式——Revealing Module（揭示模块）模式
揭示模块模式，是在Module（模块）模式上改进的一种方法。它能够在私有范围内简单定义所有的函数和变量，并返回一个匿名对象。它拥有指向私有函数的指针。一个基本的揭示模块的方式如下：var MyInfo = (function(){ var name = mapbar_front; var age = 26; function getInfo(){ ...
2018-03-05 02:28:20
339
原创 设计模式——Module（模块）模式
Module的实现方式在JavaScript中，有这样几种实现模块的方式。对象的字面量表示法Module模式AMD模块CommonJS模块ECMAScript Harmony模块 针对这些方式，Module（模块）模式，作为设计模式的一种，需要研究。对象的字面量这样的方式是对象被描述为一组包含在大括号中，以逗号分隔的键值对。var myObject = { ...
2018-03-05 01:54:41
968
原创 设计模式——Constructor(构造器)模式
JavaScript不支持类的概念，但是可以用 function 进行模拟，也就是通过在构造器函数面前加 new 关键字，实例化一个对象。在构造器内部，this 关键字引用新创建的对象。一个基本的构造器看起来像这样。function Cat(name, age){ this.name = name; this.age = age; this.getName ...
2018-03-05 00:23:06
611
原创 设计模式（一）
1、模式是什么？模式是一种可复用的解决方案，可用于解决软件设计中遇到的常见问题。模式也可以是一种解决问题的方法的模板。2、设计模式的好处是什么？模式是一种已经验证的解决方案模式很容易被复用模式富有表达力3、什么是优秀的模式？解决特殊问题模式不应该知识获取原则或策略，他们需要获取解决方案。没有显而易见的解决方案解决问题的技术基本来自众所周知的基本原则。最好...
2018-03-03 13:36:05
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人