JS模块化库seajs体验
seajs
http://seajs.org/docs/en.html#intro
https://github.com/seajs/seajs/releases
Extremely simple experience of modular development
Why use Sea.js ?
Sea.js's pursuit of a simple, natural coding and organization,has the following key aspects:
- The definition of a module specification is simple and friendly:Sea.js follow the CMD specification,as the Node.js module style.
- Natural and intuitive code organization:Automatically load dependence, configuration is simple and clear,so that we can more enjoy coding.
Sea.js provides common plug-ins,they are very helpful for the development of debugging and performance optimization,and has a rich extensible interface.
模块的声明非常 简单 和 友好。
自然和直觉性的代码组织方式。自动依赖下载 和 配置简单明了。
兼容性:
Compatibility
Sea.js has perfect test cases, compatible with all major browsers:
Chrome 3+ ✔
Firefox 2+ ✔
Safari 3.2+ ✔
Opera 10+ ✔
IE 5.5+ ✔Sea.js can be run in Mobile terminal,including Hybrid Mode App. In theory, Sea.js can be run in any browser.
CMD
http://wiki.commonjs.org/wiki/Modules/1.1.1
CMD规范模块定义格式
//Inside b.js:
define(function(require, exports, module) {
//If "a" has used exports, then we have a real
//object reference here. However, we cannot use
//any of "a"'s properties until after "b" returns a value.
var a = require("a"); exports.foo = function () {
return a.bar();
};
});
AMD规范:
http://www.requirejs.org/docs/api.html#funcmodule
//Inside b.js:
define(["require", "a"],
function(require, a) {
//"a" in this case will be null if "a" also asked for "b",
//a circular dependency.
return function(title) {
return require("a").doSomething();
}
}
);
实验
https://github.com/fanqingsong/code-snippet/tree/master/web/seajs_demo
one.js
//Inside one.js:
define(function(require, exports, module) {
var two = require('./two.js');exports.sayHello = function() {
console.log('one module called');
};exports.callTwo = function() {
two.sayHello();
};
}
);
two.js
//Inside two.js:
define(function(require, exports, module) {
exports.sayHello = function() {
console.log('two module called');
};
}
);
demo.html
<html>
<head>
<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script src="./sea.js"></script>
<style></style>
<script>
seajs.use('one', function(one) {
one.sayHello();
one.callTwo();
});
</script>
</head>
<body>
<h1>hello world!</h1>
</body>
</html>
相比requirejs,更加直接,使用更加简单。
JS模块化库seajs体验的更多相关文章
- Js模块化开发--seajs和gruntJs
1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...
- JS模块化规范CMD之SeaJS
1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- JS模块化开发(三)——seaJs+grunt
1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- js模块化AMD、CMD、ES6
AMD CMD ES6模块化 各个模块化规范对比理解 一.AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范,commonjs采用的用同步加载方式, ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- js模块化历程
这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...
- AMD and CMD are dead之js模块化黑魔法
var define, require, define2, require2; typeof JSON != "object" && (JSON = {}), fu ...
随机推荐
- Yahoo!网站性能最佳体验的34条黄金守则
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是 ...
- git两种合并方法 比较merge和rebase
18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...
- InterBase数据库迁移到MySQL(说明)
刚刚到公司1周便接到了第一个需求,进过了几天的沟通明白了是从gbk文件中恢复InterBase数据库,然后再将恢复到数据库中的数据导出到远程的MySQL数据库中,拿到需求先分步去看问题了,问题大致可分 ...
- iOS 评论APP撰写评论
---- iOS 应用评分 UIAlertAction *alertAction1 = [UIAlertAction actionWithTitle:@"方式1 跳转到app商店" ...
- java enum(枚举)使用详解 + 总结
enum 的全称为 enumeration, 是 JDK 1.5 中引入的新特性,存放在 java.lang 包中. 下面是我在使用 enum 过程中的一些经验和总结,主要包括如下内容: 1. 原始 ...
- 如何在WORD2010中取消自动编号?
如何在WORD2010中取消自动编号? 使用WORD2010有一个很大的问题就是WORD2010的自动编号问题,WORD2010的自动编号是符合外国人的写作习惯的,对中国人来说不适用. WORD201 ...
- [LintCode] Intersection of Two Arrays 两个数组相交
Given two arrays, write a function to compute their intersection.Notice Each element in the result m ...
- hive中导入json格式的数据(hive分区表)
hive中建立外部分区表,外部数据格式是json的如何导入呢? json格式的数据表不必含有分区字段,只需要在hdfs目录结构中体现出分区就可以了 This is all according to t ...
- hdu Sudoku Killer
简单的dfs,主要就是每个?处填的值是否满足条件的判断.这道题感觉考察的是输出格式的控制. #include"iostream" #include"stdio.h&quo ...
- 温故而知新 OOP
设计原则1: 找出应用中可能需要发生改变的地方,把它们独立出来,不要和那些不需要变化的代码混在一起换句话说,如果每次新的需求一来,都会使某方面的代码发生变化,此时你就可以确定,这部分代码属于不稳定代码 ...