通用前端开发框架
前言
最近在几个spa的项目中都使用前后端完全分离，后端只提供数据接口的方式。慢慢总结了一套前端的通用框架。这个框架没有语法限制，没有特别的规则，可接任何语言的后台。一切以快速开发为准则。
技术总览
技术上来说，使用seajs做模块调度。
核心模块有：jquery、jquery-ui、backbone（一个前端MVC框架）、less（一个是css能用变量等编程特性来编写的js库）。
已经包括的可用模块有：contextMenu（jquery右键菜单插件）、bootstrap（来自twitter的通用的css和js库）、uploadify（jquery文件上传插件）、qtip（jquery提示插件）。
后续可能加入：kindeditor（富文本插件）。
文件结构
根目录：
core : 存放的是核心的库文件，如jquery。
module : 中存放的是可选的模块和用户自己创建的模块。
index.php : 是示例的页面模板，这个模板可以是任何文件，html或者jsp等都行。如果你的应用中有多个页面，都放在根目录下就行了。
init.js : 你的应用的初始化文件，可以在里面指定模块的别名。可以在里面启动默认的模块。一切初始化的工作都可以放在这里。
sea.js ： seajs核心文件，勿动。
示例 ：快速构建一个基础的应用
观看本示例时，你需要了解基本的seajs用法。
1.编辑模板文件，在文件结尾插入
< script src ="/_PATH_TO_THIS_PACKAGE/sea.js" data-main ="/_PATH_TO_THIS_PACKAGE/init" ></ script >
这件使页面载入seajs，并指挥seajs默认执行init.js。另外，建议在页面头部的script中使用一个全局变量保存当前用户的信息等。如：
<script>
// 用来存储服务器端基础信息，如当前路径等等。
window._GLOBAL = {
'user' : { id : 1, name : 'YOUR_NAME' }
}
</script>
2.编辑init.js，进行初始化工作，如下图例子。
seajs.config({
alias: {
/* 以下是核心模块 */
'jquery': 'core/jquery-1.7.min' ,
'jquery-ui': 'core/jquery-ui/jquery-ui-1.8.16.custom.min' ,
'jquery-ui-css': 'core/jquery-ui/absolution.blue.css' ,
'jquery-validate' : 'core/jquery.validate.js' ,
'backbone': 'core/backbone' ,
'underscore': 'core/underscore-min' ,
'less' : 'core/less' ,
/* 以下是可选的模块 */
'jquery-qtip' : 'module/qtip/jquery.qtip.js' ,
/* etc... */
/* 以下是你自己的模块 */
'app-main' : 'module/main/app-main'
},
preload : [ 'core/plugin-less' ],
debug: 2
});
define( function (require) {
/* 在这里你可以执行任何初始化的工作 */
/* code here */
/* 或者直接执行你自己定义的模块，如下所示 */
var main = require('app-main' );
main.execute();
});
3.编辑你的主模块
define( function (require,exports) {
/* 载入需要的核心库 */
var $ = jQuery = require('jquery' );
/* 载入需要的css文件或者less文件，注意：less文件不能使用别名 */
require( "module/main/css/app-main.less" );
/*
在主文件里你可以定义一个全局对象，
用这个对象来保存通用的函数，
或者保存调入的模块信息。
*/
window.APP = {
app : [],
module_use : function ( name ){
seajs.use(name, function (app){
app.execute();
});
},
formatDate: function (formatStr, fdate){
var fTime, fStr = 'ymdhis' ;
if (! formatStr){
formatStr = "y-m-d h:i:s" ;
}
if (fdate){
fdate =fdate * 1000 ;
fTime = new Date( fdate );
} else {
fTime = new Date();
}
var formatArr = [
fTime.getFullYear().toString(),
(fTime.getMonth() +1 ).toString(),
fTime.getDate().toString(),
fTime.getHours().toString(),
fTime.getMinutes().toString(),
fTime.getSeconds().toString()
]
for ( var i=0; i<formatArr.length; i++ )
{
formatStr = formatStr.replace(fStr.charAt(i), formatArr[i]);
}
return formatStr;
}
};
exports.execute = function (){
console.log( "hello world!" );
/*
下面是页面主要的代码，你可以对页面进行事件绑定，
根据不同的事件使用require_sync函数异步调用模块。
*/
require('upload').execute();
}
});
以上演示的是一个被称为“主模块”模块，这个模块最重要的是execute函数，它让该模块变成一个调度中心。根据页面事件来异步载入其他模块。如果你的页面很简单，你完全可以把以上代码整合到init.js中。
4.编写你的其他模块，以下是通用的模块写法
define( function (require,exports) {
/* 登记一下当前模块，如果需要的话 */
window.APP.app.push( "_THIS_MODULE_NAME_" );
/* 载入需要模块 */
var $ = jQuery = require('jquery' );
/* 对于jquery插件需要将$变量传入，具体请参考“详细说明” */
require( 'jquery-ui' )($);
var Backbone = require('backbone' );
var _ = require('underscore' );
/*
使用backbone的话，建议使用一个对象来保存所有建立的M、V、C,
同时在V里利用一个instan对象来保存建立视图的实例。
*/
var WORDS = {
M : {},
C:{},
V:{
instant :{}
}
};
WORDS.V.songs = Backbone.View.extend({
tagName : 'ul' ,
className: "song-list" ,
initialize : function (obj){
for ( var i in obj ){
this [i] = obj[i];
}
this .collection = new WORDS.C.songs();
this .collection.bind("all", this .render, this );
},
render : function (){
var root = this ;
/* code here */
return this ;
}
});
/* 以下掩饰uploadify的用法 */
require( 'uploadify' )($);
require( 'uploadify-swfobj' );
require( 'uploadify-css' );
/* uploadify使用flash通信，导致页面丢失cookie，所以先存起来，上传完再回复 */
var up_cookie = document.cookie;
$( "#selector" ).uploadify({
'uploader' : '/_PATH_TO_THIS_PACKAGE_/module/uploadify/scripts/uploadify.swf' ,
'script' : '/_PATH_TO_UPLOAD_SCRIPT' ,
'queueID' : '_FILE_ARG_NAME_' ,
'scriptData' : {
/* 这里设置同时要上传的参数 */
},
'onComplete': function (event, ID, fileObj, response, data) {
/* code here */
/* 回复cookie */
document.cookie = up_cookie;
},
'onError': function (event,ID,fileObj,errorObj) {
console.log(errorObj);
document.cookie = up_cookie;
}
});
exports.execute = function (){
/* 生成一个视图 */
WORDS.V.instant.words_dialog = new WORDS.V.word_songs();
}
/* 建议模块使用exports对外提供清理视图实例的方法 */
});
详细说明
1.使用seajs载入jquery插件时，需要简单将jquery插件封装以下。读者可在seajs的官网demo里找到jquery插件的封装方式。
2.backbone除了MVC以外，event和router非常好用。event可以和任何对象绑定，让系统有可能使用事件驱动。router是专为spa配置的。backbone中文文档： http://www.csser.com/tools/backbone/backbone.js.html
3.个人开发者建议使用less来编写css，可以直接导入bootstrap的less文件。
4.笔者会在近期整理出一套源码以供下载。
5.开发完毕后可使用less的工具合并less文件。seajs的工具合并js文件。
标签: 前端框架 , seajs , backbone , less , jquery , bootstrap
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息