衍良
htracr lib has installed via npm, after running `htracr 8888` command show this error message: ``` module.js:356 Module._extensions[extension](this, filename); ^ Error: libpcap.so.1: cannot open shared object file: No such file...
原文 [Webpack—The Confusing Parts](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.jaqo97f72) Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理，因此会让使用者感到疑惑。这些也是导致Webpack不被人熟悉的原因。 因为刚开始使用Webpack很让人疑惑，我觉得有必要写几篇介绍Webpack的功能和特性的文章以帮助初学者快速理解。此文是最开始的一篇。 ## Webpack的核心原理 Webpack的两个最核心的原理分别是： 1. 一切皆模块 正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以`require('myJSfile.js')`亦可以`require('myCSSfile.css')`。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。 2. 按需加载 传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的`bundle.js`文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。 好了，下面来看看那些令人困惑的部分吧。 ## 1. 开发模式和生产模式 首先要知道的是Webpack有许许多多的特性，一些是”开发模式“下才有的，一些是”生产模式“下才有的，还有一些是两种模式下都有的。 和[如何构建更加复杂的交互组件](https://medium.com/react-ecosystem/components-the-war-horses-of-react-1085dddc14e5#.qnz8wjnq2)。此篇文章我们将会继续探索React组件的特性，特别是生命周期。 稍微思考一下React组件所做的事，首先想到的是一点是：React描述了如何去渲染（DOM）。我们已经知道React使用`render()`方法来达到这个目的。然而仅有`render()`方法可能不一定都能满足我们的需求。如果在组件rendered之前或之后我们需要做些额外的事情该怎么做呢？我们需要做些什么以避免重复渲染(re-render)呢？ 看起来我们需要对组件（运行）的各个阶段进行控制，组件运行所有涉及的各个阶段叫做**组件的生命周期**，并且每一个React组件都会经历这些阶段。React提供了一些方法并在组件处于相应的阶段时通知我们。这些方法叫做React**组件的生命周期方法**且会根据特定并可预测的顺序被调用。 基本上所有的React组件的生命周期方法都可以被分割成四个阶段：**初始化**、**挂载阶段（mounting）**、**更新阶段**、**卸载阶段（unmounting）**。让我们来近距离分别研究下各个阶段。 ## 初始化阶段 初始化阶段就是我们分别通过`getDefaultProps()`和`getInitialState()`方法定义`this.props`默认值和`this.state`初始值的阶段。 `getDefaultProps()`方法被**调用一次并缓存**起来——在多个类实例之间共享。在组件的任何实例被创建之前，我们（的代码逻辑）不能依赖这里的`this.props`。这个方法返回一个对象并且属性如果没有通过父组件传入的话相应的属性会挂载到`this.props`对象上。 `getInitialState()`方法也只会被调用一次，（调用时机）刚好是**mounting阶段开始之前**。返回值将会被当成`this.state`的初始值，且必须是一个对象。 现在我们来证明上面的猜想，实现一个显示的值可以被增加和减少的组件，基本上就是一个拥有“+”和“-”按钮的计数器。 ``` js var Counter = React.createClass({ getDefaultProps: function() { console.log('getDefaultProps'); return { title: 'Basic counter!!!' }...
_折腾Node.js有些日子了，下面将陆陆续续记录下使用Node.js的一些细节。_ 熟悉Node.js的童鞋都知道，Node.js作为服务器端的javascript运行环境，它使用npm作为通用的包管理工具，npm遵循CommonJS规范定义了一套用于Node.js模块的约定，关于npm实现Node.js模块的更多细节请细读[深入Node.js的模块机制](http://www.infoq.com/cn/articles/Node.js-module-mechanism)，这里简单讲下书写Node.js代码时`module.exports`与`exorts`的区别。 在浏览器端js里面，为了解决各模块变量冲突等问题，往往借助于js的闭包把所有模块相关的代码都包装在一个匿名函数里。而Node.js编写模块相当的自由，开发者只需要关注`require`，`exports`，`module`等几个变量就足够，而为了保持模块的可读性，很推荐把不同功能的代码块都写成独立模块，减少各模块耦合。开发者可以在“全局”环境下任意使用`var`申明变量（不用写到闭包里了），通过`exports`暴露接口给调用者。 我们经常看到类似`export.xxx = yyy`或者`module.exports = xx`这样的代码，可实际在通过`require`函数引入模块时会出现报错的情况，这是什么原因导致的呢？ Node.js在模块编译的过程中会对模块进行包装，最终会返回类似下面的代码： ``` javascript (function (exports, require, module, __filename, __dirname) { // module code... }); ``` 其中，`module`就是这个模块本身，`require`是对Node.js实现查找模块的模块`Module._load`实例的引用，`__filename`和`__dirname`是Node.js在查找该模块后找到的模块名称和模块绝对路径，这就是官方API里头这两个全局变量的来历。 关于module.exports与exorts的区别，了解了下面几点之后应该就完全明白： 模块内部大概是这样： ``` javascript exports =...
关于Hybrid模式开发app的好处，网络上已有很多文章阐述了，这里不展开。 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考。 ## 通讯 作为一种跨语言开发模式，通讯层是Hybrid架构首先应该考虑和设计的，往后所有的逻辑都是基于通讯层展开。 Native（以Android为例）和H5通讯，基本原理： - Android调用H5：通过webview类的`loadUrl`方法可以直接执行js代码，类似浏览器地址栏输入一段js一样的效果 ``` java webview.loadUrl("javascript: alert('hello world')"); ``` - H5调用Android：webview可以拦截H5发起的任意url请求，webview通过约定的规则对拦截到的url进行处理（消费），即可实现H5调用Android ``` js var ifm = document.createElement('iframe'); ifm.src = 'jsbridge://namespace.method?[...args]'; ``` JSBridge即我们通常说的桥协议，基本的通讯原理很简单，接下来就是桥协议具体实现。 P.S：注册私有协议的做法很常见，我们经常遇到的在网页里拉起一个系统app就是采用私有协议实现的。app在安装完成之后会注册私有协议到OS，浏览器发现自身不能识别的协议（http、https、file等）时，会将链接抛给OS，OS会寻找可识别此协议的app并用该app处理链接。比如在网页里以`itunes://`开头的链接是Apple Store的私有协议，点击后可以启动Apple...
本篇主要介绍webpack的基本原理以及基于webpack搭建前端项目工程化解决方案的思路。 下篇（还没写）探讨下对于Node.js作为后端的项目工程化、模块化、前后端共享代码、自动化部署的做法。 ## 关于前端工程 下面是百科关于“[软件工程](http://baike.baidu.com/link?url=8KWAhpkQgUuyqAdcnb0Y380yJ5Ol8pY1-cGPR_iegeVsmnskjrZPiTLsVavNguvCSwBzhLFpUMFtOK0EiQtmAcGQRREMQa6PqF-4L62jQqC)”的名词解释： > 软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。 其中，工程化是方法，是将软件研发的各个链路串接起来的工具。 对于软件“工程化”，个人以为至少应当有如下特点： - 有IDE的支持，负责初始化工程、工程结构组织、debug、编译、打包等工作 - 有固定或者约定的工程结构，规定软件所依赖的不同类别的资源的存放路径甚至代码的写法等 - 软件依赖的资源可能来自软件开发者，也有可能是第三方，工程化需要集成对资源的获取、打包、发布、版本管理等能力 - 和其他系统的集成，如CI系统、运维系统、监控系统等 广泛意义上讲，前端也属于软件工程的范畴。 但前端没有Eclipse、Visual Studio等为特定语言量身打造的IDE。因为前端不需要编译，即改即生效，在开发和调试时足够方便，只需要打开个浏览器即可完成，所以前端一般不会扯到“工程”这个概念。 在很长一段时间里，前端很简单，比如下面简单的几行代码就能够成一个可运行前端应用： ``` xml webapp app title ``` 但随着webapp的复杂程度不断在增加，前端也在变得很庞大和复杂，按照传统的开发方式会让前端失控：代码庞大难以维护、性能优化难做、开发成本变高。 感谢Node.js，使得JavaScript这门前端的主力语言突破了浏览器环境的限制可以独立运行在OS之上，这让JavaScript拥有了文件IO、网络IO的能力，前端可以根据需要任意定制研发辅助工具。 一时间出现了以Grunt、Gulp为代表的一批前端构建工具，“前端工程”这个概念逐渐被强调和重视。但是由于前端的复杂性和特殊性，前端工程化一直很难做，构建工具有太多局限性。...
#### **——人脑不是机器，记忆都会退化，我们需要文档辅助作知识沉淀** ## javascript #### 基本功 ###### 语言特性 - 数据类型： - `Undefined`, `Null`, `Bollean`, `Number`, `String` - `Object`、`Array` - `Date`、`RegExp` - typeof输出（以下六个值之一）： - `undefined` ``` javascript var x; typeof(x); //...
本篇，主要普及promise的用法。 一直以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制几乎深入人心。在设计API的时候，不管是浏览器厂商还是SDK开发商亦或是各种类库的作者，基本上都已经遵循着callback的套路。 近几年随着JavaScript开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解。 在callback的模型里边，我们假设需要执行一个异步队列，代码看起来可能像这样： ``` javascript loadImg('a.jpg', function() { loadImg('b.jpg', function() { loadImg('c.jpg', function() { console.log('all done!'); }); }); }); ``` 这也就是我们常说的回调金字塔，当异步的任务很多的时候，维护大量的callback将是一场灾难。当今Node.js大热，好像很多团队都要用它来做点东西以沾沾“洋气”，曾经跟一个运维的同学聊天，他们也是打算使用Node.js做一些事情，可是一想到js的层层回调就望而却步。 好，扯淡完毕，下面进入正题。 Promise可能大家都不陌生，因为Promise规范已经出来好一段时间了，同时Promise也已经纳入了ES6，而且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API。 所谓Promise，字面上可以理解为“承诺”，就是说A调用B，B返回一个“承诺”给A，然后A就可以在写计划的时候这么写：当B返回结果给我的时候，A执行方案S1，反之如果B因为什么原因没有给到A想要的结果，那么A执行应急方案S2，这样一来，所有的潜在风险都在A的可控范围之内了。 上面这句话，翻译成代码类似： ``` javascript var resB...