浏览器端JavaScript使用PHP函数库
作者:vergil 发布时间:October 12, 2016 分类:php,JavaScript
像我这种JavaScript水平较渣的php程序员,有时很想用php的方式处理前端js的数据。比如格式化日期、字符串,或者一些生成哈希的操作。
Locutus
是一个试图将其他语言的标准库同化为JavaScript的项目。其实我早就关注它了,没记错的话它以前叫phpjs
,所谓的其他语言(C、Go、Python、Ruby、PHP),其实主要还是php,另外几种语言目前只有寥寥可数几个函数。
Locutus
一般运行于Node.js环境,这篇博文主要介绍的是如何运行在浏览器环境。
Locutus可用的php函数,作用和php同名函数相同。详情请参阅http://locutus.io/php/。
安装Node和npm
npm 全名為 Node Package Manager,是 Node.js 的包(package)管理工具, 类似 Perl 的 ppm 或 PHP 的 PEAR 等。
安装过程请自行Google、baidu。或者看这篇文章。
安装Locutus
使用npm安装:
$ npm install locutus
或者可以使用bower安装:
$ bower install locutus
安装完成后,代码默认存放在当前目录的node_modules/locutus
目录下。(bower安装的在bower_components/locutus/src
目录下)
安装Browserify
需要在浏览器端运行Locutus
,需要用一些模块包(module bundler)来构建。比如 Browserify,webpack,rollup.js。这里以Browserify为例。
使用以下命令,安装Browserify(-g代表全局):
$ npm install -g browserify
例子一:使用某个函数
以php的md5()为例:
首先,进入Locutus代码目录,可以看到如下目录结构,按语言划分的多个目录:
$ pwd
/data/htdocs/phpjs/node_modules/locutus
$ ls -l
total 32
drwxr-xr-x 6 vergil staff 204 10 11 23:46 _util
drwxr-xr-x 5 vergil staff 170 10 11 23:46 c
drwxr-xr-x 5 vergil staff 170 10 11 23:46 golang
-rw-r--r-- 1 vergil staff 268 6 16 14:54 index.js
-rw-r--r-- 1 vergil staff 564 6 16 14:54 index.js.map
-rw-r--r-- 1 vergil staff 4180 10 11 23:46 package.json
drwxr-xr-x 27 vergil staff 918 10 12 00:14 php
drwxr-xr-x 5 vergil staff 170 10 11 23:46 python
drwxr-xr-x 5 vergil staff 170 10 11 23:46 ruby
进入php目录,可以看到按功能或扩展(extesion)划分的目录(详见:http://locutus.io/php/):
$ cd php
$ ls
_helpers ctype funchand info net-gopher url
_locutus_shared datetime i18n json network var
array exec index.js math pcre xdiff
bc filesystem index.js.map misc strings xml
我们需要的md5()
函数在strings
目录下,进入该目录,可以看到很多已函数名命名的js文件:
$ cd strings
$ ls
现在,需要用browserify
命令构建一个bundle:
$ browserify -r ./md5.js > /path/to/your/project/php-md5.js
注意!!这里的./md5.js
是一个相对路径。不能直接写md5.js
。详细用法请查看browserify文档。
构建完毕后,引入该文件。测试一下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Locutus Test</title>
<script src="php-md5.js"></script>
</head>
<body>
<script>
var md5 = require('/md5.js');
console.log(md5('Locutus'));
</script>
</body>
</html>
打开浏览器访问,这时你可以看到控制台输出了62df46620dd0154981d901a1a3203e9a
例子二:使用某个扩展
如上所述,php
目录下的每一个扩展都代表一个目录,而每个目录下都有以函数名命名的js文件。此外,还有一个index.js
文件。
$ pwd
/data/htdocs/phpjs/node_modules/locutus/php
$ find . -name "index.js"
./_helpers/index.js
./_locutus_shared/index.js
./array/index.js
./bc/index.js
./ctype/index.js
./datetime/index.js
./exec/index.js
./filesystem/index.js
./funchand/index.js
./i18n/index.js
./index.js
./info/index.js
./json/index.js
./math/index.js
./misc/index.js
./net-gopher/index.js
./network/index.js
./pcre/index.js
./strings/index.js
./url/index.js
./var/index.js
./xdiff/index.js
./xml/index.js
如果你想使用某个扩展的所有函数,比如array
。可以使用browserify
命令构建一个bundle:
$ pwd
/data/htdocs/phpjs/node_modules/locutus/php/array
$ browserify -r ./index.js > /data/htdocs/phpjs/php-array.js
另外,可以使用./file_name.js:module_name
为模块起一个名字(建议)。比如php-array
:
$ browserify -r ./index.js:php-array > /data/htdocs/phpjs/php-array.js
引入文件,测试:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Locutus Test</title>
<script src="php-array.js"></script>
</head>
<body>
<script>
/*
* 这里要注意的是require('模块名')
* 在browserify构建的时候使用了模块名,那么就写那个模块名,如上所示,我用的是php-array
* 否则,browserify就让模块名为文件名,也就是/index.js
*/
var php_array = require('php-array');
console.log(typeof php_array.in_array);
var in_array = php_array.in_array;
console.log(in_array(1, ['1', '2', '3']));
console.log(in_array(1, ['1', '2', '3'], true));
console.log(in_array('vergil', {author: 'vergil', email: 'vergil@vip.163.com'}));
</script>
</body>
</html>
打开浏览器访问,控制台输出如下结果:
function
true
false
true
例子三:引入全部函数
其实原理还是一样,我就不多说了,直接上代码:
$ pwd
/data/htdocs/phpjs/node_modules/locutus/php
$ browserify -r ./index.js:php-js > /data/htdocs/phpjs/php-js.js
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Locutus Test</title>
<script src="php-js.js"></script>
</head>
<body>
<script>
var phpjs = require('php-js');
//array_diff
console.log( phpjs.array.array_diff(['red', 'green', 'blue', 'yellow'], ['red', 'blue']));
//array_combine
console.log ( phpjs.array.array_combine(['name', 'gender'], ['Vergil', 'male']));
//strtotime
console.log( phpjs.datetime.strtotime("next Thursday"));
//pow
console.log( phpjs.math.pow(2, 10));
//ip2long
console.log( phpjs.network.ip2long('8.8.8.8'));
//uniqid
console.log( phpjs.misc.uniqid('', true));
//strpos
console.log( phpjs.strings.strpos('vergil@vip.163.com', '@') );
//base64
var encode = phpjs.url.base64_encode('这是一个字符串');
console.log(encode);
console.log( phpjs.url.base64_decode(encode));
//sprintf
console.log ( phpjs.strings.sprintf('The %2$s contains %1$04d monkeys', 5, 'tree'));
</script>
</body>
</html>
结果:
Object { 1="green", 3="yellow"}
Object { name="Vergil", gender="male"}
1476299514.638
1024
134744072
57fd397a684de7.98316832
6
JTI1RTglMjVCRiUyNTk5JTI1RTYlMjU5OCUyNUFGJTI1RTQlMjVCOCUyNTgwJTI1RTQlMjVCOCUyNUFBJTI1RTUlMjVBRCUyNTk3JTI1RTclMjVBQyUyNUE2JTI1RTQlMjVCOCUyNUIy
这是一个字符串
The tree contains 0005 monkeys
小结
- JS太强大了...
- 并不是意味着可以用php的方式来写js,反之,应该多学习js
- 可以选取部分复杂的功能使用
- 看看人家是怎么用JS来实现这些函数库的。
好了,目前就写这些吧,以后有什么再继续更新。Happy Hacking。