tangzhl-CSDN博客

转载 react-router的实现原理

目前，react的生态越来越丰富，像flux redux react-router已经被越来越多的使用，本文就react-router的内部实现进行分析。文章主要包含两大部分: 一是对react-router赖以依存的history进行研究；二是分析react-router是如何实现URL与UI同步的。1. react-router依赖基础 - history1.1 History整体介绍hist...

2018-03-26 11:46:36 17378

转载 bind实现原理

bind官方描述bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造...

2018-03-23 16:32:21 4360 1

转载节流函数和防抖函数学习

首先自己理解的概念：防抖函数：防抖按照我的理解就是不管你触发多少次，都等到你最后触发后过一段你指定的时间才触发。节流函数：节流就是，不管怎么触发，都是按照指定的间隔来执行。实例：防抖函数例子：基础版本:现在有个要求就是刚开始的时候也触发，最后一次也触发，并且可以配置，先写个测试页面方便测试功能，每次按空格键就会让数字加1，来测试防抖和节流函数。通过 leading 和 trailing 两个参数来...

2018-03-23 11:16:36 769

转载 JS中call、apply、bind大概区别

为什么需要这些？主要是因为this，来看看this干的好事。box.onclick = function(){　　function fn(){　　　　alert(this);　　}　　fn();};123456我们原本以为这里面的this指向的是box,然而却是Window。一般我们这样解决：box.onclick = function(){　　var _this = this;　　...

2018-03-06 11:46:08 182

转载 apply、call、bind区别、用法

apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；如果使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，就是说要全部列举出来；他们的常用用法：1.数组之间的追加；2.获取数组中的最大值和最小值，利用他们扩充作用域拥有Math的min和max方法；...

2018-03-06 11:11:43 204

转载 webpack打包优化解决方案

单页应用首次进入项目会获取一部分数据，之后将JS包分片，走到那块再去加载那块的JS。这样跨页面重复的JS，CSS不必再去获取，跨页面就不会出现进度条。这样减少了等待时间，提升了用户体验，省去了不必要的流量。但是单页应用也有一个显著的问题：首次进入的时候，加载的资源太多，白屏时间太长。这里介绍一些常用的webpack打包优化解决方案使用插件查看项目所有包及体积大小webpack外部扩展DLL方式一、...

2018-02-08 16:54:16 2285

转载入门Webpack，看这篇就够了

入门Webpack，看这篇就够了（转载下面大牛的~） zhangwang 已关注2017年12月7日更新，添加了clean-webpack-plugin,babel-env-preset,添加本文涉及到的所有代码的示例，如果你在学习过程中出错了，可点击此处参考写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳...

2018-02-08 16:52:59 141

转载【react】利用prop-types第三方库对组件的props中的变量进行类型检测

【react】利用prop-types第三方库对组件的props中的变量进行类型检测1.引言——JavaScript就是一个熊孩子 1.1对于JSer们来说，js是自由的，但同时又有许多让人烦恼的地方。javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java这些“好孩子”那样循规蹈矩。因此给我们带来许多烦恼运行时候控制台报错：uncaug

2017-11-29 11:31:22 284

转载 Sublime Text3 一些功能，插件，设置

Sublime Text 3最好的功能、插件和设置时间 2015-12-17 14:33:14 WEB前端开发原文 http://www.css88.com/archives/5858主题 Sublime Text翻译自： Best of Sublime Text 3: Features, Plugins, and SettingsS

2017-11-06 17:48:57 977

原创 package.json和config.js有什么关联么

pacakge.json是你的项目引用的nodejs（npm）插件的索引，用npm install可以安装所有罗列的插件。webpack.config.js是webpack的config文件，作用是告诉webpack如何把你的项目当中的js文件整合成一个并且附加版本号，以及uglify。

2017-10-14 14:55:25 673

转载 package.json 详解

package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式。通常我们在创建一个NPM程序时，可以使用npm init命令，通过交互式的命令，自动生成一个package.json文件，里面包含了常用的一些字段信息，但远不止这么简单。通过完善package.json文件，我们可以让npm命令更好地为我们服务。如果你有个新的项目，

2017-10-14 14:54:20 276

转载 webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

一.webpack基础　　1.在项目中生成package.json：在项目根目录中输入npm init，根据提示输入相应信息。（也可以不生成package.json文件，但是package.json是很有用的，所有建议生成）　　2.安装webpaack　　　　a.在全局中安装webpack：npm install webpack -g　　　　b.将webpack

2017-10-14 14:19:01 516

转载 React虚拟DOM浅析

在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。什么是虚拟DOM？虚拟DOM VS 直接操作原生DOM？虚拟DOM VS MVVM？对React虚拟DOM的误解？一、什么是虚拟DOM？在React中，rende

2017-10-08 22:01:02 235

转载 react-redux原理分析

前言react和redux并没有什么直接的联系. redux作为一个通用模块, 主要还是用来处理应用中的state的变更, 而展示层不一定是react.但当我们希望在React + Redux的项目中将两者结合的更好，可以通过react-redux做连接。本文结合react-redux的使用，分析其实现原理。react-reduxreact-redux是

2017-10-08 21:45:09 831

转载对React-redux中connect方法的理解

关于React-reduxRedux是React全家桶的重要一员，之前在知乎上也看到类似的提问：该如何通俗易懂的理解Redux? Redux是JavaScript的状态容器，Redux的概念简单明了：1. 应用中所有的状态都是以一个对象树的形式存储在一个单一的store中； 2. 当你想要改变应用的中的状态时，你就要dispatch一个action,这也是唯一的改变state的方法

2017-10-08 20:37:19 663

原创下拉框实现

在工作中原生的下拉框完成不了设计图的要求，select中option不能修改高度，因此需要自己模拟一个下拉框，用ul,li来实现一个下拉框的功能代码如下:*{padding:0;margin:0}body{font-family:"微软雅黑";font-size:16px}.box{width:600px;margin:200px auto;position

2017-07-06 14:30:25 744

转载 css3中transform的学习

CSS3 transform是什么？transform的含义是：改变，使…变形；转换CSS3 transform都有哪些常用属性？transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。下面我们来分解各个属性的用法：

2017-05-18 20:39:10 206

原创 ES6的模块化和commonJS以及AMD和CMD的区别

commonJS是运行时加载ES6模块化是编译时加载ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。CommonJS 模块输出的是值的缓存，不存在动态更新，而ES6是动态更新的，CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块是运行时加载，ES6 模块是编译时输出接

2017-05-14 11:02:44 1779

原创 ES6中Array的学习

1、Array.from()----->可将一个有length属性的字符串或者对象转换成数组的形式（Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。）可以传入三个参数，Array.from([ ],function,this):第一个参数是含有length

2017-05-09 16:17:42 446

转载 AMD和CMD

首先遵循的规范不同，AMD是“异步模块规范”而CMD是“通用模块规范”。作者：玉伯链接：https://www.zhihu.com/question/20351507/answer/14859415来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从

2017-05-07 20:26:21 271

原创 es6中"类"--class的方式创建对象和es5中正常用法比较

JavaScript语言的传统方法是通过构造函数，定义并生成新对象。下面是一个例子。（可以是工厂模式，构造函数模式，组合模式优缺点自己可以在网上查找）function Point(x,y){this.x=x;this.y = y;}Point.prototype.toString = function(){return '('+this.x+','+this.y+')';

2017-05-03 15:48:15 5274

转载 redux的 combineReducers 和 createStore 的实现原理

最近一直在学习 redux, 感到了深深的难过，都两天了，感觉还是不知道怎么写代码，倒不是不知道是Redux 里面涉及的概念，是不知道什么代码该放在哪里。怎么样组织结构。希望再过两天能更清晰。下面是中间学习到的 combineReducers 和 createStore 的实现原理，了解这些后，确实帮助了我更好的理解整个流程。combineReducers 的实现原理在探究 com

2017-05-01 15:52:37 831

转载 react和redux中的几种常用的方法

1. createStore(reducer, [initState, enhancer])------redux中的方法作用：创建一个Redux store来存放应用中所有的state，一个应用只能有个store。函数返回store对象。参数：reducer(Function)：两个参数：state和action，返回一个state。不要对参数state进行修改，需要返回一个新

2017-05-01 15:11:12 5864

原创初始化 State

初始化State的方法有以下方法：1.在创建store 的时候，createStore()方法的第二个参数preloadeState参数是初始化state的。2.在reducer中设置state的初始值state={...}，也可以使用ES6中默认的参数语法： function myReducer(state = someDefaultValue,action)如下代码：

2017-05-01 13:04:01 1860

原创 react-redux中的<Provider>

所有容器组件都可以访问 Redux store，所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了，因为必须要用 store 把展示组件包裹一层，仅仅是因为恰好在组件树中渲染了一个容器组件。建议的方式是使用指定的 React Redux 组件 Provider> 来魔法般的让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组

2017-04-29 18:29:43 1770

原创 redux中的combineReducer学习

在我们的reducer中有一个总的index.js文件，这个文件就是用了combineReducers( )方法把很多了reducer合并到一起，redux的官网学习中有如下解释：combineReducers() 所做的只是生成一个函数，这个函数来调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理，然后这个生成的函数再

2017-04-29 17:50:38 848

转载 react中context学习

简介：在React中，数据可以以流的形式自上而下的传递，每当你使用一个组件的时候，你可以看到组件的props属性会自上而下的传递。但是，在某些情况下，我们不想通过父组件的props属性一级一级的往下传递，我们希望在某一级子组件中，直接得到上N级父组件中props中的值。1.一般情况下通过props传值的情况class Button extends React.Component {

2017-04-28 15:53:10 1663

转载 redux的connect解读2

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])连接 React 组件与 Redux store。连接操作不会改变原来的组件类，反而返回一个新的已与 Redux store 连接的组件类。参数[mapStateToProps(state, [ownProps])

2017-04-28 14:38:48 373

转载 redux中的connect函数

上面一篇文章，我们只是从Demo的角度讲解了Redux，对于connect的部分，我们只是一笔带过。那么我们这篇文章同样是基于上一篇文章中的Demo，来从实战的角度来详细讲解下connect方法。connect方法声明如下：connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[opt

2017-04-28 13:39:05 1653

转载 react生命周期学习

组件的生命周期分为三个部分：（1）实例化；（2）存在期；（3）销毁&清理期。具体周期如下图所示：1.1 实例化创建在代码加载过程中至关重要，重要之处体现什么地方呢，这里粗略的简述几点，（1）实例化是首次加载js展示给用户最直观的内容，效率的高低直接决定体验的好坏；（2）实例化过程是对数据进行说明和描述的过程。（3）实例化过程完成了虚拟DOM和真实DOM的生成。下

2017-04-27 16:44:20 383

转载 Http报头Accept与Content-Type的区别

1.Accept属于请求头， Content-Type属于实体头。 Http报头分为通用报头，请求报头，响应报头和实体报头。请求方的http报头结构：通用报头|请求报头|实体报头响应方的http报头结构：通用报头|响应报头|实体报头2.Accept代表发送端（客户端）希望接受的数据类型。比如：Accept：text/xml; 代表客户端希望接受的数据类型是xml类型

2017-04-16 13:00:55 341

tangzhl的博客