2017年04月_筱葭

原创浅谈ES6 class实现React Class

使用ES6 class可以以一个JavaScript类来定义React Class。 1、使用React.createClass：var Counter = React.createClass({ propTypes: { initial: React.PropTypes.number }, getDefaultProps: function() { return

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

原创浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件需要定期更新，React提供生命周期方法来告知组件创建或销毁的时间。eg：mixins实现使用 setInterval() 并保证在组件销毁时清理定时器var SetIntervalMixin = { compon

2017-04-27 16:32:41 3156

原创浅谈ES6新增类型Symbol

1、Symbol概述JavaScript基本数据类型有6种：Undefined、Null、Boolean、String、Number、Object。ES6新增了一种数据类型：Symbol，表示独一无二的值，Symbol最大的用途是用来定义对象的唯一属性名。ES5的对象属性名都是字符串，容易造成属性名的冲突。如使用了一个其他人提供的对象，但又想为其添加新的方法（mixin模式），那么新方

2017-04-27 14:51:48 4151

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

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

2017-04-27 11:47:04 16109

原创浅谈React的JSX语法（二）

1、JSX的新语法——展开属性如果事先知道组件需要的全部props（属性），可以列出；但如果事先不知道要设置哪些 props，最好不要设置它，原因有两个：①　React不能检查属性类型，即使属性类型有错误也不能得到清晰的错误提示。②　props应该不可变的，修改props可能会导致预料之外的结果。可以使用 JSX 的新特性——展开属性：...操作符是增强的操作符，已经被 ES6

2017-04-26 16:28:35 999

原创浅谈React的JSX语法（一）

最好的解决方案是：通过JavaScript直接生成模板，然后去构建用户界面。为了使其变得更简单，有一个非常简单、可选的类似HTML的语法，通过函数调用即可生成模板的编译器，称为JSX。1、为什么用JSX？不需要为了React使用JSX，可以直接使用JavaScript，但建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。 2、没有 JSX 的 Reac

2017-04-26 14:59:42 641

原创浅谈React的createFactory()方法

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

2017-04-26 11:30:00 2767

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

1、为什么使用 React？eact 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。1）简单仅仅只要表达出应用程序在任一个时间点应该呈现的样子，当底层的数据变了，React会自动处理所有用户界面的更新。2）声明式数据变化后，与点击“刷新”按钮类似，但仅会更新变化的部分。3）构建可组合的组件React构建可复用的组件，事实上通过React唯一要做的事情就是

2017-04-26 10:44:50 2833

原创浅谈React实现过滤器

filter.html： filter.jsx：var grades = [ {team: "Team1", name: "Alice", grade: 80}, {team: "Team1", name: "Bruce", grade: 90}, {team: "Team1", name: "Cindy", grade:

2017-04-25 21:39:32 19392

原创浅谈React实现输入框

var data = { label: "Name", placeholder: "Please enter your name!", clearImg: "clear.png", regExp: /^\w{6,20}$/};var InputBox = React.createClass({ getInitialState: function() { return {input

2017-04-25 17:20:09 6069

原创浅谈React的props和state

在React里有两种数据模型：props和state。1、state1) state的作用：state是React中组件的一个对象，React把用户界面当作状态机，用户界面会随着state变化而变化，根据状态变化渲染用户界面，可以轻松让用户界面与数据保持一致。也即是说，更新组件的state会导致重新渲染用户界面，而不需要操作DOM。2) state的原理：常用的通知Reac

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

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

JavaScript里动态创建标准DOM对象一般使用：document.createElement()方法。但在实际使用过程中，可能会希望直接根据HTML字符串创建DOM节点，模拟$(HTML字符串)创建DOM对象的方法。1、思路：①　用document.createElement()方法创建一个div元素；②　用innerHTML来给div元素插入HTML字符串；③　用div

2017-04-25 15:29:49 5005 2

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

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

2017-04-25 15:10:52 8243

原创浅谈HTML5的FormData对象

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

2017-04-25 13:59:23 11600

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

jQuery提供了三种删除节点的方法：remove()、detach()和empty()。1．empty()：不是删除节点，而是清空节点，清空匹配的元素集合中所有的子节点，但元素自身和事件都未被删除。2．remove()：不会把匹配的元素从jQuery对象中删除，可以在将来再使用，但除了元素自身保留下来外，其他的比如绑定的事件，附加的数据等都会被删除。3．detach()：不会把匹配的

2017-04-25 12:58:47 5908

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

querySelector和querySelectorAll根据CSS选择器规范，便捷定位文档中指定元素，主流浏览器均支持：包括IE8+、Firefox、Chrome、Safari、Opera。querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。querySelector系列方法与getElementBy系列方法的区别：1

2017-04-25 11:32:47 1658

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

1、类数组对象：拥有length属性，可以通过下标访问；不具有数组所具有的方法。 2、为什么要将类数组对象转换为数组对象？数组对象Array有很多方法：shift、unshift、splice、slice、concat、reverse、sort，ES6又新增了一些方法：forEach、isArray、indexOf、lastIndexOf、every、some、map、filt

2017-04-25 10:49:00 1414

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

为了得到脚本运行的精确耗时，需要一个高精度时间戳，传统的做法是使用Date对象的getTime方法，其不足之处在于：1) getTime方法及Date对象的其他方法只能精确到毫秒级别，无法得到更小的时间精度；2) getTime方法只能获取脚本运行过程中的时间进度，无法知道一些后台事件的时间进度，比如浏览器用了多少时间从服务器加载网页。为了解决这两个不足之处，ES 5引入高精度时间戳—

2017-04-25 09:49:16 6004

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

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

2017-04-24 21:50:31 5565

原创浅谈React编程思想

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

2017-04-24 21:15:31 3333

原创浅谈React实现评论框（三）

http://blog.csdn.net/zhouziyu2011/article/details/70504651实现了不考虑服务器，直接将 JSON 数据写在代码中的模拟从服务器获取数据。本文继续进行两方面的改进：1、给组件引进可变的 state2、从JSON文件从获取数据 1、给组件引进可变的 state之前的代码中每个组件都是基于自己的props渲染自己，但prop

2017-04-24 14:08:46 1774

原创浅谈React实现评论框（二）

http://blog.csdn.net/zhouziyu2011/article/details/70502495实现了简单的评论框，但实现的只是在代码里直接插入评论数据。实际情况是，评论数据应该是来自服务器的 JSON 数据，现在不考虑服务器，直接将 JSON 数据写在代码中：// 模拟服务器返回的JSON数据var data = [ {id: 1, author: "Alice"

2017-04-23 15:58:38 1241

原创浅谈React实现评论框（一）

- CommentBox - CommentList - Comment - CommentForm 1、JSX语法：var CommentBox = React.createClass({ render: function() { return ( CommentBox ); }});ReactDOM.render( ,

2017-04-23 15:27:15 1138

原创浅谈React.createElement()方法

document有createElement()方法，React也有createElement()方法，下面就来介绍React的createElement()方法。var reactElement = ReactElement.createElement( ... // 标签名称字符串/ReactClass, ... // [元素的属性值对对象], ... // [元素的子节

2017-04-23 11:11:55 8233

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

1、浅拷贝仅仅复制对象的引用，而不是对象本身。var person = { name: 'Alice', friends: ['Bruce', 'Cindy']}var student = { id: 30}student = simpleClone(person, student);student.friends.push('David');alert(person.f

2017-04-22 21:10:58 389

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

a:link 超链接的默认样式 a:visited 已经访问过的链接的样式 a:hover 处于鼠标悬停状态的链接的样式 a:active 被激活（鼠标左键按下的一瞬间）的链接的样式CSS定义超链接需要注意先后顺序，否则，在某些浏览器里可能会出现某个样式不起作用的bug，不能正确显示想要的效果。正确的排列顺序是：L-V-H-A，L-V-H-A是link、visited、hov

2017-04-22 20:17:40 2292

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

1、方法一：int a = 1;int b = 2;a = b - a; // a = 1; b = 2b = b - a; // a = 1; b = 1a = b + a; // a = 2; b = 11) 原理：把a、b看做数轴上的点，围绕两点间的距离来进行计算。2) 具体过程：①　a=b-a求出a、b两点的距离，并将其保存在a中；②　b=b-a求出a到原点

2017-04-22 20:07:40 1787

原创浅谈React实现搜索匹配

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

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

原创浅谈React实现todolist

todoList.html： todoList.jsx：var TodoList = React.createClass({ getInitialState: function() { return {lists: []} }, addList: function(list) { if (this.stat

2017-04-22 16:42:01 1152

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

1．XSS：跨站脚本（Cross-site scripting）实现XSS攻击可以通过JavaScript、ActiveX控件、Flash插件、Java插件等技术手段实现，下面讨论JavaScript的XSS攻击。1) 通过JavaScript实现的XSS攻击，一般有以下几种：①　Cookie劫持Cookie中，往往会存储着一些用户安全级别较高的信息，如用户的登陆凭证。当用户所访问

2017-04-20 17:23:56 891

原创浅谈jQuery的链式调用

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

2017-04-20 13:55:34 4646

原创浅谈jQuery的$原理

1、外层沙箱及命名空间$为了避免声明了一些全局变量而污染，把代码放在一个“沙箱执行”，jQuery具体的实现，都被包含在了一个立即执行函数构造的闭包里面，然后在暴露出命名空间（可以为API，函数，对象），如只暴露 $ 和 jQuery 这2个变量给外界：(function(window, undefined) { // 用一个函数域包起来，就是所谓的沙箱 // 在这里边var定

2017-04-20 11:36:55 6934

原创浅谈jQuery源码（八）——$.extend

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

2017-04-19 21:24:39 519

原创浅谈jQuery源码（七）——$.makeArray

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

2017-04-19 21:13:40 598

原创浅谈jQuery源码（六）——$.map

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

2017-04-19 21:01:41 294

原创浅谈jQuery源码（五）——$.merge

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

2017-04-19 20:52:07 1044

原创浅谈jQuery源码（四）——$.grep

jQuery的grep()方法是为了传入一个数组elems，通过过滤器callback后，等到过滤后的结果。其中callback就是过滤器，$.grep是根据其返回值过滤； inv为true表示是callback过滤器返回true的那些被过滤掉。 1、grep()的用法：$.grep( [0,1,2], function(n,i){ return n <= 0;});结果

2017-04-19 20:37:14 725

原创浅谈jQuery源码（三）——$.inArray

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

2017-04-19 20:12:39 539

原创浅谈jQuery源码（二）——$.each

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

2017-04-19 19:44:23 1063

原创浅谈jQuery源码（一）——$.trim

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

2017-04-19 19:03:25 2057

空空如也

空空如也