通用前端开发框架（一）

前言

最近在几个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文件。