整理轻量级的前端分离规范
背景
支持的业务需要做客户端的页面嵌入，并且此类页面大部分是单页应用。为了能够是组内的人都能快速的入手，并且可以分工开发，制订了这么一个规范，主要做的就是能够快速入手，便于分工协作；另一方面清晰的思路便于查找问题。
为什么要做分离？
我们知道一个网页的展示，离不开一下部分：UI（包括结构和样式）、UI事件（DOM上绑定的键盘或者是鼠标事件）、逻辑处理（各个事件有各自相应的处理逻辑，发送相关请求或DOM操作）、数据（包括UI自身的数据传递、接口数据、客户端数据）。如果将这几个部分进行分离，一方面可以清晰结构，另一方面出现问题也可以很方便的查找，之间通过一种通信方式进行通信，各部分不用关注各自的具体实现，只需要在自己想要使用的时候进行调用即可。如果没做做分离，那么逻辑层是沟通UI和数据的桥梁，这样的话，所有的内容都会混在一起，就是普通的一种开发模式。
确定通信方式
作为前端，我们最熟悉的就是DOM的事件了，jquery在实现事件的时候，有这么一套东西，可以做到事件绑定($.fn.on)、解绑($.fn.off)、触发($.fn.trigger或$.fn.triggerHandler)。那么我们能不能自己封装一下这个事件，让它作为我们通信的一种方式呢？答案当然是可以的。既然已经确定了通信方式，那我们就可以实现上述分离开的各部分进行通信了，当然最主要的就是逻辑层和UI层的通信。
期望呈现的是形式
我们期望达到的一种状态是：我们所有使用的数据（客户端数据和接口返回数据）都写在一个文件里，这样如果是数据层面的调整，如：接口调整，只需要更换接口地址即可，不需要在每次调用的地方找接口地址进行替换，做到一改全改的效果；所有DOM绑定的事件需要做的事情，都通过逻辑层按需发送相应请求，当请求返回后，我们肯定是需要拿到数据然后对DOM进行操作（重绘、重排），在逻辑层里，我们并不关注DOM到底应该怎么操作，我们关注的是达到一定的阶段需要通知UI做相应的操作，至于UI是否响应对于逻辑层来说并不关注。此时，我们可以使用这个通信事件做很多事情，如：打点统计，暴漏钩子。。。方便业务在使用的时候，监听某个步骤发生了什么，在单元测试或者是代码使用率测试上都有作用。
基础结构具体实现（配合代码分析）
下面就以业务中实现的一个例子（QClient，客户端开发工具）来分析一下前端分离规范的实现过程吧。
1. 核心模块（core.js）
做的就是创建可能会使用到的命名空间，便于其他模块使用。
/**
* @Overview 核心模块
* 1.创建命名空间
* 2.初始化公共事件
*/
(function(window) {
'use strict';
var QClient = window.QClient = {
//框架类型
$ : jQuery,
//工具类
utils: {},
//UI集合
ui: {},
//数据集合
sync: {},
//事件
events: {},
//调试模式
DEBUG: false
};
})(window);
2. 数据模块（data.js）
将常见的数据获取方式放在这里处理，常见的数据方式有：接口请求返回数据和客户端返回数据（这个在客户端内嵌页面会比较常用）。可以处理get、post请求以及客户端请求，同时处理同域和跨域问题。这样在调用的时候就不用关注这个请求是什么形式了，暴漏相应的API方便调用即可。这里使用promise方式封装，使用起来更加方便。这里使用的接口主要是get的跨域请求和客户端数据，如果想实现其他请求可以参考之前的一篇文章，跨域请求解决方案。
/**
* @Overview 数据接口模块
* 数据交互，如果接口很少可以放到logic中
*/
(function(Q){
var $ = Q.$;
/**
* 交互类
* @param {object} param 要提交的数据
* @param {Object} [ajaxOpt] ajax配置
* @constructor
*/
var Sync = function(param, ajaxOpt) {
if(!param) {
return;
}
var protocol = this.protocol = 'http';
var ajaxOptDefault = {
url: protocol + '://'+location.host,
type: 'GET',
dataType: 'jsonp',
timeout: 20000
};
this.protocol = protocol;
this.param = $.extend({}, param);
this.ajaxOpt = $.extend({data: this.param}, ajaxOptDefault, ajaxOpt);
this.HOST = protocol + '://'+location.host;
};
/* 示例：window.external.getSID(arg0)需要改为 external_call("getSID",arg0) 的形式进行调用 */
function external_call(extName,arg0,arg1,arg2){
var args = arguments, fun = args.callee, argsLen = args.length, funLen = fun.length;
if(argsLen>funLen){
throw new Error("window.external_call仅接受"+funLen+"个形参，但当前(extName:"+extName+")传入了"+argsLen+"个实参，请适当调整external_call，以保证参数正常传递，避免丢失！");
}
if(window.external_call_test){
return window.external_call_test.apply(null,[].slice.apply(args));
}
/* 这里的参数需要根据external_call的形参进行调整，以保证正常传递
* IE系列external方法不支持apply、call...
* 甚至部分客户端对参数长度也要求必须严格按约定传入
* 所以保证兼容性就必须人肉维护下面这么一坨..
*/
if(argsLen==1)return window.external[extName]();
if(argsLen==2)return window.external[extName](arg0);
if(argsLen==3)return window.external[extName](arg0,arg1);
if(argsLen==4)return window.external[extName](arg0,arg1,arg2);
}
$.extend(Sync.prototype, {
/**
* 通过get方式(jsonp)提交
* @param {String} [url] 请求链接
* @return {Object} promise对象
*/
get: function(url) {
var self = this;
var send = $.ajax(url, this.ajaxOpt);
return send.then(this.done, function(statues) {
return self.fail(statues);
});
},
/**
* 通知客户端
*/
informClient: function() {
var self = this;
var deferred = $.Deferred();
var args = [].slice.apply(arguments);
try {
var data = external_call.apply(null, args);
deferred.resolve(data);
}catch (e) {
deferred.reject({
errno: 10000,
errmsg: '通知客户端异常'
});
}
return deferred.promise()
.then(self.done, self.fail);
},
/**
* 收到响应时默认回调
* @param {Object} data 数据
* @return {Object}
*/
done: function (data) {
var deferred = $.Deferred();
deferred.resolve(data);
return deferred.promise();
},
/**
* 未收到响应时默认回调
* @param {Object} error 错误信息
* @return {Object}
*/
fail: function(error) {
var deferred = $.Deferred();
deferred.reject({
errno: 999999,
errmsg: '网络超时，请稍后重试'
});
return deferred.promise();
}
});
QClient.Sync = Sync;
})(QClient);
3. 逻辑模块（logic_factory.js）
主要关联UI和逻辑层，这里主要做了这么一些事情：第一，作为整个应用的入口，传入相关参数后，初始化UI；第二：处理整个逻辑内的数据传递；第三：根据实际情况暴漏相关接口给外部调用；第四：建立基础的通信方式，实现逻辑层与UI层的事件通信。具体实现方式和解释，如下：
/**
* @Overview 逻辑模块工厂
* 1.定义各功能公用的功能
* 2.单功能间数据缓存
*/
(function(Q) {
//'use strict';
var $ = Q.$;
var $events = $(Q.events);
var Logic = function(props) {
this.name = 'func_' + Q.utils.getGuid();
this.extend(props);
this._initFlag = false;
this._data = {};
};
$.extend(Logic.prototype, {
/**
* 初始化函数
*/
init : function() {
var self = this;
if (!self._initFlag) {
self._initFlag = true;
Q.ui[self.name].init(self);
self.initJsBind();
}
return self;
},
/**
* 获取是否已经初始化的标记
* @returns {boolean}
*/
isInit: function() {
return this._initFlag;
},
/**
* 获取数据
* @param {String} key
* @param {*} defaultValue
* @returns {*}
*/
get : function(key, defaultValue) {
var value = this._data[key];
return value !== undefined ? value : defaultValue;
},
/**
* 设置数据
* @param {String|Object} key
* @param {*} value
*/
set : function(key, value) {
if ($.isPlainObject(key)) {
$.extend(this._data, key);
} else {
this._data[key] = value;
}
return this;
},
/**
* 清理数据
*/
clear : function() {
this._data = {};
return this;
},
/**
* 客户端调用页面JS
*/
initJsBind: function () {
var self = this;
window.jsBind = function(funcName) {
var args = [].slice.apply(arguments, [1]);
return self[funcName].apply(self, args);
};
},
/**
* 扩展实例方法
* @param {...object} - 待mixin的对象
*/
extend : function() {
var args = [].slice.apply(arguments);
args.unshift(this);
$.extend.apply(null, args);
}
});
//创建事件通信方式
$.each(['on', 'off', 'one', 'trigger'], function(i, type) {
Logic.prototype[type] = function() {
$.fn[type].apply($events, arguments);
return this;
};
});
Q.getLogic = function(props) {
return new Logic(props);
};
})(QClient);
4. 工具模块（utils.js）
这个模块儿没什么特殊的含义，只是存放一些工具方法。可以在基础包，也可以自己在使用的时候定义。
如何使用？
1. 引入上面所讲到的基础文件
2.分别创建上面对应的功能文件，如：data.js、ui.js、logic.js、utils.js，当然如果项目并不是很大，也可以放在一个文件里实现，这里分开是为了结构更加的清晰
2.1 创建data.js，存放业务将要使用到的所有数据接口
(function(Q) {
'use strict';
var Sync = Q.Sync;
Q.sync = {
//获取class
getClassify: function(catgoryConf) {
var sync = new Sync();
return sync.informClient('onGetClassify', catgoryConf);
},
//获取当前皮肤
getCurrentSkin: function() {
var sync = new Sync();
return sync.informClient('GetCurrentSkinName');
}
};
}(QClient));
2.2 创建logic.js，建议每个功能创建一个，可以更好的组装和分离
/**
* @Overview 逻辑交互
* 接收UI状态，通知UI新操作
*/
(function(Q){
'use strict';
var utils = Q.utils;
var logic = Q.getLogic({
name: 'changeSkin',
run: function(opts){
var _this = this;
var catgoryConf = opts.catgoryConf;
_this.init();
Q.sync.getClassify(utils.stringify(catgoryConf));
Q.sync.getCurrentSkin()
.done(function(data) {
var currKey = data.extra_info;
_this.setCurrentSkin( currKey );
});
},
//通过事件进行通信
setCurrentSkin: function (key) {
this.trigger('setCurrentSkin', key);
},
setDownLoadStart: function(key) {
this.trigger('setDownLoadStart', key);
},
setDownLoadSuccess: function(key) {
this.trigger('setDownLoadSuccess', key);
},
setDownLoadFailed: function(key) {
this.trigger('setDownLoadFailed', key);
}
//也可以通过promise对结果进行处理，方便UI直接调用逻辑操作，同时在这里可以保证UI使用到的数据是完全可信的状态，UI不用判断数据是否为空等异常情况
});
Q.changeSkin = function(opts) {
logic.run(opts);
};
})(QClient);
2.3 创建ui.js，和逻辑层配合使用
/**
* @Overview UI模块
* 页面交互，通知状态
*/
(function(Q){
'use strict';
var $ = Q.$;
var $skinlist = $('.skin-list');
var ui = {
init : function(model) {
this.model = model;
this.initEvent();
this.initModelEvent();
},
initModelEvent: function() {
var _this = this;
//监听逻辑层触发的事件
this.model
.on('setDownLoadFailed', function( e, key ){
var $item = _this.getCurrentItem( key );
_this.stopLoading( $item );
$item.addClass('err');
})
.on('setDownLoadSuccess', function( e, key ){
var $item = _this.getCurrentItem( key );
_this.stopLoading( $item );
})
.on('setDownLoadStart', function( e, key ){
var $item = _this.getCurrentItem( key );
var $loading = $item.find('i span');
var i = 0;
$item.addClass('loading').removeClass('err hover');
$item[0].timer = setInterval(function(){
i = i >= 12 ? 0 : i;
var x = -i*32 ;
$loading.css('left' , x );
i++;
},100);
})
.on('setCurrentSkin', function( e, key ){
var $item = _this.getCurrentItem( key );
_this.stopLoading( $item );
$item.addClass('selected').siblings().removeClass('selected');
});
},
initEvent: function() {
var _this = this;
//Q.utils.disabledKey();
$skinlist.on('click','a',function(){
var $item = $(this).parent();
if( $item.hasClass('loading') || $item.hasClass('selected')){
return false;
}
});
//hover状态
$skinlist.on('mouseover','a',function(){
var $parent = $(this).parent();
(!$parent.hasClass('loading') && !$parent.hasClass('selected')) && $parent.addClass('hover');
}).on('mouseout','a',function(){
$(this).parent().removeClass('hover');
});
//图片延迟加载
var $img = $skinlist.find('img');
$img.lazyload({
container: $skinlist
});
//初始化滚动条
_this.scrollBar = new CusScrollBar({
scrollDir:"y",
contSelector: $skinlist ,
scrollBarSelector:".scroll",
sliderSelector:".slider",
wheelBindSelector:".wrapper",
wheelStepSize:151
});
_this.scrollBar._sliderW.hover(function(){
$(this).addClass('cus-slider-hover');
}, function(){
$(this).removeClass('cus-slider-hover');
});
_this.scrollBar.on("resizeSlider",function(){
$(".slider-bd").css("height",this.getSliderSize()-10);
}).resizeSlider();
},
reload: function () {
var _this = this;
var $cur = [];
$(".item").each(function(){
if( $(this).css('display') == 'block' ){
$cur.push($(this));
}
});
$.each( $cur , function( index ){
if( index <= 9 ){
var $img = $(this).find('img');
$img.attr('src',$img.attr('data-original'));
}
});
if( $cur.length <=6 ){
$(_this.scrollBar.options.scrollBarSelector).hide();
}
else{
$(_this.scrollBar.options.scrollBarSelector).show();
}
$(_this.scrollBar.options.sliderSelector).css('top',0);
_this.scrollBar.resizeSlider().scrollToAnim(0);
},
LoadCatgory : function( type ){
if( type && type!="all" ){
var $items = $skinlist.find('.item[data-type="'+ type +'"]');
$skinlist.find('.item').hide();
$items.fadeIn(100);
}
else{
$skinlist.find('.item').fadeIn(100);
}
this.reload();
},
setErrByLevel : function(){
console&&console.log('等级不符，快去升级吧！');
},
getCurrentItem: function( key ){
return $skinlist.find('.item[data-key="'+ key +'"]');
},
stopLoading : function( $item ){
if( $item.hasClass('loading') ){
clearInterval($item[0].timer);
$item[0].timer = null;
$item.removeClass('loading');
$item.find('i span').css('left','0');
}
}
};
Q.ui.changeSkin = {
init : function() {
ui.init.apply(ui, arguments);
}
};
})(QClient);
2.4 创建utils.js，除了基础包中存在的工具，自己业务可能使用到的可以放在这里（可有可无，非必须），以下是举例这个项目使用到的工具方法
/**
* @Overview 工具方法
* 各种子功能方法：cookie、滚动条、屏蔽按键等等
*/
(function(Q){
'use strict';
var utils = Q.utils;
var guid = parseInt(new Date().getTime().toString().substr(4), 10);
/**
* 获取唯一ID
* @returns {number}
*/
utils.getGuid = function() {
return guid++;
};
/**
* 通用回调解析函数
* @param {String|Function|Boolean} callback 回调函数 或 跳转url 或 true刷新页面
* @returns {Function} 解析后的函数
*/
utils.parseCallback = function(callback) {
if ($.type(callback) == 'function') {
return callback;
} else if (callback === true) {
return function() {
location.reload();
};
} else if ($.type(callback) == 'string' && callback.indexOf('http') === 0) {
return function() {
location.href = callback;
};
} else {
return function() {};
}
};
/**
* 阻止各种按键
*/
utils.disabledKey = function() {
document.onkeydown = function(e){
//屏蔽刷新 F5 Ctrl + F5 Ctrl + R Ctrl + N
var event = e || window.event;
var k = event.keyCode;
if((event.ctrlKey === true && k == 82) || (event.ctrlKey === true && k == 78) || (k == 116) || (event.ctrlKey === true && k == 116))
{
event.keyCode = 0;
event.returnValue = false;
event.cancelBubble = true;
return false;
}
};
document.onclick = function( e ){
//屏蔽 Shift + click Ctrl + click
var event = e || window.event;
var tagName = '';
try{
tagName = (event.target || event.srcElement).tagName.toLowerCase();
}catch(error){}
if( (event.shiftKey || event.ctrlKey) && tagName == 'a' ){
event.keyCode = 0;
event.returnValue = false;
event.cancelBubble = true;
return false;
}
};
document.oncontextmenu = function(){
//屏右键菜单
return false;
};
document.ondragstart = function(){
//屏蔽拖拽
return false;
};
document.onselectstart = function( e ){
//屏蔽选择，textarea 和 input 除外
var event = e || window.event;
var tagName = '';
try{
tagName = (event.target || event.srcElement).tagName.toLowerCase();
}catch(error){}
if( tagName != 'textarea' && tagName != 'input'){
return false;
}
};
};
/**
* 对象转字符串
* @param {Object} obj
*/
utils.stringify = function(obj) {
if ("JSON" in window) {
return JSON.stringify(obj);
}
var t = typeof (obj);
if (t != "object" || obj === null) {
// simple data type
if (t == "string") obj = '"' + obj + '"';
return String(obj);
} else {
// recurse array or object
var n, v, json = [], arr = (obj && obj.constructor == Array);
for (n in obj) {
v = obj[n];
t = typeof(v);
if (obj.hasOwnProperty(n)) {
if (t == "string") {
v = '"' + v + '"';
} else if (t == "object" && v !== null){
v = Safe.stringify(v);
}
json.push((arr ? "" : '"' + n + '":') + String(v));
}
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
};
})(QClient);
3. 通过入口方法进行调用
QClient.changeSkin({
catgoryConf: CATGORY_CONF //需要从页面初始化的参数
});
优势
- 实现了前端各功能结构上的分离，使得结构上更加清晰
- UI和逻辑分离使用事件通信，可以更好的进行分工开发
- 便于扩展，方便代码的重构和升级
劣势
最明显的是一个功能可能产出多个文件，不过可以按照上面提到的方式（各模块都放在一个文件里）解决；也或者搞一个工具来做文件的合并处理，这个现在也不是什么难事。这里针对我们的业务实现了一个专门处理这个的工具，仅供参考（QClient开发工具，该工具集成了上述前端分离规范）【由于第一次开发这种工具，代码组织的还不是很好，大概就是说明有这么一种形式】
感谢
感谢摩天营的同学提出的改进建议，特别感谢@jedmeng对结构的梳理。
