模块化之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:
1 define(function(require,exports,module){ 2 exports.sum=function(arr){ 3 var sum=0; 4 for (var i = 0; i < arr.length; i++) { 5 sum+=arr[i]; 6 } 7 return sum; 8 } 9 })
94a.js:
1
1 define(function(reqiure,exports,module){ 2 var a=require("94b"); 3 alert(a.sum([1,4,5]));//10 4 5 })
从上面看出exports是一个对象,给模块提供向外的接口的.
对于module.exports表示当前模块向外提供的接口。对module的用法就是这样的,并且和exports含义差不多。当有多个接口时候可以用module.exports.
94b.js:
1 define(function(require,exports,module){ 2 module.exports={ 3 sum:function(arr){ 4 var sum=0; 5 for (var i = 0; i < arr.length; i++) { 6 sum+=arr[i]; 7 } 8 return sum; 9 }, 10 add:function(aa,bb){ 11 return aa+bb; 12 } 13 } 15 })
此时,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 参数,因为这两个参数可以在构建阶段通过工具自动生成。
1 define('hello',['jquery'],function(require,exports,module){ 2 alert($("#id"));// object 3 })
还不是很清楚?看下面2篇博客:
SeaJS之define函数
前端模块化
转载于:https://www.cnblogs.com/panhe-xue/p/5837958.html
模块化之SeaJS(一)相关推荐
- 模块化开发seajs 配置和简单调用
模块化开发工具 seajs seajs 提供了简单.极致的模块化开发体验 seajs官网 :http://seajs.org 下面是seajs的小实例 b.js文件调用 a.js文件中的属性方法 se ...
- Modularity(模块化-CMD规范)
第四阶段:CMD规范 CMD规范是阿里的玉伯提出来的,实现js库为sea.js. 它和requirejs非常类似,即一个js文件就是一个模块, 但是CMD的加载方式更加优秀,是通过按需加载的方式,而不 ...
- 前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- js模块化html,js模块化框架
javascript模块化是什么及其优缺点介绍 如今backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而来.CommonJS.AMD.NodeJS.RequireJS ...
- 牛人,多看看他们写的东西
计算机大师 Donald E. Knuth(高德纳) 算法大师,我最崇拜的计算机科学家,没有之一!不认识高爷爷的人别说自己是学计算机的.<The Art of Computer Programm ...
- 关于前端学习和笔试面试的总结
前沿 以前总是希望在技术论坛和博客能有人关注,最近收到一些小伙伴请教问题的来信和私信,在深感荣幸的同时也深知自己技术和经验的不足,怕会误人子弟,所以现在打算以应届生的身份尽自己的一点绵薄之力给大家一点 ...
- HTML+CSS 整站 步骤
文件夹管理: CSS JS img font html 根据设计图,划分区块 ,即页面布局 重置样式 根据自己的需要,对浏览器的默认样式进行了一些重置.但要注意物极必反,因此,有用到的标签才需要进行重 ...
- 一些牛人榜样,多看看他们写的东西(后续整理牛人的blog等)
一些牛人榜样,多看看他们写的东西(后续整理牛人的blog等) 分类: 1.2.1.1 职业规划 1.2.1 政法经管 1.2.1.2 行业知识2012-06-27 22:51 5832人阅读 评论(0 ...
- 一些牛人榜样,多看看他们写的东西
计算机大师 Donald E. Knuth(高德纳) 算法大师,我最崇拜的计算机科学家,没有之一!不认识高爷爷的人别说自己是学计算机的.<The Art of Computer Programm ...
- gitub优秀的android开源项目
原文地址为http://www.trinea.cn/android/android-open-source-projects-view/,作者Trinea 主要介绍那些不错个性化的View,包括Lis ...
最新文章
- 移动互联网长连接方案实例
- eclipse git:Transport Error: Cannot get remote repository refs. invalid advertisement of
- Ehab and Path-etic MEXs CodeForces - 1325C(思维+贪心)
- 百度步行导航加poi搜索android,【百度地图】带地图显示控件、导航控件、POI查找控件...
- docker 远程连接 文件看不到_pycharm连接远程linux服务器的docker
- c语言槟编程把两个数交换,第三章管理信息系统技术基础.doc
- 关于项目404解决方法:前提条件:项目路径都是正确的
- 均值cvar模型matlab代码,VAR和cvar模型的matlab代码
- PR预设 16个毛刺效果抖音故障特效视频转场PR预设V2版本
- 完美解决failed to open stream: HTTP request failed!(file_get_contents引起的)
- Coolpad(酷派) 进入手机工厂模式
- Python 读取mgf文件
- ZJOI2018游记Round2
- Nuki智能锁安全性分析
- 北京协和医学院823计算机原理,2017年北京协和医学院病原生物学研究所823计算机原理考研仿真模拟题...
- Debian server 9.x 安装
- 前后端分离校园智能出行拼车系统
- LED32*32点阵书写屏设计方案
- MySQL如何自定义函数
- SQLite下载与基本操作