seajs快速了解
详情请点击原文
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。
SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯。
特点
SeaJS 追求简单、自然的代码书写和组织方式,具有以下核心特性:
- 简单友好的模块定义规范:SeaJS 遵循CMD规范,可以像Node.js一般书写模块代码。
- 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
使用
SeaJS是为了实现JavaScript的模块化的,所以在 SeaJS 中,所有 JavaScript 文件都应该用模块的形式来书写,并且一个文件只包含一个模块。它的操作也是围绕着模块来进行。
1.定义模块——defined
define(id, dependencies,function(require, exports, module) {
// 模块代码
});
- id:当前模块的唯一标识。该参数可选。如果没有指定,默认为模块所在文件的访问路径。如果指定的话, 必须是顶级或绝对标识(不能是相对标识)。
- dependencies:当前模块所依赖的模块,是一个由模块标识组成的数组。该参数可选。
- fn:模块的工厂函数。模块初始化时,会调用且仅调用一次该工厂函数。
- require:用来获取指定模块的接口
define(function(require) {
// 获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
});
+ require.async:用来在模块内部异步加载一个或多个模块。
``` javascript
define(function(require) {
// 异步加载多个模块,在加载完成时,执行回调
require.async(['./c', './d'], function(c, d) {
c.doSomething();
d.doSomething();
});
});
```
2.配置——seajs.config
seajs.config({
// 设置路径,方便跨目录调用
paths: {
'arale': 'https://a.alipayobjects.com/arale',
'jquery': 'https://a.alipayobjects.com/jquery'
},
// 设置别名,方便调用
alias: {
'class': 'arale/class/1.0.0/class',
'jquery': 'jquery/jquery/1.10.1/jquery'
}
});
3.加载模块——seajs.use
/ 加载一个模块
seajs.use('./a');
// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
a.doSomething();
});
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
});
seajs快速了解的更多相关文章
- seajs简记
参考seajs快速入门 一.前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用通过exports暴露接口通过require引入依赖 二.Sea.js 的常 ...
- 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范
常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- 转: seajs手册与文档之 -- 快速参考 ( ~~useful )
目录 快速参考 seajs.use seajs.config define require require.async exports module.exports 快速参考 该页面列举了 SeaJS ...
- Seajs是什么及sea.js 由来,特点以及优势
Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享 1 ...
- Turtle Online:致力于打造超接地气的PC前端架构,组件+API,快速搭建前端开发
架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...
- 第四课:seajs的模块编译_compile过程
最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 1 ...
- Seajs教程
API 快速参考 该页面列举了 Sea.js 的常用 API.只要掌握这些用法,就可以娴熟地进行模块化开发. seajs.config 用来对 Sea.js 进行配置. seajs.config({ ...
- 一步步学会使用SeaJS(转)
原文出处:一步步学会使用SeaJS 2.0 本文分为以下8步,熟悉之后就能够熟练使用SeaJS,从此之后你的生活会变得更加轻松愉悦! 1.SeaJS是什么? 2.下载并检阅SeaJS 3.建立工程和各 ...
随机推荐
- Android之TextView文字绘制流程
一:TextView的onDraw()方法: 1.第一句restartMarqueeIfNeeded()绘制字幕滚动. protected void onDraw(Canvas canvas) { r ...
- PowerPoint 打开文档发现.pptx中胡内容有问题
一.问题的提出 有一个文件,在window 7操作系统中通过邮箱地址保存到本地,结果打开的时候出现[PowerPoint 打开文档发现 文件.pptx中胡内容有问题] 然后提示[如果您信任此演示文稿的 ...
- 理解RxJava:(二)Operator,Operator
在第一部分,我讲解了RxJava的基本结构,也介绍了map()操作.然而,我能理解你仍旧不会选择使用Rxjava--你仍然还有很多东西没有学到.但是这个情况将很快得到改变.Rxjava一大部分的能力是 ...
- 从头构建自己的Linux系统
2012-09-10 在博文“Linux系统启动过程分析”中我们了解了linux系统的启动流程,今天我们就来手动一步一步从头来构建一个最小的linux系统,然后用模拟器将其加载起来.常见 ...
- spring 启动流程
AbstractApplicationContext 分析 启动流程 // Prepare this context for refreshing.prepareRefresh(); 1. // In ...
- VMware下OS X Yosemite安装VMsvga2桌面黑屏解决方法
VMsvga2目前并不支持Yosemite,如果安装的话进入桌面除了顶部菜单,全部黑屏.通过顶部菜单打开的大部分应用都会立刻奔溃关闭.参考以下步骤可以解决问题: 1.下载VMsvga2的uninsta ...
- matlab processing for video
[filename,pathname,fileindex]=uigetfile('*.avi','请选择一个Avi文件'); video_info=aviinfo([pathname filename ...
- 没有找到cxcore100.dll,因此这个应用程序未能启动,重新安装应用程序可能会修复此问题
第一种情况: 出现这个问题多数是因为“环境变量PATH”未设置,虽然你可能在安装的过程中勾选了Add <...>\OpenCV\bin to the system PATH项!安装Open ...
- 【转】Velocity模板(VM)语言介绍
http://www.blogjava.net/caizh2009/archive/2010/08/20/329495.html Velocity是什么? Velocity是一个基于java的模板引擎 ...
- Unity3D 纹理偏移(TextureOffset)浅析
首先,给出圣典的解释: Material.mainTextureOffset 主纹理偏移量 var mainTextureOffset : Vector2 Description描述 The text ...