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 ...

随机推荐

Kaggle教程——大神教你上分
本文记录笔者在观看Coursera上国立经济大学HLE的课程 How to win a data science competetion中的收获,和大家分享.课程的这门课的讲授人是Kaggle的大牛, ...
Django create和save方法
Django的模型(Model)的本质是类,并不是一个具体的对象(Object).当你设计好模型后,你就可以对Model进行实例化从而创建一个一个具体的对象.Django对于创建对象提供了2种不同的s ...
@Valid注解的使用（转）
原文地址:http://blog.csdn.net/xzmeasy/article/details/76098188 @Valid注解用于校验,所属包为:javax.validation.Valid. ...
MySQL8.0-NoSQL和SQL的对比及MySQL的优势
一.SQL VS NoSQL SQL:关系型数据库,用SQL语句来操作数据 NOSQL:非关系型数据库,NoSQL的含义是不仅仅有SQL,而实际上大多数NoSQL不用SQL来操作数据常见的关系型数据 ...
Flask--路由, 配置, 蓝图
一 . 双重装饰器重名的解决办法 # 我们都知道flask中的@app.route就是一层装饰器, 当我们需要在给视图函数加装饰器的时候就两层装饰器,这里介绍一下加装饰器的先后顺序,以及遇到的问题. ...
如何查看kernel社区的变更历史
kernel社区稳定版本的地址为: https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux.git/ 如果我们想查找某一个文件,比如 ...
bzoj-1179(缩点+最短路)
题意:中文题面解题思路:因为他能重复走且边权都正的,那么肯定一个环的是必须走完的,所以先缩点,在重新建一个图跑最长路代码: #include<iostream> #include< ...
[模板] 数位dp
数位dp 简介数位dp指满足特定性质的数的计数, 如求 $[l, r]$ 区间内不含 $2$ 的数的个数. 一般来说, 数位dp利用dfs解决, 有时状态数较多, 需要hash表优化. 模板 ...
java querydsl使用
1 POM文件 <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.apa ...
jforum（1）--环境搭建
JForum 是采用Java开发的功能强大且稳定的论坛系统.它提供了抽象的接口.高效的论坛引擎以及易于使用的管理界面,同时具有完全的权限控制.多语言支持(包括中文).高性能.可自定义的用户接口.安全. ...

sea.js 个人入门

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

随机推荐

热门专题