模块化之SeaJS(一)
模块化(之SeaJS)
刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢?
不要急,博主正是带着这三个问题来写这篇文章的。
一,什么是模块化?
在前端开发领域,一个模块,可以是JS 模块,也可以是 CSS 模块,或是 Template 等模块。在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块):模块是一段 JavaScript 代码,具有统一的基本书写格式。模块之间通过基本交互规则,能彼此引用,协同工作(怎么书写以及交互规则就是SeaJS的CMD规范,我将放在第三个问题里一起总结)。
二,模块化的目的是什么?
目的:模块化的目标是支持大规模的程序开发,处理分散愿中代码的组装,并且能让代码正确运行,哪怕包含了作者所不期望出现的模块化代码,也可以正确的执行。
三,怎么实现模块化?
如果要认真说起来那得是很久很久以前.....好吧!首先是CommonJS规范的问世标志着javascript模块化正式登上舞台,然后有requirejs的AMD规范以及今天讨论的Seajs的CMD规范。所谓的规范是:有基本的书写格式和基本的交互规则。
Seajs的CMD规范中经常使用的 API 只有 define
, require
, require.async
, exports
,module.exports,了解了这5个,就会基本了解了seajs以及它的使用,我们对此分别做出简单合理的解释。
define:
define的英文本来就是定义的意思。在seajs中它是一个全局的函数。在seajs中一个js文件就是一个模块,而定义一个模块就是用define。define的用法:
define(factory);其中factory可以是对象,字符串,函数!当为字符串和对象时候,表示模块的接口就是该对象,字符串!
factory为函数时候,表示是模块的构造函数。
define(function(require,exports,module){
//模块代码
})
其中require是一个函数,接受模块标识作为唯一参数,用来获取其他模块提供的接口(在书写模块代码时,必须遵循规则。只要把 require 看做是语法关键字就好啦。require 的参数值必须是字符串直接量,不要重命名require 函数,或在任何作用域中给require 重新赋值.模块 factory 构造方法的第一个参数必须命名为 require )。
比喻我在94b.js文件定义一个模块接口,94a.js用requirejs获取此接口。
94b.js:
define(function(require,exports,module){
exports.sum=function(arr){
var sum=0;
for (var i = 0; i < arr.length; i++) {
sum+=arr[i];
}
return sum;
}
})
94a.js:
define(function(reqiure,exports,module){
var a=require("94b");
alert(a.sum([1,4,5]));// })
从上面看出exports是一个对象,给模块提供向外的接口的.
对于module.exports表示当前模块向外提供的接口。对module的用法就是这样的,并且和exports含义差不多。当有多个接口时候可以用module.exports.
94b.js:
define(function(require,exports,module){
module.exports={
sum:function(arr){
var sum=0;
for (var i = 0; i < arr.length; i++) {
sum+=arr[i];
}
return sum;
},
add:function(aa,bb){
return aa+bb;
}
}
})
此时,94a.js
1 define(function(reqiure,exports,module){
2 var a=require("94b");
3 alert(a.sum([1,4,5]));//10
4 alert(a.add(1,5)); //6
5 })
define('id',deps,function)
define 也可以接受两个以上参数。字符串 id 表示模块标识,数组 deps 是模块依赖。在开发阶段,推荐不要手写 id 和 deps 参数,因为这两个参数可以在构建阶段通过工具自动生成。
define('hello',['jquery'],function(require,exports,module){
alert($("#id"));// object
})
还不是很清楚?看下面2篇博客:
SeaJS之define函数
模块化之SeaJS(一)的更多相关文章
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- 转: 模块化开发框架seajs简介
JavaScript模块化开发库之SeaJSSeaJS由国内的牛人lifesinger开发.目前版本是1.1.1,源码不到1500行,压缩后才4k,质量极高.这篇会讲述SeaJS的一些基本用法,不会面 ...
- 前端模块化之seajs
决心从java后台转做前端有些日子了,不断关注前端知识.从学习了nodejs的 require按需加载模块的思路之后感觉js的世界变得好美好啊,前几天无意看到了seajs,国内大牛的作品,专为前端js ...
- JavaScript 模块化及 SeaJs 源码分析
网页的结构越来越复杂,简直可以看做一个简单APP,如果还像以前那样把所有的代码都放到一个文件里面会有一些问题: 全局变量互相影响 JavaScript文件变大,影响加载速度 结构混乱.很难维护 和后端 ...
- 模块化之seaJs学习和使用
使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以 ...
- 模块化之SeaJS(二)
Seajs 此文来自 予舍驿站 提供简单.极致的模块化开发体验 非官方文档,整理来自己官方文档的文字与实例,方便速查. seajs.configObject aliasObject 别名配置,配置之后 ...
- Js模块化开发--seajs和gruntJs
1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...
- JS模块化库seajs体验
seajs http://seajs.org/docs/en.html#intro https://github.com/seajs/seajs/releases Extremely simple e ...
- 模块化开发(seajs)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- SSH整合简单例子
说明:简单SSH整合,struts版本2.3.32,spring版本3.2.9,hibernate版本3.6.10 一.开发步骤 1 引jar包,创建用户library.使用的包和之前博文相同,可以参 ...
- Laravel建站03--建立前台文章列表和文章详情
经过了前面的开发环境搭建和数据库配置.git配置的准备工作以后,现在可以开始动作做点什么了. 先从简单的开始,那就先来个文章列表和详情页吧. 这期间可以学习到路由.建立model.controller ...
- nekohtml转换html时标签变大写的问题
public static Document transferByNeko(InputStream stream, String charset) { if (stream == null) retu ...
- c#各类型转byte[]或转回
var tmp = BitConverter.ToInt32(new byte[]{...}); var bytes = BitConverter.GetBytes(tmp); 而String转byt ...
- Garbage First(G1)垃圾收集器
1. 概述 G1(Garbage First)垃圾收集器是当今垃圾回收技术最前沿的成果之一.早在JDK7就已加入JVM的收集器大家庭中,成为HotSpot重点发展的垃圾回收技术.同优秀的CMS垃圾回收 ...
- Atitit php序列化 php的serialize序列化和json序列化
Atitit php序列化 php的serialize序列化和json序列化 PHP 对不同类型的数据用不同的字母进行标示,Yahoo 开发网站提供的Using Serialized PHP with ...
- 强大的Vivado IP工具——自定义IP的使用
首先,要指出,本文不描述任何IP的功能与使用. 在开发一个大型FPGA项目时,多人协作是必不可少的.这个时候,如何提交设计给负责集成的人,是项目开发中最关键的问题之一. 常用的一个方法是,提交网表 ...
- makefile之short函数
函数名称:排序函数-$(sort LIST) 函数功能:给字串"LIST"中的单词以首字母为准进行排序(升序),并去掉重复的单词. 返回值:空格分割的没有重复单词的字串. 函数说明 ...
- 小马哥课堂-统计学-t分布
T distribution 定义 在概率论和统计学中,学生t-分布(t-distribution),可简称为t分布,用于根据小样本来估计 呈正态分布且方差未知的总体的均值.如果总体方差已知(例如在样 ...
- iOS开发多线程篇 05 —GCD介绍
iOS开发多线程篇—GCD介绍 一.简单介绍 1.什么是GCD? 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 2.GCD的优势 G ...