fendouzhe123的专栏

原创 优秀文章以及实用库记录

一、实用库1、雪花飘落效果：点击打开链接2、JavaScript与元素间的抛物线轨迹运动:点击打开链接二、优秀文章：1、前端代码规范及最佳实践：点击打开链接2、七天学会NodeJS：点击打开链接3、Vue.js入门教程：点击打开链接4、grunt新手上路：点击打开链接5、jQuery源码剖析：点击打开链接

翻译 React:创建同时受控与非受控的组件

提示：考虑到react的少状态设计，这里提到的方案可能是反模式。 我们都知道，有许多的web组件可以被用户的交互发生改变，比如：<input>，<select>，或者是我现在正在使用的富文本编辑器。这些组件在日常的开发中很不显眼，我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是，因为React是单向数据流绑定的，这些组件可能会变得失控： 1.一个维护它自己s

原创 使用gulp实时编译sass/sass

背景在我们新开始的项目中，我们打算使用scss来作为我们的样式书写语言。同时，所有的sass/scss文件经过编译转化成css文件后要存放到跟scss/sass文件相同的目录下。整个前端团队已经有实时的代码编译构建工具，那么我们只需要书写自己的实时scss/sass构建工具，生成对应的css文件后，团队的实时构建工具也会触发编译，做打包构建处理。第三方包选型基于gulp的sass/sc

原创 彻底理解thunk函数与co框架

ES6带来了很多新的特性，其中生成器、yield等能对之前金字塔式的异步回调做到很好地解决，而基于此封装的co框架能让我们完全已同步的方式来编写异步代码。这篇文章就对生成器函数（GeneratorFunction）及框架thunkify、co的核心代码做比较彻底的分析。co的使用还是比较广泛的，除了我们日常的编码要用到外，一些知名框架也是基于co实现的，比如被称为下一代的Nodejs web框架的

翻译 在jQuery与Node之间创建跨域请求（Cross-Origin Resource Sharing (CORS) ）

原文地址：http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

翻译 [译]框架是如何炼成的 —— 揭秘前端顶级框架的底层实现原理

我们每天都使用大量的前端库和框架，这些各种各样的库和框架已经成为我们日常工作的一部分，我们之所以使用他们，是因为我们不想重新造轮子，即使我们不明白它们的底层是怎么回事，在这篇文章中，我将揭示流行框架中发生了哪些神奇的过程，同时我们也会探讨如何自己去实现。使用字符串生成 DOM随着单页应用的兴起，我们正在用JavaScript做越来越多的事情，我们的应用程序逻辑的很大一部分已经被移植

转载 GPU：合成加速

公司内部同事翻译的一篇技术文章，很多干货，讲解了浏览器渲染的一些原理的东西，值得一读。

原创 gulp将请求转为请求本地JSON

使用gulp将ajax请求转为本地JSON数据：

原创 browserify--将js代码解析为AST树并解析AST树

在服务端，nodeJS可以直接使用CommonJS规范来写，运行在浏览器中的前端代码也可以这样写，然后使用browserify可以将其转化为模块化写法，装载依赖模块。其原理就是将js代码字符串解析为AST树，然后遍历AST树分析出require的依赖项，使用我们自己写得require函数来加载依赖项即可。具体原理可参考：browserify运行原理分析这里面牵扯到两项比较大的功能，一项

翻译 我们在promises的使用上存在问题

JavaScript的开发者同事们，现在是时候承认一个事实了：在promises的使用上还存在问题。但并不是promises他们本身有问题，被A+标准定义的promises是极好的。在过去一年的课程中揭示给我的一个比较大的问题是，正如我所看到的，很多的程序员在使用PouchDB API以及与其他重promise的API的过程中存在的一个问题是：我们一部分人在使用promises的过程中

原创 SVN提交异常 file is scheduled for addition, but is missing

下午在提交SVN代码的时候遇到了提交异常不能提交的问题，异常的详细内容见下面：wangxiangzhongdeMacBook-Air:account wangxiangzhong$ svn ci --force-log -m '账户授权改版'svn: E155010: Commit failed (details follow):svn: E155010: '/Users/wangxian

原创 Arale Base源码分析（含Attribute）

Attribute的源码解析：－－注：这部分的源码阅读起来比较费劲，可能解析的还不太到位，后续会多读几遍增添新的解释，后面随时更新。// 负责 attributes 的初始化// attributes 是与实例相关的状态信息，可读可写，发生变化时，会自动触发相关事件exports.initAttrs = function(config) { // initAttrs 是在初始化

转载 jQuery判断一个元素是否是另一个元素的子元素（或其自身）

jQuery判断一个元素是否是另一个元素的子元素（或其自身）的简单实现：//判断:当前元素是否是被筛选元素的子元素jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0);};//判断:当前元素是否是被筛选元素的子元素或者本身jQuery.fn.isChildAndSelfOf = func

原创 Arale aspect切面编程源码解析

切面编程能让你有效的控制方法的执行顺序。举个例子：var Dialog = Base.extend({ ... show: function() { console.log(2); this.element.show(); }, ...});var dialog = new Dialog();dialog.befor

原创 Arale Class基类源码解析

JS中OO的模拟有很多的实现与尝试（相关文章），Arale则在以下原则的指导下进行构建：1.如无必要，勿增实体 —— Simple2. 一目了然，容易学习 —— StupidClass源码的学习可以通过了解如何调用Class来实现类的继承与扩展的例子进行学习。下面是对Class类的源码的注释（简单的辅助方法不再进行注释），有问题可指出，欢迎交流。// The base Clas

原创 如何创建没有new能实例化的构造函数

众所周知，在js里是没有真正的类这个饿概念的（以后的版本会加入），通常我们所谓的类就是用new来构造实例的普通函数。通常实例化一个构造函数的时候，里面的this是指向被实例化的实例的。如下示例所示：function Ins(){ this.a = 1;//this指向类似于下面的ins实例 this.b = 2;}var ins = new Ins();但有的时候

原创 sublime text3破解版下载

下载地址：下载

原创 为sublime text安装AngularJS插件

sublime能够支持AngularJS开发那绝对是一件很爽的事情。下面我一步步讲解如何为sublime安装AngularJS插件。1、添加控制包站点根据你安装sublime 版本不同，在控制台写入不同的代码 ：控制台打开方法：View > Show Console 或者 快捷键 ctrl+`  Sublime Text 3：import urllib.reques

原创 纯CSS实现IOS开关效果

同事早上展示了一款没有使用js完全使用CSS实现的模仿IOS开关的效果，很有意思。在跟其交流了基本的思路后模仿实现了一下。基本的原理利用label与checkbox类型的input的关联关系（点击关联的label引发checkbox不同的状态），然后根据checkbox不同的状态就能去做不同状态下的CSS3动态变换。实现代码 div.container{ } di

转载 <转>监测用户浏览器是否有缩放

用于判断用户的浏览器是否有缩放库：!function(window){ var document = window.document; function user_agent(){ var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie')>=0) {

原创 从一段Deferred代码片段想到的

今天读到一篇解析jQuery源码的文章，从中抽象出了这么一段代码：$.Deferred(function(){ var me = this; setTimeout(function(){ console.log("执行结束"); me.resolve('参数'); }, 3000); return this.promise();}).done(function(){aler

原创 初识Object.defineProperty

ECMAScript 262v5带来的新东西，FF把它归入为javaScript 1.8.5的功能之一。先看看MSDN上的描述：增加一个属性到对象，或者修改已经存在的属性。语法：Object.defineProperty(object,propertyname,decripter);obejct必须（也可以用null），增添或修改属性的对象，可以JavaScript原生对象

原创 模拟新浪微博评论textarea输入框随着输入内容增多输入框高度自适应

新浪微博的评论，随着你输入文字增多，高度的增加，textarea也会随着不变的变高。该效果网上有现成的jQuery插件，但是并不是很好用。我改造了下，直接上代码：/** * TextAreaExpander plugin for jQuery * v1.0 * Expands or contracts a textarea height depending on the * quati

原创 CSS3动态效果收集

CSS3能够给页面上的元素提供很多炫酷且有趣的效果。本篇博客就是记录各种CSS3动态效果的实现，以备需要时查询。当然，animate.css已经收集了足够多的动画效果，我们也可以积累属于自己的其中没有的一些动态效果，来增添网站的趣味性。1、:hover背景色更改，文字小的动画改变代码如下：HTML/CSScss代码如下：a{ display: block; width: 1

原创 使用1个标签，2个标签，3个标签，5个标签实现一个十字架

2、请使用1个标签，2个标签，3个标签，5个标签实现一个如下图的水平、垂直都居中短边为50px，长边为150px的在界面垂直和水平居中红色十字架。（网上已经很多答案，你还能想到哪些方法，不限浏览器）实现代码如下： /**包裹div样式*/ div.container{ width: 150px; height:150px; float:left;

翻译 页面渲染：重绘，回流/重排，重塑

原文：Rendering: repaint, reflow/relayout, restyle5个

原创 移动端meta标签搜集

原创 最长回文的五种实现（js代码实现）

题目给定字符串，找到它的最长回文子串，都有哪些思路呢？例如"adaiziguizhongrenenrgnohziugiziadb",回文字串很多了，但最长的是"daiziguizhongrenenrgnohziugiziad"。解题思路思路1：暴力法，外面的两层循环找到所有子串，第三层循环判断子串是否是回文。方法的时间复杂度为O(n^3)，空间复杂度为O(1)。代码实现：

原创 JS实现计算最少回文切割数

// 获取所有的子串回文情况 function getP(str){ var len = str.length, gap = '_'; var p = {}; var i,j,L; // 只有一个字符的情况是回文 for( i =0;i<len;i++){ p[i+gap+i] = true; } // L是i和j之间的间隔数（因为间隔数从小到大渐增，所以

原创 Underscore.js template()函数全解析

模板解析引擎有很多，比如

翻译 如何判断样式表何时真正加载完

我们经常有通过插入一个link节点来加载css文件的需求。

原创 如何使用Uglify2.js分析函数中的依赖项

大家都知道，require.js遵循CMD规范，sea.js遵循自创的AMD

翻译 一个代码滥用的例子

原文地址：Code Abuse吉姆的一个客户的

原创 Backbone.js源码分析系列之Collection模块

// Backbone.Collection // ------------------- // If models tend to represent a single row of data, a Backbone Collection is // more analogous to a table full of data ... or a small slice or pag

翻译 HTML5 canvas创建粒子效果

原文地址：http://modernweb.com/2014/06/25/creating-particles-in-html5-canvas/

原创 纯css（无图片）实现带边框三角指示图标

我们在平常的开发过程中经常碰到需要一个三角的指示小图标，

翻译 对JavaScript密码学的批判

介绍如果更考究一点

原创 谈谈含复杂数据类型的数组去重问题

数组去重是一个老生常谈的问题。平常的处理可能只是对

翻译 国外程序员推荐：每个程序员都应该读的非编程书

编者按：5年前，有Stackoverflow网友发帖提问：程序员

原创 关于位运算符的几点应用

位运算符是一种对数字进二进制运算