模块化开发,SesJS简单总结
一、概念:
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。
在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。
在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:define(factory);
SeaJS解决了两个问题:
1.JavaScript的模块化
2.按模块加载
SeaJS在开发中的角色:在多人协作开发时,起着后勤人员的作用,协调 文件依赖、命名冲突、按需加载的作用;
二、用法:
1.引入sea.js
2.定义模块--define
3.对外提供接口--export
4.依赖接口--require
5.调用模块--seajs.use
例:
为了让 sea.js
内部能快速获取到自身路径,推荐手动加上 id
属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>seajs的使用方法</title>
<script type="text/javascript" src="sea/sea.js" id="seajs"></script>
<script>
/*
调用模块
语法:
seajs.use(url, callback);
参数说明:
url: 调用模块的地址, url默认根目录是sea.js所有文件夹
callback: 回调函数
内部工作原理:
填入url后,seajs会异步加载url的文件, 加载完成后执行 callback;
这样就实现了按模块加载JS,也可以说是按需加载。
*/
seajs.use('./js/test1.js',function(ex){ //ex就是对外接口export
ex.tab(); function tab(){
alert('我是现写的,大家都是tab,但不冲突哦~~');
} tab(); //很好的就解决了命名冲突 }); </script>
</head> <body>
</body>
</html>
目录层级关系如下 :
test1.js 如下:
// JavaScript Document
/*
定义模块
语法:
define(function (require, exports, module){ //参数写法是固定
//your code gose here
});
参数说明:
require: 依赖的接口
exports: 对外提供的接口
module:
内部工作原理:
1.当调用require方法时,seajs会同步加载url的文件,这样就解决依赖问题了。如果想异步加载就用require.async(url, callback);
2.exports对象下包含的是对外提供的属性和方法,调用seajs.use时,callback函数的参数就是exports对象
*/
define(function(require, exports, module){ //如果依赖的是一个普通JS文件
require('./test2.js'); //如果依赖的是一个用define写的JS模块
var ex = require('./test3.js'); function tab(){
alert('我是test1模块的一个方法');
alert('test1' + a);
alert('test1' + ex.b)
} exports.tab = tab; });
test2.js 如下:
// JavaScript Document var a = '依赖test2了, 我是test2的全局变量';
test3.js 如下:
// JavaScript Document define(function(require,exports,module){ //参数写法是固定 exports.b = '依赖test3了,我是test3模块的局部变量'; });
上面说到了seajs中常用的4个方法,别外请参考管方的seajs常用的7个方法: https://github.com/seajs/seajs/issues/266
模块化开发,SesJS简单总结的更多相关文章
- seaJs模块化开发简单入门
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- iOS关于模块化开发解决方案(纯干货)
关于iOS模块化开发解决方案网上也有一些介绍,但真正落实在在具体的实例却很少看到,计划编写系统文章来介绍关于我对模块化解决方案的理解,里面会有包含到一些关于解耦.路由.封装.私有Pod管理等内容:并编 ...
- .NET/ASP.NET MVC(模块化开发AraeRegistration)
阅读目录: 1.开篇介绍 2.AreaRegistration注册路由(传递路由上下文进行模块化注册) 1]开篇介绍 ASP.NET Routing 路由功能非常强大,设计的也很巧妙:如果说ASP.N ...
- Mvc 模块化开发
在Mvc中,标准的模块化开发方式是使用Areas,每一个Area都可以注册自己的路由,使用自己的控件器与视图.但是在具体使用上它有如下两个限制 1.必须把视图文件放到主项目的Areas文件夹下才能生效 ...
- 详解JavaScript模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Asp.net Mvc模块化开发之分区扩展框架
对于一个企业级项目开发,模块化是非常重要的. 默认Mvc框架的AreaRegistration对模块化开发真的支持很好吗?真的有很多复杂系统在使用默认的分区开发的吗?我相信大部分asp.net的技术团 ...
- Asp.net Mvc模块化开发系列(目录)
模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
随机推荐
- 加载php_curl.dll和php_openssl.dll出错原因及解决办法
今天在XP下安装PHP开发环境时,需要加载php_curl.dll这个动态库,自己想当然的在php.ini里把extension=php_curl.dll打开以为就可以了.可以在apache的logs ...
- [Head First Python]3. 文件与异常:处理错误
datafile.txt Man: Is this the right room for an argument? Other Man: I've told you once. Man: No you ...
- Python之路第十一天,高级(3)-线程池
线程池 简单的线程池的实现: import queue import threading import time class ThreadPool(object): def __init__(self ...
- oracle安装报错检查操作系统版本: 必须是5.1 or 5.2。实际为 6.1未通过
oracle安装时报错,提示:操作系统版本: 必须是5.1 or 5.2.实际为 6.1未通过 , 解决方案 这里只认证5.1.5.2的OS版本,但是我的win server 2008系统版本为6.1 ...
- request.getParamer()
eturns the value of a request parameter as a String, or null if the parameter does not exist. Reques ...
- SQL Server - 聚集索引 <第六篇>
聚集索引的叶子页存储的就是表的数据.因此,表行物理上按照聚集索引列排序,因为表数据只能有一种物理顺序,所以一个表只能有一个聚集索引. 当我们创建主键约束时,如果不存在聚集索引并且该索引没有被明确指定为 ...
- C# 内存泄露
一.事件引起的内存泄露 1.不手动注销事件也不发生内存泄露的情况 我们经常会写EventHandler += AFunction; 如果没有手动注销这个Event handler类似:EventHan ...
- 窗口变化相关消息 OnSize、OnSizing和OnGetMinMaxInfo
最近用到窗口变化的一些东西,遇到几个相关的消息函数,简要分析,作为备忘. 3个消息分别是:WM_SIZE.WM_SIZING.WM_GETMINMAXINFO:分别对应相应的处理函数:OnSize.O ...
- bzoj1654 [Usaco2006 Jan]The Cow Prom 奶牛舞会
Description The N (2 <= N <= 10,000) cows are so excited: it's prom night! They are dressed in ...
- CentOS 6.5 CodeBlocks::wxWidgets安装与配置
第一步, #yum install codeblocks codeblocks-contrib codeblocks-devel 第二步,到官方下载源码包,我下的是wxX11的3.0版的. #tar ...