开始使用seajs的时候折磨了我好一阵。光是各种概念就让新手难理解。现在弄清楚了,上个实践以备忘。目录结构如图。

1.文件 sea.html   main.js  a.js  b.js  c.js 最后还要一个seajs,其中main.js是入口文件,a.js b.js c.js 都是模块文件(注意模块文件是怎么定义的,要注重规范哟)

sea.html 的内容

<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1" />
<link href="http://cdn.bootcss.com/lightgallery/1.1.0/css/lightGallery.css" rel="stylesheet">
</head> <body>
seajs学习
</body>
<script src="../js/sea.js" ></script>
<script src="../js/main.js"></script>
</html>

main.js 的内容

console.log("this is main.js");
seajs.config({
/*这里是做配置*/
/* base: "../res/",
alias: {
"jquery": "js/jquery-2.1.4.min",
"lightGallery":"js/lightGallery",
"a":"js/a",
}*/
});
seajs.use("a",function(main){
main.a_fun();
});

a.js的内容(注意模块的定义格式)

define(function(require, exports, module) {
console.log("this is a.js");
var b = require("./b");//这里就是依赖,看看怎么写的
exports.a_fun = function() {
console.log("这是a.js暴露的接口");
}
//调用b的接口
b.b_fun();
})

b.js的内容

define(function(require, exports, module) {
console.log("this is b.js");
var c = require("./c");
//暴露接口给被依赖者
exports.b_fun = function() {
console.log("这是b.js暴露的接口");
}
c.c_fun();
})

c.js的内容

define(function(require, exports, module){
console.log("this is c.js");
exports.c_fun=function(){
console.log("这是c.js暴露的接口");
}
})

2.在sea.html中引入sea.js 和main.js(这相当于c语言的main函数,程序的入口文件,通过依赖关系找到所有需要的文件);

3.运行sea.html看看控制台效果

4.就这么简单,跟着我的走一遍,你再去看详细的接口文档,在这个基础上继续学习,比起你直接去摸那些高大上的概念会轻松很多

seaJs 使用的更多相关文章

  1. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  2. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  3. JS模块化开发:使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  4. seajs的使用

    写在前面 seajs是什么? Seajs是一个js文件加载器. 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 用于Web开发的模块加载工具,提供简单.极致的模块化体验 一:使用 文件 ...

  5. 用spm2构建seajs项目的过程

    前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...

  6. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  7. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  8. seajs学习一天后的总结归纳

    公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴 ...

  9. RequireJS与SeaJS模块化加载示例

    web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

  10. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

随机推荐

  1. Linux时间同步方式记录

    Linux时间同步 部署Hadoop集群,遇到各个linux服务器的时间不同步的问题,于是研究了一下linux的时间同步方式,特将同步方式,总结如下: A. 前提条件 a)         网络是连通 ...

  2. 修改cas登陆页面-服务器端

    原文地址:http://www.cnblogs.com/liveandevil/archive/2013/03/06/2946341.html 1.cas统一认证的登陆页面位于:cas目录/WEB-I ...

  3. Java获得UTC时间

    在Java语言中,您可以通过java.util.Calendar类取得一个本地时间或者指定时区的时间实例,如下: 取得本地时间: java.util.Calendar cal = java.util. ...

  4. Windows Phone开发工具初体验【转载】

    Windows Phone开发工具在MIX 2010上火热登场了.Windows Mobile开发者们压抑许久的热情终于爆发出来,对于Windows Phone的华丽转身,开发者们褒贬不一,有人对Si ...

  5. [AngularJS] 'require' prop in Directive or Component

    When use 'require', recommend to add some error check, for example: class ChildCtrl { constructor(){ ...

  6. java.util.Scanner的日常用法

    Scanner是新增的一个简易文本扫描器,在 JDK 5.0之前,是没有的.查看最新在线文档: public final class Scanner extends Object implements ...

  7. el表达式跟ognl表达式的区别(转)

    EL表达式: >>单纯在jsp页面中出现,是在四个作用域中取值,page,request,session,application.>>如果在struts环境中,它除了有在上面的 ...

  8. Logistic Regression and Classification

    分类(Classification)与回归都属于监督学习,两者的唯一区别在于,前者要预测的输出变量\(y\)只能取离散值,而后者的输出变量是连续的.这些离散的输出变量在分类问题中通常称之为标签(Lab ...

  9. Mechanism of Loading Resources

    Mechanism of Loading Resources 1. Distributed strategy 1.1. Developer guilde 1.2. Notes 2. Centraliz ...

  10. 结合 category 工作原理分析 OC2.0 中的 runtime

    绝大多数 iOS 开发者在学习 runtime 时都阅读过 runtime.h 文件中的这段代码: struct objc_class { Class isa  OBJC_ISA_AVAILABILI ...