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

随机推荐

Mariadb第一章：介绍及安装--小白博客
mariadb(第一章) 数据库介绍 1.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以 ...
mysql自动断开该连接解决方案
mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案作者: MySQL 的默认设置下,当一个连接的空闲时间超过8小时后,MySQL 就会断开该连接,而 c3p0 连接池则以为该被断 ...
Bean之间的关系
Bean之间主要有继承和依赖的关系,这里的继承并不是我们面向对象里面所提到的继承. 继承我们先来创建一个新的配置文件beans-relation.xml <bean id="addr ...
HTTP协议中的短轮询、长轮询、长连接和短连接,看到一篇文章有感
关于短轮询.长轮询短轮询主要是前端实现,JS写个死循环,不停的去请求服务器中的库存量是多少,然后刷新到这个页面当中,这其实就是所谓的短轮询. 长轮询主要取决于服务器,在长轮询中,服务器如果检测到数据 ...
mysql-笔记--增删改查
查看数据库:可以使用 show databases; 命令查看已经创建了哪些数据库指定数据库:在登录后使用 use 语句指定, 命令: use 数据库名;要对一个数据库进行操作, 必须先选择该数据库 ...
fullpage.js参数参考
fullpage函数里面的参数: //Navigationmenu: false,//绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false.anchors:['fir ...
OperationCenter Docker容器启动脚本
docker rm -f OperationCenter rm -f /root/webapps/logs/* image_name="harbor.gfstack.geo/geostack ...
MT【319】分段递推数列
已知数列$ x_n $满足$ 0<x_1<x_2<\pi $,且\begin{equation*} x_{n+1}= \left\{ \begin{aligned}x_n+\sin ...
Hdoj 1850.Being a Good Boy in Spring Festival 题解
Problem Description 一年在外父母时刻牵挂春节回家你能做几天好孩子吗寒假里尝试做做下面的事情吧陪妈妈逛一次菜场悄悄给爸爸买个小礼物主动地强烈地要求洗一次碗某一天早 ...
gcc __thread关键字
https://blog.csdn.net/xj178926426/article/details/54345449 EventLoop.cpp __thread EventLoop* t_loopI ...

sea.js 个人入门

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

随机推荐

热门专题