Sea.js入门
本文只是seajs的入门贴。要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇:
下面本文开始:
seajs的价值
原生javascript的一个弱项,就是不支持模块化,说白了就是没有其他语言的import,include等语句。所以开发者就只有2个选择:把所有的东西写到一起,或者通过全局变量来交互
这至少造成以下几个问题:
1、污染全局变量,容易发生命名空间冲突,难以维护
2、无法按需加载
由于javascript官方迟迟未能解决这些问题,所以就有民间的社区提出标准,希望能自行解决,弥补语言的不足。主要有2种规范,一种是 CommonJS提出的CMD规范,另一种是AMD规范,server端的node就是CMD的一种实现,seajs实现的也是CMD规范。所以熟悉 node的用户会发现,seajs的API和node的API非常类似,这就是因为它们是同一种规范的不同实现
关于seajs的价值,这篇帖子说得更加详细:why seajs
seajs的例子
官网上的5分钟入门例子也很简单,不过本文再简化一点,用一个更简单的例子进行说明:
目录结构简化后是这样的:
helloworld.html:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Hello Sea.js</title>
- </head>
- <body>
- <div id="thediv">
- <p>hello world</p>
- </div>
- <script src="../javascript/sea.js"></script>
- <script>
- seajs.config({
- alias: {
- "jquery": "jquery-debug.js"
- }
- });
- seajs.use("../javascript/main");
- </script>
- </body>
- </html>
首先用<script>标签引入了seajs,并且要放在第一行。然后这行代码是入口:
- seajs.use("../javascript/main");
加载seajs以后,会引进一个唯一的全局变量seajs,这是无法避免的,除非是一次性执行的匿名函数,否则单全局变量模式已经是最好的结果。然后seajs上有一个use方法,是启动其他模块的入口方法,这里就是启动了main.jsmain.js
- define(function (require, exports, module) {
- var module1 = require("./module1");
- alert(module1.add(1, 2));
- })
实际上use()和require()方法非常类似,不过官方推荐的最佳实践是,只把use()作为启动的入口方法,后续的模块导入都用require()来完成熟悉node的用户会觉得非常眼熟,define方法是seajs自己的实现方式,require,exports,module都是CMD规范的 设计,所以跟在node里是一样的。所有的seajs module,都应该写在define方法的factory function里
上面这段代码就引入了另一个模块module1,然后调用了其上的一个方法
module1.js
- define(function (require, exports, module) {
- exports.add = function (a, b) {
- return a + b;
- }
- var $ = require("jquery");
- $("#thediv").click(function () {
- alert("on click");
- });
- })
这里又看到了熟悉的exports,导出了add()函数,并引用了jQuery框架,给DOM元素绑定了一个事件这里有一点要注意,就是对jQuery进行了CMD改造(也就是导出了变量$),这里有个小坑,后面会说
factory function有3个参数,分别是require,exports,module,作用跟node里是完全一样的。但是还有另外一种写法:
- define(function () {
- return {sayHello: function () {
- alert("hi there");
- }};
- });
这个factory function没有任何参数,直接返回了导出的对象。这个叫做return语法,不过我用得比较少seajs的例子就到此为止了,确实非常易用
与node module的比较
集成jQuery的一个坑
- var $ = require("jquery");
$的值一直是null,百思不得其解。在官方的GitHub issue上,这个问题也有广泛的讨论。本质的原因在于seajs有一个路径和ID匹配的原则:著名的#930
- var $ = require("jquery-debug");// path是"jquery-debug"
而jquery中的代码:
- define("jquery/jquery/1.10.1/jquery-debug", [], function () { return jQuery; } );// module_id是"jquery/jquery/1.10.1/jquery-debug"
我移动了文件路径以后,path和module_id匹配不上,所以就失败了
- define("jquery-debug.js",[],function(){return jQuery});
或者
- define(function(){return jQuery});
就行了,但是对于不熟悉#930的用户来说,这确实是不大不小的一个坑
Sea.js入门的更多相关文章
- sea.js 入门
上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...
- Sea.Js使用入门
1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // ...
- sea.js 个人入门
玉伯 : http://seajs.org/docs/ 说这两个JS 必须提到AMD.commonjs两种不同的规范: 奇舞团:http://www.75team.com/archives/882 知 ...
- 深入学习sea.js
入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/ ...
- sea.js模块化编程
* 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- 解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
随机推荐
- 一,U盘安装 CentOS 6.5 minimal
U盘安装盘: CentOS-6.5的版本有四个,分别是: 1.CentOS-6.5-i386-netinstall.iso 通过网络安装的,需要联网 2.CentOS-6.5-i386-minimal ...
- DevExpress后置代码中初始化SQL数据源的方法
//初始化SQL数据源的提供者和连接字符串 函数 OK public virtual void InitSqlDataSource_ConStr(SqlDataSource sql_ds) { Con ...
- WPF DragDrop事件元素跟随
前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
- Python学习教程(learning Python)--2.3.4Python函数返回值
本节讨论Python函数返回值问题. Python和C语言一样,也可以在函数结束时返回一个值.但在定义自己的Python函数时,是不需要指定返回值数据类型的,这和Python不关心变量的数据类型是一致 ...
- Html5 Canvas一个简单的画笔例子
相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...
- java读取各类型的文件
java读取各类型的文件 用到的几个包 bcmail-jdk14-132.jar/bcprov-jdk14-132.jar/checkstyle-all-4.2.jar/FontBox-0.1.0-d ...
- 6月24日AppCan移动开发者大会礼品清单遭泄露
6月24日,第一届AppCan移动开发者大会将在北京国际会议中心举办,大会以”平台之上,应用无限”为主题,全景展现移动应用发展趋势.AppCan 移动技术蓝图及80万开发者的技术实践成果. 大会现场礼 ...
- 九度oj 1554 区间问题
原题链接:http://ac.jobdu.com/problem.php?pid=1554 由数列的前缀和:$\begin{align*}\Large{} S_n &=\Large{}\sum ...
- android-监听网络状态
1.注册一个广播接收器,监听网络状态private void Start() { IntentFilter filter = new IntentFilter(); filter.addAction( ...
- iOS另类的内存管理
iOS的内存管理算是老生常谈的问题了,我们写iOS的时候无时无刻不在涉及到内存管理.从开始的MRR(manual retain-release)到后来ARC(Automatic Reference C ...