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模式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MVC</title>
</head>
<body>
<main>
<div id="home"></div>
<a href="#about"></a>
</main>
<template id='home-tmpl'>
{{~it.content :value:key}}
<div>{{value}}</div>
{{~}}
</template>
<script src='./zepto.min.js'></script>
<script src='./router.js'></script>
<script src='./doT.js'></script>
<script src='./index.js'></script>
</body>
</html>
// 路由初始化
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配置项可参看这里)，项目基本就完成了。
