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

随机推荐

采用ADM2483磁隔离器让RS485接口更简单更安全
采用ADM2483磁隔离器让RS485接口更简单更安全摘要:本文介绍RS485的特点及应用,指出了普通RS485接口易损坏的问题,针对存在的问题介绍了以ADM2483为核心的磁隔离解决方案. 关键词 ...
mysql 解压版安装
1.官网下载压缩包 2.解压 3.配置环境变量添加系统环境变量 MYSQL_HOME 值为解压的主目录,例如 D:\mysql-5.7.25-winx64 修改Path 环境变量,点击编辑 ...
JS中的块级作用域，var、let、const三者的区别
1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } conso ...
js 实现数据结构 -- 栈
原文: 在 Javascript 中学习数据结构与算法. 概念: 栈是一种遵从先进后出 (LIFO) 原则的有序集合:新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端为栈底.在栈里,新元素都靠 ...
php curl报错：417 - Expectation Failed
当我在post提交的数据增加一段内容后会报错:417 - Expectation Failed. 查资料发现在使用curl做POST时,当post的数据大于1024字节时,curl并不会直接发起pos ...
PHP 加解密方法大全
最近看见一篇文章讲的是PHP的加解密方法,正好也自己学习下,顺便以后有用到的地方也好能快速用上,仅供自己学习和复习,好了不多BB,上代码. 基于这几个函数可逆转的加密为:base64_encode() ...
(二叉树 DFS 递归) leetcode 101. Symmetric Tree
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...
IPC$概念及入侵方式研究
catalogue . 什么是IPC$ . IPC$攻击方式 . 漏洞检测与防御措施 1. 什么是IPC$ IPC$(空会话连接)是windows系统内置的一个功能模块,它的作用有很多(包括域帐号枚举 ...
2018-2019-2 《Java程序设计》第3周学习总结
20175319 2018-2019-2 <Java程序设计>第3周学习总结教材学习内容总结第三周通过课本与蓝墨云上的视频学习了<Java2实用教程>第四章类与对象成功激 ...
跟踪调试JDK源码时遇到的问题及解决方法
目录问题描述解决思路在IntelliJ IDEA中调试JDK源码在eclipse中调试JDK源码总结问题描述最近在研究MyBatis的缓存机制,需要回顾一下HashMap的实现原理.于是 ...

sea.js 个人入门

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

随机推荐

热门专题