青苔小茶馆

有时候在写说明文档的时，需要列出文件的一个目录结构,几次手动拼接之后，写了一个cli小工具来自动生成。

安装方法：

1

$ npm install treer -g

如此我们便可以快速的生成目录结构啦！

生成结果

1
2
3
4
5
6
7
8
9
10
11

$ treer

Desktop
├─.DS_Store
├─.localized
├─dir2
|  ├─file3
|  └file4
├─dir1
|  ├─dile2
|  └file1

指定目录

默认的目录为当前的路径，可以通过-d 传入指定的路径

1

$ treer -d <指定路径>

导出结果

可将结果导出到文件中

1

$ treer -e <导出路径>

忽略指定的目录

有时候我们需要忽略一些文件名，比如我们的node_modules文件夹

1

$ treer -i <"文件名，支持正则表达式/regex/哦">

如果觉得实用，不妨Star一下吧，github地址

react组件生命周期:

• constructor
• componentWillMount
• render
• ComponentDidMount
• componentWillReceiveProps
• shouldConponentUpdate
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

javascript中分为基本类型跟引用类型两种，对于引用类型来说，变量实际上储存的是指针，对于变量的赋值，实际上也是复制指针地址，赋值后，我们对于变量的修改，也同样会影响到原来的变量

例如下面例子

1
2
3
4

var object = { a: 1, b: 2 } ;  
var copy = object ;  
object.a = 3 ;  
console.log( copy.a ) ;  

1.可迭代的空数组###

我们知道，Javacript的所创建的数组如果未被初始化值的话，它是一个稀疏数组(sparse array)，这是什么意思的？我们先看下面的代码

1

const arr = new Array(4); //[undefined, undefined, undefined, undefined]

假设我们要去迭代一个数组，我们会发现，未被初始化值的数组，index实际上访问不到的：

1

arr.map((elem, index) => index); //  输出:[undefined, undefined, undefined, undefined]

[83fac017f96f34c92c3578796a7ddb443d4e1f17]

使用grunt作为构建工具
npm + component作为包的管理

[871ed9126639c9128c18bb2f19e6afd42c0c5ad9]

新增加了一个数据绑定的实例
大致思路：

• html结构中新增占位符号
• 将有占位符号的DOM保存起来，同时拥有一个对象将DOM关联起来
• 使用Object.defineProperty为这个对象的属性进行绑定访问器，如果修改了这个访问器的话，也将更改更新到DOM中

实例地址

[a5e27b1174e9196dcc9dbb0becc487275ea2e84c]

作者同时使用了compoent的包管理工具
看提交时间必须使用component@0.16.3这个版本

修改了main.js，主要思想即是通过解析拥有指定属性的DOM，然后将它们存入到对象之中，为这个对象绑定访问选择器（set,get）从而将更新修改到DOM中

代码分割

实例来自于webpack
假定我们有下面的项目结构

1
2
3
4
5
6
7
8

.
├── dist
├── js
│   ├── a.js
│   ├── b.js
│   ├── c.js
│   └── entry.js
└── webpack.config.js

现在web前端的脚手架中，有相当一部分数量的人选择用gulp做为首选的构建工具，但是，我们是没办法向gulp的任务直接传递命令行参数的。
我们知道gulp实际上是运行在nodejs中的，那么，我们是可以访问process.argv
比如命令gulp task1 --a 123 --b "my string" --c, 我们看看process.argv会输出什么

1
2
3
4
5
6
7
8
9
10

[
'/usr/bin/nodejs',
'/home/user/.node_modules_global/bin/gulp',
'task1',
'--a',
'123',
'--b',
'my string',
'--c'
]

什么是webpack

webpack是一个module bundler，可以将把有依赖关系的各种文件打包成一系列的静态资源

安装

首先我们安装最新版的webpack, 我安装的版本是2.2.1

1

npm install -g webpack

下面我们将探讨webpack 2 的使用

我们可以直接在终端中使用webpack，命令如下

1
2
3

webpack {源文件／入口文件} {目标文件}
webpack --watch //监听模式
webpack -p //混淆脚本   

原型与原型链是javascript里面最最核心的内容，如果不能理解它们之间的存在关系的话，那么我们是不能理解这门语言的。

在JS中，主要有两种创建对象的方法, 分别是对象字面量以及调用构造函数

1
2
3
4
5

//对象字面量
var obj1 = {}

//调用构造函数
var obj2 = new Object()

变量的解构赋值

• “模式匹配”： 只要等号两边的模式相同，左边的变量久会被赋予相应的值；如果解构不成功，变量的值就等于undefined。
• 只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。