diff --git a/docs/assets/highlight.js b/docs/assets/highlight.js index ca2f03a6..a8528ba2 100644 --- a/docs/assets/highlight.js +++ b/docs/assets/highlight.js @@ -5,7 +5,7 @@ define('highlight', [], function(require, exports) { var sh_languages={};var sh_requests={};function sh_isEmailAddress(a){if(/^mailto:/.test(a)){return false}return a.indexOf("@")!==-1}function sh_setHref(b,c,d){var a=d.substring(b[c-2].pos,b[c-1].pos);if(a.length>=2&&a.charAt(0)==="<"&&a.charAt(a.length-1)===">"){a=a.substr(1,a.length-2)}if(sh_isEmailAddress(a)){a="mailto:"+a}b[c-2].node.href=a}function sh_konquerorExec(b){var a=[""];a['index']=b.length;a['input']=b;return a}function sh_highlightString(B,o){if(/Konqueror/.test(navigator.userAgent)){if(!o['konquered']){for(var F=0;FI){x(g.substring(I,E.index),null)}var e=O[u];var J=e[1];var b;if(J instanceof Array){for(var L=0;L0){var e=b.split(" ");for(var c=0;c0){a.push(e[c])}}}return a}function sh_addClass(c,a){var d=sh_getClasses(c);for(var b=0;b element with class="'+h+'", but no such language exists'}}break}}}} /* sh_html.js */ - sh_languages.html=[[[/<\?xml/g,"sh_preproc",1,1],[//g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",5,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",5,1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/-->/g,"sh_comment",-2],[//g,"sh_comment",-2],[//g,"sh_comment",-2],[/ '), type) - } - - function preload(callback) { - var preloadMods = config.preload.slice() - config.preload = [] - preloadMods.length ? globalModule._use(preloadMods, callback) : callback() - } - - - // Public API - // ---------- - - var globalModule = new Module(util.pageUri, STATUS.COMPILED) - - seajs.use = function(ids, callback) { - // Loads preload modules before all other modules. - preload(function() { - globalModule._use(ids, callback) - }) - - // Chain - return seajs - } - - - // For normal users - seajs.define = Module._define - seajs.cache = Module.cache - seajs.find = Module._find - seajs.modify = Module._modify - - - // For plugin developers - seajs.pluginSDK = { - Module: Module, - util: util, - config: config - } - -})(seajs, seajs._util, seajs._config) - -/** - * The configuration - */ -;(function(seajs, util, config) { - - var noCachePrefix = 'seajs-ts=' - var noCacheTimeStamp = noCachePrefix + util.now() - - - // Async inserted script - var loaderScript = document.getElementById('seajsnode') - - // Static script - if (!loaderScript) { - var scripts = document.getElementsByTagName('script') - loaderScript = scripts[scripts.length - 1] - } - - var loaderSrc = (loaderScript && util.getScriptAbsoluteSrc(loaderScript)) || - util.pageUri // When sea.js is inline, set base to pageUri. - - var base = util.dirname(getLoaderActualSrc(loaderSrc)) - util.loaderDir = base - - // When src is "http://test.com/libs/seajs/1.0.0/sea.js", redirect base - // to "http://test.com/libs/" - var match = base.match(/^(.+\/)seajs\/[\d\.]+\/$/) - if (match) base = match[1] - - config.base = base - config.main = loaderScript && loaderScript.getAttribute('data-main') - config.charset = 'utf-8' - - - /** - * The function to configure the framework - * config({ - * 'base': 'path/to/base', - * 'alias': { - * 'app': 'biz/xx', - * 'jquery': 'jquery-1.5.2', - * 'cart': 'cart?t=20110419' - * }, - * 'map': [ - * ['test.cdn.cn', 'localhost'] - * ], - * preload: [], - * charset: 'utf-8', - * debug: false - * }) - * - */ - seajs.config = function(o) { - for (var k in o) { - if (!o.hasOwnProperty(k)) continue - - var previous = config[k] - var current = o[k] - - if (previous && k === 'alias') { - for (var p in current) { - if (current.hasOwnProperty(p)) { - - var prevValue = previous[p] - var currValue = current[p] - - // Converts {jquery: '1.7.2'} to {jquery: 'jquery/1.7.2/jquery'} - if (/^\d+\.\d+\.\d+$/.test(currValue)) { - currValue = p + '/' + currValue + '/' + p - } - - checkAliasConflict(prevValue, currValue, p) - previous[p] = currValue - - } - } - } - else if (previous && (k === 'map' || k === 'preload')) { - // for config({ preload: 'some-module' }) - if (util.isString(current)) { - current = [current] - } - - util.forEach(current, function(item) { - if (item) { - previous.push(item) - } - }) - } - else { - config[k] = current - } - } - - // Makes sure config.base is an absolute path. - var base = config.base - if (base && !util.isAbsolute(base)) { - config.base = util.id2Uri((util.isRoot(base) ? '' : './') + base + '/') - } - - // Uses map to implement nocache. - if (config.debug === 2) { - config.debug = 1 - seajs.config({ - map: [ - [/^.*$/, function(url) { - if (url.indexOf(noCachePrefix) === -1) { - url += (url.indexOf('?') === -1 ? '?' : '&') + noCacheTimeStamp - } - return url - }] - ] - }) - } - - debugSync() - - return this - } - - - function debugSync() { - if (config.debug) { - // For convenient reference - seajs.debug = !!config.debug - } - } - - debugSync() - - - function getLoaderActualSrc(src) { - if (src.indexOf('??') === -1) { - return src - } - - // Such as: http://cdn.com/??seajs/1.2.0/sea.js,jquery/1.7.2/jquery.js - // Only support nginx combo style rule. If you use other combo rule, please - // explicitly config the base path and the alias for plugins. - var parts = src.split('??') - var root = parts[0] - var paths = util.filter(parts[1].split(','), function(str) { - return str.indexOf('sea.js') !== -1 - }) - - return root + paths[0] - } - - function checkAliasConflict(previous, current, key) { - if (previous && previous !== current) { - util.log('The alias config is conflicted:', - 'key =', '"' + key + '"', - 'previous =', '"' + previous + '"', - 'current =', '"' + current + '"', - 'warn') - } - } - -})(seajs, seajs._util, seajs._config) - -/** - * Prepare for bootstrapping - */ -;(function(seajs, util, global) { - - // The safe and convenient version of console.log - seajs.log = util.log - - - // Creates a stylesheet from a text blob of rules. - seajs.importStyle = util.importStyle - - - // Sets a alias to `sea.js` directory for loading plugins. - seajs.config({ - alias: { seajs: util.loaderDir } - }) - - - // Uses `seajs-xxx` flag to load plugin-xxx. - util.forEach(getStartupPlugins(), function(name) { - seajs.use('seajs/plugin-' + name) - - // Delays `seajs.use` calls to the onload of `mapfile` in debug mode. - if (name === 'debug') { - seajs._use = seajs.use - seajs._useArgs = [] - seajs.use = function() { seajs._useArgs.push(arguments); return seajs } - } - }) - - - // Helpers - // ------- - - function getStartupPlugins() { - var ret = [] - var str = global.location.search - - // Converts `seajs-xxx` to `seajs-xxx=1` - str = str.replace(/(seajs-\w+)(&|$)/g, '$1=1$2') - - // Add cookie string - str += ' ' + document.cookie - - // Excludes seajs-xxx=0 - str.replace(/seajs-(\w+)=[1-9]/g, function(m, name) { - ret.push(name) - }) - - return util.unique(ret) - } - -})(seajs, seajs._util, this) -/** - * The bootstrap and entrances - */ -;(function(seajs, config, global) { - - var _seajs = seajs._seajs - - // Avoids conflicting when sea.js is loaded multi times. - if (_seajs && !_seajs['args']) { - global.seajs = seajs._seajs - return - } - - - // Assigns to global define. - global.define = seajs.define - - - // Loads the data-main module automatically. - config.main && seajs.use(config.main) - - - // Parses the pre-call of seajs.config/seajs.use/define. - // Ref: test/bootstrap/async-3.html - ;(function(args) { - if (args) { - var hash = { - 0: 'config', - 1: 'use', - 2: 'define' - } - for (var i = 0; i < args.length; i += 2) { - seajs[hash[args[i]]].apply(seajs, args[i + 1]) - } - } - })((_seajs || 0)['args']) - - - // Add define.amd property for clear indicator. - global.define.cmd = {} - - - // Keeps clean! - delete seajs.define - delete seajs._util - delete seajs._config - delete seajs._seajs - -})(seajs, seajs._config, this) - diff --git a/docs/examples/hello-seajs/assets/sea_modules/seajs/1.3.0/sea.js b/docs/examples/hello-seajs/assets/sea_modules/seajs/1.3.0/sea.js deleted file mode 100644 index 24c0c955..00000000 --- a/docs/examples/hello-seajs/assets/sea_modules/seajs/1.3.0/sea.js +++ /dev/null @@ -1,29 +0,0 @@ -/* - SeaJS - A Module Loader for the Web - v1.3.0-dev | seajs.org | MIT Licensed -*/ -this.seajs={_seajs:this.seajs};seajs.version="1.3.0-dev";seajs._util={};seajs._config={debug:"",preload:[]}; -(function(a){var b=Object.prototype.toString,d=Array.prototype;a.isString=function(a){return"[object String]"===b.call(a)};a.isFunction=function(a){return"[object Function]"===b.call(a)};a.isRegExp=function(a){return"[object RegExp]"===b.call(a)};a.isObject=function(a){return a===Object(a)};a.isArray=Array.isArray||function(a){return"[object Array]"===b.call(a)};a.indexOf=d.indexOf?function(a,b){return a.indexOf(b)}:function(a,b){for(var c=0;cNumber(o.replace(/.*AppleWebKit\/(\d+)\..*/,"$1")),h=0 "),void 0); -return!a})}function p(a,c){if(!a||a.status!==h.SAVED)return!1;w.push(a.uri);var d=a.dependencies;if(d.length){if(-1=h.SAVED){var t=s(d);t.length?c.prototype._load(t,function(){e(d)}):e(d)}else e()}var d=f[a]||(f[a]=new c(a,h.FETCHING));d.status>=h.FETCHED?b():r(a,b)})(y[i])};c.prototype._compile=function(){function a(b){b= -e(b,c.uri);b=f[b];if(!b)return null;if(b.status===h.COMPILING)return b.exports;b.parent=c;return b._compile()}var c=this;if(c.status===h.COMPILED)return c.exports;if(c.status -Hello, SeaJS! - +Hello, SeaJS + @@ -21,13 +21,16 @@ S - + diff --git a/docs/index.html b/docs/index.html index 171f9885..8876b104 100644 --- a/docs/index.html +++ b/docs/index.html @@ -40,7 +40,7 @@

SeaJS 是一个适用于 Web 端的模块加载器

- 快速上手 + 5 分钟上手 SeaJS 开启 SeaJS 的奇妙世界
@@ -129,9 +129,214 @@

兼容性

-

快速上手

+

5 分钟上手 SeaJS

- +

+ 这是个小游戏，调皮的字母来自神秘的大海深处。当鼠标轻轻滑过时，字母会旋转到正确位置。 +
+ 来试试吧，看你能否让所有字母都听话…… +

+ + + +

+ 下面花 5 分钟时间，来看看如何来实现这个小游戏。 +

+ + +

目录结构

+ +

先下载源码包：hello-seajs.zip

+ +

解压后可看到目录结构：

+ +
+hello-seajs/
+  |-- assets
+  |     |-- images
+  |     |-- sea_modules
+  |     |-- src
+  |     |-- package.json
+  |-- index.html
+
+ +

所有 css、js、img 等静态资源文件，都存放在 assets 目录下。其中 sea_modules + 下存放的是我们需要用到的第三方模块，可通过 spm install 来获取：

+ +
+$ cd hello-seajs/assets/sea_modules
+$ spm install seajs
+$ spm install jquery
+
+ +

注意：

+
    +
  1. 安装的 jquery.js 是经过封装的模块文件，不能用 jQuery 官网提供的原始文件。
    2. +
  2. spm 是包管理工具，我们先了解有这么一个工具就好，不用着急。
    3. +
+ +

最重要的一个目录是 src，用来存放源码：

+ +
+src/
+  |-- hello.css
+  |-- hello.js
+  |-- spinning.js
+
+ +

package.json 是项目信息的描述文件。

+ + +

在页面中加载模块

+ +

+ 在 index.html 里，首先需要引入 sea.js，然后通过 use 方法来加载模块： +

+
+<script src="assets/sea_modules/seajs/1.3.0/sea.js"></script>
+<script>
+  seajs.config({
+    alias: {
+      'jquery': '1.7.2' // 指定使用的 jQuery 版本
+    }
+  })
+
+  // 加载入口模块
+  seajs.use('./assets/src/hello.js')
+</script>
+
+ +

+ 上面是最简单的一种写法，更多加载方式请参考：在页面中加载模块 +

+ + +

书写模块代码

+ +

+ 这个小游戏的核心文件是 spinning.js： +

+
+define(function(require, exports, module) {
+
+  // 获取依赖，spinning 只依赖 jquery
+  var $ = require('jquery')
+
+  // 下面是这个小游戏的核心代码，有兴趣的可以等看完这篇文档后再去阅读
+  function Spinning() { ... }
+
+  Spinning.prototype.render = function() { ... }
+
+  ...
+
+  // 对外提供接口
+  module.exports = Spinning
+})
+
+ +

+ hello.js 很简单： +

+ +
+define(function(require) {
+
+  // 得到 Spinning 函数类
+  var Spinning = require('./spinning')
+
+  // 初始化
+  var s = new Spinning('#container')
+  s.render()
+
+})
+
+ +

+ 通过 require 引入依赖，通过 exports 提供接口，一切就这么简单。更多用法请参考：CMD 模块定义规范 +

+ + +

打包部署

+ +

+ 对于正式项目，在发布上线前，还需要对源码进行压缩、合并等操作。在 SeaJS 里，通过包管理工具 + spm 来实现。 +

+ +

+ 安装好 spm 后，执行以下命名： +

+ +
+$ cd hello-seajs/assets
+$ spm build
+...
+BUILD SUCCESSFULLY!
+$
+
+ +

+ 这样就打包好了，生成的文件在 sea_modules 目录下： +

+ +
+sea_modules/
+  |-- hello-seajs
+        |-- 1.0.0
+              |-- hello-debug.css
+              |-- hello-debug.js
+              |-- hello.css
+              |-- hello.js
+
+ +

+ 其中 hello.js 中已经合并了 spinning.js 文件。详尽用法请参考：spm Wiki +

+ +

+ 打包好后，将需要的文件，比如 images 和 sea_modules 同步到线上，然后修改 + index.html 中的引用路径： +

+ +
+<link rel="stylesheet" href="http://yoursite.com/assets/sea_modules/hello-seajs/1.0.0/hello.css">
+...
+<script src="http://yoursite.com/assets/sea_modules/seajs/1.3.0/sea.js"></script>
+<script>
+  seajs.config({
+    alias: {
+      'jquery': '1.7.2' // 指定使用的 jQuery 版本
+    }
+  })
+
+  // 加载入口模块
+  seajs.use('hello-seajs/1.0.0/hello.js')
+</script>
+
+ +

+ 修改好后，发布上线，就可以回家睡觉或出国旅游了…… +

+ +

+ 注意：在实际项目中，一般不需要修改 index.html 中的引用。可以通过配置，自动适配环境。 +

+ + +

结束语

+ +

+ 怎么样，SeaJS 入门真的只需 5 分钟吧：） +

+ +

+ 如果超过 5 分钟，那说明你是一个爱学习的孩子，可继续阅读：SeaJS 使用文档，这样很快就可以成为 + SeaJS 高手！ +

+ +

+ 有任何问题，欢迎到这里讨论：seajs/issues +