_黑先生的Web 收藏书

React 生命周期
Sep 20, 2017
前言
学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助.

React 生命周期
React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

...more
Javascript排序方法
Sep 19, 2017
在这段代码中我来以 return a-b 为什么是升序为例来解释一下
1
2
3
4
5
function sortNum(a,b) {
return a - b;
}
var arr = [1,11,3,4,5];
alert(arr.sort(sortNum)); //[1,3,4,5,11]。
...more

this、apply、call、bind

Sep 15, 2017

这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个，在 ES6 中可能会极大避免 this 产生的错误，但是为了一些老代码的维护，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。

this 的指向

在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，来，跟着我朗读三遍：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。记住这句话，this 你已经了解一半了。

下面我们来看一个最简单的例子：
例 1：

var name = "windowsName";
  function a() {
      var name = "Cherry";
      console.log(this.name);          // windowsName
      console.log("inner:" + this);    // inner: Window
  }
  a();
  console.log("outer:" + this)         // outer: Window

...more

Javascript基础算法
Sep 6, 2017
好久不见：这是一份常用的javascript简易算法

作为一个曾经的ruby后端，我在学习javascript时经历了不少挫折。像merge,flatten,uniq这些基础方法貌似都从我的视线中消失了。

然后我发现了loadsh, 嗯，它非常酷…，直到我发现在更新新版本的时候需要非常注意，一些重要方法中的变动导致的风险（当然发生过，想象一下当你在调试（debug）你的代码时loadsh改变了一个方法，几乎跟之前的完全不一样了，那个酸爽！更惊喜的是你甚至在最开始都没发现loadsh已经更新了！2333）

多年以后，感谢全新的es6标准让事情变的更简单了，我几乎很少使用loadsh或者其他基础算法库了。以下是我在写代码时常用的但并不很全面的一些算法。

免责声明：我并不是说loadsh在效率或者算法复杂度方面不好。其实，loadsh确实是一个很好的项目。以下例子只是一些可以在工作中覆盖大多数简单例子的简易代码片段；嗯，通常我们并不需要太复杂的工具。

噢，是的，以下所有代码都遵循不可变原则。我们不会去改变原始对象，而是返回一个有你想要的新对象。
...more
vue中的directive自定义指令的生命周期
Sep 5, 2017
自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
...more
es6中异步编程解决方案有几种？
Sep 4, 2017
随着项目复杂度的提升，node项目也暴露出一些弊端，例如不能很好的跳过一些中间环节和数据传递。我想到借助 Babel 编译提前使用 ES2015 规范和 React 的新特性。对于异步处理方式，我也有了更好的方式——Generator Function 或者 Async Function。

何为恶魔金字塔
由于JavaScript是一门异步语言，Node.js中的大量API都是异步函数，异步函数无法得知确切的执行完毕时间，所以通常采用传入callback的方式来使得当异步函数执行完毕时自动调用回调函数。

假如我们有如下的数据库操作API：
...more

Why Fetch

在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，jQuery实现的AJAX，Fetch ,让我们首先来比较一下这三者的使用示例。

XMLHttpRequest

var xhr;
if (window.XMLHttpRequest) {　 // Mozilla, Safari...
  　xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  　try {
    　xhr = new ActiveXObject('Msxml2.XMLHTTP');
 　 } catch (e) {
  　  try {
    　  xhr = new ActiveXObject('Microsoft.XMLHTTP');
   　 } catch (e) {}
 　 }
}
if (xhr) {
  　xhr.onreadystatechange = onReadyStateChange;
 　 xhr.open('POST', '/api', true);
 　 // 设置 Content-Type 为 application/x-www-form-urlencoded
 　 // 以表单的形式传递数据
  　xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 　 xhr.send('username=admin&password=root');
}
// onreadystatechange 方法
function onReadyStateChange() {
 　 // 该函数会被调用四次
  　console.log(xhr.readyState);
  　if (xhr.readyState === 4) {
   　　 // everything is good, the response is received
    　　if (xhr.status === 200) {
      　　　console.log(xhr.responseText);
    　　} else {
      　　　console.log('There was a problem with the request.');
   　　 }
  　} else {
    　　// still not ready
    　　console.log('still not ready...');
  　}
}

...more

阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。

// 一个常见的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'none',
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ],
};

...more

javascript中this是什么？

Sep 2, 2017

this是啥

var hero = {
  name   :"Hulk",
  motto  :"Rahhhhh!!",
  speak:function () {
    alert(this.name + ":" + this.motto);
  }
}
hero.speak();

运行结果：

1	Hulk:Rahhhhh!!

...more

React 生命周期

前言

React 生命周期

Javascript排序方法

this、apply、call、bind

this 的指向

Javascript基础算法

vue中的directive自定义指令的生命周期

es6中异步编程解决方案有几种？

何为恶魔金字塔

Vuex从入门到熟练使用

深入理解fetch

Why Fetch

XMLHttpRequest

入门 Webpack

javascript中this是什么？

this是啥