yang&yang-CSDN博客

原创面试官常问的！从输入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 异步 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

qq_38187583的博客