如何使用seajs+jQuery构建中型项目

2014-04-02 00:02 龙恩0707 阅读(1934) 评论(4) 编辑收藏举报

为何有这种想法？

由于最近做的项目是用jquery+seajs集成的，所以就突发奇想如何使用seajs+jquery能更好的构建项目，比如能解决模块化，模块与模块之间的依赖，文件上线后打包，压缩等能更好遵守自己的一套规范，这样的话自己也比较清晰整个前端项目的架构，能更好的维护代码！以后自己做新项目时可以遵守这些规范来做，能更好，更高质量的完成任务！

如何用seaJS+jquery来组织前端页面？

如何来组织前端页面？从个人经验来讲，需要遵守以下几点：

1. JS这块: 在页面顶部引入seaJS压缩源文件，那么jquery文件就不引入了，直接用seajs.config 这个配置下Jquery文件，需要的时候use下或者require下。页面级的JS 都写成模块化，比如：define(function(require, exports, module){}),因为seajs一个文件就是一个模块。

2. CSS这块：按道理来说，页面上只需要2个css文件即可，一个页面级的css文件，另外一个是reset.css和header.css(全站通用的，两个文件合并一个请求)。但是页面上可能要引入一些外部的插件等。比如bootstrap中的插件等，那么个人建议css文件也直接引入放在头部。因为css文件很多的话,可能发多个请求，但是并不会阻塞浏览器的加载(因为用link引入是边渲染变加载的)。

　　一：下面来看看CSS在书写时候要注意哪些规范。

1. 注释肯定需要的。

2. 统一遵循书写顺序规范：

1. 位置属性(position, z-index, display, float等)。

2. 大小(width, height, padding, margin等)。

3.文字系列(font, line-height, letter-spacing, color text-align等)。

4.背景(background, border等)。

二：命名规范：

1. 所有的class(类名)都一律小写，且多个单词用横线-隔开。
　　　　　　　2. 和JS有关的操作class类名使用J_ 开头。

3. 个人编写的组件风格如下：

define(function(require, exports, module) {
    //var $ = require('./jquery');
    function XX(){
        
    }

    XX.prototype = {
        init: function(){
            console.log(2);
        }
    };
    exports.XX = XX.prototype;
});

seajs与文件项目相关的。

比如我现在项目目录如下：

根目录seajsDemo下有

1. app (专门放html静态文件)

2. sea-modules文件 (存放jquery和seajs等源文件)。

3. static文件 (存放所有的JS文件)。

那现在我们有页面假如叫index.htm。 JS文件有2个一个是index.js文件另外一个是test.js文件。

其中JS文件所有风格遵循如下风格：这是test.js代码。

define(function(require, exports, module){
    
    exports.test = function(){
        console.log(1);
    }
});

那么index.js代码如下：

define(function(require, exports, module){
    var a = require('total/test');
    a.test();
});

那么我可以直接在index.html配置下就ok 如：

seajs.config({
      paths: {
        'gallery': '../sea-modules/jquery/jquery.js',
        'total': '../static/',
      }
});

调用如下：

seajs.use("total/index");

下面来讲解下seajs的一些属性。注：只是讲解一些常用的属性，详细的可以看seajs官网。

1. 用来对 Sea.js 进行配置

seajs.config({

alias：{},

paths:{},

map: [],

base:'',

charset: 'utf-8'

});

一. alias 别名，方便调用，而不需要调用很长的名字(可以通过base一起使用更方便)。如上面的文件配置，我可以这样设置下他们的别名，不设置paths。如下：

      alias: {
         "jquery": "sea-modules/jquery/jquery.js",
       'test': 'static/test'
      }

base: 'http://localhost/demo/seajsDemo/' // 指向根目录文件。那么我们可以直接在页面上这样调用 seajs.use("static/index");就可以了就可以访问到

http://localhost/demo/seajsDemo/static/index.js文件了。

二. paths：设置路径，方便跨目录调用。当我们的项目中的文件在不同的文件目录下，那么如果我们还是用上面的alias别名的话，直接让他们指向通用的根目录的话，那么use一个文件的时候可以文件id要写很长很长，但是如果我用paths来解决的话更方便。

比如 seajs.config({

　　paths: {
          'gallery': '../sea-modules/jquery/jquery.js',
          'total': '../static/',
      }

});

那么初始化index.js时候可以这样调用 seajs.use("total/index");因为total用了相对路径相对于根目录下的。

但是index.js代码中要这样获取到test.js文件了 var a = require('total/test');

三：map：[ [ '.js', '-debug.js'] ] 是对文件的映射。比如页面上的XX.js 都映射成XX-debug.js,可以方便在线调试等。

把 x.js 后缀的都转成 x-debug.js, 当 x-debug.js 中依赖的模块如过有 y-debug.js 时,
　　会把y-debug.js 也转成 y-debug-debug.js, 导致没法获取到. 再导致 x 模块返回 null.
　　你应该撇除已经是 -debug.js 的情况, 例如:可以如下做

map: [
        function(uri) {
            if (!/\-debug\.(js|css)+/g.test(uri)) {
                uri = uri.replace(/\/(.*)\.(js|css)/g, "/$1-debug.$2")
            }
            return uri
        }
    ]

四： charset: 'utf-8' 文件编码不用介绍。

2. define 用来定义模块。所有页面上的JS文件风格都遵循如下风格。

define(function(require, exports, module) {

  // 模块代码

});

3. seajs.use 用来加载一个或者多个模块。如下：

// 加载一个模块
seajs.use('./a');

// 加载一个模块，在加载完成时，执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

4. exports 是一个对象，用来向外提供模块接口。

define(function(require, exports) {

  // 对外提供 foo 属性
  exports.foo = 'bar';

  // 对外提供 doSomething 方法
  exports.doSomething = function() {};

});

5. require 用来获取指定模块的接口。

define(function(require) {

  // 获取模块 a 的接口
  var a = require('./a');

  // 调用模块 a 的方法
  a.doSomething();
});

利用grunt对整个项目文件的合并及压缩等操作。

稍后待续中......

刷新页面返回顶部

龙恩0707 ..........

如何使用seajs+jQuery构建中型项目

About