juzipchy-CSDN博客

原创懂点网站交互（3）：广告牌设计101法则

在上篇文章懂点网站交互（2）：我们实际上是如何使用web的我们可以了解到实际上用户浏览网站时并不会按我们假定的方式，而是飞快的扫视而过，那么我们如何让用户了解我们的网站呢？1.尽量利用习惯用法2.建立有效的视觉层次3.把页面划分为明确定义的区域4.明显标识可以点击的地方5.最小化干扰6.为内容创建清楚的格式，以便扫描习惯用法是你的帮手我们要明确，任何东西，要让人能瞬间理解，一种最好

2017-08-06 19:40:33 461

原创 Web开发技术的演变

web发展了几十年，这期间，技术千变万化，很多技术都被淘汰了，我们并没有完整的经历过这个历史。下面介绍各项技术的革新。前后端不分最初的web开发比较简单，开发者操控web服务器（经常还是他自己的服务器），有时候他还会写一些html代码放在指定的文件下。当发送html请求时，这些页面会出现。以上返回的是静态内容，倘若查看网站的访问量或者放访问者填写包含姓名和邮箱的表单？可看到此模式的局限性。于

2017-08-06 10:15:33 1824

原创用position: sticky 实现粘性元素区域悬浮效果

在一些很长的表格中，常常会使用表头悬浮的设计以方便阅读，即在表格离开窗口之前，表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素，也采用了这种被称为 Sticky Pin 或者粘性元素的设计。这个效果可以用position：sticky实现，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置

2017-08-02 20:04:13 2207

原创前端技术演进史

好久前写了篇前端演进史，然而我师傅并不满意，让我写个前端技术发展史，如是有了这篇文章。 - - 什么是前端前端：针对浏览器的开发，代码在浏览器运行后端：针对服务器的开发，代码在服务器运行前后端不分的时代互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。后端收到浏览器的请求生成静态页面发送到浏览器后端 MVC 的开发模式那时的网站开发，采用的是后端 MVC 模式。 M

2017-07-30 22:15:49 4665

我们设计网站的时候，假想过用户时如何使用网站的，并按照自己的假想设计网站使用流程，然而实际上用户使用网站的方式和我们假想的使用方式，差别很大。我们创建网站时，认为用户会盯着每个网页仔细阅读我们精心制作的文字，领会到我们页面组织方式，然后在确定点击哪个链接之前权衡他们的可选目标。而实际上，大部分时间里，他们只是在每个页面上瞥一眼，扫过一些文字，点击第一个令他们感兴趣或者大概他们寻找目标的链接。页面上的

2017-07-30 20:17:45 342

原创懂点网站交互（1）：网站设计准则

别忘我思考这是网站交互设计中最最最重要的原则——它是设计中判别什么有用，什么没用的终极法则。这意味着，当读者看到一个页面时，它应该是不言而喻、一目了然、自我解释的。即读者能“明白它”——知道它是什么意思，怎样用它，并且不用额外的思考。下图为读者阅读一个网站不需要思考时的心理活动：下图为读者阅读一个网站需要思考时的心理活动：设计网站最好的是，即使是对此网站不感兴趣的人，

2017-07-30 19:43:44 364

原创 Object.keys用法总结

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致（两者的主要区别是一个 for-in 循环还会枚举其原型链上的属性）。也就是说我们可以用此方法罗列出对象的所有属性名传入对象，返回属性名var obj = {'a':'123','b':'345'};console.log(Object.

2017-07-24 20:32:10 7673

原创 React总结11：ref的用法

之前对ref用法的了解一直仅限于如下：<input ref="input" />然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例，其实就是dom元素节点。let inputEl = this.refs.input;//然后通过inputEl来完成后续的逻辑，如focus、获取其值等等大多数教程上指明的用法都如上，其实这种方式基本不推荐使用，或者在未来的react版本

2017-07-21 14:12:32 640

原创 React总结10：当组件return boolean null undefined

在写组件的时候，如果return null或者undefined或者true的时候，会发生什么看以下代码：<div /><div></div><div>{false}</div><div>{null}</div><div>{undefined}</div><div>{true}</div>视图中什么都没显示 false, null, undefined, 和 true虽然用大括号括起来是一个合

2017-07-20 17:09:00 1367

原创 React总结9：JSX的自动转义编码

JSX字符串处理的时候，React会自动将字符串进行转义处理，所以下面两个语句是等价的。<MyComponent message="<3" /><MyComponent message={'<3'} />我们可以在组件之间增加字符串字面量，当然这个字面量可以是HTML语句，但是需要注意一点的是，这里的字符串字面量是没有被编码的。即当我们通过大括号进行表达式插入时，默认是进行编码的，而你自己增加

2017-07-20 17:00:59 2367

原创 React总结8：setState()的参数

一般使用setState的时候，用的最多的用法是：例如：{count:0}//初始化countthis.setState({count:1});这个无可置疑，更新count。昨天看别人博客，发现了setState的另一种用法,总结如下：this.setState((prevState, props) => ({ counter: prevState.counter + p

2017-07-20 09:05:38 14319

原创 React总结7：render()渲染时机

根据官网表示，JSX是属于一种不可变的对象，即只要一创建就不能被改变，继续我们c++，Java中的字符串一样，是属于常量范围，不容许改变，不能改变属性啊，孩子节点也不可以改变，这个元素就像电影中的某一帧，是处于一个确定的时间点上，不管你放多少遍它都不会发生改变。function tick() { const el = ( <div> <h1>Hello, world!</h1

2017-07-19 00:12:44 11022

原创 GitHub:pull request

Github 的一大特色就是 Pull Request 功能pull request定义："Pull Request 是一种通知机制。你修改了他人的代码，将你的修改通知原来的作者，希望他合并你的修改，这就是 Pull Request。"Pull Request 本质上是一种软件的合作方式，是将涉及不同功能的代码，纳入主干的一种流程。这个过程中，还可以进行讨论、审核和修改代码Pull Request

2017-07-18 23:19:37 415

原创 es6中Class 的基本语法总结

1.类的所有方法都定义在类的prototype属性上面。class Point { constructor() { // ... } toString() { // ... } toValue() { // ... }}// 等同于Point.prototype = { constructor() {}, toString() {}, toV

2017-07-17 23:18:51 412

原创 es6中Class的静态方法详解

以前看过的es6的东西，又忘了，再总结下：类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”class Foo { static classMethod() { return 'hello'; }}Foo.classMethod() // 'hel

2017-07-17 22:54:01 789

转载 ES6模块加载的实质

ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。<span style="font-size:18px;">//输入Tab.js let count = 1; function compute(){ c

2017-07-14 23:01:06 344

原创 es6的扩展运算符

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值，扩展运算符有以下几点作用一，展开数组//展开数组let a = [1,2,3,4,5],b = [...a,6,7];console.log(b);//打印出来的值[1, 2, 3, 4, 5, 6, 7]二，数组的拷贝//数组的拷贝var c = [1, 2, 3];var d = [...c]; d.pu

2017-07-14 20:53:19 314

原创 javascript中bind另一个用法

看师傅写的代码时，遇到的一个问题，毫无疑问的又是被鄙视了。下面总结下bind的用法：bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。1.绑定函数我们知道bind的用法常用来跟call、apply比较， bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。将方法从对象中拿出

2017-07-10 23:44:44 375

转载 SuperAgent中文使用文档

文章转载：SuperAgent中文使用文档英文文档：SuperAgentsuperagent是nodejs里一个非常方便的客户端请求代理模块，当你想处理get,post,put,delete,head请求时,你就应该想起该用它了:)SuperAgentsuperagent 是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下

2017-07-09 23:08:06 1459

原创前端演进史

什么是前端维基百科是这样说的：前端Front-end和后端back-end是描述进程开始和结束的通用词汇。前端作用于采集输入信息，后端进行处理。计算机程序的界面样式，视觉呈现属于前端。从静态走向动态我们都知道万维网（WWW）是欧洲核子研究组织的科学家为了方便看文档、传论文而创造的，这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字

2017-07-09 13:13:07 939

原创 React总结7:Each child in an array or iterator should have a unique "key" prop.的处理方法

PS:当你在写react的时候报了类似于这样子的错：Each child in an array or iterator should have a unique “key” prop.解决办法只要在循环的每个子项添加一个key就行了，代码如下：var names = ['Alice', 'Emily','Kate'];ReactDOM.render( <div> {

2017-07-08 15:37:39 32760

原创 HTML <option> 标签的 value 属性

很简单的html常识,看过又忘了,导致看代码一直不理解,特此记下!定义和用法: value 属性规定在表单被提交时被发送到服务器的值。与之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如下:<select> <option value="volvo">Volvo XC90</option> <option value="saab

2017-07-08 15:17:09 3502 1

原创 React总结6:无状态组件

我们可以用纯粹的函数来定义无状态的组件(stateless function) 这种组件没有状态，没有生命周期，只是简单的接受 props 渲染生成 DOM 结构。无状态组件非常简单，开销很低，如果可能的话尽量使用无状态组件。比如使用箭头函数定义：const HelloMessage = (props) => <div> Hello {props.name}</div>;render(<H

2017-07-08 10:50:27 2870

原创 React总结5:React中的一些坑

React中有些坑，稍不注意就容易踩坑，下面说明下： 1、setState()是异步的 this.setState()会调用render方法，但并不会立即改变state的值，state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新，因为没有调用render函数。如果setState（）后想立即调用新的s

2017-07-04 23:32:02 534

原创 React总结4：HTML 标签对比 React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。var myDivElement = <div className="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));要渲染 React

2017-07-03 23:00:37 1442 2

原创 React总结2：React组件生命周期

调用流程可以参看上图。 React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下：实例化存在期销毁期实例化首次调用组件时，有以下方法会被调用（注意顺序，从上到下先后执行）： getDefaultProps 这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合React.createClass直接创建的组件，使用ES6/ES7创建

2017-07-02 23:25:14 265

原创 React总结3：ES6下React组件的写法示例代码

一：定义React组件class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; }}二：声明prop类型与默认propclass Hello extends React.Component { // ...}Hello.propTypes = { value

2017-07-02 22:57:28 586

原创 ES6中module加载时有无default的区别

阮一峰的ECMAScript 6 入门看了2遍了- - ..有些细节记得不太清楚，工作中就模块加载这一问题问了师傅，被无情的嘲笑了。好伤心，现在再回忆下ES6中module加载时有无default的区别我们都知道使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。一般情况下写法如下：// circle.jsexport function area(radius) {

2017-07-02 18:27:58 1775

原创 react+redux工作流程

上图：可见整个redux流程的逻辑非常清晰，数据流是单向循环的，就像一个生产的流水线： store（存放状态） -> container（显示状态） -> reducer （处理动作）-> store这一点对精细化分工协作很有好处。我们来看看这三个概念：store 是应用的状态管理中心，保存着是应用的状态（state），当收到状态的更新时，会触发视觉组件进行更新。 container 是视觉

2017-06-23 15:03:29 1543

原创 Recharts总结1：StrokeDashArray

StrokeDashArray 描述Shape类型轮廓的虚线和间隔的样式，写法为StrokeDashArray=”str”。str是虚线和间隙的值的集合，奇数项为虚线长度；偶数项为间隙长度。例如：StrokeDashArray=”2 1”,则表示虚线长度为2，间隔为1. StrokeDashArray=”2” 则表示虚线和间隔都是2如：strokeDasharray=”12 12” 由此可见

2017-06-22 16:13:49 920

转载 React 实践心得：react-redux 之 connect 方法详解

Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。react-redux 提供了两个重要的对象， Provider 和 connect ，前者

2017-06-20 22:33:00 329

原创 React总结1：异步更新的setState

先上个代码：var Text = React.createClass({ getInitialState: function() { return {name: "react"}; }, keyUp: function(e){ this.setState({name

2017-06-18 12:26:19 2042

转载从一个简单例子了解action、store、reducer

其实，redux的核心概念就是store、action、reducer，从调用关系来看如下所示store.dispatch(action) --> reducer(state, action) --> final state可以先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍// reducer方法, 传入的参数有两个// state: 当前的state// action: 当前

2017-06-15 18:03:39 2320

原创 Redux总结3：store

我们学会了使用 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法。而Store 就是把它们联系到一起的对象。首先要区分 store 和 state state 是应用的状态，一般本质上是一个普通对象例如，我们有一个 Web APP，包含计数器和待办事项两大功能那么我们可以为该应用设计出对应的存储数据结构（应用初始状态）：/

2017-06-15 17:44:02 343

原创 Redux总结2：action

Action 看一下定义：Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据）传到 store 的有效载荷。它是 store 数据的唯一来源。首先要明白的是，action仅仅是一个普通的对象，用法跟其他的对象没什么区别。唯一的特别之处是action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。{

2017-06-11 21:20:34 1400

原创 Redux总结1：Redux基础

1.Redux 是一个状态容器 Redux 就像是作者自己的介绍，它不会为你提供任何的东西，它不会告诉你如何做路由，它只专注于应用程序状态，是一个 JavasSript 的状态容器，所有的状态的变化都是当前状态和 Action 共同的作用结果。对于view来说，不用关心数据是怎样变化，只需要在 view 层面等待 store 通知自己数据发生变化，然后把数据渲染成页面即可。2.Redux 和 R

2017-06-11 18:00:33 253

原创 CSS3中不熟悉的属性3：will-change

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作，这将会导致变形动画延迟一

2017-06-09 15:40:48 618

原创 touch事件计算滑动距离

计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下：function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(even

2017-06-08 18:49:19 11955

原创 js中getBoundingClientRect()方法详解

getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的t

2017-06-07 11:45:21 30273 1

原创 CSS3中不熟悉的属性2：display:box和display:flex的区别

display:box和display:flex有什么区别吗？没区别，仅是各阶段草案命名。 W3C 2009年第1次草案：display:box; W3C 2011年第2次草案：display:flexbox | inline-flexbox;- W3C 2012年第5次草案及以后的候选推荐标准：display:flex | inline-flex;因此display:box和display

2017-06-06 10:45:27 2287

空空如也

空空如也