【SeaJS】【1】初识SeaJS
最近使用JS进行前端开发,在网上翻阅时发现SeaJS,据宣传资料它可以解决命名空间冲突,可以异步加载提高HTML的解析效率,且能遵循Keep It Simple, Stupid理念,把每个JS文件进行模块化管理,解决复杂的依赖关系,具体可参见https://github.com/seajs/seajs/issues/547。
关注到如此优点,利用工作之余学习了一下官方示例,并读了一下源码,深感觉是一个不错的框架,期望后续有机会加入开源团队。本章在Window操作系统上仅简单地介绍一下官方示例,展示一下SeaJS的基本使用。
一、官方示例
1. 把sea.js放置到E:\seajs\officialsample\sea-modules\seajs\seajs\2.1.1目录
2. 把jquery.js放置到E:\seajs\officialsample\sea-modules\jquery\jquery\1.10.1目录
3. 把style.css和spinning.js放置到E:\seajs\officialsample\static\hello\src目录
4. 在E:\seajs\officialsample\app下创建hello.html
4.1 该html在div中引入11个图片,代码如下图所示:
4.2 为了使用sea.js,需要在html中引入sea.js
<script src="../sea-modules/seajs/seajs/2.1.1/sea.js"></script>
4.3 由于控制图片元素需要使用到jquery.js,所以通过SeaJS的API引入jquery.js
<script>
seajs.config({
base: "../sea-modules/",
alias:{
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
</script>
4.4 图片的渲染控制文件是spinning.js,为了使代码更加清晰,这里引用了main.js
seajs.use("../static/hello/src/main");
5. 在E:\seajs\officialsample\static\hello\src下创建main.js
define(function(require){
var Spinning = require("./spinning");
var s = new Spinning("#container");
s.render();
});
6. 在浏览器中打开hello.html文件,效果图如下:
二、官方示例简介
1. 为了节省学习官方示例时间,大家可以从附件中下载压缩包,解压后运行即可。
2. 为了让hello.html中的图片有转动效果,需要使用spinning.js管理这些<img>元素。同时在spinning.js中需要通过JQuery获取<img>元素,那么通常情况下在hello.html中要引入spinning.js和jquery.js,且jquery.js要在spinning.js之前加载,类似:
<script src="../sea-modules/jquery/jquery/1.10.1/jquery.js"></script>
<script src="../static/hello/src/spinning.js"></script>
但官方示例中并没有这样做,而只是引用了一个sea.js文件,为了使用jquery.js,这里调用了SeaJS的config API类似:
<script src="../sea-modules/seajs/seajs/2.1.1/sea.js"></script>
<script>
seajs.config({
base: "../sea-modules/",
alias:{
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
</script>
3. 为了使代码逻辑更清晰,使用了main.js管理spinning.js。同时为了让sea.js认识main.js,必须使用seajs.use API且按SeaJS的要求定义main.js。类似:
seajs.use("../static/hello/src/main");
define(function(require){
require("./spinning"); // 引入依赖模块
var s = new Spinning("#container");
s.render();
});
附件:http://down.51cto.com/data/2363213
本文转自qingkechina 51CTO博客,原文链接:http://blog.51cto.com/qingkechina/1257600,如需转载请自行联系原作者
【SeaJS】【1】初识SeaJS相关推荐
- seajs html 缓存,Seajs禁用缓存
使用seajs模块化,因为浏览器缓存及seasj本身的缓存,调试代码时需要不停的刷新页面,不方便调试,可按如下方法在开发阶段让 浏览器缓存及seajs缓存失效,提高开发调试的效率. 我使用的版本为 s ...
- seajs引入html,seajs.html
RongCloud Web SDK with Sea.js 获取源码 seajs demo seajs文档:https://seajs.github.io/seajs/docs/#docs " ...
- seajs引入html,SeaJS:一个适用于 Web 浏览器端的模块加载器
什么是SeaJS? SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Defini ...
- 高性能javascript 文件加载阻塞
高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序: 如果将脚本放在head内,那么再脚本执行 ...
- 【SeaJS】【3】seajs.data相关的源码阅读
在SeaJS官网上推荐了源码阅读顺序,本文并没有采用这个顺序,而是按个人习惯以调试官方示例的方式进行源码阅读.早期版本作者玉伯使用了几个闭包形式,本文源码版本为2.1.1,它的编码方式个人认为更加脚本 ...
- 使用SeaJS实现模块化JavaScript开发
2019独角兽企业重金招聘Python工程师标准>>> 前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加 ...
- seaJs api 帮助文档
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
- 使用SeaJS实现模块化JavaScript开发【转】
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
- 转: seajs手册与文档之 -- 模块标识
目录 模块标识 相对标识 顶级标识 普通路径 文件后缀的提示 模块标识 模块标识是一个字符串,用来标识模块.在 require. require.async 等加载函数中,第一个参数都是模块标识.de ...
最新文章
- windows服务器连接linux nfs,windows设置通过NFS连接到Linux共享数据
- Python忽略Warning输出
- python编译安装pyaudio
- Web群集与日志管理Haproxy搭建
- web.xml与index.html
- Redis(四):String字符串数据类型详解
- 分别用Comparable和Comparator两个接口对下列四位同学的成绩做降序排序,如果成绩一样, 那在成绩排序的基础上按照年龄由小到大排序。 姓名(String
- 本地添加Maven管理
- explode php,php中的explode()函数实例介绍
- Selenium定位多个iframe嵌套中的元素
- tensorflow stack unstack操作
- Win32++ Home Page
- python运维系统模板,Python自动化运维之改造网页模板
- 千杯酒中检测那一杯毒酒的问题及思考
- c语言自学考1课后答案,C语言理论练习题(1)及参考答案
- 浅析我对Web(淘宝网)导航栏的深入理解
- 【Matlab】数据插值
- 计算机软件侵害,如何认定侵害计算机软件著作权?
- 修改文件与文件提交--乐字节Java
- 匹兹堡大学申请条件计算机科学,匹兹堡大学工程学院计算机科学专业申请条件...