• Archive by category "Javascript语言实践"

Blog Archives

Truffle以太坊DApp开发框架

比特币吸金之道系列文章,由计算机黑客发明的网络货币,无国界,无政府,无中心。没有政府滥发货币,没有通货膨胀。在全球计算机网络中,自由的实现货币兑换和流通。

本系列文章只讲程序和策略,不谈挖矿…

关于作者:

  • 张丹(Conan), 程序员/Quant: Java,R,Nodejs
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/bitcoin-eth-truffle

前言

区块链的开发对于大多数的人来说,都是一件很新、很难的事情,有太多不一样的技术要学习。区块链有自己的设计理念,不同于传统分布式系统架构,数据同步机制,共识算法等。以太坊作为区块链2.0的产品,最独特是智能合约的设计,是超脱于技术的思维体系。

通过 Truffle 把这些不同的理念和思路进行整合,转换为开发人员能明白的一种编程方法。本文中的所有源代码已经上传到github,请有需要的同学下载使用: https://github.com/bsspirit/truffle-demo

目录

  1. Truffle安装
  2. 初始化项目
  3. 启动测试节点
  4. 部署合约
  5. 自定义的智能合约
  6. 交互的控制台
  7. 启动合约服务

1. Truffle安装

Truffle是Dapp开发框架,他可以帮我们处理掉大量无关紧要的小事情,让我们可以迅速开始写代码-编译-部署-测试-打包DApp这个流程。Truffle是使用Nodejs开发的,我们首先需要安装Nodejs运行环境。关于Nodejs的详细使用,请参考系列文章从零开始nodejs系列文章

DApp是什么?

App我们都知道是客户端应用,DApp就是D+App,D是英文单词decentralization的缩写,即DApp为去中心化应用。

检查操作系统版本和Nodejs版本。


> cat /etc/issue
Ubuntu 16.04 LTS \n \l

# Nodejs版本
> npm -v
6.0.0
> node -v
v8.9.4

全局安装Truffle工具。


# 安装truffle工具
> npm install -g truffle
/usr/local/bin/truffle -> /usr/local/lib/node_modules/truffle/build/cli.bundled.js
+ truffle@4.1.12
added 81 packages from 309 contributors in 2.571s

查看命令行帮助


> truffle
Truffle v4.1.12 - a development framework for Ethereum

Usage: truffle  [options]

Commands:
  init      Initialize new and empty Ethereum project
  compile   Compile contract source files
  migrate   Run migrations to deploy contracts
  deploy    (alias for migrate)
  build     Execute build pipeline (if configuration present)
  test      Run JavaScript and Solidity tests
  debug     Interactively debug any transaction on the blockchain (experimental)
  opcode    Print the compiled opcodes for a given contract
  console   Run a console with contract abstractions and commands available
  develop   Open a console with a local development blockchain
  create    Helper to create new contracts, migrations and tests
  install   Install a package from the Ethereum Package Registry
  publish   Publish a package to the Ethereum Package Registry
  networks  Show addresses for deployed contracts on each network
  watch     Watch filesystem for changes and rebuild the project automatically
  serve     Serve the build directory on localhost and watch for changes
  exec      Execute a JS module within this Truffle environment
  unbox     Download a Truffle Box, a pre-built Truffle project
  version   Show version number and exit

See more at http://truffleframework.com/docs

2. 初始化项目

新建工程目录,然后用truffle初始化项目。


> cd /root/workspace
> mkdir truffle01
> cd truffle01/

# 初始化项目
> truffle init
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!

Commands:

  Compile:        truffle compile
  Migrate:        truffle migrate
  Test contracts: truffle test

查看项目目录,目录下会生成下面的文件和目录。


> tree
.
├── contracts
│   └── Migrations.sol
├── migrations
│   └── 1_initial_migration.js
├── test
├── truffle-config.js
└── truffle.js
  • contracts/ , Truffle默认的合约文件存放地址。
  • migrations/ , 存放发布脚本文件
  • test/ , 用来测试应用和合约的测试文件
  • truffle-config.js, 配置文件
  • truffle.js, 配置文件

在contracts目录下,默认生成了一个合约文件Migrations.sol,执行编译合约。


> truffle compile
Compiling ./contracts/Migrations.sol...
Writing artifacts to ./build/contracts

成功编译后,会在build/contracts目录下,生成对于合约的Migrations.json文件,这个JSON就是

3. 启动测试节点

接下来,我们用testrpc搭建一个本地的简单的测试网络,相当于是一个mock,这样操作比较直接接入以太坊网络环境要容易的多。

安装测试网络工具testrpc


# 安装testrpc工具
> npm install -g ethereumjs-testrpc
npm WARN deprecated ethereumjs-testrpc@6.0.3: ethereumjs-testrpc has been renamed to ganache-cli, please use this package from now on.
/usr/local/bin/testrpc -> /usr/local/lib/node_modules/ethereumjs-testrpc/build/cli.node.js

> uglifyjs-webpack-plugin@0.4.6 postinstall /usr/local/lib/node_modules/ethereumjs-testrpc/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/ethereumjs-testrpc/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ ethereumjs-testrpc@6.0.3
added 339 packages from 279 contributors in 42.215s

启动testrpc测试网络。


> testrpc
EthereumJS TestRPC v6.0.3 (ganache-core: 2.0.2)

Available Accounts
==================
(0) 0x8dac051e949fdb323ff963f37de37345ac5a2de1
(1) 0x7ca2561b16a4181455537299ff766d4cec7cf6c3
(2) 0x7d1d40b9a015ff42d19cde1f95c0041ab1fac155
(3) 0x42730fd585a29029667274f0443ac0bb4830cb20
(4) 0xe3225679925b3790c850ec3560156aeff3fea1c2
(5) 0xd9f18fb4aa6ed92279136ddcdad73ad516fa7f7d
(6) 0xe9617966b21f20868a35d97e4abbb979f6b32431
(7) 0x15f1e3f6b1caa047281f91834530f14780b9adf7
(8) 0x53c049daad9338db54960e8620fefd3829590754
(9) 0xf6df046b0ce0d12bc978067bfcd0be209ee0b93c

Private Keys
==================
(0) 0c4cb520a02b1ea7c477e5ef028fef2da22be8589a08b5989fae5403c4fec21e
(1) 667adbcd821e183809bdf2d08cedbcd233741670cb61775ea491dd0ef862bf1f
(2) a5b0a337a7185544300f4d24e78b8a3f9d797280dc2ced40c7f3fe60ab943aa5
(3) 3e8f665924d45bcb013bff6111f3be557703ca0798ce824b14e84f5d7d2294e9
(4) 1620759f80e28a1258c18578253cade445d5d5e380a6fc12ed7cfe7e7f9ec408
(5) 60963d8c56c74d4f0cd460b7d9461581815153559ddb2eee9101eb3d2731fba9
(6) e20a5d21d0b6bdd88b143bedaab4ac94f7d1f2178236021b21991efea1ab6ee3
(7) d4d841c0430a9781bf86132db841364e92432d3c3d6ea25b5178e8a6d4c56984
(8) a98f4c3609d2c8e989a0f9bf86acdd4035bf0eac4de6b6c61545a8674f269b82
(9) d5ea07abc4cad2c9d26ebea32c67251ba7fcc3ab317739ec0a13a84cc1ccad47

HD Wallet
==================
Mnemonic:      enforce trust bridge guard memory stadium polar dignity provide alley embrace machine
Base HD Path:  m/44'/60'/0'/0/{account_index}

Listening on localhost:8545

这里生成了10个账号,和10个私钥,并模拟测试网络的打开了HTTP-RPC服务,这样就可以让智能合约的程序,基于这个测试网络进行开发了。

随着时间的,发现这个模拟的程序,还会自己模拟一些交易。


HD Wallet
==================
Mnemonic:      away lecture stuff weapon market spot infant solid capital monkey claw siege
Base HD Path:  m/44'/60'/0'/0/{account_index}

Listening on localhost:8545

eth_getBlockByNumber
eth_accounts
web3_clientVersion
net_version
eth_accounts
eth_accounts
eth_accounts
net_version
net_version
eth_sendTransaction

  Transaction: 0xd8e4638d4d2d95b2e2894fa724249cea81bdb539cf4c7b111dbefe0ea321b9eb
  Contract created: 0x0a2816a1c1ad71cda4843f57ab2c0a4a80cdfef9
  Gas usage: 277462
  Block Number: 1
  Block Time: Tue Jun 26 2018 18:49:33 GMT+0800 (CST)

eth_newBlockFilter
eth_getFilterChanges
eth_getTransactionReceipt
eth_getCode
eth_uninstallFilter
eth_sendTransaction

  Transaction: 0x27bda84efcb9a9677c17269919a00f01d7bd2c88b458bd20071c51e6e58dbd48
  Gas usage: 42008
  Block Number: 2
  Block Time: Tue Jun 26 2018 18:49:33 GMT+0800 (CST)

eth_getTransactionReceipt
eth_getBlockByNumber
eth_accounts
web3_clientVersion
eth_getBlockByNumber
eth_accounts
web3_clientVersion
eth_accounts

4. 部署合约

运行truffle migrate命令部署智能合约到测试网络上,第一次执行时出现错误Error: No network specified. Cannot determine current network,是因为没有连接到测试网络。

修改文件truffle.js,连接到测试网络上。


> vi truffle.js

module.exports = {
  networks: {
    development: {
      host: '127.0.0.1',
      port: 8545,
      network_id: '*'
    }
  }
};

再次启动truffle,完成部署的过程。


> truffle migrate
Using network 'development'.

Network up to date.

5. 自定义的智能合约

接下来,我们开始编写一个自己的智能合约,需要编写4个文件。

  • contracts/Hello.sol,合约文件
  • migrations/2_hello.js,部署文件
  • test/Hello.js,js单元测试文件
  • test/TestHello.sol,solidity单元测试文件

在contracts目录下,编写合约文件Hello.sol,提供2个函数,say()用来返回一个固定的字符串,sum()用来计算2个整书之和。


> vi ./contracts/Hello.sol

pragma solidity ^0.4.23;

contract Hello {

  function say() pure public returns (string) {
    return "Hello world";
  }


  function sum(uint a, uint b) pure public returns (uint val) {
    val = a + b ;
    return val;
  }

}

编写Hello.sol合约的部署脚本,放到migrations目录下面,文件名为2_hello.js。


> vi migrations/2_hello.js

var MyContract = artifacts.require("Hello");

module.exports = function(deployer) {
  deployer.deploy(MyContract);
};

单元测试有2种写法,一种是基于nodejs的Mocha库的写法,另一种是基本solidity的写法。

按Nodejs写法的测试用例,放到test目录下面,文件名为Hello.js。


> vi ./test/Hello.js

const Hello = artifacts.require("Hello");

contract('Hello test', async (accounts) => {

  it("say", async () => {
     let obj = await Hello.deployed();
     let val = await obj.say();
     assert.equal(val, "Hello world");
  })

  it("sum", async () => {
    let obj = await Hello.deployed();
    let val = await obj.sum(10,15);
    assert.equal(val, 25);

  });
})

按solidity写法的测试用例,放到test目录下面,文件名为TestHello.sol。


> vi ./test/TestHello.sol

pragma solidity ^0.4.24;

import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "../contracts/Hello.sol";

contract TestHello {

  function test_say() public {
    Hello obj = Hello(DeployedAddresses.Hello());
    Assert.equal(obj.say(), "Hello world","test say");
  }

  function test_sum() public {
    Hello obj = Hello(DeployedAddresses.Hello());
    Assert.equal(obj.sum(10,15), 25, "test sum");
  }
}

编译Hello.sol合约,成功通过。


> truffle compile
Compiling ./contracts/Hello.sol...
Writing artifacts to ./build/contracts

把合约再次部署到testrpc的测试网络上面,这时需要用–reset参数。


> truffle migrate --reset
Using network 'development'.

Running migration: 1_initial_migration.js
  Replacing Migrations...
  ... 0x011256fee23fe4e633c86411f35e31f539e9026302495c3d824fca6b314ae92c
  Migrations: 0x298afbabd16ca14ec870377a61f983203ac69536
Saving successful migration to network...
  ... 0x59b23e1efc5f1bfb09af05ed3c26b7338573834394a61adea4bfc69775dcbae8
Saving artifacts...
Running migration: 2_hello.js
  Replacing Hello...                                                       # 创建合约
  ... 0x0aab9dd6c5781b899b60c7fc1190d3aefaa2af68363af386a8c473d40bc9f20f   # 交易hash
  Hello: 0x98ce096564f6b459b4a09b1b204ad6e362d384b6                        # 合约地址
Saving successful migration to network...
  ... 0x164b11ea951882cf5d374c2bdb979dac9586a87d0db4b8c6c8561d4cc7a9d5ca
Saving artifacts...

部署成功之后,我们可以看到testrpc的测试网络中,也有一些对应的更新。



eth_getTransactionReceipt
eth_accounts
eth_sendTransaction

  Transaction: 0x0aab9dd6c5781b899b60c7fc1190d3aefaa2af68363af386a8c473d40bc9f20f    # 交易hash
  Contract created: 0x98ce096564f6b459b4a09b1b204ad6e362d384b6                       # 合约地址
  Gas usage: 162663
  Block Number: 63
  Block Time: Wed Jun 27 2018 23:24:14 GMT+0800 (CST)

eth_newBlockFilter
eth_getFilterChanges
eth_getTransactionReceipt
eth_getCode
eth_uninstallFilter
eth_sendTransaction

  Transaction: 0x164b11ea951882cf5d374c2bdb979dac9586a87d0db4b8c6c8561d4cc7a9d5ca
  Gas usage: 27008
  Block Number: 64
  Block Time: Wed Jun 27 2018 23:24:14 GMT+0800 (CST)

eth_getTransactionReceipt

接下来,我们就是可以运行test的命令,来测试合约的正确性。


> truffle test
Using network 'development'.

Compiling ./contracts/Hello.sol...
Compiling ./test/TestHello.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...

  TestHello
    ✓ test_say (119ms)
    ✓ test_sum (70ms)

  Contract: Hello test
    ✓ say
    ✓ sum

  4 passing (1s)

2种写法的单元测试文件,都通过的测试。2种写法的区别在于,Nodejs当中是异步执行测试的,solidity是同步的。

Nodejs的优势是测试与前端测试相似,可以模拟前端测试,称为整合测试,可以有更强大的语法支持。js的另一大优势可以比较简单地实现异常捕捉。

solidity测试写法简洁,适用于单元测试,另一大优势是js只能测试public的函数,soli可以测试内部function,internal的,通过继承被测试contract来获得internal function的访问权限。

6. 交互的控制台

接下来,我们在网络执行合约,可以通过控制台的交互的命令来完成,启动控制台 truffle console。


> truffle console

# 执行合约函数
truffle(development)> var contract;
undefined
truffle(development)> Hello.deployed().then(function(instance){contract= instance;});
undefined
truffle(development)> contract.say()
'Hello world'
truffle(development)> contract.sum(1,21)
BigNumber { s: 1, e: 1, c: [ 22 ] }

# 查看合约地址
truffle(development)> Hello.address
'0x98ce096564f6b459b4a09b1b204ad6e362d384b6'

# 查看合约abi
truffle(development)> JSON.stringify(Hello.abi)
'[{"constant":true,"inputs":[],"name":"say","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"pure","type":"function"},{"constant":true,"inputs":[{"name":"a","type":"uint256"},{"name":"b","type":"uint256"}],"name":"sum","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"pure","type":"function"}]'

7. 启动合约服务

最后,启动服务程序,开放一个HTTP的端口,允许通过Http访问JSON ABI(Application Binary Interface),ABC指定了合约接口,包括可调用的合约方法、变量、事件等。


> truffle serve
Serving static assets in ./build on port 8080...

启动truffle serve时,一直会有一个报错,TypeError: fsevents is not a constructor


> truffle serve
Serving static assets in ./build on port 8080...

/usr/local/lib/node_modules/truffle/build/webpack:/Users/gnidan/src/work/truffle/~/chokidar/lib/fsevents-handler.js:26
  return (new fsevents(path)).on('fsevent', callback).start();
^
TypeError: fsevents is not a constructor
    at createFSEventsInstance (/usr/local/lib/node_modules/truffle/build/webpack:/Users/gnidan/src/work/truffle/~/chokidar/lib/fsevents-handler.js:26:1)
    at setFSEventsListener (/usr/local/lib/node_modules/truffle/build/webpack:/Users/gnidan/src/work/truffle/~/chokidar/lib/fsevents-handler.js:80:1)
    at FSWatcher.FsEventsHandler._watchWithFsEvents (/usr/local/lib/node_modules/truffle/build/webpack:/Users/gnidan/src/work/truffle/~/chokidar/lib/fsevents-handler.js:244:1)
    at FSWatcher. (/usr/local/lib/node_modules/truffle/build/webpack:/Users/gnidan/src/work/truffle/~/chokidar/lib/fsevents-handler.js:378:1)
    at gotStat (fs.js:1775:21)
    at FSReqWrap.oncomplete (fs.js:152:21)

只有修改truffle的源代码文件中,把useFsEvents 检查项去掉就可以了。


> vi /usr/local/lib/node_modules/truffle/build/cli.bundled.js

// Enable fsevents on OS X when polling isn't explicitly enabled.
//if (undef('useFsEvents')) opts.useFsEvents = !opts.usePolling;

// If we can't use fsevents, ensure the options reflect it's disabled.
//if (!FsEventsHandler.canUse()) opts.useFsEvents = false;
opts.useFsEvents = false;

最后,用浏览器访问HTTP服务,http://103.211.167.71:8080/contracts/Hello.json

如下图所示:

总结一下,在本文中我们使用了trffule工具,完成了智能合约的 代码-编译-部署-测试-打包的完事流程,操作起来还是很方便的。

本文中的所有源代码已经上传到github,请有需要的同学下载使用: https://github.com/bsspirit/truffle-demo

接下来的步骤,就是把我们自定义的Hello.sol部署到Geth的私有网络中,等下篇文章再具体说明。Geth的私有网络环境搭建,请参考文章以太坊测试区块链环境搭建

转载请注明出处:
http://blog.fens.me/bitcoin-eth-truffle

打赏作者

新一代Node.js的Web开发框架Koa2

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者:

  • 张丹(Conan), 程序员R,Nodejs,Java
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/nodejs-koa2

前言

Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新,甚至你都追不上他的更新速度。我写的“从零开始nodejs系列文章”,基本把Nodejs的应用领域都涵盖了,但是放下了1年半后,再重新用Nodejs做开发,发现都变了,还要再重新再学一遍。我花了3周的时间,重学了ES6, KOA2, VUE2, VUX, Angular2, Webpack等的框架,终于找回了之前用Nodejs的时候的一些感觉,所以就有了接来的一系列的文章,希望能把我的踩坑经验分享给大家。

本文标题为“新一代Node.js的Web开发框架Koa2”,那么上一代是什么呢?就是Express,我写过2篇文章来介绍Express的,请参考文章:Node.js开发框架Express4.xNodejs开发框架Express3.0开发手记–从零开始。同时,Koa也从Koa的1.x升级了Koa的2.x,一切都在加速,希望大家能够体会到加速世界,给开发带来的快感,这就是风口。

程序代码已经上传到github有需要的同学,自行下载。
https://github.com/bsspirit/koa2-sample

目录

  1. 安装Node环境
  2. 建立项目
  3. 通过koa-generator来建立项目
  4. 目录结构
  5. app.js 文件分析
  6. 路由管理
  7. 页面渲染
  8. 日志分析

1. 安装Node环境

让我们从头开始 Koa2 的安装和使用吧,第一步,就是安装Node和NPM环境。在Window上面安装,就直接从官方网站下载一个可执行安装文件,执行安装即可。

在Linux Ubuntu上安装过程也是类似,本机的系统环境为:Linux Ubuntu 16.04 LTS,然后下载Node工程的源文件,编译,安装。


# 切换到root用户
~ sudo -i      

# 下载nodejs最新版本,源代码       
~ wget https://nodejs.org/dist/v8.4.0/node-v8.4.0.tar.gz
~ tar xvzf node-v8.4.0.tar.gz
~ cd node-v8.4.0

 # 编译、安装
~ ./configure
~ make
~ make install

运行node命令和npm命令


~ node -v
v8.4.0

~ npm -v
5.4.1

2. 建立项目

下面我们就开始创建Koa2的项目,接下来的操作在window与linux通用,只是编辑器不同而已。

进入window的开发目录,新建项目koa2-demo1。


# 进入开发目录
~ cd d:\workspace\js

# 新建项目、并进入项目目录
~ mkdir koa2-demo1 && cd koa2-demo1

创建一个node项目


~ d:\workspace\js\koa2-demo1>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (koa2-demo1)
version: (1.0.0)
description: koa2 demo
entry point: (index.js)
test command:
git repository:
keywords:
author: DanZhang
license: (ISC) MIT
About to write to d:\workspace\js\koa2-demo1\package.json:

{
  "name": "koa2-demo1",
  "version": "1.0.0",
  "description": "koa2 demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "DanZhang ",
  "license": "MIT"
}

Is this ok? (yes) yes

这样我们就完成了一个最简单的nodejs项目,在当前的目录下面生成了package.json的文件。

接下来,我们来安装koa2的库,到当前的项目中。


~ npm install koa -s
+ koa@2.3.0
added 37 packages in 12.462s

查看当前目录,发现生成了一个node_modules的目录,这个目录存放了koa包所有的依赖的库。

然后,我们新建一个启动文件:index.js,用来启动Koa的项目。


~ notepad index.js

var koa = require('koa');
var app = new koa();

app.use(function *(){
  this.body = 'Hello World';
});

app.listen(3000);

启动项目


~ node index.js

打开浏览器: http://localhost:3000/

看到这界面,那么恭喜你,第一步成功了。

3. 通过koa-generator来建立项目

Koa和Express项目一样,都提供了一种脚手架的方式来创建项目,使用这么方式会极大地提高开发的效率,但不建议初学者直接使用,高度自动化的生成器,可能会让你不理解实现的原理。

接下来,我们用koa-generator来生成一个koa的项目。

安装koa-generator,这是一个命令工具,所以需要全局安装。


~ npm install -g koa-generator

然后,我们创建koa2的项目时,就可以直接使用koa2的命令了。


# 进入开发目录
~ cd d:\workspace\js

# 生成koa2项目
~ koa2 koa2-demo2

   create : koa2-demo2
   create : koa2-demo2/package.json
   create : koa2-demo2/app.js
   create : koa2-demo2/public
   create : koa2-demo2/public/stylesheets
   create : koa2-demo2/public/stylesheets/style.css
   create : koa2-demo2/public/javascripts
   create : koa2-demo2/public/images
   create : koa2-demo2/routes
   create : koa2-demo2/routes/index.js
   create : koa2-demo2/routes/users.js
   create : koa2-demo2/views
   create : koa2-demo2/views/index.pug
   create : koa2-demo2/views/layout.pug
   create : koa2-demo2/views/error.pug
   create : koa2-demo2/bin
   create : koa2-demo2/bin/www

   install dependencies:
     > cd koa2-demo2 && npm install

   run the app:
     > SET DEBUG=koa* & npm start koa2-demo2

进入项目,并安装依赖库


~ cd koa2-demo2 && npm install

启动项目


~ npm run start

> koa2-demo2@0.1.0 start d:\workspace\js\koa2-demo2
> node bin/www

打开浏览器

如果你看到的界面,和上面的一样,那么恭喜你,用koa-generator生成的koa2的项目,也能正常工作了。这里你可以发现,用koa-generator时,只要一条命令就够了,程序会给你生成很多文件,直接就构建好了一个项目的基础。

4. 目录结构

接下来,我们就基于koa2-demo2的项目来分析,看一下生成出来的项目目录结构。我们用一个文本编辑器来打开这个项目,这样可以看得更清楚一些。

  • bin, 存放启动项目的脚本文件
  • node_modules, 存放所有的项目依赖库。
  • public,静态文件(css,js,img)
  • routes,路由文件(MVC中的C,controller)
  • views,页面文件(pug模板)
  • package.json,项目依赖配置及开发者信息
  • app.js,应用核心配置文件
  • package.json,node项目配置文件
  • package-lock.json,node项目锁定的配置文件

5. app.js 文件分析

app.js 是应用核心配置文件,我们把这个文件能够看明白,整理koa就非常容易了。

app.js文件,我们可以分割为X个部分进行解读:依赖包加载、错误处理、中间件加载、web界面渲染模板、自定义日志、自己定义路由、外部调用接口。


// 依赖包加载
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')

const index = require('./routes/index')
const users = require('./routes/users')

// 错误处理
onerror(app)

// 中间件加载
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

// web界面渲染模板
app.use(views(__dirname + '/views', {
  extension: 'pug'
}))

// 自定义日志
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// 自己定义路由
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

// 外部调用接口
module.exports = app

麻雀虽小,五脏俱全!通过app.js的配置,就可以把一个web项目给组装起来了。

6. 路由管理

普通的web应用,通常都是多个页面组成,每个页面会对应一个URL的地址,用户在浏览器输入URL可以打开不同的页面。路由管理,就是把URL和页面的关系对应起来的。

在 app.js 中,路由来提取到 ./routes/index.js 和 ./routes/users.js 两个文件中进行实现了。

以 ./routes/index.js 文件来举例说明。


~ notepad ./routes/index.js

const router = require('koa-router')()

// 解析'/'
router.get('/', async (ctx, next) => {  
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

// 解析 '/string'
router.get('/string', async (ctx, next) => {
  ctx.body = 'koa2 string'
})

// 解析 '/json'
router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json'
  }
})

module.exports = router

从代码中分析,当路径为’/’时,网页会返回Hello Koa 2!;当路径为’/string’时,网页会返回koa2 string;哪路径是/json时,网页会返回koa2 json。

7. 页面渲染

从上面路由中,我们看到路径’/’的输出,是一个被渲染为网页输出,而’/string’和’/json’的输出是直接字符的输出。传统的web应用,大都是后台渲染的机制。新型的单面应用来说,前后端分离的设计,根本不需要后端来渲染,直接输出json就可以了。

对后台渲染的实现,我们可以参考’/’的实现。


router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

上面代码中,通过 await ctx.render(‘index’,{}) 这样的语法,就可以加载pug的模板引擎。

  • await是ES6的关键字,用于把异步代码同步化,就不再写回调函数了(callback)。
  • ctx.render()函数,用于加载渲染引擎。

然后,我们找到views中的index.pug文件。


~ notepad ./views/index.pug

extends layout

block content
  h1= title
  p Welcome to #{title}

在index.pug文件中,有一个参数是后台传过来的,就是title,同时index.pug继承了layout.pug。

再打开layout.pug文件。


doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

layout.pug文件,是整个html的骨架,这样就可以通过后台要渲染为一个HTML的网页了。打开chrome浏览品质开发人员工具,看到HTML的代码的结构,与layout.pug和index.pug结构是一致的。

8. 日志分析

最后要说的就是服务器日志了,每一次的浏览行为,都会产生一条服务器日志,用于记录用户的访问情况。我们后台通过命令行启动后,后台的服务器就会一直存活着,接收浏览器的请求,同时产生日志。

日志中,200表示正常访问,404是没有对应的URL错误。你会看到每次访问的路径都被记录了,包括后台的路径和css的文件路径,还包括了访问协议,响应时间,页面大小等。

我们可以自定义日志格式,记录更多的信息,也可以记录对自己有用的信息。这样我们就构建出一个最小化的web应用了。

Nodejs的发展速度,远远超越了其他语言的发展,我看好Nodejs,希望能给入门Nodejs的朋友一些帮助。加油!!

程序代码已经上传到github有需要的同学,自行下载。
https://github.com/bsspirit/koa2-sample

转载请注明出处:
http://blog.fens.me/nodejs-koa2

打赏作者

Angular2新的体验

AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。

从 Angular 2.x 开始新的体验。

关于作者

  • 张丹(Conan), 程序员R,Java,Nodejs
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/angular2-init/

前言

随着Angular2的升级,从1.x升级2.x,但我却迟迟没有动手。原因了2.x对1.x完全不兼容,而且从原生Javascript变成了Typescript,增加很多的生成模块,依赖的类库一下子变得很多。变化实在太大了,确实让人难以接受。我特别对于Typescript的不解,喜欢javascript的灵活,而静态化意味代码量的增加。

前几天,看到Angular2的release,想来想去还是要试试。从官方文档中,看到对中文支持的非常好,开发团队真是用心了。开发团队用心的改变,作为使用者来说是切身可以感受的,带着敬意和信心,决定把Angular2学起来。

目录

  1. Angular2介绍
  2. Anguar2的快速启动
  3. 从命令行构建Anguar2

1. Angular2介绍

Angular是由Google开发的一套前端应用开发框架,可以快速帮你构建复杂的大型前端单页应用(Single Page Application)。我非常喜欢Angular 1.x 给我带来的前端开发体验,当前花了2周时间时间学习,几百行代码就实现了,超乎想象的应用效果。我放下了所有原来对于前端Javascript的认知,直接转向了Angular。

官方网站:https://angular.cn/

Angular2的新特性包括:

  • 渐进式Web应用:借助现代化Web平台的力量,交付app式体验。高性能、离线化、零安装。
  • 原生:借助来自Ionic、NativeScript和React Native中的技术与思想,构建原生移动应用。
  • 桌面:借助你已经在Web开发中学过的能力,结合访问原生操作系统API的能力,创造能在桌面环境下安装的应用,横跨Mac、Windows和Linux平台。
  • 代码生成:Angular会把你的模板转换成代码,针对现代JavaScript虚拟机进行高度优化,轻松获得框架提供的高生产率,同时又能保留所有手写代码的优点。
  • 统一:在服务端渲染应用的首屏,像只有HTML和CSS的页面那样几乎瞬间展现,支持node.js、.NET、PHP,以及其它服务器,为通过SEO来优化站点铺平了道路。
  • 代码拆分:Angular应用通过新的组件路由(Component Router)模块实现快速加载,提供了自动拆分代码的功能,为用户单独加载它们请求的视图中需要的那部分代码。
  • 模板:通过简单而强大的模板语法,快速创建UI视图。
  • Angular命令行工具:命令行工具:快速进入构建环节、添加组件和测试,然后立即部署。
  • 各种IDE:在常用IDE和编辑器中获得智能代码补全、实时错误反馈及其它反馈等特性。
  • 测试:使用Karma进行单元测试,让你在每次存盘时都能立即知道是否弄坏了什么。Protractor则让你的场景测试运行得又快又稳定。
  • 动画:通过Angular中直观简便的API创建高性能复杂编排和动画时间线 —— 只要非常少的代码。
  • 可访问性:通过支持ARIA的组件、开发者指南和内置的一体化测试基础设施,创建具有完备可访问性的应用。

接下来,就让我们来体验Angular2的新颖之处的。

2. Anguar2的快速启动

阅读官方文档,我们可以跟着文档进行项目的快速启动,快速启动项目quickstart,是基于github,node,npm的,我们按照文档执行就可以了。关于Node的介绍,可以参考系列文章从零开始nodejs系列文章

系统环境:

  • Win10 64bit
  • node v6.9.4
  • npm 3.10.10
  • git version 2.7.0.windows.1

2.1 构建项目

进入开发目录,下载quickstart项目。


~ cd D:\\workspace\js
~ git clone https://github.com/angular/quickstart.git quickstart
~ cd quickstart
~ npm install   # 执行npm安装和配置
~ npm start     # 启动项目

通过npm start命令,就直接启动了angular2的程序,默认会自动打开浏览器,就可以看到效果了。如果浏览没有自动打开,自己手动在浏览器打开localhost:3000,也可以打开。

2.2 目录结构

接下来,我们查看项目目录结构。

由于这个quickstart的模板项目,包含了太多的文件。一下子看到这么多东西,肯定要晕一会的。图中用红色部分标记的几个文件,是我们应该要知道的,其他的文件对于首次执行来说并不是太重要。

文件说明

  • app/app.components.ts, 一个自定义组件,Typescript代码。
  • app/app.module.ts, 模块文件,用于组合管理组件,Typescript代码。
  • app/main.ts, 项目启动的入口,加载ts文件,Typescript代码。
  • app/app.components.spec.ts, 单测试文件
  • .gitignore, git的配置文件
  • index.html, 单页应用的html入口文件
  • package.json, Node项目的工程配置文件
  • tsconfig.json, Typescript语言的配置文件

2.3 4个核心文件

把几个核心的文件中的代码,进行解释。

app/app.components.ts文件


import { Component } from '@angular/core';        //引用系统类库

@Component({                                      //定义组件
  selector: 'my-app',                             //对应该index.html的<my-app>标签
  template: `<h1>Hello {{name}}</h1>`,            //替换<my-app>标签的内容
})
export class AppComponent  { name = 'Angular'; }  //输出自定义组件 

app/app.module.ts文件


import { NgModule }      from '@angular/core';                  //引用系统类库
import { BrowserModule } from '@angular/platform-browser';      //引用系统类库
import { AppComponent }  from './app.component';                //引用app.components.ts文件,定义的AppComponent组件
 
@NgModule({                                                     //定义模块
  imports:      [ BrowserModule ],                              //引用浏览器模块
  declarations: [ AppComponent ],                               //声明组件
  bootstrap:    [ AppComponent ]                                //启动组件
})
export class AppModule { }                                      //输出自定义模块 

app/main.ts文件


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  //引用系统类库

import { AppModule } from './app.module';                                    //引用app.module.ts文件的AppModule 

platformBrowserDynamic().bootstrapModule(AppModule);                         //启动程序,加载模块

index.html文件


<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

index.html中$lt;my-app&gtl的标签,是会被app.components.ts文件定义的selector发现并处理。

这4个文件,其实就是程序源代码的核心文件。那么项目中的其他文件,都是各种工具的配置文件。比如,我要编译Typescript文件到Javascript文件,就是需要在tsconfig.json进行配置;对类库做动态加载就要用到systemjs;执行单元测试需要用到karma;上传到github需要用到.gitignore;对node项目的管理用package.json配置。

2.4 扩展工具

当然,还有一些扩展工具。

单独编译Typescrip到Javascript。


~ D:\workspace\js\quickstart>npm run tsc

单独编译Typescrip,并监控文件状态,发现文件变化重新变异。


~ D:\workspace\js\quickstart>npm run tsc:w

启动Server,在浏览器中查看效果。


~ D:\workspace\js\quickstart>npm run lite 

单元测试


~ D:\workspace\js\quickstart>npm test

E2E测试End-to-end


~ D:\workspace\js\quickstart>npm run e2e 

除了从github上面下载quickstart模板,还是另外一种初始构建项目的方式,就是用Anguar2的命令行工具。

3. 从命令行构建Anguar2

从上文的Angular2的特性中,就有一项是命令工具,用这种方式构建一个新项目,更符合开发人员“脚手架”的思路。首先,我们需要安装这个命令工具anguar-cli。请大家务必升级Nodejs到v6.x以上,我之前用v4.4,花了大量时间调试都没有通过。

3.1 安装anguar-cli


~ D:\workspace\js>npm install -g angular-cli

安装好后,我们可以通过help命令查看命令行有哪个功能。


D:\workspace\js>ng help
ember build 
  Builds your app and places it into the output path (dist/ by default).
  aliases: b
  --target (String) (Default: development)
    aliases: -t , -dev (--target=development), -prod (--target=production)
  --environment (String) (Default: )
    aliases: -e 
  --output-path (Path) (Default: null)
    aliases: -o 
  --watch (Boolean) (Default: false)
    aliases: -w
  --watcher (String)
  --suppress-sizes (Boolean) (Default: false)
  --base-href (String) (Default: null)
    aliases: -bh 
  --aot (Boolean) (Default: false)
  --sourcemap (Boolean) (Default: true)
    aliases: -sm
  --vendor-chunk (Boolean) (Default: true)
  --verbose (Boolean) (Default: false)
  --progress (Boolean) (Default: true)
  --i18n-file (String) (Default: null)
  --i18n-format (String) (Default: null)
  --locale (String) (Default: null)

  // 省略....

查看ng工具的版本


~ D:\workspace\js>ng version
                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/

angular-cli: 1.0.0-beta.26
node: 6.9.4
os: win32 x64

当然,我们最需要的就是构建项目,启动服务,生成组件,指令,服务等功能。

3.2 新建项目

新建一个项目


~ D:\workspace\js>ng new conan1      // 新建项目
installing ng2
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.json
  create angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'conan1' successfully created.

等了大概有10分钟,下载了有200mb的文件,希望大家有耐心。进入安装目录。


~ D:\workspace\js\conan1>cd conan1      // 进入项目目录
~ D:\workspace\js\conan1>ng serve       // 启动项目

打开浏览器,查看Web网页。

如果你想修改启动端口为4201,可以用下面的命令。


ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

用命令工具构建的项目目录。

目录结构有一个变化,就是嵌套了一层src目录,然后才是app目录。另外,多了angular-cli.json的配置文件。

3.3 模块生成器

接下来,我们可以用命令工具,进行项目模块和组件的开发了。

命令使用说明
组件Componentng generate component my-new-component
指令Directiveng generate directive my-new-directive
服务Serviceng generate pipe my-new-service
管道Pipeng generate pipe my-new-pipe
类Classng generate class my-new-class
接口Interfaceng generate interface my-new-interface
枚举对象Enumng generate enum my-new-enum
模块Moduleng generate module my-module

3.4 生成一个新组件

用命令生成一个hello的新组件,文件生成如下。


~ D:\workspace\js\conan1>ng generate component hello
installing component
  create src\app\hello\hello.component.css
  create src\app\hello\hello.component.html
  create src\app\hello\hello.component.spec.ts
  create src\app\hello\hello.component.ts
  update src\app\app.module.ts

在app目录下生成了一个hello的子目录,包括了4个组件的文件,同时在app.module.ts模块文件中,注册了这个新组件。

我们要修改2个地方,让这个新生成的hello组件可以运行。

1. 修改index.html文件,增加<app-hello>标签。


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Conan1</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
  
  <app-hello>Loading...</app-hello>
</body>
</html>

2. 修改app.module.ts文件,在@NgModule.bootstrap中,增加HelloComponent的启动项。


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent,HelloComponent]
})
export class AppModule { }

查看浏览器,我们可以看到hello works!显示到界面上。

3.5 生成一个新指令

属性型指令用于改变一个 DOM 元素的外观或行为。用命令生成一个link的新指令,操作如下。


~ D:\workspace\js\conan1>ng generate directive link
installing directive
  create src\app\link.directive.spec.ts
  create src\app\link.directive.ts
  update src\app\app.module.ts

主要生成了新文件link.directive.ts。


import { Directive } from '@angular/core';
@Directive({
  selector: '[appLink]'
})
export class LinkDirective {
  constructor() { }
}

接下来,用appLink指令来做一个样式的修饰,需要修改2个文件。

1. 修改hello.component.html文件,增加一段span的HTML标签,并配置appLink属性。


<p>hello works!</p>

<span appLink>Directive me!</span>

2. 修改link.directive.ts文件,在LinkDirective类的构造器constructor函数中,增加样式的修改属性。同时,通过@HostListener,监听鼠标动作。


import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';
@Directive({
  selector: '[appLink]'
})
export class LinkDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseenter') onMouseEnter() {
      this.highlight('blue');
    }
    @HostListener('mouseleave') onMouseLeave() {
      this.highlight('yellow');
    }
    
    private highlight(color: string) {
      this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
    }
}

修改后,我们在浏览器中查看运行的效果。

3.6 生成一个新服务

服务,可以封装代码,比如我们可以对数据访问代码单独隔离,封装到一个独立的服务中。用命令生成一个meta的新服务,操作如下。


~ D:\workspace\js\conan1>ng generate service meta
installing service
  create src\app\meta.service.spec.ts
  create src\app\meta.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

生成了2个service的文件,同时提供了Service必须被provided,才可以被应用。我们如果想要启用meta的这个服务,需要在3个文件中进行修改。

1. 修改meta.service.ts文件,增加getNames()函数,用于提供数据访问。


import { Injectable } from '@angular/core';
@Injectable()
export class MetaService {
  constructor() { }
  getNames():any[]{
    return [
        {id: 1, name: 'AAA'},
        {id: 2, name: 'BBB'},
        {id: 3, name: 'CCC'},
        {id: 4, name: 'DDD'}
      ];
  }
}

2. 修改hello.component.ts文件,把MetaService注入到HelloComponent中,通过providers进行依赖注入的体现,同时调用MetaService 类的getNames()函数获取数据。


import { Component, OnInit } from '@angular/core';
import { MetaService } from '../meta.service';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css'],
  providers: [MetaService]
})
export class HelloComponent implements OnInit {
  meta = [];
  constructor(private metaService: MetaService) { }
  ngOnInit() {
    this.meta = this.metaService.getNames();
  }
}

3. 修改hello.component.html文件,用于数据的html输出,以列表形式输出。


<p>hello works!</p>

<span appLink>Directive me!</span>

<ul>
  <li *ngFor="let m of meta">
    {{m.id}}, {{m.name}}
  </li>
</ul>

修改后,我们在浏览器中查看运行的效果。

3.7 生成一个新管道

管道,可以用于数据的连续处理操作,比如可以把日期在界面端进行格式化,把20170101格式转型2017-01-01格式。用命令生成一个datef的新管道,操作如下。


~ D:\workspace\js\conan1>ng generate pipe datef
installing pipe
  create src\app\datef.pipe.spec.ts
  create src\app\datef.pipe.ts
  update src\app\app.module.ts

生成了2个pipe的文件。如果我们想使用这个功能,需要在2个文件中进行修改。

1. 修改datef.pipe.ts文件,对日期进行格式化,把20161222转化为2016-12-22。


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'datef'
})
export class DatefPipe implements PipeTransform {
  transform(value: string) {
    var dat1 = value.toString();
    return dat1.substring(0,4)+ "-"+ parseInt(dat1.substring(4,6)) +  "-"+dat1.substring(6,8);
  }
}

2. 修改hello.component.html文件,进行HTML的输出。


<p>hello works!</p>

<span appLink>Directive me!</span>

<ul>
  <li *ngFor="let m of meta">
    {{m.id}}, {{m.name}}
  </li>
</ul>

<p>{{day}} ==> {{ day | datef}}</p>

修改后,我们在浏览器中查看运行的效果。

其他的命令,我们在后文再继续说明。本文只是一篇对Angular2的新体验介绍,由于Angular2整个框架还是变化挺大的,同时我对Typescript也不熟悉,对webapck也需要花时间学习。整个过程花了不少时间,也走了不少的弯路。

目前,网上Angular2框架介绍的文章本来就不多,虽然官网文档比较详细,但是上手来说,还是有一定的难度的,希望本文对于新手来说有一些帮助,也希望Angualr2尽快成熟,我准备正在项目中用起来!!

转载请注明出处:
http://blog.fens.me/angularjs-yeoman-project/

打赏作者

构建自己的Aleax查询服务

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者

  • 张丹(Conan), 程序员Java,R,Javascript
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/nodejs-alexa/

alexa-title

前言

每个网站的站长都会想尽办法提升网站的流量,从而获得更高的广告收入。那么评判一个网站好坏的标准,如Google的PR(PageRank),百度权重等。从PV(Page View)流量的角度,一个非常重要指标就是Alexa网站排名。

同全球的网站相比,你就能了解到自己网站的位置,让我们先挤进全球前10万的排名吧,不然都不好意思跟同行说,“自己有一个网站”。

目录

  1. Alexa介绍
  2. 用Node开发Alexa服务

1. Alexa介绍

Alexa (http://www.alexa.com/)是一家发布世界网站排名的网站,以搜索引擎起家的Alexa创建于1996年4月(美国),目的是让互联网网友在分享虚拟世界资源的同时,更多地参与互联网资源的组织。Alexa每天在网上搜集超过1TB的信息,不仅给出多达几十亿的网址链接,而且为其中的每一个网站进行了排名。可以说,Alexa是当前拥有URL数量最庞大,排名信息发布最详尽的网站。

1999年,Alexa被美国电子商务旗舰企业“亚马逊”收购,成为后者的全资子公司。2002年春,Alexa放弃了自己的搜索引擎,转而与Google合作。

Alexa提供了网站流量统计的服务,对全球有域名的网站进行流量记录。也就是说,只要你申请了域名,在Alexa中就可以查询到你的网站的排名。Alexa的网站排名是按照每个特定网站的被浏览率进行排名的。浏览率越大,排名越靠前。

fens

通常情况,如果你的域名刚刚注册,排名在1千万以上;接下来,你每天都经心运营网站,小有起色时,排名会进入前1百万;然后,你继续发布优质内容,坚持了一段时间,排名会升至前50万;当你的网站在某一领域小有名气时,排名可以到达10万,如粉丝日志122616(2015-10-25),这时就会有广告主愿意来投放广告了;如果你做的是以盈利为目的的网站,那么你需要再加油,进入到前1万,这个时候你的流量已经可以为你带来生意了;如果能做的更好,排名进入前2000,像雪球排名到2109(2015-10-25),那么你将会有一个很高的估值了;如果赶上一个天大的机遇,你的网站排名到了前100,那么你的网站将给你带来上市公司的价值,如京东105(2015-10-25);如果你是天才型的CEO,网站进了前10名,那么你将会成为一个产业的领袖,甚至是某个区域的首富,如百度4(2015-10-25)。

站长们,加油!

2. 用Node开发Alexa服务

2.1 Alexa开放API

Alexa网站排名被业界普通的认可,排名数据会经常地被引用,每次都在网站上查询就会显得不方便。Amazon提供的Alexa的API,让开发者可以构建自己的Alexa查询的应用。

Alexa有2个主要的数据API服务。

通常情况,只需要调用UrlInfo数据接口,就可以获得网站的流量数据了。当然,这个接口的定义,并不像我之前想象的那么好用,而且开放出来的数据有限。

UrlInfo接口的API,如下图所示。

urlinfo

官方提供了多语言的SDK工具包,我觉得还是Node.js最方便。我构建的一个Alexa数据查询服务,http://fens.me/alexa


fens2

2.2 创建AWS的API密钥

我们在使用AWS的API之前,需要先创建密钥,类似于OAuth2的访问的机制。

1. 注册AWS账号,请大家自己完成。注册
2. 进入AWS账号管理控制台,控制台

3. 从控制台选择“安全证书”
aws1

4. 创建访问密钥(访问密钥 ID 和私有访问密钥)

aws2

我们一会写程序的时候,需要输入创建的访问密钥 ID 和私有访问密钥。

2.3 用Node开发Alexa服务

接下来,介绍用Node构建一个Alexa的项目。

我的系统环境

  • Win10 64bit
  • Node v0.12.3
  • NPM 2.9.1

创建项目


~ D:\workspace\nodejs>mkdir nodejs-alexa && cd nodejs-alexa

新建Node项目配置文件:package.json


~ vi package.json

{
  "name": "alexa-demo",
  "version": "0.0.1",
  "description": "alexa web demo",
  "license": "MIT",
  "dependencies": {
    "awis": "0.0.8"
  }
}

安装awis包


~ D:\workspace\nodejs\nodejs-alexa>npm install
npm WARN package.json alexa-demo@0.0.1 No repository field.
npm WARN package.json alexa-demo@0.0.1 No README data
alexarank@0.1.1 node_modules\alexarank
├── xml2js@0.4.13 (sax@1.1.4, xmlbuilder@3.1.0)
└── request@2.30.0 (forever-agent@0.5.2, aws-sign2@0.5.0, qs@0.6.6, tunnel-agent@0.3.0, oauth-sign@0.3.0, json-stringify-safe@5.0.1, mime@1.2.11, node-uuid@1.4.3, tough-cookie@0.9.15, form-data@0.1.4, hawk@1.0.0, http-signature@0.10.1)

awis@0.0.8 node_modules\awis
├── xml2js@0.4.13 (sax@1.1.4, xmlbuilder@3.1.0)
├── lodash@3.10.1
└── request@2.65.0 (aws-sign2@0.6.0, forever-agent@0.6.1, caseless@0.11.0, stringstream@0.0.4, oauth-sign@0.8.0, tunnel-agent@0.4.1, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, node-uuid@1.4.3, qs@5.2.0, tough-cookie@2.2.0, combined-stream@1.0.5, mime-types@2.1.7, form-data@1.0.0-rc3, http-signature@0.11.0, hawk@3.1.0, bl@1.0.0, har-validator@2.0.2)

新建文件alexa.js,调用AWS Alexa网站排名API。


~ vi alexa.js

// 定义AWS密钥
var key = 'xxxxxxxxxxxxxxx';
var sercet = 'xxxxxxxxxxxxxxx';

// 创建awis实例化对象
var awis = require('awis');
var client = awis({
  key: key,
  secret: sercet
});

// 调用UrlInfo接口
console.log("=============UrlInfo=================");
client({
  'Action': 'UrlInfo',                         //UrlInfo接口
  'Url': 'fens.me',                            //查询的网站
  'ResponseGroup': 'TrafficData,ContentData'   //需要的数据组
}, function (err, data) {
  if(err) console.log(err);
  console.log(data);  
});

运行程序node alexa.js


~ D:\workspace\nodejs\nodejs-alexa>node alexa.js
=============UrlInfo=================
{ contentData:
   { dataUrl: 'fens.me',
     siteData:
      { title: '粉丝日志',
        description: '跨界的IT博客|Hadoop家族, R, RHadoop, Nodejs, AngularJS, NoSQL, IT金融' },
     speed: { medianLoadTime: '982', percentile: '70' },
     adultContent: '',
     language: '',
     linksInCount: '198',
     keywords: '',
     ownedDomains: '' },
  trafficData:
   { dataUrl: 'fens.me',
     rank: '122616',
     usageStatistics: { usageStatistic: [Object] },
     contributingSubdomains: { contributingSubdomain: [Object] } } }

简简单单地几行代码,都获得了Alexa的排名信息。后台打印时Object没有转到成对象,我做了一个服务,可以通过HTTP输出查看完整的返回。http://api.fens.me/alexa/fens.me

我们查检一下awis包的源代码可以发现,其实AWS Alexa服务返回是XML,awis的自动帮我们做了JSON的转型处理,如果想查看原始的返回值,可以修改awis包中index.js文件parse()函数。


function parse(xml, req, cb) {
  console.log(xml); //打印

  ....
}

运行程序


D:\workspace\nodejs\nodejs-alexa>node alexa.js
=============UrlInfo=================
<?xml version="1.0"?>
<aws:UrlInfoResponse xmlns:aws="http://alexa.amazonaws.com/doc/2005-10-05/"><aws:Response xmlns:aws="http://awis.amazonaws.com/doc/2005-07-11"><aws:OperationRequest><aws:RequestId>1e7d8406-4b62-3460-27fb-325fc3dc3e85</aws:RequestId></aws:OperationRequest><aws:UrlInfoResult><aws:Alexa>

  <aws:ContentData>
    <aws:DataUrl type="canonical">fens.me</aws:DataUrl>
    <aws:SiteData>
      <aws:Title>粉丝日志</aws:Title>
      <aws:Description>跨界的IT博客|Hadoop家族, R, RHadoop, Nodejs, AngularJS, NoSQL, IT金融</aws:Description>
    </aws:SiteData>
    <aws:Speed>
      <aws:MedianLoadTime>982</aws:MedianLoadTime>
      <aws:Percentile>70</aws:Percentile>
    </aws:Speed>
    <aws:AdultContent/>
    <aws:Language/>
    <aws:LinksInCount>198</aws:LinksInCount>
    <aws:Keywords/>
    <aws:OwnedDomains/>
  </aws:ContentData>
  <aws:TrafficData>
    <aws:DataUrl type="canonical">fens.me</aws:DataUrl>
    <aws:Rank>122616</aws:Rank>
    <aws:UsageStatistics>
      <aws:UsageStatistic>
        <aws:TimeRange>
          <aws:Months>3</aws:Months>
        </aws:TimeRange>
        <aws:Rank>
          <aws:Value>122616</aws:Value>
          <aws:Delta>+28849</aws:Delta>
        </aws:Rank>
        <aws:Reach>
          <aws:Rank>
            <aws:Value>110056</aws:Value>
            <aws:Delta>+25785</aws:Delta>
          </aws:Rank>
          <aws:PerMillion>
            <aws:Value>12.5</aws:Value>
            <aws:Delta>-24.68%</aws:Delta>
          </aws:PerMillion>
        </aws:Reach>
        <aws:PageViews>
          <aws:PerMillion>
            <aws:Value>0.27</aws:Value>
            <aws:Delta>-24.84%</aws:Delta>
          </aws:PerMillion>
          <aws:Rank>
            <aws:Value>194189</aws:Value>
            <aws:Delta>43945</aws:Delta>
          </aws:Rank>
          <aws:PerUser>
            <aws:Value>1.9</aws:Value>
            <aws:Delta>0%</aws:Delta>
          </aws:PerUser>
        </aws:PageViews>
      </aws:UsageStatistic>
      <aws:UsageStatistic>
        <aws:TimeRange>
          <aws:Months>1</aws:Months>
        </aws:TimeRange>
        <aws:Rank>
          <aws:Value>102621</aws:Value>
          <aws:Delta>-30257</aws:Delta>
        </aws:Rank>
        <aws:Reach>
          <aws:Rank>
            <aws:Value>95663</aws:Value>
            <aws:Delta>-20326</aws:Delta>
          </aws:Rank>
          <aws:PerMillion>
            <aws:Value>15</aws:Value>
            <aws:Delta>+20%</aws:Delta>
          </aws:PerMillion>
        </aws:Reach>
        <aws:PageViews>
          <aws:PerMillion>
            <aws:Value>0.37</aws:Value>
            <aws:Delta>+60%</aws:Delta>
          </aws:PerMillion>
          <aws:Rank>
            <aws:Value>153976</aws:Value>
            <aws:Delta>-69981</aws:Delta>
          </aws:Rank>
          <aws:PerUser>
            <aws:Value>2.2</aws:Value>
            <aws:Delta>+30%</aws:Delta>
          </aws:PerUser>
        </aws:PageViews>
      </aws:UsageStatistic>
      <aws:UsageStatistic>
        <aws:TimeRange>
          <aws:Days>7</aws:Days>
        </aws:TimeRange>
        <aws:Rank>
          <aws:Value>114709</aws:Value>
          <aws:Delta>+32390</aws:Delta>
        </aws:Rank>
        <aws:Reach>
          <aws:Rank>
            <aws:Value>103552</aws:Value>
            <aws:Delta>+27312</aws:Delta>
          </aws:Rank>
          <aws:PerMillion>
            <aws:Value>14</aws:Value>
            <aws:Delta>-28.59%</aws:Delta>
          </aws:PerMillion>
        </aws:Reach>
        <aws:PageViews>
          <aws:PerMillion>
            <aws:Value>0.3</aws:Value>
            <aws:Delta>-37.28%</aws:Delta>
          </aws:PerMillion>
          <aws:Rank>
            <aws:Value>188124</aws:Value>
            <aws:Delta>58655</aws:Delta>
          </aws:Rank>
          <aws:PerUser>
            <aws:Value>2.0</aws:Value>
            <aws:Delta>-12.11%</aws:Delta>
          </aws:PerUser>
        </aws:PageViews>
      </aws:UsageStatistic>
      <aws:UsageStatistic>
        <aws:TimeRange>
          <aws:Days>1</aws:Days>
        </aws:TimeRange>
        <aws:Rank>
          <aws:Value>74860</aws:Value>
          <aws:Delta>-93163</aws:Delta>
        </aws:Rank>
        <aws:Reach>
          <aws:Rank>
            <aws:Value>70563</aws:Value>
            <aws:Delta>-54001</aws:Delta>
          </aws:Rank>
          <aws:PerMillion>
            <aws:Value>20</aws:Value>
            <aws:Delta>+60%</aws:Delta>
          </aws:PerMillion>
        </aws:Reach>
        <aws:PageViews>
          <aws:PerMillion>
            <aws:Value>0.6</aws:Value>
            <aws:Delta>+300%</aws:Delta>
          </aws:PerMillion>
          <aws:Rank>
            <aws:Value>111541</aws:Value>
            <aws:Delta>-210757</aws:Delta>
          </aws:Rank>
          <aws:PerUser>
            <aws:Value>2</aws:Value>
            <aws:Delta>+100%</aws:Delta>
          </aws:PerUser>
        </aws:PageViews>
      </aws:UsageStatistic>
    </aws:UsageStatistics>
    <aws:ContributingSubdomains>
      <aws:ContributingSubdomain>
        <aws:DataUrl>blog.fens.me</aws:DataUrl>
        <aws:TimeRange>
          <aws:Months>1</aws:Months>
        </aws:TimeRange>
        <aws:Reach>
          <aws:Percentage>99.19%</aws:Percentage>
        </aws:Reach>
        <aws:PageViews>
          <aws:Percentage>99.64%</aws:Percentage>
          <aws:PerUser>2.2</aws:PerUser>
        </aws:PageViews>
      </aws:ContributingSubdomain>
      <aws:ContributingSubdomain>
        <aws:DataUrl>OTHER</aws:DataUrl>
        <aws:TimeRange>
          <aws:Months>1</aws:Months>
        </aws:TimeRange>
        <aws:Reach>
          <aws:Percentage>0</aws:Percentage>
        </aws:Reach>
        <aws:PageViews>
          <aws:Percentage>0.36%</aws:Percentage>
          <aws:PerUser>0</aws:PerUser>
        </aws:PageViews>
      </aws:ContributingSubdomain>
    </aws:ContributingSubdomains>
  </aws:TrafficData>
</aws:Alexa></aws:UrlInfoResult><aws:ResponseStatus xmlns:aws="http://alexa.amazonaws.com/doc/2005-10-05/"><aws:StatusCode>Success</aws:StatusCode></aws:ResponseStatus></aws:Response></aws:UrlInfoResponse>

除了UrlInfo接口还有几个接口可以使用。

TrafficHistory接口


console.log("=============TrafficHistory=================");
client({
  'Action': 'TrafficHistory',
  'Url': 'fens.me',
  'ResponseGroup': 'History'
}, function (err, res) {
    if(err) console.log(err);
    console.log(res.trafficHistory);
    console.log(res.trafficHistory.range);
    console.log(res.trafficHistory.site);
    console.log(res.trafficHistory.start);
    console.log(res.trafficHistory.historicalData);
    console.log(res.trafficHistory.historicalData.data);
    console.log(res.trafficHistory.historicalData.data.length);
    res.trafficHistory.historicalData.data.forEach(function (item) {
      console.log(item.date);
      console.log(item.pageViews);
      console.log(item.rank);
      console.log(item.reach);
    });
});

运行程序


~ D:\workspace\nodejs\nodejs-alexa>node alexa.js
=============TrafficHistory=================
{ range: '31',
  site: 'fens.me',
  start: '2015-09-23',
  historicalData:
   { data:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] } }

// 省略输出

SitesLinkingIn接口


console.log("=============SitesLinkingIn=================");
client({
  'Action': 'SitesLinkingIn',
  'Url': 'fens.me',
  'ResponseGroup': 'SitesLinkingIn'
}, function (err, data) {
  if(err) console.log(err);
  console.log(data);
});

运行程序


~ D:\workspace\nodejs\nodejs-alexa>node alexa.js
=============SitesLinkingIn=================
{ sitesLinkingIn:
   { site:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] } }

CategoryBrowse接口


console.log("=============CategoryBrowse=================");
client({
  'Action': 'CategoryBrowse',
  'Url': 'fens.me',
  'Path': 'Top/china',
  'ResponseGroup': 'LanguageCategories'
}, function (err, data) {
  if(err) console.log(err);
  console.log(data);
});

运行程序


~ D:\workspace\nodejs\nodejs-alexa>node alexa.js
=============CategoryBrowse=================
{ categoryBrowse: { languageCategories: '' } }

最后,我们只需要把这个程序用web封装一下,就可以提供对用户的服务了,参考我的网站 http://fens.me/alexa

本文对应的代码请通过github进行下载,下载地址为:https://github.com/bsspirit/nodejs-alexa

Alexa网站排名以第三方的视角给全球的每个网站进行了排名,甚至是定价。做为一个优秀的网长,我们要使用好Alexa工具,了解自己的网站和竞争对手的网站,才能网站脱颖而出,成为成功的站长!

转载请注明出处:
http://blog.fens.me/nodejs-alexa/

打赏作者

图片延迟加载库Layzr

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者

  • 张丹(Conan), 创业者,程序员(Java,R,Javascript/Nodejs)
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/nodejs-layzr/

js-layzr

前言

延迟加载技术,普遍应用于现在大部分的互联网的Web应用上。通过对图像的延迟加载,等到用户浏览区域接近时才把图片进行加载,可以有效地提升网页打开的速度,进一步改进用户的体验。

Layzr.js库就可以完成这个功能,150多行代码,很小很快很方便。

目录

  1. layzr介绍
  2. layzr的基本使用
  3. Layzr的配置

1. layzr介绍

layzr.js 是一个很小、速度快、无依赖的,用于浏览器图片延迟加载的库。

我们找到Layzr.js官方的Github上面,dist目录发布的 layzr.min.js 仅有 2.2 KB。同时,发现 package.json 文件,没有任何的dependencies依赖。

用layzr.js进行图片延迟加载,是非常方便的。通过配置选项,实现最大化的加载速度。layzr.js对于滚动事件已去抖,以尽量减少对浏览器的压力,以确保最佳的渲染。

项目官方网站:http://callmecavs.github.io/layzr.js/

2. layzr的基本使用

layzr.js是在浏览器端运行的Javascript库,但是他是用于NPM管理的,还在没有bower中发布。关于NPM和Bower的介绍,请分别查看文章:快速创建基于npm的nodejs库bower解决js的依赖管理

下面我们用npm的方式,下载layzr库。

首先,创建项目目录。


~  D:\workspace\javascript> mkdir js-layzr && cd js-layzr 

新建NPM项目文件package.json。


~ D:\workspace\javascript\js-layzr> vi package.json
{
    "name": "js-layzr",
    "version": "0.0.1",
    "description": "a demo for layzr",
    "dependencies": {}
}

通过NPM下载layzr.js包


~ D:\workspace\javascript\js-layzr> npm install layzr.js --save
npm WARN package.json js-layzr@0.0.1 No repository field.
npm WARN package.json js-layzr@0.0.1 No README data
layzr.js@1.1.4 node_modules\layzr.js

layzr1

接下来,我们打开layzr.js项目提供的Demo的文件,在layzr.js/demo.html。


<!DOCTYPE html>

<!--[if IE 9]>         <html class="ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en-US"> <!--<![endif]-->
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      .demo-images {
        width: 300px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 50vh;
      }

      .demo-image,
      iframe {
        display: block;
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">

      <div class="demo-images">
        <img class="demo-image" src="http://placehold.it/300">
        <img class="demo-image" data-layzr="http://placehold.it/300">
        <img class="demo-image" data-layzr="http://placehold.it/300" data-layzr-retina="http://placehold.it/300&text=retina" data-layzr-bg>
        <img class="demo-image" data-layzr="http://placehold.it/300" data-layzr-retina="http://placehold.it/300&text=retina">
        <img class="demo-image" data-layzr="http://placehold.it/300" data-layzr-retina="http://placehold.it/300&text=retina">
        <img class="demo-image" data-layzr="http://placehold.it/300" data-layzr-retina="http://placehold.it/300&text=retina">
        <iframe width="300" height="169" data-layzr="https://www.youtube.com/embed/2a01Rg2g2Z8"></iframe>
      </div>

    </div><!-- END wrapper -->

    <script src="dist/layzr.js"></script>
    <script>
      // create new instance, defaults shown below
      var layzr = new Layzr({
        selector: '[data-layzr]',
        attr: 'data-layzr',
        retinaAttr: 'data-layzr-retina',
        bgAttr: 'data-layzr-bg',
        threshold: 0,
        callback: null
      });
    </script>
  </body>
</html>

在浏览型预览效果,如下图所示。

layzr2

左边为浏览器页面,右边为Chrome的开发者工具的Elements界面,红色直线为显示和代码的对应关系。当页面向下滚动时候,图片会一张一张的加载。同时代码中,原代码为


<img class="demo-image" data-layzr="http://placehold.it/300" data-layzr-retina="http://placehold.it/300&text=retina">

的部分,会被重新翻译为


<img class="demo-image" src="http://placehold.it/300">

从本Demo中,我们可以猜出layzr库应该有2个组成部分,监听页面事件 和 更新img标签的DOM元素。

3. Layzr的配置选择

在HTML中,图片是用img标签在控制的,要用到Layzr.js库,需要在img标签中增加属性。


<img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image" data-layzr-bg >
  • src: 用于定义图像占位符,如果没有定义图像占位符,那么在图像载入前,可能会显示异常。
  • data-layzr: 用于显示的图像
  • data-layzr-retina: 用于图像的延迟加载,测试发现没效果。
  • data-layzr-bg: 图像用于做成背景,测试发现直接被隐藏了。

对应地,我们还需要定义Javascript的实例,用来启动layzr的事件。


var layzr = new Layzr({ 
  selector: '[data-layzr]', 
  attr: 'data-layzr', 
  retinaAttr: 'data-layzr-retina', 
  bgAttr: 'data-layzr-bg', 
  threshold: 0, 
  callback: null 
});

Javascript实例属性:

  • selector: 用于选定图像标签。
  • attr: 用于指定data-layzr的属性
  • retinaAttr: 用于指定data-layzr-retina属性
  • bgAttr: 用于指定data-layzr-bg的属性
  • threshold: 用于定义图像加载参数,通过屏幕高度来控制。
  • callback: 当加载完成,触发事件回调。

接下来,我们新建一个layzr.html的文件,用于测试 layzr 的库各种功能,会比官方提供的Demo更易于理解。

新建文件layzr.html。


<!DOCTYPE html>
<html>
<head>
    <title>Layzr Demo</title>
    <script src="node_modules/layzr.js/dist/layzr.js"></script>
    <style>
        .row {
            margin: 50px 0;
            height: 500px;
        }
        .border {
            padding: 10px;
            border-style: solid;
            border-width: 3px;
            border-color: blue;
        }
    </style>
</head>
<body>
<div class="wrapper">
        <div class="row">
            <img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/02/marked.png">
        </div>
        <div class="row">
            <img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/03/buffer.png">
        </div>
        <div class="row">
            <img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/02/express4.png">
        </div>
        <div class="row">
            <img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/03/child_process.png">
        </div>
        <div class="row">
            <img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/03/crypto.png">
        </div>
        <div class="row">
            <img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2014/02/architect.png">
        </div>
        <div class="row">
            <img src="./bg.png" data-layzr-retina="./bg2.png" data-layzr="http://blog.fens.me/wp-content/uploads/2013/08/seo-title.png">
        </div>
</div>

<script>
    var layzr = new Layzr({
        selector: '[data-layzr]',
        attr: 'data-layzr',
        retinaAttr: 'data-layzr-retina',
        threshold: 10,
        callback: function () {
            console.log(this);
            this.classList.add('border');
        }
    });
</script>

</body>
</html>

用浏览器找开页面,我们可以看到展示效果。

layzr3

当浏览器向下滑动的过程中,图片由原来黑色的占位图,会自动替换为我们需要显示的图片。

layzr4

本文测试的代码,已上传到github:https://github.com/bsspirit/js-layzr

这样,我们就实现图像的延迟加载技术。对于有大量图片的网站来说,尝试一下图像的延迟加载技术,肯定会给网站带来大幅度的性能改进的。

转载请注明出处:
http://blog.fens.me/nodejs-layzr/

打赏作者