自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 浅谈ES6 class实现React Class

使用ES6 class可以以一个JavaScript 类来定义React Class。   1、使用React.createClass: var Counter = React.createClass({ propTypes: { initial: React.PropTypes.numbe...

2017-04-27 17:00:17 3619 1

原创 浅谈React mixins

组件是React复用代码的最佳方式,但有时一些不同的组件间也需要共用一些功能,被称为 跨切面关注点,React使用 mixins 来解决这类问题。 一个通用的场景是:一个组件需要定期更新,React提供生命周期方法来告知组件创建或销毁的时间。 eg:mixins实现使用 setInterval...

2017-04-27 16:32:41 2537 0

原创 浅谈ES6新增类型Symbol

1、Symbol概述 JavaScript基本数据类型有6种:Undefined、Null、Boolean、String、Number、Object。 ES6新增了一种数据类型:Symbol,表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名。 ES5的对象属性名都是字符串,容易造...

2017-04-27 14:51:48 3511 0

原创 浅谈React的类型检测——PropTypes

随着应用的日益变大,保证组件的正确使用显得日益重要,为此引入React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告。 注意为了性能考虑,只在开发环境验证 propTypes。 1、声...

2017-04-27 11:47:04 14008 0

原创 浅谈React的JSX语法(二)

1、JSX的新语法——展开属性 如果事先知道组件需要的全部props(属性),可以列出;但如果事先不知道要设置哪些 props,最好不要设置它,原因有两个: ① React不能检查属性类型,即使属性类型有错误也不能得到清晰的错误提示。 ② props应该不可变的,修改props可能会导致预料之外的...

2017-04-26 16:28:35 786 0

原创 浅谈React的JSX语法(一)

最好的解决方案是:通过JavaScript直接生成模板,然后去构建用户界面。 为了使其变得更简单,有一个非常简单、可选的类似HTML的语法 ,通过函数调用即可生成模板的编译器,称为JSX。 1、为什么用JSX? 不需要为了React使用JSX,可以直接使用JavaScript,但建议使用 JSX ...

2017-04-26 14:59:42 361 0

原创 浅谈React的createFactory()方法

1、作用: 创建React组件实例。 2、实现: 只需创建一个带type参数的createElement的绑定函数即可。 React.createFactory = function(type) { var factory = React.createElement.bind(null,...

2017-04-26 11:30:00 1405 0

原创 浅谈React的props验证、默认值、传递

1、为什么使用 React? eact 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。 1)简单 仅仅只要表达出应用程序在任一个时间点应该呈现的样子,当底层的数据变了,React会自动处理所有用户界面的更新。 2)声明式 数据变化后,与点击“刷新”按钮类似,但仅会更新变化的部分。 ...

2017-04-26 10:44:50 2172 0

原创 浅谈React实现过滤器

filter.html: filter.jsx: var grades = [ {team: "Team1", name: "Alice", grade: 80}, {team: "T...

2017-04-25 21:39:32 12006 0

原创 浅谈React实现输入框

var data = { label: "Name", placeholder: "Please enter your name!", clearImg: "clear.png", regExp: /^\w{6,20}$/ }; ...

2017-04-25 17:20:09 4881 0

原创 浅谈React的props和state

在React里有两种数据模型:props 和state。 1、state 1) state的作用: state是React中组件的一个对象,React把用户界面当作状态机,用户界面会随着state变化而变化,根据状态变化渲染用户界面,可以轻松让用户界面与数据保持一致。也即是说,更新组件的state...

2017-04-25 16:08:36 3517 1

原创 浅谈JavaScript模拟$(HTML字符串)实现创建DOM对象

JavaScript里动态创建标准DOM对象一般使用:document.createElement()方法。 但在实际使用过程中,可能会希望直接根据HTML字符串创建DOM节点,模拟$(HTML字符串)创建DOM对象的方法。 1、思路: ① 用document.createElement()...

2017-04-25 15:29:49 3500 1

原创 浅谈原生JavaScript实现remove()和recover()

利用原生JavaScript实现: remove(selectors)删除指定的一个或一组元素 recover(selectors)恢复刚才删除的元素

2017-04-25 15:10:52 6419 0

原创 浅谈HTML5的FormData对象

利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件,还可以使用 XMLHttpRequest的send() 方法来异步提交表单。 与普通的Ajax相比,使用FormData 的最大优点就是可以异步上传二进制文件。   可以先通过new关键字创建一个空的 Form...

2017-04-25 13:59:23 10138 0

原创 浅谈jQuery中的删除方法empty()、remove()和detach()

jQuery提供了三种删除节点的方法:remove()、detach()和empty()。 1.empty():不是删除节点,而是清空节点,清空匹配的元素集合中所有的子节点,但元素自身和事件都未被删除。 2.remove():不会把匹配的元素从jQuery对象中删除,可以在将来再使用,但除了元素自...

2017-04-25 12:58:47 3936 0

原创 浅谈JavaScript高级选择器querySelector和querySelectorAll

querySelector和querySelectorAll根据CSS选择器规范,便捷定位文档中指定元素,主流浏览器均支持:包括 IE8+、Firefox、Chrome、Safari、Opera。 querySelector返回的是一个对象,querySelectorAll返回的一个集合(Node...

2017-04-25 11:32:47 905 0

原创 浅谈JavaScript类数组对象转换为数组对象

1、类数组对象: 拥有length属性,可以通过下标访问; 不具有数组所具有的方法。   2、为什么要将类数组对象转换为数组对象? 数组对象Array有很多方法:shift、unshift、splice、slice、concat、reverse、sort,ES6又新增了一些方法:forEach、i...

2017-04-25 10:49:00 1072 0

原创 浅谈浏览器对象——Performance API

为了得到脚本运行的精确耗时,需要一个高精度时间戳,传统的做法是使用Date对象的getTime方法,其不足之处在于: 1) getTime方法及Date对象的其他方法只能精确到毫秒级别,无法得到更小的时间精度; 2) getTime方法只能获取脚本运行过程中的时间进度,无法知道一些后台事件的时间进...

2017-04-25 09:49:16 4459 0

原创 浅谈CSS重绘与回流/重排

任何对渲染树的修改都有可能会导致下面两种操作: 1、回流/重排 渲染树的一部分必须要更新且节点的尺寸发生了变化,会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。 2、重绘 部分节点需要更新,但没有改变其形状,会触发重绘操作。   会触发重绘或回流/重排的操作 1、添加、删除元素(回流+...

2017-04-24 21:50:31 3016 0

原创 浅谈React编程思想

React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式。 1、第一步:把UI拆分为一个组件的层级 一个独立的组件的标准: 单一功能原则——一个组件在理想情况下只做一件事情。如果它要做的事情不止一件,...

2017-04-24 21:15:31 2645 0

原创 浅谈React实现评论框(三)

http://blog.csdn.net/zhouziyu2011/article/details/70504651实现了不考虑服务器,直接将 JSON 数据写在代码中的模拟从服务器获取数据。 本文继续进行两方面的改进: 1、给组件引进可变的 state 2、从JSON文件从获取数据   1、给组...

2017-04-24 14:08:46 1292 0

原创 浅谈React实现评论框(二)

http://blog.csdn.net/zhouziyu2011/article/details/70502495实现了简单的评论框,但实现的只是在代码里直接插入评论数据。 实际情况是,评论数据应该是来自服务器的 JSON 数据,现在不考虑服务器,直接将 JSON 数据写在代码中: // 模...

2017-04-23 15:58:38 867 0

原创 浅谈React实现评论框(一)

- CommentBox   - CommentList     - Comment   - CommentForm   1、JSX语法: var CommentBox = React.createClass({ render: function() { return ( C...

2017-04-23 15:27:15 565 0

原创 浅谈React.createElement()方法

document有createElement()方法,React也有createElement()方法,下面就来介绍React的createElement()方法。 var reactElement = ReactElement.createElement( ... // 标签名称字符串/R...

2017-04-23 11:11:55 1270 0

原创 浅谈JavaScript对象的浅拷贝和深拷贝

1、浅拷贝 仅仅复制对象的引用,而不是对象本身。 var person = { name: 'Alice', friends: ['Bruce', 'Cindy'] } var student = { id: 30 } studen...

2017-04-22 21:10:58 294 0

原创 浅谈CSS定义超链接<a>正确顺序L-V-H-A

a:link 超链接的默认样式  a:visited 已经访问过的链接的样式  a:hover 处于鼠标悬停状态的链接的样式  a:active 被激活(鼠标左键按下的一瞬间)的链接的样式 CSS定义超链接需要注意先后顺序,否则,在某些浏览器里可能会出现某个样式不起作用的bug,不能正确显示想要的...

2017-04-22 20:17:40 1462 0

原创 浅谈不使用第三个变量交换两个变量的值的方法

1、方法一: int a = 1; int b = 2; a = b - a; // a = 1; b = 2 b = b - a; // a = 1; b = 1 a = b + a; // a = 2; b = 1 1) 原理: 把a、b看做数轴上的点,围绕两点间的距离来进行计算。 2) 具体...

2017-04-22 20:07:40 895 0

原创 浅谈React实现搜索匹配

search.html: search.js: var Search = React.createClass({ getInitialState: function() { return {lists: [], temp...

2017-04-22 16:45:47 9393 1

原创 浅谈React实现todolist

todoList.html: todoList.jsx: var TodoList = React.createClass({ getInitialState: function() { return {lists:...

2017-04-22 16:42:01 917 0

原创 浅谈XSS与CSRF两种跨站攻击

1.XSS:跨站脚本(Cross-site scripting) 实现XSS攻击可以通过JavaScript、ActiveX控件、Flash插件、Java插件等技术手段实现,下面讨论JavaScript的XSS攻击。 1) 通过JavaScript实现的XSS攻击,一般有以下几种: ① Cooki...

2017-04-20 17:23:56 625 0

原创 浅谈jQuery的链式调用

实现链式的基本条件就是要实例对象先创建好,调用自己的方法。 链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this,把对象再返回回来,对象就可以继续调用方法,实现链式操作了。 Obj().init().setFlag(); 分解: obj = Obj()...

2017-04-20 13:55:34 3613 0

原创 浅谈jQuery的$原理

1、外层沙箱及命名空间$ 为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”,jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象),如只暴露 $ 和 jQuery 这2个变量给外界: (function(window, un...

2017-04-20 11:36:55 5686 0

原创 浅谈jQuery源码(八)——$.extend

jQuery的extend()方法由于扩展jQuery功能。通常写一个插件,会利用extend传进来的参数来覆盖插件原有的配置。   jQuery的extend()源码如下: jQuery.extend = jQuery.fn.extend = function() { var options,...

2017-04-19 21:24:39 420 0

原创 浅谈jQuery源码(七)——$.makeArray

jQuery的makeArray()方法将类数组对象转换为数组对象。   jQuery的makeArray()源码如下: makeArray: function(arr, results) { var ret = results || []; // 等同于:var ret = (!results...

2017-04-19 21:13:40 429 0

原创 浅谈jQuery源码(六)——$.map

jQuery的map()方法把数组每一项经过callback处理后的值依次加入到返回数组中。   1、map()的用法: $.map( [1,2,3], function(n){ return n * 2; }); 结果:[2,4,6]   2、jQuery的map()源码如下: core_de...

2017-04-19 21:01:41 207 0

原创 浅谈jQuery源码(五)——$.merge

jQuery的merge()方法的作用是修改第一个数组,使得它末尾加上第二个数组。其实,允许第二个参数不为数组。 $.merge([0,1,2], [2,3,4]) == [0, 1, 2, 2, 3, 4]   jQuery的merge()源码如下: merge: function( firs...

2017-04-19 20:52:07 912 0

原创 浅谈jQuery源码(四)——$.grep

jQuery的grep()方法是为了传入一个数组elems,通过过滤器callback后,等到过滤后的结果。 其中callback就是过滤器,$.grep是根据其返回值过滤; inv为true表示是callback过滤器返回true的那些被过滤掉。   1、grep()的用法: $.grep( [...

2017-04-19 20:37:14 565 0

原创 浅谈jQuery源码(三)——$.inArray

jQuery的inArray()方法使得遍历一个数组或者对象的代码段变得十分的简洁。   jQuery的inArray()源码如下: core_deletedIds = [], core_indexOf = core_deletedIds.indexOf, // 相当于 core_indexOf ...

2017-04-19 20:12:39 320 0

原创 浅谈jQuery源码(二)——$.each

jQuery的each()方法使得遍历一个数组或者对象的代码段变得十分的简洁。   1、each()的用法 1) each接受2个参数:数组、回调函数(回调函数具有两个参数,key是数组的索引,value是对应的元素) $.each([1,2,3], function(key, value) { ...

2017-04-19 19:44:23 859 0

原创 浅谈jQuery源码(一)——$.trim

jQuery的trim()方法用来去除字符串两端的空格。   jQuery的trim()源码如下: core_version = "1.9.0", core_trim = core_version.trim, rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEF...

2017-04-19 19:03:25 1745 0

提示
确定要删除当前文章?
取消 删除