H5 小型项目技术栈

1、前言

本文主要记录做小项目时所需要用到的技术栈。小项目的场景如：特定的活动页，某app的运营推广页，Hybrid App里的H5页面等。

2、技术栈构成

既然是小项目，自然不会考虑时下较火的一些框架，如Vue，React，Angular等。先来考虑一个小项目中前端需要用到的技术点：

路由管理
模板引擎(非静态页面需要用到)
DOM操作
以上三点其实在Vue框架中都有体现，分别对应vue-router，vue内置的模板引擎，vue的虚拟DOM算法等，只是Vue对此进行了封装，使用起来更便捷。借着这个思想，我们可以自己组装需要的类库。

2.1、路由管理模块

路由模块目前比较出名(成熟)的是page.js，26.3KB和director.js，19.9KB，这两个框架完全可以满足小项目的需求，但还是有点重，前端路由本来不是很复杂，可以自己写一个：

var Router = {
    routes: {},
    mode: null,
    config: function(options) {
        this.mode = options && options.mode && options.mode == 'history' 
                    && !!(history.pushState) ? 'history' : 'hash';
        this.routes=options && options.routes;
        return this;
    },
    add: function(re, handler) {
        this.routes[re]=handler;
        return this;
    },
    navigate: function(path) {
        path = path ? path : '';
        if(this.mode === 'history') {
            history.pushState(null, null, path);
        } else {
            window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + path;
        }
        Router.routes[path]();
        return this;
    },
    start:function(){
         var path=location.hash||‘#home’;
         if(this.mode === 'history') {
            window.on('popstate',function(){
                  this.navigate(path);
            })
        } else {
            window.on('hashchange',function(){
                this.navigate(path);
            })    
        }
    }
}
// 1、配置
Router.config({ 
    mode: 'history',
    routes:{
        '/home':function(){},
        ...
    }
});
// 2、添加路由处理函数
Router
.add(/home, function() {
    console.log('home');
})
// 3、开始监听
Router.start();

2.2、模板引擎

前端圈模板引擎就多了去了，目前我们部门使用的doT.js，这里有一个JS模板引擎性能对比分析，关于doT的使用方式可参见这篇文章，关于doT模板只想说一句，它是可以和服务端做同构的，也就是说前后端可以用同一套模板。

2.3、DOM操作

移动端当然选择Zepto.js了，DOM操作大家都知道，这部分介绍使用zepto的最佳实践：

使用ID选择器$('#id')选择元素，避免使用组合选择器
对需要复用的元素做缓存，用find查找子元素
尽量使用zepto静态方法
使用事件代理，而不是直接绑定元素
尽量使用链式写法提高编程效率和代码运行效率

3、代码组织方式

vue实际上是一种MVVM模式，即Model，View，ViewModel。通常一个页面都是由Model(ajax数据)和View(模板html)两部分的，但还缺一个组合这两部分的模块。前端MVC中的C就是这么一个模块，称之为控制器Controller。对于小型项目MVC已经可以应对了，与之相似的还有MVP模式，其实前端就是这么一个发展过程：原生JS直接DOM=>jQuery操作DOM=>MVC模式=>MVP模式=>MVVM模式=>MVNV*模式。现在以一个实例演示如何在小型项目中用上MVC模式：

MVC

// 路由初始化
Router.config({
    default: 'home',
    routes: {
        'home': function() {},
        'about': function() {}
    }
});
Router.add('home', Home.controller)
    .add('about', About.controllter)
    .start();

var Home = {
    $home: $('#home'),
    tmpl: $('#content-tmpl').html(),
    render: function(tmpl, data) {
        var tmpl_after = doT.template(tmpl, data);
        $home.html(tmpl_after);
    },
    modelAdapter: function(data) {
        var fixData = null;
        //对原始数据做处理...
        return fixData;
    },
    eventInit: function() {
        // 事件代理(不必等到页面渲染完才开始绑定)
        $home.on('click', '.selector', function(event) {
            event.preventDefault();
        });
    },
    controller: function() {
        $.ajax({
            url: '/path/to/file',
            type: 'GET',
            dataType: 'json',
            data: {
                'key': 'value'
            },
            success: function(result) {
                var data = this.modelAdapter(result);
                this.render(this.tmpl, data);
            },
            error: function(err) {
                console.log(err);
            }
        })
    }
}
var About = {
    // 与Home类似
}

大致是这么个流程，再配合gulp等项目构建、打包工具(具体gulpfile.js配置项可参看这里)，项目基本就完成了。