基于 vue 全家桶的 spa 项目模板

项目简介

Github: https://github.com/hanan198501/vue-spa-template

最近在给团队做前端技术改造,移动端方面主要使用 vue2.0 重构,这是基于 vue-cli 脚手架生成项目模板。我们做了一些改造,
加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案。
通过这个项目模板,可以快速搭建起用于前后端分离后的单页应用开发环境,项目主要包含:

  • 基础库: vue.jsvue-routervuexwhatwg-fetch
  • 编译/打包工具:webpackbabelnode-sass
  • 单元测试工具:karmamochasinon-chai
  • 本地服务器:express

Read More

使用 javascript 配置 nginx

在上个月的 nginx.conf 2015 大会上, 官方宣布已经支持通过 javascript 代码来配置 nginx,并把这个实现称命名为——nginscript。使用 nginscript,可以很轻易得在 niginx 配置文件中通过 js 语法来实现自定义的服务器配置。

安装

# 下载最新版本的 nginx 并解压
curl -O http://nginx.org/download/nginx-1.9.5.tar.gz
tar -xzvf nginx-1.9.5.tar.gz

# 下载 nginscript 模块并解压
curl -O http://hg.nginx.org/njs/archive/tip.tar.gz
tar -xzvf tip.tar.gz

# 编译并安装 nginx
$ cd nginx-1.9.5
$ ./configure --add-module=刚才解压的nginscript目录
$ make
$ make install

Read More

无梯子如何正常访问使用了 googleapis 的网站

许多国外的网站都使用被墙掉的 googleapis.com 上的静态资源(如 font、js库 等),如果不爬墙,这些资源无法加载,导致网站无法正常访问。

其实,360提供了一个国内的 googleapis.com 镜像仓库(libs.useso.com)。我想,当遇到 googleapis 的请求时,浏览器能自动跳转到360的镜像,就能正常访问了。

正好,我以前写过一个 chrome 插件 ReRes,可以通过它来完成这项工作。

安装好 ReRes 后,添加一条规则:

If URL match:^http\:\/\/(.+?)\.googleapis\.com\/(.+?)$
Response:http://$1.useso.com/$2

当浏览器中的请求匹配到 ^http\:\/\/(.+?).googleapis.com\/(.+?)$ 这个正则时,会自动跳转到 http://$1.useso.com/$2 这个 url ,其中 $1 和 $2 分别是正则中捕获到的两个分组。

如此,就可以正常访问使用了 googleapis 的网站。

如何实现一个 CMD 模块加载器

cmd 是阿里大神玉伯提出的基于浏览器的前端模块化规范,并在 seajs 中实现了这个规范。相对于另一个在国外比较流行的前端模块化规范 amd,cmd 对于 nodejs 的使用者来说更加友好,使得类似 commonJS 模块的写法可以在浏览器中使用,同时解决了浏览器中模块异步加载的困扰。
关于 cmd 更详细的内容可以移步 https://github.com/cmdjs/specification/blob/master/draft/module.md
今天,我们一起来学习如何实现一个浏览器端的简单的 cmd loader。

模块加载流程

下图展示了一个 cmd loader 的模块加载大体流程:

cmd loader

  1. 首先,通过 use 方法来加载入口模块,并接收一个回调函数, 当模块加载完成, 会调用回调函数,并传入对应的模块。use 方法会 check 模块有没有缓存,如果有,则从缓存中获取模块,如果没有,则创建并加载模块。
  2. 获取到模块后,模块可能还没有 load 完成,所以需要在模块上绑定一个 “complete” 事件,模块加载完成会触发这个事件,这时候才调用回调函数。
  3. 创建一个模块时,id就是模块的地址,通过创建 script 标签的方式异步加载模块的代码(factory),factory 加载完成后,会 check factory 中有没有 require 别的子模块:
    • 如果有,继续加载其子模块,并在子模块上绑定 “complete” 事件,来触发本身 的 “complete” 事件;
    • 如果没有则直接触发本身的 “complete” 事件。
  4. 如果子模块中还有依赖,则会递归这个过程。
  5. 通过事件由里到外的传递,当所有依赖的模块都 complete 的时候,最外层的入口模块才会触发 “complete” 事件,use 方法中的回调函数才会被调用。

Read More

在 fis 项目中使用 react.js

fis 具有非常灵活的插件扩展机制,对于 react 的 jsx 也有现成的 parser 插件可用。
通过几条简单的配置,就可以在你的 fis 项目中使用 react 了。 但是在使用过程中,有一些小坑还是需要注意的,在此记录一下。

安装插件

npm install fis-parser-react -g

注意,如果你使用的 react 版本是 0.13.x, 则要安装另一个版本的插件:

npm install fis-parser-react-0.13.x -g

编译配置

编辑 fis-conf.js 文件, 加入以下内容:

// 将 jsx 文件作为文本处理
fis.config.set('project.fileType.text', 'jsx');

// 后缀名为 jsx 的文件用 fis-parser-react 插件编译
// 如果你使用的 react 版本是 0.13.x,将下面第二个参数换成 'react-0.13.x'
fis.config.set('modules.parser.jsx', 'react');

// 将 jsx 文件编译结果输出为 js 文件
fis.config.set('roadmap.ext.jsx', 'js');

模块化配置

默认情况,fis 不会将 widget 目录下的 jsx 文件包裹成 cmd 模块, 而是直接输出编译后的 js 文件。
但是我们更希望遵循 fis 的目录规范,将 widget 目录下的 jsx 文件也输出为 module, 所以我们还需要配置一下 roadmap.path。
编辑 fis-conf.js 文件, 加入以下内容:

fis.config.set('roadmap.path', [{
    reg: /^\/widget\/(.*)\.jsx$/i,
    useMap: true,
    useHash: true,
    isMod: true,
    release: '${statics}/${namespace}/widget/$1.js'
}].concat(fis.config.get('roadmap.path', [])));

最后执行 fis release 就可以看到所有的 jsx 都可以被正确编译和引用到了~

使用 imitator 实现前后端分离开发中的数据模拟与静态资源映射

imitator 是一个简单易用的 nodejs 服务器, 主要用于模拟 HTTP 接口数据, 请求代理与转发 。
使用imitator,可以解决前后端分离开发中的痛点之一:数据模拟,也可以作为代理服务器与静态资源服务器使用。

github: https://github.com/hanan198501/imitator

为什么会有 imitator?

最近几个java(前后端都在一个工程里)项目交接过来,没时间重构成fis项目,组里好多前端同学想搞分离开发。
我推荐了 nginx,有童鞋反应配置文件相对前端来说还是不够友好,而且有些个性的接口格式无法满足。
于是写了 imitator,使用 nodejs 并基于 express.js 实现, 配置文件相当简单, 而且易于订制,前端同学使用起来非常顺手。

快速上手

  1. 安装——首先你要先安装 nodejs 和 npm, 然后全局安装imitator。

    npm install imitator -g
    
  2. 编写配置文件——在你的用户目录(比如我的是/User/hanan)下新建一个名为 Imitatorfile.js 的文件(这是 imitator 的默认配置文件), 内容如下。

    module.exports = function(imitator) {
        // 返回一个json
        imitator('/json', {name: 'hello world'});
    }
    
  3. 启动服务——命令行输入以下命令,启动 imitator server.

    imitator
    
  4. 浏览器访问 127.0.0.1:8888/json , 将会看到:

    {"name":"hello world"}
    

Read More

smarty 模板模板中的 assigin 函数

使用Smarty内置函数{assign},在模板运行时为模板变量赋值,也可以为数组元素赋值,和在赋值时使用一些表达式。{$var=…}是{assign}函数的简写版。该函数有三个属性(var、value和scope)和一个选项标签(nocache),其中var和value是必须使用的属性,分别用来设置要分配值的变量名和分配的值。而scope是可选属性,用来指定分配的变量范围,可以指定parent、root和global三个值,用来设定变量的有效范围。{assign}函数使用如下所示:

{assign var="name" value="brophp"}  {*为变量$name赋值上brophp的值*}
{assign "name" "brophp"}            {*这是assign函数属性的简写*}
{$name="brophp"}                    {*这是assign函数的简写,也是为变量$name赋值上brophp的值*}

在模板中声明的变量和从PHP中分配给模板中给模板的变量具有相同的使用方式。上例是在模板中声明一个$name变量三中书写方式:第一种是Smarty模板中标准函数的方式;第二种是省略属性名称简写的方式;第三种也是一种简写方法,更像是PHP变量的声明。除了上面简单声明一个变量以外,还可以为变量赋一些相对复杂的值,如使用数组和表达式,如下所示:

{*定义数组*}
{assign var=foo value=[1,2,3]}          {*为变量$foo赋上一个索引数组值*}
{assign var=foo value=['y'=>'yellow']}  {*为变量$foo赋上一个关联数组值*}
{assign var=foo value=[1,[9,8],3]}      {*可以使用嵌套声明多维数组*}
{assign var=foo value=$x+$y}            {*可以在属性中使用变量*}
{assign var="foo" value="'$foo+$bar'"}  {*可以在属性值的字符串中使用变量及表达式*}

{*短变量分配*}
{$foo=$bar+2}                       {*短变量分配值的方式*}
{$foo = strlen($bar)}               {*PHP函数在变量值中使用*}
{$foo = myfunct(($x+$y)*3)}         {*作为函数参数*}
{$foo.bar=1}                        {*数组元素赋值*}
{$foo.bar.baz=1}                    {*多维数组元素的赋值*}
{$foo[]=1}                          {*为数组添加新元素*}
{$foo[$x+3]}                        {*变量作为数组索引*}
{$foo={counter}+3}                  {*在标签里嵌套标签*}
{$foo="this is message{counter}"}   {*在引号里使用标签*}

Read More

新的 javascript Battery API

javascript Battery 接口允许你通过 javascript 来获取电池的状态。

navigator.getBattery()方法

在新的标准里,电池的状态信息是通过navigator.getBattery()方法获取的。
navigator.getBattery()是一个异步方法,会返回一个es6标准的promise对象。
所以我们获取电池状态的回调方法,必须通过该promise对象的then方法来注册:

navigator.getBattery().then(function(result) {
    console.log(result);
});

BatteryManager接口

上个例子里的result是一个表示电池状态的对象, 它是由BatteryManager接口实现的,具有如下属性:

Read More

使用 AddJS 为网页自动添加自定义javascript脚本

addJS是一个chrome插件。view in github

在浏览网站的时候,常常会想自己写js操作一下页面的内容(比如:抓图片,提取下载链接,屏蔽广告什么的)。于是,就有了这个插件。

功能:自动在指定的url的网页中添加自定义的javascript脚本并运行。

现在就开始使用AddJS

首先从chrome商店安装AddJS: https://chrome.google.com/webstore/detail/addjs/aoahkpekljaimojhfefaiibfdcnmlhdi?hl=zh-CN

或者下载安装:/assets/download/addjs.zip

至此,AddJS就可以使用了。下面是一些基本功能的使用操作方法:

Read More