风火一回-CSDN博客

原创 Flex布局

Flex布局常用的布局方式有3种：display:css内联和块级布局。position:绝对、相对定位布局。float:浮动布局。传统的布局方式存在一个很明显的问题，那就是垂直居中不易实现。flex:弹性盒子布局，可以更好的实现响应式布局。Flex的使用Flex容器任何容器都可以flex布局。Flex容器的所有子元素也自动成为容器的成员，成为Flex项目。Flex容器默认存在2根轴线（水平

2017-11-13 11:46:32 6868

React-Mirrormirror是阿里巴巴团队提供的一个开源框架。其主要作用是简化React、Redux开发的步骤。传统的React-Redux开发，需要逐步定义action、reducer、component等相关东西，看起来比较冗长。mirror框架将这些操作进一步封装，使之使用起来更加简单。安装Mirror$ npm i --save mirror使用import React from '

2017-09-13 14:28:52 3014

原创 React生命周期详解

React生命周期详解React严格定义了组件的生命周期会经历如下三个过程：装载过程（Mount），组件第一次在DOM树渲染的过程。更新过程（Update），当组件被重新渲染的过程。卸载过程（Unmount），组件重DOM树中删除的过程。执行这3个过程的调用函数就是声明周期函数。装载过程该过程会依次调用如下函数：constructor():ES6类的构造函数（为了初始化state或绑定th

2017-09-13 14:25:28 8841 1

原创 React动画效果

React动画效果平常我们使用的动画效果大多和jQuery.animate()相关，但是React就是被用来取代jQuery的。所以在动画实现的选择上我们常常选择CSS3的原生支持来实现。但是，CSS3的动画过程是:“在什么时间范围内，以什么样的运动节奏完成动画”。在用原生CSS3实现动画时，不好调试，因为动画过程可能一闪而过，并且在React中，样式的渲染必须等到组件已经挂载完成后，那么在组件加载

2017-09-13 14:21:06 3048

原创 ESLint配置详解

ESLint配置详解解析器选项（parserOptions）"parserOptions": { "ecmaVersion": 6, //ES的版本，默认为5 "sourceType": "module", //指定源代码存在的位置，script | module，默认为script。 "ecmaFeatures": { //指

2017-09-13 14:18:48 21122

原创 javascript:void(0);在火狐、IE中也会跳转到新的页面问题

在项目中遇到一个奇怪的问题：<a target="_blank" href="javascript:void(0);">点我啊</a>这样一段代码，在谷歌中点击a标签，并不会发生页面跳转，但是在IE和火狐则会跳转到一个空白页面。问题原因浏览器默认处理事件的顺序有差异。 Chrome顺序：onclick -> href -> target IE和Firefox顺序：onclick -> ta

2017-08-21 14:54:32 7060

原创自定义React图片上传组件

现在网上有很多封装好的插件，但是我没有找到适合我们项目需求的，所以自定义封装了这个图片上传组件。该组件是基于React设计的，希望对你有帮助。你也可以去https://github.com/windSandEye/img-upload/tree/master下载我的源码。组件js文件(img-upload.js)import React from 'react';import { Icon, Mo

2017-08-04 10:19:44 3980 2

原创 ES6-Generator函数和async函数

ES6-异步函数Generator是一个状态机，它封装了多个内部状态。执行它将生成一个遍历器对象。Generator有2个特征：声明时使用function*函数内部使用yield声明内部状态调用函数后，函数并不执行，而且返回的也不是函数运行结果，而是一个指向内部状态的对象。function* helloWorldGenerator() { yield 'hello'; yield 'w

2017-07-05 15:47:37 1147

原创 js深拷贝对象

浅拷贝和深拷贝的区别浅拷贝：只拷贝对象的基础属性值，对属性值为对象或数组的属性则拷贝指针。深拷贝：拷贝对象的所有属性作为一个全新的对象。拷贝前后的对象互不影响。浅拷贝var a = {name:"test",children:{name:"test1"}}//浅拷贝var b = { name:a.name, children:a.children}a.name = "字

2017-07-05 13:45:53 4329

原创 React-Redux学习

Redux流程图React和Redux分工React-Redux将所有组件分为了UI组件和容器组件。UI组件不带任何逻辑，只负责渲染，所有的数据都通过this.props提供。（由React负责）容器组件负责数据管理和业务逻辑处理。（由Redux负责）Providerreact-redux提供了Provider组件，用于保存store给子组件中connect使用。将它包裹在根组件的最外层，它会将st

2017-06-01 13:48:54 629

原创 promise深入了解

Pormise深入了解import React from "react";export default class Footer extends React.Component{ constructor(props){ super(props) this.state = { flag : 0, result:''

2017-05-27 11:35:31 1052

原创 ES6对象扩展

ES6对象扩展对象简写ES6允许属性和方法名简写方式。属性名的简写即只书写属性名，属性值则为与属性名同名的变量值。方法简写即是省略function关键字。属性简写let name="es6"" style="border: 0px; display: block;font-family: Consolas, Inconsolata, Courier, monospace

2017-05-25 13:23:23 787

原创 Redux入门

简介Redux是一个非常有用的框架，他主要解决状态的统一管理问题。而React则将所有组件视为状态机,所以Redux可以看作是一个React的数据管理中心。但需要注意，并不是必须用Redux来管理数据，只是该框架让复杂业务逻辑和多组件通信更加方便。Redux的思想主要概括为下面2点：a.Web 应用是一个状态机，视图与状态是一一对应的。b.所有的状态，保存在一个store对象里面...

2017-05-25 08:55:48 825

原创 Promise对象详解

1.简介Promise是抽象异步处理对象以及对其进行各种操作的组件。2.对象状态Promise对象有2种状态:promise对象被 resolve 时的处理(onFulfilled)promise对象被 reject 时的处理(onRejected)3.创建Promise对象创建一个Promise对象一般分为2步：

2017-05-19 17:08:18 2470

原创 React组件间通信

1.父组件->子组件父组件向子组件通信是通过在子组件中定义属性实现的，然后子组件可以使用this.props拿到父组件的方法或者参数。例如：父组件import React from 'react';import ButtonTest from './ButtonTest.js'export default class RuleDemo3 extends React.Compone

2017-05-12 12:45:38 410

转载 React、ReactDOM、ReactDOMServer相关API

React组件及子组件最终通过render方法渲染到DOM中，该方法由ReactDOM类库提供。页面的渲染可以在客户端或服务端完成，ReactDOMServer类库使你可以在服务端完成组件的渲染。通过this.props.children属性可以访问组件的子节点，而对子节点的处理的方法则由React.Children类提供。ReactDOM类库1.1 渲染ReactEl

2017-05-11 11:15:32 512

转载 React表单

表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。 React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。约束性和非约束性组件表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。约束性组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的。

2017-05-11 11:05:57 299

原创 React开发调试工具

1.插件下载首先，下载react-eveloper-tools开发调试工具插件。官网下载路径：https://github.com/facebook/react-devtools谷歌下载.crx后缀的文件，火狐下载.xpi后缀的文件。因为谷歌插件下载需要翻墙，这里提供一个本地资源：http://download.csdn.net/detail/mafan121/9838773

2017-05-11 10:42:32 15772

原创 React对static的支持

在使用ES6编写React组件的时候，你会发现es6支持的static defaultProps = { autoPlay: false, maxLoops: 10,};static propTypes = { autoPlay: React.PropTypes.bool.isRequired, maxLoops: React.Pr

2017-05-10 17:28:31 7041 1

原创 React学习

React拥有独有的语法，jsx语法。使用React至少需要3个包的支持：react.js:React核心库react-dom.js:React与DOM相关的操作库Browser.js:将JSX语法解析成JavaScript语法，这一步比较耗时，最好放在服务端完成。一般情况下，我们会使用如下命令安装React:cnpm install --save-dev

2017-05-10 16:25:06 353

原创 react+webpack入门（2）

这一篇将在上一篇的基础上做修改，不太清楚的朋友可以看这里：http://blog.csdn.net/mafan121/article/details/71425526首先，在components文件夹下创建ContentTest.js文件，文件内容如下：import React from 'react';export default class ContentTest exte

2017-05-08 18:11:46 313

原创 react+wepack入门(1)

1.新建一个空项目2.生成package.json文件在Teriminal中执行：cnpm init修改生成文件中的scripts："scripts": { "start": "webpack", "dev":"webpack-dev-server" },这里的配置意思是：可以用npm start代替webpack命令，用npm

2017-05-08 17:55:46 965

原创 webstorm+webpack创建项目

1.使用webstrom创建一个空的项目2.在项目下创建文件夹和文件a.创建css文件夹存放index.css文件，文件内容如下： p{ font-size: 24px; padding:0 100px; color:blue;}p:nth-of-type(2) { font-size: 30px; text-align: cent...

2017-05-05 16:15:51 20035 9

原创 webpack入门

1.webpack介绍webpack是一个模块加载器兼打包工具。它是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。支持对react热插拔。2.安装（使用淘宝镜像）a.全局安装cnpm install webpack -gb.局部安装（安装在项目根目录下）首先，自动生成package.json文件c

2017-05-05 12:47:17 1362

原创 nodejs入门

1.安装nodejs下载地址：https://nodejs.org/en/download/可参考该地址进行安装：http://www.runoob.com/nodejs/nodejs-install-setup.htmlNode.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动，

2017-05-03 16:35:08 354

原创 easyui常见问题集锦

1.tree问题：选中一个文字较长的树节点，部分文字没有选中颜色。原因：树节点的选中颜色是定义在父节点上的，而父节点的长度由包裹节点的元素决定，所以节点本身是没有颜色渲染的。解决方法：找到easyui/themes/default/tree.css。添加如下样式：.tree-node-selected .tree-title{ background: #FBEC88; co

2017-04-14 18:15:12 5588

原创 eclipse在git提交时忽略不必要的文件

eclipse下使用git提交代码时，有很多文件是不需要提交的，例如：target目录下的文件和classes下的文件都不需要提交。这里讲解一下如何忽略不必要的文件。方案一：为项目添加.gitignore文件，在该文件中配置需要忽略的文件。a.打开Navigator窗口，找到.gitignore文件（如果没有就添加一个）。b.配置需要忽略的文件。这里配置忽略ta

2017-03-29 20:29:30 44328 2

转载 js排序总结

冒泡排序依次比较相邻的两个元素，如果后一个小于前一个，则交换，这样从头到尾一次，就将最大的放到了末尾。从头到尾再来一次，由于每进行一轮，最后的都已经是最大的了，因此后一轮需要比较次数可以比上一次少一个。虽然你还是可以让他从头到尾来比较，但是后面的比较是没有意义的无用功，为了效率，你应该对代码进行优化。图片演示如下：代码实现：function bubble

2017-03-27 23:40:27 433

转载 HTML5新标签<canvas>

概述Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。使用前，首先需要新建一个网页元素。 id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！上面代码中，如果浏览器不支持这个API，则就会显示标签中间的

2017-03-10 15:38:31 626

原创 ES6新特性

1.箭头函数（=>）ES6中引入了箭头函数符来代替function，也就是说在定义方法的时候可以不再写function,=>的左边即为函数名和参数，右边即为执行操作和返回值。例如：function(i){return i + 1; } //ES5(i) => i + 1 //ES6如果方法比较复杂，则执行的操作需要用｛｝包裹起来。例如：function(x, y) {

2017-03-03 12:44:19 1281

原创 localStorage和sessionStorage详解

前言HTML5引入了localStorage和sessionStorage两个本地缓存对象，以解决cookie缓存容量少的问题。由于cookie每次都会随着请求被发送出去，所以数据放在cookie中将造成宽带浪费。但是本地缓存并不能取代cookie，cookie是作为http规范的一部分，是用于与服务器交互的不必可少的条件之一。区别localStorage：本地缓存，没有时间限

2017-03-03 11:30:30 6440

原创 Bmob(wechatApp)--查询数据

1.查询所有数据var Language= Bmob.Object.extend("language"); var query = new Bmob.Query(Language); // 查询所有数据 query.find({ success: function(results) { console.log("总数:"+results.len

2017-02-04 11:32:28 2861

原创 Bmob(wechatApp)--对象的增删改

1.创建对象所有的自定义对象都继承于Bmob.Object，所以我们可以使用Bmob.Object.extend(“数据表名”,{实例方法},{类方法})；例如：// 为Bmob.Object的子类添加实例方法和类方法var Langulage= Bmob.Object.extend("language", { //实例方法 getName: fu

2017-01-24 18:51:24 2281

原创 java获取服务器信息

java获取服务器信息需要用到sigar.jar，但该jar在linux下依赖于libsigar-amd64-linux.so、libsigar-x86-linux.so。在window下依赖于sigar-amd64-winnt.dll、sigar-x86-winnt.dll。配置文件这存在这模拟系统命名的操作，可以通过这些系统命名来获取系统的参数。默认情况下是将依赖文件放在jdk下的

2017-01-16 10:42:51 7390 5

原创 maven中scope的作用

scope的其他参数如下：compile默认的scope，表示 dependency 都可以在生命周期中使用。而且，这些dependencies 会传递到依赖的项目中。适用于所有阶段，会随着项目一起发布provided跟compile相似，但是表明了dependency 由JDK或者容器提供，例如Servlet AP和一些Java EE APIs。这个scope 只能作用在

2017-01-12 11:27:09 3798

原创 kettle——系统信息说明

系统信息默认值说明：1、系统日期(可变)：系统时间，每次访问都在改变。2、系统日期(固定)：系统时间，有转换开始来决定。即转换开始时间3、开始日期范围(转换)：根据etl日志表的信息，确定日期范围的开始。4、结束日期范围(转换)：根据etl日志表的信息，确定日期范围的结束。5、开始日期范围(作业)：根据etl日志表的信息，确定日期范围的开始6、结束日期范围(作业)：

2017-01-12 11:10:38 2194

原创 JSON.stringify(value, replacer, space)详解

JSON.stringify(obj)是常用的将js对象转换为json字符串的方法，但很少有人知道，该方法其实还有另外2个参数。1、方法方法定义：JSON.stringify(value, replacer, space)参数说明：value：js对象 replacer：替换对象，可以是一个方法、对象或数组，将value按照替换规则展示

2017-01-12 11:04:51 9724

原创 bootstrapValidator插件使用

bootstrap的校验插件bootstrapValidator，是最适合bootstrap布局的插件。首先需要下载bootstrapValidator.js。可到如下地址下载：http://bv.doc.javake.cn/html引用：/js/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="styles

2016-12-29 19:50:19 2428 3

原创 css居中处理

1.水平居中如果只是单行包含文本内容的组件可以使用text-align:center;通过文本内容居中影响元素居中。适用于内联元素。注意：text-aligin:center需设置在父容器上，子元素必须包含文本内容，且是内联元素。例如:<div style="text-align:center"> <span>测试<span>&...

2016-12-29 14:24:32 454

原创多张图片全部加载完成后再执行某操作

浏览器对图片的加载是异步的，很多时候我们需要等待图片完全加载后才能进行下一步操作。例如：获取图片父容器的高度，如果图片没加载完，高度基本为0，没有实用价值。单找图片的加载完处理可以使用:$(image).onload=function(){ 处理操作}多张图片全部加载完成后再做处理，可以使用如下方式：var imgdefereds=[]; //定义一

2016-12-29 11:24:31 6228 1