前言
最近在几个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.编辑模板文件，在文件结尾插入
这件使页面载入seajs，并指挥seajs默认执行init.js。另外，建议在页面头部的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 以上演示的是一个被称为“主模块”模块，这个模块最重要的是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中文文档：
3.个人开发者建议使用less来编写css，可以直接导入bootstrap的less文件。
4.笔者会在近期整理出一套源码以供下载。
5.开发完毕后可使用less的工具合并less文件。seajs的工具合并js文件。