一介布衣
2015-11-30
Html5 的扩展极大的方便了web开发.
比如视频播放,在Html5 之前,全部依赖 flash / 银光 这样的插件.
video 元素 Html5 的 video 元素扩展出来非常多的方法,属性,事件 等.
我们可以直接在此控件上播放,暂停 等操作.
现在，Safari 3以上、Firefox 4以上、Opera 10以上，以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持
表现形式:
<video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>
一介布衣
2015-11-29
JavaScript 单元测试、更因其执行环境复杂无比、自动化门槛超高.
目前 JavaScript 越来越复杂庞大，其实更需要单元测试来确保品质.
但是由于 PhantomJS、Travis CI 等工具… 写 JavaScript 单元测试变得轻松许多.
今天来聊一下关于 javascript 单元测试 Unit Test 及 CI 持续集成工具.
Unit Test 单元测试
我们常写一些工具类的 JavaScript Function、甚至包装成组件、以方便未来重复使用.
单元测试 (Unit Test) 是另外一份代码、用来检查这些代码的正确性.
例如过去我们得替自己撰写 t
一介布衣
2015-11-28
首先你需要了解基本的 git相关知识
如果你从 github 上clone了别人的代码,本地做了一些修改后,直接提交可能会遇到一些问题,首先需要你输入用户名,接着输入密码,最后返回错误提示信息.
试想一下,如果你可以把 clone 下来的代码随意修改完后,还能随意提交到github服务器,那整个开源生态可能要彻底乱为一团.
所以不让你提交就对了.
那如何把 clone 后修改的代码提交到 github 呢?
github上 不是有个fork么， 好，那么给别人的项目提交代码的方式就有了，先fork下别人的代码，于是你的github上就出现了同名的项目，这个项目就属于你自己了
一介布衣
2015-11-28
4.1. Fork + Pull模式 参与GitHub中的项目开发，最常用和推荐的首选方式是“Fork + Pull”模式。在“Fork + Pull”模式下，项目参与者不必向项目创建者申请提交权限，而是在自己的托管空间下建立项目的派生（Fork）。
如果一个开源项目派生出另外的项目，通常意味着项目的分裂和开发团队的削弱，而GitHub中的项目派生则不会，而且正好相反，GitHub中的项目派生是项目壮大的体现。所有的派生项目都会有链接指向原始项目，派生项目没有独立的缺陷追踪系统（ISSUE），而是必须利用创建者本人的项目中的缺陷追踪系统。至于在派生项目中创建的提交，可以非常方便地利用GitH
一介布衣
2015-11-25
如何在 linux 上使用 gitlab 搭建自己的 git 服务器
gitlab 虽然 GitWeb 相当简单。 但如果你正在寻找一个更现代，功能更全的 Git 服务器，这里有几个开源的解决方案可供你选择安装。 因为 GitLab 是其中最出名的一个，我们将它作为示例并讨论它的安装和使用。 这比 GitWeb 要复杂的多并且需要更多的维护，但它的确是一个功能更全的选择。
安装 GitLab 是一个数据库支持的 web 应用，所以相比于其他 git 服务器，它的安装过程涉及到更多的东西。 幸运的是，这个过程有非常详细的文档说明和支持。
这里有一些可参考的方法帮你安装 GitLab 。 为
一介布衣
2015-11-21
JSX 可以看作JavaScript的拓展，看起来有点像XML。
使用React，可以进行JSX语法到JavaScript的转换。
为什么使用JSX
使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护。
XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。看个直接的对比：
//使用JSX
React.render(
<div>
<div>
一介布衣
2015-11-17
说到node.js 创建服务器,首先想到 express
之前和大家分享过 关于http-server快速创建node服务
http-server
首先需要 全局安装 http-server
npm install -g http-server
http-server 启动
http-server -a 127.0.0.1 -p 7070
上面的一句命令启动了一个node.js 的静态服务器. 监听本地 7070 端口.
静态目录就是当前运行 命令所在的目录
如果你的当前项目中存在 public 文件夹,那么默认静态目录会指定到 public
如果没有 public
一介布衣
2015-11-16
什么是m3u
m3u是一个纯文本文件,虽然我们平时看到播放器首先加载了此文件,但是它并不是一个音频文件。
播放器并不是播放它，而是根据它的记录找到网络地址进行在线播放
什么是m3u8
m3u8 是在 m3u 格式下扩展出来的,
可以播流或者点播形式，目的是实现时实性及保密性它会不让你获取它的视频所在地址
浏览器使用的是 m3u8 文件。
m3u8 跟音频列表格式 m3u 很像，可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。
播放器按顺序逐个播放，全部放完再请求一下 m3u8 文件，获得包含最新 ts 文件的播放列表继续播，周而复始。
整个直播过程就是依靠一个不断更新
一介布衣
2015-11-14
关于 promise 介绍和使用方法 请点击浏览其他博客.
今天分享的是针对 Q 开源包 api 的简单白话版本.
promise.then(onFulfilled, onRejected, onProgress)
then 回调接收 3个参数 ,分别是 成功时,失败时,持续读取状态时
前两个函数对应Promise的两种状态的回调函数fulfiled 和 rejected，第三个函数用于处理进度信息
promise.catch(onRejected)
promise 遇到异常时执行
promise.then(undefined, onRejected)
当catc
一介布衣
2015-11-14
如何把自己写的 node.js 模块发布到 npm 开源社区
有下面几个前提条件:
你需要是 npm 社区注册的会员
如果你还没有,点击下面的链接注册
https://www.npmjs.com/
你的开发环境需要 安装node.js 和 npm 创建repository
接下来我们需要创建module所需的repository，默认你拥有一个github账号（如果没有自行解决），这个repository用来托管我们module的代码，并方便用户报告bug，最重要的是可以让其他开发者向module贡献代码，这也是乐趣所在。
初始化package.json
接下来我们创建pa
一介布衣
2015-11-12
#为什么用webpack
如果我们 前端 javascript 能像 node.js 一样 require 去引用一个依赖包,那么前端的世界就不会像现在这么乱
现在为什么乱?
假设:
a.js 依赖 b.js
b.js 依赖 c.js
c.js 依赖 d.js
如果在我们前端去引用这些依赖的时候,往往是这样的:
<script src='a.js'></script>
<script src='b.js'></script>
<script src='c.js'></script>
<scri
一介布衣
2015-11-12
概述
CommonJS是服务器端模块的规范，Node.js采用了这个规范。
根据CommonJS规范，一个单独的文件就是一个模块。
加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。下面就是一个简单的模块文件example.js。
console.log("evaluating example.js");
var invisible = function () {
console.log("invisible");
}
exports.message = "hi";
exports.say = function () {
c
一介布衣
2015-11-12
promise 规范
点击查看此博文了解 promise规范让你解脱callback回调噩梦
promise 规范 开源包 Q 使用
点击查看博文 node.js下如何使用q
当promise 遇到 forEach
当你的一个业务需要执行多个异步方法时,最后统一返回
计数器法 顾名思义,用一个计数器来统计遍历/调用函数的次数,最后一次统一返回结果
假设我们有一个 实现 promise 规范的函数 test
var test=function(a){
var defer=Q.defer();
defer.resolve(a+1);
return defer.p
一介布衣
2015-11-11
什么是levelDB
google 公司开发的一款 高性能KV型nosql数据库 ,你可以点击链接查看以前的介绍.
node.js 下使用leveldb 请移步到这里.
但是之前的所有leveldb 操作接口都是基于 callback 回调.所以今天这篇就是分享下leveldb 数据接口实现promise 规范.
什么是promise
promise 规范让javascript拜托callback回调
请移步到上面的博文查看
levelup
levelup 是 leveldb 在node.js 上的实现开源包.
github地址: https://github.com/L
一介布衣
2015-11-10
javascript 在浏览器中的加载是如何的?
如何你的 script 上没有任何 异步,阻塞 等标注:
浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript
Defer属性标记
defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。
也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致.
但是defer属性在各个浏览器中支持程度有点不同,就是说,有的浏览器不完全支持.
Async属性标注
as
一介布衣
2015-11-09
一般来说， React 组件是一个组件类由 extends Component 创建，并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法来定义。
一个简单的例子：
import React, { Component } from 'react';
import { render } from 'react-dom';
class LikeButton extends Component {
getInitialState() {
return { liked: false };
}
handleClick(e) {
this.
一介布衣
2015-11-07
关于 React Native 学习 系列之如何定义css 样式
样式
React Native 不实现 CSS，而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定，你可以阅读那些幻灯片，了解背后的基本原理。
声明样式
在 React Native 中声明样式的方法如下：
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active:
一介布衣
2015-11-06
在 React 下，我们需要考虑的，是每个组件在任意一个状态下应该怎么渲染。
（状态就是数据）
React 会把这些组件装配成页面。
然后当数据更新后， React 又把新数据传给组件，于是又根据新数据重新渲染
React 把重新渲染的结果和之前渲染的结果进行比对，找出需要更新的部分，进行更新。
我们只需要正确的更新数据/状态，不必再在渲染时考虑数据发生了什么变化（例如是增加了一条记录还是减少了一条记录？增加到什么位置？不需要考虑这些也就不需要考虑我们在进行 DOM 操作时插入到哪里等问题）。
我们只需要指定好规则（即给出任意一种状态，这个组件应该怎么渲染），并正确的更新状态，这些
一介布衣
2015-11-05
利用 JSX 编写 DOM 结构，可以用原生的 HTML 标签，也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分，小写的字符串是 HTML 标签，大写开头的变量是 React 组件。
使用 HTML 标签： import React from 'react';
import { render } from 'react-dom';
var myDivElement = <div className="foo" />;
render(myDivElement, document.getElementById('mountNode'));
HTML 里
一介布衣
2015-11-05
传统的 MVC 是将模板放在其他地方，比如
script 标签或者模板文件，再在 JS 中通过某种手段引用模板。按照这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板……下面是一段 React 官方的看法：
We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and
一介布衣
2015-11-04
上一篇博文介绍了 html5 file api
html5 提供了一套可以操作本地文件的 api ,但是有一定的局限性
必须由用户发起一个事件,所以你不要妄想着用户浏览器加载某个站点时,主动去读取他本地硬盘的资料....不可能的.
你的浏览器必须支持 html5 的 file api ,所以你也不要妄想去兼容IE6
用户发起行为比如: file upload 操作, 文件拖拽 等.
最近遇到一个需求
1.本地上传视频要保存到七牛服务器
2.提交切割视频任务 (大文件切割成多份)
3.返回视频截图 (按视频长短截取图片,供管理员审核视频内容)
七牛这边提供的有 j
一介布衣
2015-11-03
javascript 访问本地文件,已经成为可能.
HTML5 file api
该规范主要定义了以下数据结构：
File
FileList
Blob
HTML5 访问文件和大部分语言是一致的,先获取文件句柄，然后调用文件访问接口，打开文件句柄，读取文件!
选择文件
首先检测一下当前浏览器是否支持File Api：
function isSupportFileApi() {
if(window.File && window.FileList && window.FileReader && window.Blob
一介布衣
2015-11-03
promise 规范 可以让你从繁杂的 callback 中解脱出来.
如果我们在传统的 callback 中执行 5个 步骤,应该是下面这样的:
setp1(function(res)){
setp2(function(res)){
setp3(function(res){
setp4(function(res){
setp5(function(res){
//终于执行完了
});
});
});
});
一介布衣
2015-11-02
要求
OS X - 当前仅支持 OS X
推荐使用 Homebrew 的方式来安装 nvm，watchman 和 flow。
安装 Node.js 4.0 或者更新的版本。
使用 Homebrew 来安装 nvm 或者参考 它的安装指南。
接着运行 nvm install node && nvm alias default node, 它可以让您安装最新版本的 Node.js 并设置您的终端，所以你可以通过键入 node 来运行它。使用 Nvm 可以让您安装多个版本的 Node.js 并且在它们之间轻松切换。
npm 的更新之处。
brew 安装 wa
一介布衣
2015-11-02
React Native 安卓应用程序所需要的开发环境的基本安装步骤
安装和配置 SDK
安装最新的 JDK.
安卓 SDK
brew install android-sdk
将它添加到 ~/.bashrc, ~/.zshrc 或者任何其他您的 shell 所使用的路径：
export ANDROID_HOME=/usr/local/opt/android-sdk
启动一个新的 shell 并且运行 android
➜ /Users/zhangzhi >android
Android SDK 生成工具版本 23.0.1
Android 6.0 (API 23