自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(28)
  • 收藏
  • 关注

原创 面试官常问的!从输入URL到页面展示完成浏览器做了些什么?

为什么输入URL就可以显示想要的页面?浏览器偷偷做了些什么?前端可以针对这些做哪些优化?最近,在准备面试,这个问题我是被面试官问怕了,浏览器到底做了什么?你去问浏览器呗(尴尬)。想一下还是系统学习总结一下吧,话不多说看张图!可以看出来,从输入URL到浏览器显示完成可以大概分为5个阶段:DNS解析 TCP阶段 HTTP阶段 解析 / 渲染阶段 布局layout / 渲染页面...

2019-09-26 11:04:20 461 2

原创 table列表滚动

css<style>* { margin: 0; padding: 0;}.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: auto;}table tr.even{ ...

2019-03-13 16:00:55 2375

转载 redux-thunk

redux-thunk 是一个比较流行的 redux 异步 action 中间件,比如 action 中有 ****setTimeout**** 或者通过 ****fetch****通用远程 API 这些场景,那么就应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式,把异步过程放在 action 级别解决,对 component 没有影响...

2019-01-10 10:16:56 389

转载 深拷贝与浅拷贝的区别,实现深拷贝的几种方法

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);...

2019-01-07 10:22:03 359

转载 React 中组件间通信的几种方式

在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信下面依次说下这几种通信方式。父组件向子组件通信这是最简单也是最常用的一种通信方式:父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。下面是演示代码:父组件 App.js:...

2019-01-03 10:36:19 155

转载 React:组件的生命周期

在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。实例化当组件在客户端被实例化,第一次被创建时,以下方法依次被调用:1、getDefaultProps2、getInitialState3、componen...

2018-12-24 11:06:21 132

原创 列表垂直向上循环滚动(每次滚动一条)

<ul id="Scroll"> <li>1.多发发沙发沙发发防辐射服</li> <li>2.框架来军军军军绿军绿军绿军</li> <li>3・一一飞洒发拉设计费垃圾粉拉数据弗利萨就发设计费</li> <li>4・吃吧吧是阿凡达沙发沙发上发大

2018-10-12 16:56:11 8076 1

转载 关于react-redux中的connect用法介绍及原理解析

关于react-redux的一个流程图流程图connect用法介绍connect方法声明:connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])作用:连接React组件与 Redux store。参数说明:mapStateToProps(state, ownProps) ...

2018-10-10 18:32:47 1764

原创 rxjs工具操作符

一 delay操作符源Observable延迟指定时间,再开始发射值。import { Component, OnInit } from '@angular/core';import { of } from 'rxjs/observable/of';import { delay } from 'rxjs/operators/delay';@Component({  sele...

2018-09-17 18:43:41 1449

原创 rxjs转化操作符

一 map操作符类似于大家所熟知的 Array.prototype.map 方法,此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果。import { Component, OnInit } from '@angular/core';import { Observable } from 'rxjs/Observable';import { of }...

2018-09-17 18:35:45 745

原创 rxjs过滤操作符

一 take操作符只发出源 Observable 最初发出的的N个值 (N = count)。 如果源发出值的数量小于 count 的话,那么它的所有值都将发出。然后它便完成,无论源 Observable 是否完成。import { Component, OnInit } from '@angular/core';import { range } from 'rxjs/observab...

2018-09-17 18:25:39 956

原创 rxjs组合操作符

一 merge操作符把多个 Observables 的值混合到一个 Observable 中import { Component, OnInit } from '@angular/core';import { of } from 'rxjs/observable/of';import { range } from 'rxjs/observable/range';import {...

2018-09-17 18:16:17 391

原创 rxjs创建操作符

一 of操作符import { Component, OnInit } from '@angular/core';import { of } from 'rxjs/observable/of';import { Observable } from 'rxjs/Observable';@Component({selector: 'app-create',templateUrl...

2018-09-17 17:59:02 136

转载 dva.js 上手

初始化安装 dva-cli 用于初始化项目:npm install -g dva-cli# 或yarn global add dva-cli创建项目目录,并进入该目录:mkdir your-projectcd your-project初始化项目:dva init然后运行 npm start 或 yarn start 即可运行项目。目录结构项目初...

2018-09-17 11:17:51 533

转载 React+dva+antd的运用

前言技术资料react + dva + redux + react-router + redux-sage + antd + antd动画总的来说dva是一个很简单的项目 一步步跟大家来说一下把效果图 初始化环境配置因为项目中使用了antd的关系 所以 这边需要做一下设置 才可以正常使用文件名称是:.roadhogrc目录结构 初始化dva...

2018-09-17 10:22:52 565

原创 界面自适应屏幕宽度代码

/**** 界面自适应屏幕宽度代码**/sizeAdaptation();$(window).resize(function(){sizeAdaptation();});/*** 需要在html上增加 class = page-content-adapt-ui 特殊属性*/function sizeAdaptation(){//特殊页面 不执行var except =[...

2018-09-11 10:49:50 2044

翻译 RXJS6新特性的讲解

快速修复对于写了半年多的项目,模块已经很多了,所以不可能在升级到angular6后马上更新所有代码关于RXJS6的新特性,所以官方给出了一个可以暂时延缓我们不需要修改rsjx代码的办法npm install --save rxjs-compat优点: 暂时不用改代码,可以一点点地改,直到改完后吧这个包卸掉缺点: 对于rxjs6的rename的operator无效,所以,如果有用到r...

2018-09-10 16:41:38 1661

转载 工作中常用到的ES6语法

一、let和const 在JavaScript中咱们以前主要用关键var来定义变量,ES6之后,新增了定义变量的两个关键字,分别是let和const。对于变量来说,在ES5中var定义的变量会提升到作用域中所有的函数与语句前面,而ES6中let定义的变量则不会,let声明的变量会在其相应的代码块中建立一个暂时性死区,直至变量被声明。let和const都能够声明块级作用域,用法和...

2018-09-06 11:15:07 223

原创 angular生命周期钩子

按照生命周期执行的先后顺序,Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。 OnChanges 指令和组件 ...

2018-09-05 19:14:05 1330

原创 angular5.x UI 框架 ant desigin 介绍 安装 使 用

一、Angular5 UI 库 Ant Desigin 介绍Ant Design 是我们(蚂蚁金服 Ant Design 团队)开发的一款优秀的前端框 UI 库架支持 React和 Angular5。Ant Design 很久以前只支持 React,但是 Facebook React 开源协议修改后, 阿里巴巴 Ant Design团队开始了 Angular5 的支持。据了解,...

2018-09-05 19:07:43 1022 1

原创 Angular5.x 中的路由

一、Angular 命令创建一个配置好路由的项目1. 命令创建项目ng new demo02 –-routing2. 创建需要的组件ng g component homeng g component newsng g component newscontent3. 找到 app-routing.module.ts 配置路由引入组件import { HomeC...

2018-09-05 18:53:25 471

原创 Angular4.x中的路由

一、Angular 命令创建一个配置好路由的项 目1. 命令创建项目ng new demo02 –-routing2. 创建需要的组件ng g component homeng g component newsng g component newscontent3. 找到 app-routing.module.ts 配置路由引入组件import { Ho...

2018-09-05 18:39:55 416

原创 angular 父子组件传值@Input @Output @ViewChild

一、父组件给子组件传值 -@Input1. 父组件调用子组件 的时候传入数据<app-header [msg]="msg"></app-header>2. 子组件引入 Input 模块import { Component, OnInit ,Input } from '@angular/core';3. 子组件中 @Input 接收父组件传过来的数据...

2018-09-05 18:20:26 265

原创 angular get post 以及 jsonp 请求数据

一、app.module.ts 注册 HTTP JSONP 服务1.引入 HttpModule 、JsonpModule普通的 HTTP 调用并不需要用到 JsonpModule,不过稍后我们就会演示对 JSONP 的支持, 所以现在就加载它,免得再回来改浪费时间。import { HttpModule, JsonpModule } from '@angular/http';2...

2018-09-05 18:15:57 717

原创 Angular4.x 创建使用服务

一、Angualr CLI 创建服务二、创建服务命令 ng g service my-new-service 创建到指 定目录 下面 ng g service services/storage 三、app.module.ts 里面引入创建的服务1.app.module.ts 里面引入创建的服务import { Sto...

2018-09-05 18:10:00 1469

原创 angular4.x 创建组件、绑定数据、绑定属性、 数据循环、条件判断、事件、表单处理、双 向数据绑定

一、创建 angualr 组件Scaffold Usage Component ng g component my-new-component 指定目录创建 :ng g component components/Footer Directive ng g directive my-new-directive Pipe ng g p...

2018-09-05 18:07:36 532

原创 angular4.x 安装、创建项目、 目录结 构介绍、创建组件

注意 : 请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误,更新的版本则没问 题。 全局安装 AngularCLI 脚手架工具(只需 要安装一次)。 1. 使用 npm命令安装npm install -g @angular/cli 2. 安装 ...

2018-09-05 17:53:28 353

转载 关于数组中forEach() 、map()、filter()、reduce()、some()、every()的总结

关于数组中forEach() 、map()、filter()、reduce()、some()、every()的总结1、forEach()var arr = [1,2,3,4]; arr.forEach((item,index,arr) => { console.log(item) //结果为1,2,3,4 }) //forEach遍历数组,无返回值,不改变原数组,仅仅只是遍历、常用于...

2018-09-05 17:42:03 164

空空如也

空空如也

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

TA关注的人

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