diff --git a/assets/js/constant.js b/assets/js/constant.js new file mode 100644 index 0000000..1b87ea9 --- /dev/null +++ b/assets/js/constant.js @@ -0,0 +1,20 @@ +(function(win, undef){ + var CONSTANTS = { + JS_VERSION : '0.3.0' + }, + CONS_REG = {} + ; + + function parseConstants(text) { + Object.each(CONSTANTS, function(value, key) { + var reg = CONS_REG[key] || (CONS_REG[key] = new RegExp('{{' + key + '}}', 'g')) + ; + + text = text.replace(reg, value); + }); + + return text; + } + + win['parseConstants'] = parseConstants; +})(window); \ No newline at end of file diff --git a/assets/js/content.js b/assets/js/content.js index 3d16268..7c6118c 100644 --- a/assets/js/content.js +++ b/assets/js/content.js @@ -29,20 +29,18 @@ type : 'GET', success : function(text) { if (hasMarked){ - var lexer, parsed; + var lexer; if (parseHandler) { lexer = marked.lexer(text); - parsed = marked.parser(parseHandler(lexer)); + text = marked.parser(parseHandler(lexer)); } else { - parsed = marked(text); + text = marked(text); } - - successHandler(parsed); - } else { - successHandler(text); } + successHandler(parseConstants(text)); + callback && callback(); }, error : function() { @@ -168,7 +166,7 @@ if (!(matches = linkReg.exec(text))) { title = text; id = baseId + headerMenu.length; - text = '[' + text + '](' + headerMenu.length + ')'; + //text = '[' + text + '](' + headerMenu.length + ')'; } else { title = matches[1]; id = matches[2].replace('#', baseId); @@ -249,11 +247,6 @@ dom = $('
' + html + '
') ; - // // use new window to open - // dom.find('a[href^="http"]').each(function() { - // $(this).attr('target', '_blank'); - // }); - articleEl.html(html); } @@ -266,7 +259,7 @@ init(); } else if (hash.page !== hashParam.page) { hashParam.page = hash.page; - loadContent(); + loadContent(done); } }); @@ -328,41 +321,66 @@ }); loadCategory(function() { - loadContent(function() { - var path = $.joinPath(name, page, section) - ; + loadContent(done); + }); + } - articleEl.find('a.top').each(function() { - var el = this, - anchor = $(el), - id = anchor.attr('id') - ; + function done() { + var hash = parseHash(), + name = hash.name, + page = hash.page, + section = hash.section, + path = $.joinPath(name, page, section) + ; - if (id === path) { - win.scrollTo(0, anchor.offset().top); - } + cateUl.find('a.link').each(function() { + var el = this, + anchor = $(el), + href = anchor.attr('href') + ; + + if (href.indexOf('#' + name + '/' + page) === 0) { + var li = anchor.parent('li'), + groupLi = li.parent('ul').parent('li') + ; + + [li, groupLi].forEach(function(e) { + e.addClass('active') + .siblings('.active').removeClass('active'); }); + } + }); - dropdownUl = $('section.dropdown ul.dropdown-menu'); + articleEl.find('a.top').each(function() { + var el = this, + anchor = $(el), + id = anchor.attr('id') + ; - dropdownUl.on('mousemove', function(e) { - dropdownUl.attr('open', 'true'); - }).on('mouseout', function(e) { - dropdownUl.attr('open', 'false'); + if (id === path) { + win.scrollTo(0, anchor.offset().top); + } + }); - winEl.one('scroll', function() { - if (dropdownUl.attr('open') !== 'true') { - dropdownUl.parent().removeClass('open'); - } - }); - }).prev('a').on('click', function(e) { - var el = this, - anchor = $(el) - ; - anchor.parent().toggleClass('open'); - }); + dropdownUl = $('section.dropdown ul.dropdown-menu'); + + dropdownUl.on('mousemove', function(e) { + dropdownUl.attr('open', 'true'); + }).on('mouseout', function(e) { + dropdownUl.attr('open', 'false'); + + winEl.one('scroll', function() { + if (dropdownUl.attr('open') !== 'true') { + dropdownUl.parent().removeClass('open'); + } }); + }).prev('a').on('click', function(e) { + var el = this, + anchor = $(el) + ; + anchor.parent().toggleClass('open'); }); + } $(function() { diff --git a/content.html b/content.html index 1858fd3..6c1ed66 100644 --- a/content.html +++ b/content.html @@ -91,6 +91,7 @@ + diff --git a/pages/js/api/core_base_class.md b/pages/js/api/core_base_class.md new file mode 100644 index 0000000..0137b71 --- /dev/null +++ b/pages/js/api/core_base_class.md @@ -0,0 +1,163 @@ +# core.base.Class **api** + +提供简洁高效的 OO 实现。 + +## 依赖 + +* [mix/core/{{JS_VERSION}}/base/reset](#js/api/core_base_reset) + +## 引用（获取） + +`require('mix/core/{{JS_VERSION}}/base/class')` + +## 类方法 + +### create(parent, properties) + +* @param {Klass} parent +* @param {object} properties +* @return {Klass} the class object + +### create(properties) + +* @param {object} properties +* @return {Klass} the class object + +创建类。 + +举例： + + var Pig = Class.create({ + initialize: function(name) { + this.name = name; + }, + + talk: function() { + console.log('I\'m' + this.name + '.'); + } + }); + +## 实例方法 + +### extend(properties) + +* @param {object} properties +* @return {Klass} the class object + +继承类。 + +举例： + + var RedPig = Pig.extend({ + initialize: function(name) { + RedPig.superclass.initialize.call(this, name); + }, + + color: 'red' + }); + +### implement(properties) + +* @param {object} properties + +混合方法。 + +举例： + + RedPig.implement({ + swim: function() { + console.log('I can swim!'); + } + }); + + + +## properties中的几个关键key + +### initialize + +构造方法。 + +访问父类的构造方法，可以通过： + + + someClass.supperclass.initialize.call(this, params*); + + +### Extends + +从某个类继承。 + +举例： + + var RedPig = Class.create({ + Extends : Pig, + + initialize: function(name) { + RedPig.superclass.initialize.call(this, name); + }, + + color: 'red' + }); + +### Implements + +混合方法。 + +举例： + + var FlyableRedPig = RedPig.extend({ + Implements: { + fly : function() { + console.log('I can fly!'); + } + }, + + initialize: function(name) { + FlyableRedPig.superclass.initialize.call(this, name); + } + }); + +### Statics + +设置类静态方法。 + +举例： + + var Pig = Class.create({ + Statics : { + pigs : [], + + add : function(name) { + var pig = new Pig(name); + this.pigs.push(pig); + + return pig; + } + } + + initialize: function(name) { + this.name = name; + }, + + talk: function() { + console.log('I\'m' + this.name + '.'); + } + }); + +## 调用父类中的方法 + +### someClass.superclass.initialize +### someClass.superclass.methodName + +举例： + +var MyPig = Pig.extend({ + initialize: function(name) { + MyPig.superclass.initialize.call(this, name); + } + + talk : function() { + MyPig.superclass.talk.call(this) + ' who are you?'; + } +}) \ No newline at end of file diff --git a/pages/js/api/core_base_message.md b/pages/js/api/core_base_message.md new file mode 100644 index 0000000..cd5b4ec --- /dev/null +++ b/pages/js/api/core_base_message.md @@ -0,0 +1,101 @@ +# core.base.Message **api** + +提供事件机制。 + +## 依赖 + +* [mix/core/{{JS_VERSION}}/base/reset](#js/api/core_base_reset) +* [mix/core/{{JS_VERSION}}/base/class](#js/api/core_base_class) + +## 引用（获取） + +`require('mix/core/{{JS_VERSION}}/base/message')` + + +## at模式 + +at模式，是基于`@`书写的消息格式，例如`@content:load`，表示content的load消息。不管是添加消息、取消消息还是触发消息，都可以采用这样的格式来达到指定某个接受者的消息的目的。例如，还有一个`@page:load`的消息时，`@content:load`只会触发`content`的load消息。此外，如果需要触发所有的load消息，可以使用`@*:load`来达到目的。 + +## 实例化 + +### new Message([name[, id[, defaultContext]]]) + +* @param {string} [name] +* @param {string} [id] +* @param {object} [defaultContext] +* @return {Message} a Message object + +实例化一个消息对象。id是唯一标识，默认为自增长的正数。 + + +## 类属性/方法 + +### singleton + +* @var {Message} a global Message object + +一个全局的消息对象 + +### SPLITER_REG + +* @var {RegExp} + +多消息名称之间的分隔符正则 + +### AT_REG + +* @var {RegExp} + +at模式的正则 + +## 实例方法 + +### on(events, callback[, context]) + +* @param {string} events +* @param {function} callback +* @param {object} [context] +* @return {Message} current message object + +添加消息句柄。可以给多个消息同时添加句柄，消息名称之间用空格分隔。 + +### off([events[, callback[, context]]) + +* @param {string} [events] +* @param {function} [callback] +* @param {object} [context] +* @return {Message} current message object + +取消消息句柄。可以给多个消息同时取消句柄，消息名称之间用空格分隔。如果不提供任何参数，则会取消所有句柄。 + +### has([event[, callback[, context]]) + +* @param {string} event +* @param {function} [callback] +* @param {object} [context] +* @return {Message} current message object + +判断消息句柄是否存在。 + +### once(events, callback[, context]) + +* @param {string} events +* @param {function} callback +* @param {object} [context] +* @return {Message} current message object + +添加只执行一次的消息句柄。可以给多个消息同时添加一次性句柄，消息名称之间用空格分隔。 + +### trigger(events) + +* @param {string} events +* @return {Message} current message object + +触发消息。可以同时触发多个消息，消息名称之间用空格分隔。 + +### log(msg) + +* @param {string} msg + +在控制台输出带有标识的消息文本。 + diff --git a/pages/js/api/core_base_reset.md b/pages/js/api/core_base_reset.md index f00868d..9bec589 100644 --- a/pages/js/api/core_base_reset.md +++ b/pages/js/api/core_base_reset.md @@ -2,6 +2,10 @@ 提供常用函数以及ECMA5里面补充的内置对象方法（诸如forEach等） +## 引用（获取） + +`require('mix/core/{{JS_VERSION}}/base/reset')` + ## Object ### Object.keys(obj) @@ -99,14 +103,4 @@ * @return {string} a new string -去除字符串所有空字符 - -## Function - -### Function.binded(func, context) - -* @param {function} func -* @param {object} context -* @return {function} a binded function - -给函数绑定一个上下文 \ No newline at end of file +去除字符串所有空字符 \ No newline at end of file diff --git a/pages/js/api/core_base_util.md b/pages/js/api/core_base_util.md new file mode 100644 index 0000000..98525df --- /dev/null +++ b/pages/js/api/core_base_util.md @@ -0,0 +1,37 @@ +# core.base.Util **api** + +提供基础工具函数。 + +## 依赖 + +* [mix/core/{{JS_VERSION}}/base/reset](#js/api/core_base_reset) +* [mix/core/{{JS_VERSION}}/base/class](#js/api/core_base_class) + +## 引用（获取） + +`require('mix/core/{{JS_VERSION}}/base/util')` + +## 类属性/方法 + +### singleton + +* @var {Util} a global Util object + +一个全局的Util对象 + +## 实例方法 + +### escape(str) + +* @param {string} str +* @return {string} a escaped string + +转义`&`,`<`,`>`,`"`,`'`,`/`为HTML实体符号。 + +### bind(func, context) + +* @param {function} func +* @param {object} context +* @return {function} a bound function + +给函数绑定一个上下文 \ No newline at end of file diff --git a/pages/js/api/core_url_navigate.md b/pages/js/api/core_url_navigate.md new file mode 100644 index 0000000..cce58d8 --- /dev/null +++ b/pages/js/api/core_url_navigate.md @@ -0,0 +1,132 @@ +# core.url.Navigate **api** + +导航控制。 + +## 依赖 + +* [mix/core/{{JS_VERSION}}/base/reset](#js/api/core_base_reset) +* [mix/core/{{JS_VERSION}}/base/class](#js/api/core_base_class) +* [mix/core/{{JS_VERSION}}/base/message](#js/api/core_base_message) +* [mix/core/{{JS_VERSION}}/url/router](#js/api/core_url_router) + +## 引用（获取） + +`require('mix/core/{{JS_VERSION}}/url/navigate')` + +## 实例化 + +### new Navigate([options) + +* @param {object} options + * @key {Router} useRouter + * @key {number} [stateLimit=100] + + +实例化一个导航对象，并指定导航使用的路由器对象。 + +## 类属性/方法 + +### singleton + +* @var {Navigate} a global Navigate object + +一个全局的导航对象，使用的是全局的路由对象。 + +## 实例属性/方法 + +### router + +* @var {Router} a Router object + +获取当前导航对象使用的路由对象。 + +### getState() + +* @return {object} a state object + * @key {string} name, the route name + * @key {string} move, the movement + * @key {string} fragment, the hash fragment + * @key {object} params, the route params + * @key {object} args, the arguments + * @key {object} datas, the datas + +获得当前的[导航状态](#state)。 + +### getStateIndex() + +* @return {number} the current index for states + +获取当前[导航状告](#state)的索引 + +### addRoute([name, routeText,]options) + +* @param {string} name +* @param {string} routeText +* @param {object} options + * @key {function} callback + * @key {boolean} [last=true] + * @key {boolean} [default=false] + +增加一个路由规则。`last`参数默认为`true`，表示匹配到改规则后，将不再继续匹配。`default`设置为`true`（无需提供`name`和`routerText`），会在路由匹配失败执行该`callback`。 + +### removeRoute(name) + +* @param {string} name + +移除一个路由规则。 + +### forward([fragment[, options]]) + +* @param {string} [fragment] +* @param {object} [options] + * @key {object} args, the arguments + * @key {object} datas, the datas + * @key {string} [transition='forward'], the transition movement + +导航到某路径（前进）。当所有参数为空时，为浏览器默认的前进操作。 + +### backward() + +* @param {object} [options] + * @key {string} [transition='backward'], the transition movement + +浏览器默认的后退动作。 + +## 事件 + +### forward + +* @param {object} state, the current state + +导航到某路径（前进）时，触发。 + +### backward + +* @param {object} state, the current state + +后退时，触发。 + +## 路由规则和路由参数 + +路由规则的文本为正则表达式文本，并支持以下几种方式来获取路由参数： + +1. `:name` - 析出两个`/`之间的文本。举例：`user/:name/:age` 会匹配 `user/zhuxun/18`。并使`name`为`zhuxun`，`age`为`18`。 +2. `*name` - 析出当前位置开始之后的所有文本。举例： `user/*profile` 会匹配 `user/zhuxun/18`。并使`profile`为`zhuxun/18`。 +3. `(Pexp)` - Perl风格的参数析出语法。举例：`user/(P\w+)/(P\d+)` 会匹配 `user/zhuxun/18`。并使`name`为`zhuxun`，`age`为`18`。 + +以上规则析出的路由参数，均可以通过当前的[导航状态](#state)的`params`字段来获取。 + +** 注意 ** + +在书写路由规则时，所有自定义的分组语法，必须使用非捕获分组，即`(?:regexp)`。 + +## 传递数据 + +当调用`forward`方法时，可以为下一个[导航状态](#state)传递参数。传递的方式有两种： + +1. options.args - 以`!`开始，拼接上`key1=value1&key2=value2`格式的文本串。可以通过[导航状态](#state)的`args`字段来获取。 +2. options.datas - 直接传递对象。可以通过[导航状态](#state)的`datas`字段来获取。 + +## [导航状态](#state) + +每次导航后，会执行回调，并传递当前的导航状态`state`。同时，也可以借由`getState`方法来获取当前的导航状态。 diff --git a/pages/js/api/core_url_router.md b/pages/js/api/core_url_router.md new file mode 100644 index 0000000..8bfaf03 --- /dev/null +++ b/pages/js/api/core_url_router.md @@ -0,0 +1,81 @@ +# core.url.Router **api** + +路由选择。 + +## 依赖 + +* [mix/core/{{JS_VERSION}}/base/reset](#js/api/core_base_reset) +* [mix/core/{{JS_VERSION}}/base/class](#js/api/core_base_class) +* [mix/core/{{JS_VERSION}}/base/message](#js/api/core_base_message) + +## 引用（获取） + +`require('mix/core/{{JS_VERSION}}/url/router')` + +## 实例化 + +### new Router() + +* @return {Router} a router object + +实例化一个路由对象。 + +## 类属性/方法 + +### singleton + +* @var {Router} a global Router object + +一个全局的路由对象 + +## 实例方法 + +### start([options]) + +* @param {object} options + * @key {boolean} firstMatch + * @key {function} unMatched +* @return {boolean} + +启动路由，默认会立即匹配当前路径。 + +### stop() + +* @return {boolean} + +停止路由。 + +### match() + +* @return {boolean} return if matched + +匹配当前路径。 + +### add(route, callback[, last]) + +* @param {regexp} route +* @param {function} callback +* @param {boolean} [last=false] + +添加一个路由规则。如果设置`last`参数为`true`，则在匹配到改规则后，将不再继续匹配。 + +### remove(route[, callback]) + +* @param {regexp} route +* @param {function} [callback] + +移除一个路由规则。 + +### navigate(fragment) + +* @param {string} fragment + +改变当前的路径。 + +## 事件 + +### unmatched(fragment) + +* @param {string} fragment, the current hash fragment + +当未匹配到路由规则时，触发。 diff --git a/pages/js/category.md b/pages/js/category.md index bb8ad0d..9414b17 100644 --- a/pages/js/category.md +++ b/pages/js/category.md @@ -1,21 +1,8 @@ * [Mix JS入门手册](tutorial/quick-guide.md) -* [API文档](#) +* [API文档(v{{JS_VERSION}})](#) * [core.base.reset](api/core_base_reset.md) * [core.base.Class](api/core_base_class.md) * [core.base.Message](api/core_base_message.md) - * [core.ui.Component](api/core_ui_component.md) - * [core.ui.Module](api/core_ui_module.md) - * [core.ui.Template](api/core_ui_template.md) - * [core.util.Detect](api/core_util_detect.md) - * [core.util.dom.Ajax](api/core_util_dom_ajax.md) - * [core.util.dom.Animation](api/core_util_dom_animation.md) - * [core.util.dom.Event](api/core_util_dom_event.md) - * [core.util.dom.selector](api/core_util_dom_selector.md) - * [core.util.history](api/core_util_history.md) - * [core.util.mvc.Controller](api/core_util_mvc_controller.md) - * [core.util.mvc.Model](api/core_util_mvc_model.md) - * [core.util.mvc.Navigator](api/core_util_mvc_navigator.md) - * [core.util.mvc.Orm](api/core_util_mvc_orm.md) - * [core.util.mvc.View](api/core_util_mvc_view.md) - * [core.util.Router](api/core_util_router.md) - * [core.util.Utilities](api/core_util_Utilities.md) + * [core.base.Util](api/core_base_util.md) + * [core.url.Router](api/core_url_router.md) + * [core.url.Navigate](api/core_url_navigate.md)