From a02c0cc5c1ea7c5996810aa3a4db17e966edc145 Mon Sep 17 00:00:00 2001 From: kmdjs Date: Mon, 23 Jan 2017 12:09:28 +0800 Subject: [PATCH] Omi to omi --- README.md | 8 ++++---- asset/build_server.js | 2 +- dist/omi.js | 2 +- dist/omi.lite.js | 2 +- dist/omi.server.js | 2 +- docs/cn_thinking_in_omi.md | 2 +- example/artTemplate/index.html | 2 +- example/es5/clock.html | 2 +- example/es5/condition.html | 2 +- example/es5/dialog.html | 2 +- example/es5/hello.html | 2 +- example/es5/inherit.html | 2 +- example/es5/template.html | 2 +- example/es5/todo.html | 2 +- example/es5/todo_nest.html | 2 +- example/loop/index.html | 2 +- example/mobx/index.html | 2 +- example/playground/index.html | 2 +- example/server_rendering/component/omi.js | 2 +- example/timer/index.html | 2 +- example/todo/index.html | 2 +- example/todo_nest/index.html | 2 +- webpack.config.js | 2 +- website/component/head.js | 6 +++--- website/dist/bundler.js | 6 +++--- website/docs.html | 2 +- 26 files changed, 33 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 5b09deeed..9abbc94c1 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,10 @@ Open and modern framework for building user interfaces. --- * 如果想体验一下Omi框架，请[点击Omi Playground](http://alloyteam.github.io/omi/example/playground/) -* 如果想使用Omi框架，请阅读 [Omi使用文档](https://github.com/AlloyTeam/Omi/tree/master/docs#omi使用文档) -* 如果想一起开发完善Omi框架，有更好的解决方案或者思路，请阅读 [从零一步步打造web组件化框架Omi](https://github.com/AlloyTeam/Omi/tree/master/docs#从零一步步打造web组件化框架omi) +* 如果想使用Omi框架，请阅读 [Omi使用文档](https://github.com/AlloyTeam/omi/tree/master/docs#omi使用文档) +* 如果想一起开发完善Omi框架，有更好的解决方案或者思路，请阅读 [从零一步步打造web组件化框架Omi](https://github.com/AlloyTeam/omi/tree/master/docs#从零一步步打造web组件化框架omi) * 关于上面的两类文档，如果你想获得更佳的阅读体验，可以访问[http://alloyteam.github.io/omi](http://alloyteam.github.io/omi) -* 如果你有Omi相关的问题可以[New issue](https://github.com/AlloyTeam/Omi/issues/new) +* 如果你有Omi相关的问题可以[New issue](https://github.com/AlloyTeam/omi/issues/new) * 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170): Omi @@ -73,7 +73,7 @@ Omi.render(new Hello({ name : "Omi" }),"body"); 你可以使用 [webpack](https://webpack.github.io/) + [babel](http://babeljs.io/)，在webpack配置的module设置[babel-loader](https://github.com/babel/babel-loader)，立马就能使用ES6+来编写你的web程序。 - 当然Omi没有抛弃ES5的用户，你可以使用ES5的方式编写Omi。具体可以看这里[Hello World with ES5](https://github.com/AlloyTeam/Omi/blob/master/docs/cn_hello_world.md#hello-world-with-es5)。 + 当然Omi没有抛弃ES5的用户，你可以使用ES5的方式编写Omi。具体可以看这里[Hello World with ES5](https://github.com/AlloyTeam/omi/blob/master/docs/cn_hello_world.md#hello-world-with-es5)。 # License This content is released under the [MIT](http://opensource.org/licenses/MIT) License. \ No newline at end of file diff --git a/asset/build_server.js b/asset/build_server.js index 87ed9345e..407ff2501 100644 --- a/asset/build_server.js +++ b/asset/build_server.js @@ -5,7 +5,7 @@ var data = fs.readFileSync("./dist/omi.js","utf-8"); var head = "\ /*!\r\n\ * Omi v0.1.0 By dntzhang\r\n\ -* Github: https://github.com/AlloyTeam/Omi\r\n\ +* Github: https://github.com/AlloyTeam/omi\r\n\ * MIT Licensed.\r\n\ */\r\n\ (function webpackUniversalModuleDefinition(root, factory) {\r\n\ diff --git a/dist/omi.js b/dist/omi.js index d34471355..70ea27ec1 100644 --- a/dist/omi.js +++ b/dist/omi.js @@ -1,6 +1,6 @@ /*! * Omi v0.1.0 By dntzhang - * Github: https://github.com/AlloyTeam/Omi + * Github: https://github.com/AlloyTeam/omi * MIT Licensed. */ (function webpackUniversalModuleDefinition(root, factory) { diff --git a/dist/omi.lite.js b/dist/omi.lite.js index 9aecb5288..82b48220b 100644 --- a/dist/omi.lite.js +++ b/dist/omi.lite.js @@ -1,6 +1,6 @@ /*! * Omi v0.1.0 By dntzhang - * Github: https://github.com/AlloyTeam/Omi + * Github: https://github.com/AlloyTeam/omi * MIT Licensed. */ (function webpackUniversalModuleDefinition(root, factory) { diff --git a/dist/omi.server.js b/dist/omi.server.js index 11f474a17..41a0968a6 100644 --- a/dist/omi.server.js +++ b/dist/omi.server.js @@ -1,6 +1,6 @@ /*! * Omi v0.1.0 By dntzhang -* Github: https://github.com/AlloyTeam/Omi +* Github: https://github.com/AlloyTeam/omi * MIT Licensed. */ (function webpackUniversalModuleDefinition(root, factory) { diff --git a/docs/cn_thinking_in_omi.md b/docs/cn_thinking_in_omi.md index e7147c66d..1a8cdfd80 100644 --- a/docs/cn_thinking_in_omi.md +++ b/docs/cn_thinking_in_omi.md @@ -41,5 +41,5 @@ Omi的理念是基于面向对象编程体系，内建积木系统。
-### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/Omi) +### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/omi) diff --git a/example/artTemplate/index.html b/example/artTemplate/index.html index 689004e47..d71e7837c 100644 --- a/example/artTemplate/index.html +++ b/example/artTemplate/index.html @@ -6,7 +6,7 @@
- + diff --git a/example/es5/clock.html b/example/es5/clock.html index 6680e5b83..46f11e4f1 100644 --- a/example/es5/clock.html +++ b/example/es5/clock.html @@ -5,7 +5,7 @@ - + diff --git a/example/es5/condition.html b/example/es5/condition.html index 003fe74e3..cd03f9c8b 100644 --- a/example/es5/condition.html +++ b/example/es5/condition.html @@ -29,7 +29,7 @@ }, 2000); - + diff --git a/example/es5/dialog.html b/example/es5/dialog.html index 0f287020f..02874906f 100644 --- a/example/es5/dialog.html +++ b/example/es5/dialog.html @@ -5,7 +5,7 @@ Omi DialogTest - + diff --git a/example/es5/hello.html b/example/es5/hello.html index 84884ff49..e9e832fda 100644 --- a/example/es5/hello.html +++ b/example/es5/hello.html @@ -6,7 +6,7 @@
- + diff --git a/example/es5/inherit.html b/example/es5/inherit.html index 8cfaba4fe..d1cd325f7 100644 --- a/example/es5/inherit.html +++ b/example/es5/inherit.html @@ -6,7 +6,7 @@
- + diff --git a/example/es5/template.html b/example/es5/template.html index aa684469a..1ca8550b9 100644 --- a/example/es5/template.html +++ b/example/es5/template.html @@ -5,7 +5,7 @@ - + diff --git a/example/es5/todo.html b/example/es5/todo.html index cd15c1e5a..ec7965e4a 100644 --- a/example/es5/todo.html +++ b/example/es5/todo.html @@ -6,7 +6,7 @@
- + diff --git a/example/es5/todo_nest.html b/example/es5/todo_nest.html index c954d0f34..99e2b6631 100644 --- a/example/es5/todo_nest.html +++ b/example/es5/todo_nest.html @@ -5,7 +5,7 @@ - + diff --git a/example/loop/index.html b/example/loop/index.html index 689004e47..d71e7837c 100644 --- a/example/loop/index.html +++ b/example/loop/index.html @@ -6,7 +6,7 @@
- + diff --git a/example/mobx/index.html b/example/mobx/index.html index c46a01d79..646629ba7 100644 --- a/example/mobx/index.html +++ b/example/mobx/index.html @@ -6,7 +6,7 @@
- + diff --git a/example/playground/index.html b/example/playground/index.html index 08a924fe6..21a501b5b 100644 --- a/example/playground/index.html +++ b/example/playground/index.html @@ -12,7 +12,7 @@ - +
diff --git a/example/server_rendering/component/omi.js b/example/server_rendering/component/omi.js index a61f51a69..5ebc0c78d 100644 --- a/example/server_rendering/component/omi.js +++ b/example/server_rendering/component/omi.js @@ -1,6 +1,6 @@ /*! * Omi v0.1.0 By dntzhang - * Github: https://github.com/AlloyTeam/Omi + * Github: https://github.com/AlloyTeam/omi * MIT Licensed. */ (function webpackUniversalModuleDefinition(root, factory) { diff --git a/example/timer/index.html b/example/timer/index.html index 689004e47..d71e7837c 100644 --- a/example/timer/index.html +++ b/example/timer/index.html @@ -6,7 +6,7 @@
- + diff --git a/example/todo/index.html b/example/todo/index.html index 689004e47..d71e7837c 100644 --- a/example/todo/index.html +++ b/example/todo/index.html @@ -6,7 +6,7 @@
- + diff --git a/example/todo_nest/index.html b/example/todo_nest/index.html index 16e6c9e91..6d656feb7 100644 --- a/example/todo_nest/index.html +++ b/example/todo_nest/index.html @@ -5,7 +5,7 @@ - + diff --git a/webpack.config.js b/webpack.config.js index d6fb83215..b7baa4710 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -64,7 +64,7 @@ if(ENV === 'build'){ }, plugins: [ // Avoid publishing files when compilation fails - new webpack.BannerPlugin(" Omi v0.1.0 By dntzhang \r\n Github: https://github.com/AlloyTeam/Omi\r\n MIT Licensed."), + new webpack.BannerPlugin(" Omi v0.1.0 By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."), new webpack.NoErrorsPlugin() ], stats: { diff --git a/website/component/head.js b/website/component/head.js index 80523aad9..7f8128310 100644 --- a/website/component/head.js +++ b/website/component/head.js @@ -56,12 +56,12 @@ class Head extends Omi.Component { return `
- Omi + Omi
`; diff --git a/website/dist/bundler.js b/website/dist/bundler.js index 0ba08e6ef..84c4f0b54 100644 --- a/website/dist/bundler.js +++ b/website/dist/bundler.js @@ -1867,7 +1867,7 @@ /* 12 */ /***/ function(module, exports) { - module.exports = "module.exports = \"

组件

\\r\\n\\r\\n我们希望开发者可以像搭积木一样制作Web程序，所以一切皆组件。\\r\\n\\r\\n### 简单组件\\r\\n\\r\\n这里我们使用Todo的例子来讲解Omi组件体系的使用。\\r\\n\\r\\n```js\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.data.items.push(this.data.text);\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `
\\r\\n

TODO

\\r\\n
    {{#items}}
  • {{.}}
    • {{/items}}
\\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n
`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Todo({ items: [] ,text : '' }),\\\"body\\\");\\r\\n```\\r\\n\\r\\n组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:\\r\\n\\r\\n- data传递: new Todo(data,..)的data可以直接提供给render方法里的模板\\r\\n- 局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是同样的\\r\\n- 声明式事件绑定: onchange调用的就是组件内的handleChange，this可以拿到当然的DOM元素,还可以拿到当前的event\\r\\n- 需要手动调用update方法才能更新组件\\r\\n\\r\\n这里需要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变更的自动更新，需要开发者自己调用update方法。\\r\\n你也可以和[oba](https://github.com/kmdjs/oba)或者mobx一起使用来实现自动更新。\\r\\n\\r\\n### 组件嵌套\\r\\n\\r\\n几乎所有的Web网页或者Web应用，我们需要嵌套我们定义的组件来完成所有的功能和展示。比如上面的Todo，我们也是可以抽取出List。\\r\\n这样有什么好处？易维护、可扩展、方便复用。如，我们抽取去List：\\r\\n\\r\\n```js\\r\\nclass List extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return ``;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n怎么使用这个List？\\r\\n\\r\\n```js\\r\\nimport List from './list.js';\\r\\n\\r\\nOmi.makeHTML(List);\\r\\n\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n this.data.length = this.data.items.length;\\r\\n this.childrenData = [ { items : this.data.items } ];\\r\\n }\\r\\n\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.list.data.items.push(this.data.text);\\r\\n this.data.length = this.list.data.items.length;\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `
\\r\\n

TODO

\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML(List);也可以写在List组件的代码下面。\\r\\n* 第9行，通过设置this.childrenData可以把参数传递给子组件。this.childrenData是个数组，这样就支持多child的情况。\\r\\n* 第36行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。omi-id可以让你通过Omi.mapping['list']快速访问到组件对象的实例。\"" + module.exports = "module.exports = \"

组件

\\r\\n\\r\\n我们希望开发者可以像搭积木一样制作Web程序，所以一切皆组件。\\r\\n\\r\\n### 简单组件\\r\\n\\r\\n这里我们使用Todo的例子来讲解Omi组件体系的使用。\\r\\n\\r\\n```js\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.data.items.push(this.data.text);\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `
\\r\\n

TODO

\\r\\n
    {{#items}}
  • {{.}}
    • {{/items}}
\\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n
`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Todo({ items: [] ,text : '' }),\\\"body\\\");\\r\\n```\\r\\n\\r\\n组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:\\r\\n\\r\\n- data传递: new Todo(data,..)的data可以直接提供给render方法里的模板\\r\\n- 局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是同样的\\r\\n- 声明式事件绑定: onchange调用的就是组件内的handleChange，this可以拿到当然的DOM元素,还可以拿到当前的event\\r\\n- 需要手动调用update方法才能更新组件\\r\\n\\r\\n这里需要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变更的自动更新，需要开发者自己调用update方法。\\r\\n你也可以和[oba](https://github.com/kmdjs/oba)或者mobx一起使用来实现自动更新。\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=todo)\\r\\n\\r\\n### 组件嵌套\\r\\n\\r\\n几乎所有的Web网页或者Web应用，我们需要嵌套我们定义的组件来完成所有的功能和展示。比如上面的Todo，我们也是可以抽取出List。\\r\\n这样有什么好处？易维护、可扩展、方便复用。如，我们抽取去List：\\r\\n\\r\\n```js\\r\\nclass List extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return ``;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n怎么使用这个List？\\r\\n\\r\\n```js\\r\\nimport List from './list.js';\\r\\n\\r\\nOmi.makeHTML(List);\\r\\n\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n this.data.length = this.data.items.length;\\r\\n this.childrenData = [ { items : this.data.items } ];\\r\\n }\\r\\n\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.list.data.items.push(this.data.text);\\r\\n this.data.length = this.list.data.items.length;\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `
\\r\\n

TODO

\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML(List);也可以写在List组件的代码下面。\\r\\n* 第9行，通过设置this.childrenData可以把参数传递给子组件。this.childrenData是个数组，这样就支持多child的情况。\\r\\n* 第36行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。omi-id可以让你通过Omi.mapping['list']快速访问到组件对象的实例。\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=todo_nest)\"" /***/ }, /* 13 */ @@ -1921,7 +1921,7 @@ /* 21 */ /***/ function(module, exports) { - module.exports = "module.exports = \"

Omi的理念

\\r\\n\\r\\nOmi的理念是基于面向对象编程体系，内建积木系统。\\r\\n 传统的单向数据流或者抛出event的组件通讯方式增加了系统的稳定性，但是丧失了灵活性。一定程度上也降低了组建的复用。所谓鱼和熊掌不可兼得。\\r\\n 面向对象体系需要多一个逻辑层，可以自由操作所有组件的instance，instance之间的逻辑关系构建出了整个程序。这样组建间的逻辑，通信，复用就全部迎刃而解。组建也更加单一职责，更松耦合。\\r\\n\\r\\n对比函数式编程、命令式编程与面向对象编程，可以归纳总结出下面几条：\\r\\n\\r\\n- 命令式编程干脆直接，利用循环条件等控制流程，强调执行过程\\r\\n- 命令式编程对硬件执行友好，运行更容易，却阻碍了复杂程序的设计\\r\\n- 函数式强调输入和输出，并非执行过程\\r\\n- 函数式倡导多个简单执行单元组合成复杂运算程序\\r\\n- 面向对象编程将对象作为程序的基本单元，更具有重用性、灵活性和扩展性\\r\\n\\r\\n Javascript是哪种类型的语言？现在ES6+已经有了class。那么他是面向对象语言？\\r\\n但是JS可以在任意地方定义函数并且当作把函数当作值来传递。那么他是函数式编程语言？\\r\\n所以，没有精准的定义，取决于你的用法和姿势。其次，Web组件化架构层面编程模型和语言层面编程模型是非常自由的关系。意思就是，你可以用Javascript构建函数式编程框架如React，也可以基于面向对象体系搭建Omi。\\r\\n\\r\\n### 函数式编程 VS 面向对象编程\\r\\n\\r\\n在UI组件框架层面，函数式编程的代表有React，Omi属于面向对象编程体系。那么他们各有什么优缺点？下面做了个对比（其实也是函数式编程与面向对象编程的对比）：\\r\\n\\r\\n| | React | Omi |\\r\\n| ------------- |:-------------:|:-----:|\\r\\n| 组件通信 | ★★★★☆| ★★★★★ |\\r\\n| 稳定性 | ★★★★★ | ★★★★☆ |\\r\\n| 灵活性 | ★★★★☆| ★★★★★ |\\r\\n| 扩展性 | ★★★★☆ | ★★★★★ |\\r\\n| 测试性 | ★★★★★ | ★★★★☆ |\\r\\n| 文件大小 | ★★★☆☆ | ★★★★★ |\\r\\n| 功能特性 | ★★★☆☆ | ★★★★☆ |\\r\\n| DOM性能 | ★★★★★ | ★★★★☆ |\\r\\n| 动画性能 | ★★★★☆ | ★★★★★ |\\r\\n| 抽象复杂度 | ★★★★☆ | ★★★★★ |\\r\\n| 异步编程 | ★★★★★ | ★★★★☆ |\\r\\n\\r\\n可以看得出，鱼和熊掌不可兼得。面向对象编程更具有重用性、灵活性和扩展性，带来的问题就是更加难测试。\\r\\n具体来说，如函数式编程，其测试面积是state1 + state2 + ... + stateN；在面向对象编程中，其测试面积是state1×event1 + state2×event2 + ... + stateN×eventN。\\r\\n\\r\\n总结来说，更加推荐使用面向对象的方式去搭建UI组件化框架。\\r\\n\\r\\n
\\r\\n\\r\\n### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/Omi)\\r\\n\\r\\n\"" + module.exports = "module.exports = \"

Omi的理念

\\r\\n\\r\\nOmi的理念是基于面向对象编程体系，内建积木系统。\\r\\n 传统的单向数据流或者抛出event的组件通讯方式增加了系统的稳定性，但是丧失了灵活性。一定程度上也降低了组建的复用。所谓鱼和熊掌不可兼得。\\r\\n 面向对象体系需要多一个逻辑层，可以自由操作所有组件的instance，instance之间的逻辑关系构建出了整个程序。这样组建间的逻辑，通信，复用就全部迎刃而解。组建也更加单一职责，更松耦合。\\r\\n\\r\\n对比函数式编程、命令式编程与面向对象编程，可以归纳总结出下面几条：\\r\\n\\r\\n- 命令式编程干脆直接，利用循环条件等控制流程，强调执行过程\\r\\n- 命令式编程对硬件执行友好，运行更容易，却阻碍了复杂程序的设计\\r\\n- 函数式强调输入和输出，并非执行过程\\r\\n- 函数式倡导多个简单执行单元组合成复杂运算程序\\r\\n- 面向对象编程将对象作为程序的基本单元，更具有重用性、灵活性和扩展性\\r\\n\\r\\n Javascript是哪种类型的语言？现在ES6+已经有了class。那么他是面向对象语言？\\r\\n但是JS可以在任意地方定义函数并且当作把函数当作值来传递。那么他是函数式编程语言？\\r\\n所以，没有精准的定义，取决于你的用法和姿势。其次，Web组件化架构层面编程模型和语言层面编程模型是非常自由的关系。意思就是，你可以用Javascript构建函数式编程框架如React，也可以基于面向对象体系搭建Omi。\\r\\n\\r\\n### 函数式编程 VS 面向对象编程\\r\\n\\r\\n在UI组件框架层面，函数式编程的代表有React，Omi属于面向对象编程体系。那么他们各有什么优缺点？下面做了个对比（其实也是函数式编程与面向对象编程的对比）：\\r\\n\\r\\n| | React | Omi |\\r\\n| ------------- |:-------------:|:-----:|\\r\\n| 组件通信 | ★★★★☆| ★★★★★ |\\r\\n| 稳定性 | ★★★★★ | ★★★★☆ |\\r\\n| 灵活性 | ★★★★☆| ★★★★★ |\\r\\n| 扩展性 | ★★★★☆ | ★★★★★ |\\r\\n| 测试性 | ★★★★★ | ★★★★☆ |\\r\\n| 文件大小 | ★★★☆☆ | ★★★★★ |\\r\\n| 功能特性 | ★★★☆☆ | ★★★★☆ |\\r\\n| DOM性能 | ★★★★★ | ★★★★☆ |\\r\\n| 动画性能 | ★★★★☆ | ★★★★★ |\\r\\n| 抽象复杂度 | ★★★★☆ | ★★★★★ |\\r\\n| 异步编程 | ★★★★★ | ★★★★☆ |\\r\\n\\r\\n可以看得出，鱼和熊掌不可兼得。面向对象编程更具有重用性、灵活性和扩展性，带来的问题就是更加难测试。\\r\\n具体来说，如函数式编程，其测试面积是state1 + state2 + ... + stateN；在面向对象编程中，其测试面积是state1×event1 + state2×event2 + ... + stateN×eventN。\\r\\n\\r\\n总结来说，更加推荐使用面向对象的方式去搭建UI组件化框架。\\r\\n\\r\\n
\\r\\n\\r\\n### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/omi)\\r\\n\\r\\n\"" /***/ }, /* 22 */ @@ -2094,7 +2094,7 @@ }, { key: 'render', value: function render() { - return '\n
\n
\n Omi\n
\n \n
'; + return '\n
\n
\n Omi\n
\n \n
'; } }]); diff --git a/website/docs.html b/website/docs.html index cb9ac50b1..fed6145d8 100644 --- a/website/docs.html +++ b/website/docs.html @@ -15,7 +15,7 @@ document.body.innerHTML = "Does not support IE8, IE7 and IE6...
Please use modern browser!
" + "The website will redirect to GitHub after 3s." setTimeout(function(){ - window.location.href = 'https://github.com/AlloyTeam/Omi'; + window.location.href = 'https://github.com/AlloyTeam/omi'; },3000); return; })()