2017年07月_juzipchy

原创前端技术演进史

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

2017-07-30 22:15:49 4682

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

2017-07-30 20:17:45 350

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

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

2017-07-30 19:43:44 378

原创 Object.keys用法总结

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

2017-07-24 20:32:10 7973

原创 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 662

原创 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 1444

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

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

2017-07-20 17:00:59 2420

原创 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 14347

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

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

2017-07-19 00:12:44 11068

原创 GitHub:pull request

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

2017-07-18 23:19:37 430

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

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

2017-07-17 23:18:51 420

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

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

2017-07-17 22:54:01 802

转载 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 356

原创 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 328

原创 javascript中bind另一个用法

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

2017-07-10 23:44:44 388

转载 SuperAgent中文使用文档

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

2017-07-09 23:08:06 1494

原创前端演进史

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

2017-07-09 13:13:07 953

原创 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 32839

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

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

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

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

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

2017-07-08 10:50:27 2880

原创 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 569

原创 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 1465 2

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

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

2017-07-02 23:25:14 275

原创 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 600

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

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

2017-07-02 18:27:58 1797

juzipchy的博客