一步步学会使用SeaJS(转)
原文出处:一步步学会使用SeaJS 2.0
1、SeaJS是什么?
--------------------------------------------------
1、SeaJS是什么?
我知道你看到那么长的文章肯定会望而却步,也许你是希望能够快速开始敲代码(程序员的通病……)。没关系,如果实在读不下去,只要记住模块化要解决的问题即可:命名冲突、文件依赖关系。
这两个闹心的问题应该遇到过吧,如果没遇到过……我只能说你太牛X了
2、下载并检阅SeaJS
3、建立工程和各种目录
(我使用了Sublime2.0,在这里强烈推荐)
注意:SeaJS会根据自身的URI来决定URL base,而SeaJS在加载其他模块的时候会根据这个URL base来计算路径。SeaJS会忽略掉seajs、seajs/2.0.0/seajs这两种目录,照上述的目录结构,此处的URL base就是HelloSeaJS/assets/scripts,这样其他模块就可以与seajs目录并行存放。
4、引入SeaJS库
b. SeaJS内部通过document.getElementById("seajsnode")来获取这个script标签(其实SeaJS内部还有一种方式,不过另一种方式的效率比较低,所以不推荐,如果有兴趣,可以看一下源码https://github.com/seajs/seajs/blob/master/src/util-path.js)
5、编写自己的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
define( function (require,exports,module){ var util = {}; var colorRange = [ '0' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , 'A' , 'B' , 'C' , 'D' , 'E' , 'F' ]; util.randomColor = function (){ return '#' + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)]; }; var helloSeaJS = document.getElementById( 'hello-seajs' ); helloSeaJS.style.color = util.randomColor(); window.setInterval( function (){ helloSeaJS.style.color = util.randomColor(); },1500); }); |
随着代码的增多,你肯定会遇到util越来越多的情况。很好,这样看来,我们就有了两个模块:util模块和application模块。SeaJS中,文件即模块,所以当然要将其分为两个文件。先看util.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
define( function (require,exports,module){ var util = {}; var colorRange = [ '0' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , 'A' , 'B' , 'C' , 'D' , 'E' , 'F' ]; util.randomColor = function (){ return '#' + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)] + colorRange[Math.floor(Math.random() * 16)]; }; module.exports = util; }); |
再看application.js:
1
2
3
4
5
6
7
8
9
10
|
define( function (require,exports,module){ var util = require( './util' ); var helloSeaJS = document.getElementById( 'hello-seajs' ); helloSeaJS.style.color = util.randomColor(); window.setInterval( function (){ helloSeaJS.style.color = util.randomColor(); },1500); }); |
我们看到var util = require('./util');这句比较特殊。这句就是在说,我application模块由于业务需要,想请util模块来帮忙,所以把util给require进来。
6、引入自己的代码
你看不到效果吧?这就是这个小节存在的理由。
那么,加载路径就是HelloSeaJS/assets/scripts/application/application.js(SeaJS会自动加上.js后缀)
如果你对你的程序有完全的控制权,建议使用data-main的方式,这样整个页面就只有一段script标签!作为一名前端开发人员,我不得不惊叹:干净、完美!
7、压缩合并
压缩后之后,require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的,所以,require变量不能被简化。
SeaJS在2.0之前,是采用SPM作为压缩合并工具的,到了2.0,改为Grunt.js,SPM变为包管理工具,类似NPM(不知道NPM?Google一下吧)
……
Grunt最核心的就两个部分,package.json、Gruntfile.js。
a. package.json
1
2
3
4
5
6
7
8
9
10
11
12
|
{ "name" : "HelloSeaJS", "version" : "1.0.0", "author" : "Qifeng Liu", "devDependencies" : { "grunt" : "0.4.1", "grunt-cmd-transport" : "0.1.1", "grunt-cmd-concat" : "0.1.0", "grunt-contrib-uglify" : "0.2.0", "grunt-contrib-clean" : "0.4.0" } } |
grunt-contrib-clean模块用来清除临时目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
module.exports = function (grunt){ grunt.initConfig({ transport : { options : { format : 'application/dist/{{filename}}' //生成的id的格式 }, application : { files : { '.build' : [ 'application.js' , 'util.js' ] //将application.js、util.js合并且提取依赖,生成id,之后放在.build目录下 } } }, concat : { main : { options : { relative : true }, files : { 'dist/application.js' : [ '.build/application.js' ], // 合并.build/application.js文件到dist/application.js中 'dist/application-debug.js' : [ '.build/application-debug.js' ] } } }, uglify : { main : { files : { 'dist/application.js' : [ 'dist/application.js' ] //对dist/application.js进行压缩,之后存入dist/application.js文件 } } }, clean : { build : [ '.build' ] //清除.build文件 } }); grunt.loadNpmTasks( 'grunt-cmd-transport' ); grunt.loadNpmTasks( 'grunt-cmd-concat' ); grunt.loadNpmTasks( 'grunt-contrib-uglify' ); grunt.loadNpmTasks( 'grunt-contrib-clean' ); grunt.registerTask( 'build' ,[ 'transport' , 'concat' , 'uglify' , 'clean' ]) }; |
该命令会运行grunt.registerTask方法中指定的任务
8、总结展望
最后,感谢SeaJS作者玉伯。
PS,本文参考了SeaJS提供的使用范例https://github.com/seajs/examples/tree/master/static/hello
一步步学会使用SeaJS(转)的更多相关文章
- 一步步学会用docker部署应用(nodejs版)
一步步学会用docker部署应用 docker是一种虚拟化技术,可以在内核层隔离资源.因此对于上层应用而言,采用docker技术可以达到类似于虚拟机的沙盒环境.这大大简化了应用部署,让运维人员无需陷入 ...
- web前端知识总结
前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...
- FMDB 二次封装工具类,让你快速学会封装,集成数据库
来源:StrivEver 链接:http://www.jianshu.com/p/4c77aee0b41c 上个版本为了增加用户体验,部分页面集成了离线缓存数据功能,于是就在项目里使用了数据库管理离线 ...
- 回顾:前端模块化和AMD、CMD规范(全)
先列举下一些著名言论: "我想定义一个 each 方法遍历对象,但页头的 util.js 里已经定义了一个,我的只能叫 eachObject 了,好无奈." "Requi ...
- 实战MEF(2):导出&导入
上一文中,我们大致明白了,利用MEF框架实现自动扫描并组装扩展组件的思路.本文我们继续前进,从最初的定义公共接口开始,一步步学会如何使用MEF. 在上一文中我们知道,对于每一个实现了公共规范的扩展组件 ...
- Android图片加载库:最全面的Picasso讲解
前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...
- http://www.cnblogs.com/20135131zxy/
一.实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 二.实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门( ...
- 从零开始--系统深入学习IOS(使用Swift---带链接)
这是一篇面向IOS新手的文档.同时提供一些系统知识的链接,让你系统学习IOS.它提供一些信息帮助你采用技术和编程接口来开发苹果软件产品,本人不保证会在将来更新.学习它,需要你掌握一些基本的编程知识 1 ...
- IOS开发之实现App消息推送(最新)
好久没有写过博客啦,今天就由本菜鸟给大家做一个简单的IOSApp消息推送教程吧!一切从0开始,包括XCode6, IOS8, 以及苹果开发者中心最新如何注册应用,申请证书以及下载配置概要文件,相信很多 ...
随机推荐
- OpenStack点滴02-WSGI
OpenStack对外提供REST API,那么REST API是如何建立起来的呢? OpenStack用了一种叫WSGI(Web Service Gateway Interface)的东西,WSGI ...
- salt-grains
自定义grains 的方法 1: 在minion 的配置文件夹 /etc/salt/minion.d 下面包含的配置文件 grains.conf 2: 在salt的安装目录中建立grains 文件 ...
- UI、ID、UE和GUI,这些都是什么
在网页和应用设计领域中,我们经常会听到人们用这些英文缩写描述设计工作,那么它们各自代表什么含义?具体的工作.方向和区别是什么呢? 下面让我们先来看看它们的英文全称和基本概念. UI(User Inte ...
- 为什么我要使用一个20年前的IBM老键盘
为什么我要使用一个20年前的IBM老键盘 发表在 心得体会 | 3条评论 几天前,我在网上发了一张图片,想炫耀了一下我的新MacBook Pro笔记本强悍的多屏功能.没人感兴趣.但图上的那个老键盘却得 ...
- CentOS下安装postgresql
一.说明 postgresql版本:9.4.1 安装包: postgresql94-server-9.4.1-1PGDG.rhel6.x86_64.rpm postgresql94-libs-9.4. ...
- C++ 智能指针auto_ptr
template<class T> class auto_ptr { public: ); // Item M5 有“explicitfor”// 的描述 template<clas ...
- AD14中如何定义PCB尺寸大小(不同于AD9和10)
以前用的着软件基本都是停留在9和10,14用的少,虽然14增加了很多功能,但是也带来了不变,虽然可以打开各种其他格式的文件,但是有些地方的改动不容忽略,在一个完整的板子下来需要用到的每个地方的点也会有 ...
- 浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
- fatal error C1083: Cannot open include file: 'qttreepropertybrowser.moc': No such file or directory
编译QtPropertyBrowser的时候出错.要用moc来生成.moc文件.我好奇的是与之前的通过.h生成moc_xxx.cpp不一样. 要用以下命令.一般来说是处理带Q_OBJECT宏的.h文件 ...
- FlashPaper组件——api
属性摘要 属性 说明 documentPath:String FlashPaper文件的路径. borderThickness:Number 边框宽度. borderColor:String 边框颜色 ...