玉伯 : http://seajs.org/docs/

说这两个JS 必须提到AMD、commonjs两种不同的规范：

奇舞团：http://www.75team.com/archives/882

知乎：http://www.zhihu.com/question/20342350

个人的理解其实就是 AMD就是要加载的JS文件 都提前一数组的形式提前加载完的、commonjs是你想用到哪就直接加载的

demo页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 </head>

 <body>

     <!-- 头部 -->

     <div class="content">

         <div class="nav-main">

             <ul id="nav" class="nav cfx">

                 <li>

                     <a href="#" title="首页">首页</a>

                 </li>

                 <li>

                     <a href="#" title="联系我们">联系我们</a>

                 </li>

                 <li>

                     <a href="#" title="关于我们">关于我们</a>

                 </li>

                 <li>

                     <a href="#" title="友情链接">友情链接</a>

                 </li>

             </ul>

         </div>

     </div>

     <!-- 主体 -->

     <div class="content">

         <div class="index-main">

         </div>

     </div>

     <!-- 底部 -->

     <div id="help" class="help">

         <ul class="help_list">

         <li>

         <dl>

             <dt>新手上路</dt>

             <dd><a href="#">购物前的准备</a><br>

             <a href="#">购物流程</a><br>

             <a href="#">分期指南</a><br>

             <a href="#">常见问题</a></dd>

         </dl>

         </li>

         <li>

         <dl>

             <dt>安全支付</dt>

             <dd><a href="#">口令卡\U盾\密码器</a><br>

             <a href="#">手机短信认证</a><br>

             <a href="#">支付安全宝典</a><br>

             <a href="#">安全专区</a></dd>

         </dl>

         </li>

         <li>

         <dl>

             <dt>客户服务</dt>

             <dd><a href="#">客服电话</a><br>

             <a href="#">订单查询</a><br>

             <a href="#">加盟须知</a><br></dd>

         </dl>

         </li>

         <li>

         <dl>

             <dt>关于我们</dt>

             <dd><a href="#">商城简介</a><br>

             <a href="#">商城声明</a><br>

             <a href="#">合作伙伴</a><br>

             <a href="#">联系我们</a></dd>

         </dl>

         </li>

         </ul>

     </div>

 </body>

 <script src="js/sea.js" id="main"></script>

 <script src="js/main.js"></script>

 </html>

main.js：

 //Sea.js 进行配置

 seajs.config({

   // 别名配置

   alias: {

     'base-css' : './css/base.css',

     'jquery'   : 'jquery-1.8.3.min.js'

   },

   // 路径配置

   paths: {

     'css' : '../css/',

     'logo': './logo/'

   },

   // 变量配置

     vars: {

      'com': 'common'

    },

   // 映射配置

   map: [

    ['index.js', 'index-debug.js']

  ],

   // 预加载项 预先加载jquery.js

     preload:[

        'jquery'

     ],

   // 调试模式

   debug: true,

   // Sea.js 的基础路径

  // base: 'http://example.com/path/to/base/',

   // 文件编码

   charset: 'utf-8'

 });

 // 启动加载模块

 seajs.use(['head.js','footer.js','index.js'],function(){

   alert('加载完喽~'); // 加载完模块，执行回调

 });

推荐： 予舍 ： http://yslove.net/seajs/ 写的API 个人感觉比官方那个更好懂一些。。。。

展示一个head.js:

 define(function(require, exports, module) {

     require('../css/base.css');   //获取指定模块

     require('../css/head.css');      //获取指定模块

     require('fixed-head.js');     //获取指定模块

     console.log(seajs.cache); //加载的所有信息

     console.log(seajs.data); //所有配置信息;

     var paths = seajs.resolve('../css/global.css'); //解析路径;

     console.log( paths );

     require.async('logo/logo.js',function(logo){ //异步加载

         logo.show();  //异步加载回调

     });

     var hover = require('hover-show.js');

     var $nav = $('#nav'),

           $navAs = $nav.find('a');

     $('#nav').fixedHead();  //jQuery1.7版本以上的就已经把jQuery模块化;

     $navAs.mouseover(function(){

           var txt = $(this).text();

           hover.show(txt);

     });

 });

说明：

 //a.js

 define(function(require, exports, module) {

     //require 获取指定模块的接口;

     //exports 模块内部对外提供接口;

     //module 当前模块的一些属性和方法，比如 exxports其实就是module地下的一个接口;

     // 当前模块对外的一个 show方法;

     module.exports = {

         'show' : function( txt ){

             console.log( txt );

         }

     }

 });

 //b.js

 define(function(require, exports, module) {

     require('../css/base.css'); //还可以加载css样式(Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除)所以就得在引入插件;

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

     hover.show(txt);//调用a.js里的show方法;

     require.async('logo/logo.js',function(logo){ //异步加载;

         logo.show();  //异步加载回调;

     });

     console.log(seajs.cache); //加载的所有信息;

     console.log(seajs.data); //所有配置信息;

     var paths = seajs.resolve('../css/global.css'); //解析路径;

     console.log( paths );

     //主要的部分的功能也就这样更细的API用到在看官方的文档，不过特别注意的其实是路径问题;

     //define('id', [], function(require, exports, module) {}); id是这个模块的名，[]是依赖的模块,不过一般这两个都是配合Gruntjs/gulp使用;

 });

sea.js 个人入门的更多相关文章

  1. Sea.Js使用入门

    1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // ...

  2. Sea.js入门

    本文只是seajs的入门贴.要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇: 前端模块化开发的价值 前端模块化开发的历史 ID和路径匹配原则 与RequireJS的异同 模块的加载启 ...

  3. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  4. 深入学习sea.js

    入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/ ...

  5. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

  6. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  7. 模块化开发--sea.js

    当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...

  8. 第三课：sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  9. Seajs是什么及sea.js 由来，特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

随机推荐

  1. React-代码规范

    1.方法绑定this,统一写在consrtructor()里. constructor(props){ ... this.handleInputChange=this.handleInputChang ...

  2. 写论文时，使用word的一些技巧

    目录 怎么设置文章里所有英文的字体.所有中文的字体样式 删除文章中的所有或者部分超链接 设置忽略英文的拼写检查 怎么设置文章里所有英文字体.所有中文字体样式 用鼠标选中需要更改的文章内容,如果是全文, ...

  3. Hadoop（五）搭建Hadoop客户端与Java访问HDFS集群

    阅读目录(Content) 一.Hadoop客户端配置 二.Java访问HDFS集群 2.1.HDFS的Java访问接口 2.2.Java访问HDFS主要编程步骤 2.3.使用FileSystem A ...

  4. sublime 官方正版，自己用的插件配置，最轻量级安装流程

    到了一家新公司,新的办公电脑,移动工作站哦,配置很酷.需要自己安装编码环境,node.js(http-server)是必须要装的,编辑器个人比较喜欢sublime,现在归纳一下配置流程,ps:本人有点 ...

  5. Error updating database. Cause: java.sql.SQLException: Access denied for user '${username}'@'localhost' (using password: YES)

    导入别人的项目,出现一个错误,经过排查,是db.properties配置文件中的用户名与Mybatis-conf.xml配置文件中调用的用户名不一致所导致的 (db.properties中用的是nam ...

  6. 使用Spring表达式语言进行装备--SpEL

    本文主要想记录最近的两个使用spring框架实现通过配置文件装备Bean,以及使用SpEL装备Bean. 1.使用配置文件装备Bean: 当我们写某些Bean的时候是希望这个Bean当中的属性是可以通 ...

  7. @Autowired 基本介绍，有待丰富

    今天做项目对于@Autowired理解有点错误:过两天再来看看 转自:https://www.cnblogs.com/szlbm/p/5512931.html 什么是注解 传统的Spring做法是使用 ...

  8. java 简单程序

    public class a{ public static void main(String[] args) { System.out.println("Hello world") ...

  9. python脚本 用sqoop把mysql数据导入hive

    转:https://blog.csdn.net/wulantian/article/details/53064123 用python把mysql数据库的数据导入到hive中,该过程主要是通过pytho ...

  10. Teamviewer远程ssh命令行更改密码启动

    Teamviewer远程ssh命令行更改密码启动 设置密码 $ sudo teamviewer passwd [NewPasswd ] 查看teamviewer信息 $ teamviewer info ...