sea.js 个人入门

说这两个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 个人入门的更多相关文章

Sea.Js使用入门
1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // ...
Sea.js入门
本文只是seajs的入门贴.要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇: 前端模块化开发的价值前端模块化开发的历史 ID和路径匹配原则与RequireJS的异同模块的加载启 ...
sea.js 入门
上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...
深入学习sea.js
入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/ ...
sea.js模块化编程
* 为什么要模块化? 解决文件依赖解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...
解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...
模块化开发--sea.js
当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...
第三课：sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
Seajs是什么及sea.js 由来，特点以及优势
Seajs是什么及sea.js 由来,特点以及优势这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享 1 ...

随机推荐

Python爬虫爬取百合网的女人们和男人们
学Python也有段时间了,目前学到了Python的类.个人感觉Python的类不应称之为类,而应称之为数据类型,只是数据类型而已!只是数据类型而已!只是数据类型而已!重要的事情说三篇. 据书上说一个 ...
AttributeError: Got AttributeError when attempting to get a value for field `password2` on serializer ` UserSerializer`...
Error_msg: AttributeError: Got AttributeError when attempting to get a value for field `password2` o ...
布局无法发送，布局发布状态停留在“Transferring”,进度停留在 0%
按顺序检查如下: 1. 检查Player是否在线?不在线则无法发送任何内容,进度会停留在0%,待Player下次在线时,任务自动开始传输. Player在线,Messenger上可以看到Player名 ...
centos7下root密码丢失解决方案
1 root密码忘记 A.[rd.break方式更改root密码!] 1.重启 CentOS 7.X,在系统引导倒计时的时候快速按键盘上的[ ↑ ]或[ ↓ ]键,使其停留在GRUB菜单界面,并按照下 ...
vue.js实战——vue元素复用
Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...
Java的clone()：深复制与浅复制
Java中要想自定义类的对象可以被复制,自定义类就必须实现Cloneable中的clone()方法,如下: public class Student implements Cloneable { pr ...
获取data-*属性值
下面就详细介绍四种方法获取data-*属性的值 <li id=">获取id</li> 需要获取的就是data-id 和 dtat-vice-id的值一:getAtt ...
Win10 + Ubuntu双系统，删除Ubuntu系统
之前在电脑上装了win10 + ubuntu的双系统,偶尔会出问题,所以还是选择将ubuntu系统删掉. 正所谓“请神容易送神难”,安装ubuntu的时候,过程还算顺利,但是在删除Ubuntu的过程中 ...
Spring MVC 使用介绍（六）—— 注解式控制器（二）：请求映射与参数绑定
一.概述注解式控制器支持: 请求的映射和限定参数的自动绑定参数的注解绑定二.请求的映射和限定 http请求信息包含六部分信息: ①请求方法: ②URL: ③协议及版本: ④请求头信息(包括Co ...
Django Cookie,Session
Cookie Cookie的由来 HTTP协议是无状态的,每次请求都是独立的,对服务器来说,每次的请求都是全新的,上一次的访问是数据是无法保留到下一次的某些场景需要状态数据或者中间数据等相关对下一 ...

sea.js 个人入门

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

随机推荐

热门专题