SeaJS简介三：模块载入和引用

最新推荐文章于 2020-09-09 21:53:49 发布
最新推荐文章于 2020-09-09 21:53:49 发布
阅读量509 收藏
点赞数
分类专栏： Sea.js
 

SeaJS简介三：模块载入和引用

2014-05-23 23:36  5436人阅读  评论(6)  收藏  举报
  分类：
 

版权声明：本文为博主原创文章，未经博主允许不得转载。

       之前对模块有过介绍，一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。

 

SeaJS支持如下几种方式：

 

第一种：绝对路径--给出js文件的绝对路径

 

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. require("http://example/js/a");  

 

第二种：相对路径--用相对调用载入函数所在js文件的相对地址寻找模块

 

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. require("./c");  


 第三种：通过全局变量来匹配相对路径：相对SeaJS全局配置中的“base”来寻址（后面文章会介绍到）

 

 

SeaJS提供了三种载入的方式：seajs.use，require和require.async

 

第一种：seajs.use


       seajs.use主要用于载入入口模块。入口模块相当于JAVA程序的main函数，同时也是整个模块依赖树的根。

 

       这种方式有几种写法：

 

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. //单一模式  
  2. seajs.use('./a');  
  3.    
  4. //回调模式  
  5. seajs.use('./a', function(a) {  
  6.   a.run();  
  7. });  
  8.    
  9. //多模块模式  
  10. seajs.use(['./a', './b'], function(a, b) {  
  11.   a.run();  
  12.   b.run();  
  13. });  

 

        一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入sea.js的script标签加入”data-main”属性来省略seajs.use。

 

       来个小实例来说明一下：


[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1.    
  2. <!DOCTYPE HTML>  
  3. <html lang="zh-CN">  
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>TinyApp</title>  
  7. </head>  
  8. <body>  
  9.     <p class="content"></p>  
  10.     <script src="./sea.js" data-main="./init"></script>  
  11. </body>  
  12. </html>  


 

第二种：require

 

       require是SeaJS主要的模块加载方法，当在一个模块中需要用到其它模块时一般用require加载：ar a = require('a'); //引入a模块

 

第三种：require.async

 

      之前的require方式是一次把所有依赖的JS文件都加载进来，如果想什么时候用到什么时候加载的话就会用这种方式，这种方式效率比require高一些。

 

       通过上面的介绍，应该对SeaJS的模块载入和引用有所了解了，其实者通过这几篇的介绍会发现SeaJS的模块化编程思想和它带给开发人员的简单易用的特点。下篇博客介绍一下SeaJS的全局配置。

顶
0
 
踩
0
我的同类文章
更多文章
主题推荐
seajs  微软
猜你在找
HTML 5视频教程系列之JavaScript学习篇
HTML5之新增标签，CSS3，js特效
PHP基础视频-HTML、CSS、js
HTML5实例教程——简易涂鸦板
HTML5实例教程：拼图游戏
seajs学习2----CMD 模块定义规范
seajs模块化jQuery与jQuery插件
Seajs提供简单极致的模块化开发体验
seajs学习3----模块标识
seajs-前端模块化工具CMD规范
id="iframeu1607657_0" src="http://pos.baidu.com/acom?sz=728x90&rdid=1607657&dc=2&di=u1607657&dri=0&dis=0&dai=2&ps=3358x305&coa=at%3D3%26rsi0%3D728%26rsi1%3D90%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_UNION_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1456792471588&ti=SeaJS%E7%AE%80%E4%BB%8B%E4%B8%89%EF%BC%9A%E6%A8%A1%E5%9D%97%E8%BD%BD%E5%85%A5%E5%92%8C%E5%BC%95%E7%94%A8%20-%20%E9%99%88%E5%BB%BA%E7%A7%8B%20-%20%E5%8D%9A%E5%AE%A2%E9%A2%91%E9%81%93%20-%20CSDN.NET&ari=1&dbv=2&drs=1&pcs=1080x475&pss=1265x3423&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1456792472&ltu=http%3A%2F%2Fblog.csdn.net%2Flfsf802%2Farticle%2Fdetails%2F26758567&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DLsEOVBEQ5ienSs_8wlBVAFRs10SnTR-xCna7a4auVayX3OmZtWmTTu__SdKhekqxVskPqCK1p1FZKaxBBJL6a_%26wd%3D%26eqid%3Da7fdc12e000f73950000000556d4e34f&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1456792472&qn=bfdd61190943f801&tt=1456792471562.595.812.813" width="728" height="90" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">
查看评论
6楼  米老师2014-06-21 13:10发表 [回复]
我喜欢成系列的文章，这样你的思考是完整的，是有高度的。
5楼  haogting2014-06-20 21:23发表 [回复]
还没有用到，先留个整体的印象！
4楼  张江江2014-06-02 10:05发表 [回复]
SeaJS 全套教程来了，来学习
3楼  lmdcszh2014-06-01 22:19发表 [回复]
三种加载的方法:seajs.use，require和require.async 跟着学习
2楼  sunqing03162014-06-01 16:41发表 [回复]
js的一种吗？
1楼  李社河2014-05-29 12:48发表 [回复]
只能熟悉一下词语啦，先

javaPie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【SeaJS】【3】seajs.data相关的源码阅读
weixin_34010949的博客
08-14 92
   在SeaJS官网上推荐了源码阅读顺序，本文并没有采用这个顺序，而是按个人习惯以调试官方示例的方式进行源码阅读。早期版本作者玉伯使用了几个闭包形式，本文源码版本为2.1.1，它的编码方式个人认为更加脚本化，该版本代码量不到1K。1. 使用Chrome打开《【SeaJS】【1】初识SeaJS》中的hello.html文件，按F12打开JavaScript控制台，依次选择Source &gt; ...
seajs 2.x _ 模块的相互引用
~~简~~
08-18 819
模块内引用另一个模块 sea-debug.js是官方文件 test.html 文件内容 seajs.config({ base: "http://www.domain.com/seajs/assets/", alias: { "jquery": "global/js/jquery-1.8.3.js", } }); seajs.use("module
使用seajs引用插件
jarisMA的博客
08-27 279
使用seajs引用插件 1.在js文件中定义插件 define(function(require, exports, modules) { function Form(插件名)(初始化所需的参数) { } Form.prototype = {//在这里定义插件的方法和变量 //模块的编写 /** @element 表单元素 @param 参数 @posi...
把jquery引入sea.js或require.js的方法
锦瑟年华的博客
09-23 1460
现在模块化基本上已经深入人心了，所以我们一般都会使用一些模块化的工具例如sea.js，require.js那么如何将jquery引入到其中进行使用呢。废话不多说了，直接上代码:将jquery引入sea.js的方法，直接在sea.js的源码中加入以下代码即可.if ( typeof define === "function" ) { define(function(){return jQuer
seajs-parsedept:seajs 的 parsedept 模块
07-14
seajs-parsedepta nodejs module to resolve depts from a seajs module or serveral comboed seajs modules解析单个seajs模块或者多个合并后seajs模块的依赖，从seajs源码中抽离出来成为一个单独的模块供外部使用...
zepto-seajs-calendar:seajs模块的日历控件
06-09
zepto-seajs-calendarseajs模块的日历控件主要实现： _getTds: function(y, m) { // 日历主体部分 var date = new Date(y, m, 1); // 获取当月第一天星期几 var fday = date.getDay(); date = new Date(y, m + 1, 0)...
seajs-project:基于seajs模块化的合并压缩方案
05-18
基于seajs模块化的合并压缩###合并压缩前--Gruntfile.js--打包脚本--pagekage.json--依赖的npm配置--node-modules/--下载的npm--app/ //存放页面--src/ //打包前目录------seaConfig.js //Seajs配置文件------page/ ...
seaJs的模块定义和模块加载浅析
10-25
SeaJS的主要功能是定义和加载模块，以及处理模块间的依赖关系。 在SeaJS中，模块的定义使用define方法。一个典型的SeaJS模块定义如下所示： ```javascript define(function(require, exports, module) { exports....
seaJs使用教程
wdq121516的博客
03-11 912
1.第一步 下载sea.js2.在网页中引入sea.js3.引入jquery需要配置，因为jquery是amd规范seajs只能加载cmd规范中的模块通过请求而得的是一个模块，是一个对象。而不是你直接暴露的方法或者属性====================================备注：一个js文件就是一个模块，一个模块就相当于Java中的类除了exports还可以直接返回对象1.seaj...
基于JS判断iframe是否加载成功的方法(多种浏览器）
10-22
主要介绍了基于JS判断iframe是否加载成功的方法【多种浏览器】的相关资料,需要的朋友可以参考下
动态加载js、css等文件跨iframe实现
12-12
1、动态加载js，css文件(用原生js和jquery) iframe结构： frame0(父) frame2（子） frame3（子） frame2中触发事件，动态的向frame3中 加载js、css文件和 dom元素？ *同级之间可以调用，可以 通过 子-父-子 的方式调用同级 parent.parentFram(“这个方法在调用其他子farme”); 1.jquery的append() 代码如下: 速度快，同步（需要引入jquery） var oBody = document.getElementById(“frame3_id”).contentWindow.$(“body”); va
SeaJS入门教程系列之使用SeaJS（二）
hsany330的专栏
04-17 1554
要在项目中使用SeaJS，你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。 SeaJS项目目前托管在GitHub上，主页为 https://github.com/seajs/seajs/ 。可以到其git库的build目录下下载sea.js（已压缩）或sea-debug.js（未压缩）。 下载完成后放到项目的相应位置，然后在页面中通过标签引入，你就可以使用SeaJS了。
Seajs的简单使用
zhouhao620的博客
04-13 521
Seajs的规范称之为CMD规范（延迟执行），它既遵循AMD规范（提前执行），又遵循commonJs规范（同步加载）。CMD 推崇依赖就近，这套框架在使用的时候，建议我们使用commonjs规范。 一、引入 seajs 引入之后会向全局添加两个变量， 第一个是seajs，第二个是define。seajs引入文件时是以seajs所在目录为根目录的，seajs对js敏感，可以省略.js后缀。 加载 s...
使用seajs来引入js代码
lemon_LLo的博客
03-01 621
新学的引用js文件的方法 注意的是：引入jquery的代码最好放在html文件中，本文是为了说明seajs中require如何使用的，才将jquery放入seajs中的。 html中对应的代码： script type="text/javascript" src="../js/lib/sea.js">script>这里一定要引入sea.js下面才能使用seajs.use(
seajs的使用
前端小99的博客
09-09 1678
在模块文件外部想要引入一个模块文件要使用seajs.use方法 该方法接收两个参数 第一个参数是一个数组， 数组中的每一项都是一个模块文件路径（当引入的只有一个文件的时候， 可以省略数组） 第二个参数是回调函数 回调函数中的参数就是前面模块向外暴露的功能（一一对应的） 根目录： seajs引入的文件路径是以seajs所在的目录决定的（seajs所在的目录就是根目录） 通常我们要把seajs文件放在最外面与index.html文件在同一级 为了引入文件方便 seajs遵循cmd规..
(一)页面中引入seajs以及模块的加载和启动
aty
10-22 3104
本文转载自官网上"模块的加载启动#260"这篇文章，seajs官网上的文档都是中文的，大部分写的也很清楚，看看就能上手了。这里之所以转载官网文档，一个是因为自己在学习阶段，自己手动敲一遍印象会更深，一个是因为GitHub访问比较慢，所以放在自己的博客，以后看着方便点。
034 疫情数据查看.zip
最新发布
08-20
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《034 疫情数据查看》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
weixin235基于微信小程序点餐系统的设计ssm.zip
08-20
基于微信小程序点餐系统可以实现商品管理，商品评价管理，论坛帖子管理，公告管理，商品订单管理，在线充值等功能。该系统采用了SSM框架，Mysql数据库，Java语言等技术实现管理员后台。采用微信开发者工具来对用户小程序端进行了开发。
SeaJS与Velocity：前端模块化与性能优化实战探讨 - 玉伯分享
本文由湖南玉伯（王保平）撰写，标题为《SeaJS-Velocity优秀文章：前端模块化开发探索与网站性能优化实践》，作者以其深厚的技术背景，分享了他在淘宝网工作期间对SeaJS和Velocity这两种前端工具的深入理解和实践...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值