Omi to omi
This commit is contained in:
kmdjs
parent
834669e2e9
commit
a02c0cc5c1
|
|
@ -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):
|
||||
|
||||
<img alt="Omi" src="http://alloyteam.github.io/omi/asset/omi_group.png">
|
||||
|
|
@ -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.
|
||||
|
|
@ -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\
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -41,5 +41,5 @@ Omi的理念是基于面向对象编程体系，内建积木系统。
|
|||
|
||||
<hr/>
|
||||
|
||||
### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/Omi)
|
||||
### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/omi)
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
}, 2000);
|
||||
</script>
|
||||
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title>Omi DialogTest</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.lite.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/Omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -56,12 +56,12 @@ class Head extends Omi.Component {
|
|||
return `
|
||||
<div class="head bord-btm">
|
||||
<div class="logo_box">
|
||||
<a href="https://github.com/AlloyTeam/Omi">Omi</a>
|
||||
<a href="https://github.com/AlloyTeam/omi">Omi</a>
|
||||
</div>
|
||||
<ul class="menu">
|
||||
<li class="github_li"><a href="https://github.com/AlloyTeam/Omi">Github</a>
|
||||
<li class="github_li"><a href="https://github.com/AlloyTeam/omi">Github</a>
|
||||
<li><a href="http://alloyteam.github.io/omi/example/playground/">Playground</a></li>
|
||||
<li><a href="https://github.com/AlloyTeam/Omi/tree/master/docs">[Edit the Docs]</a></li>
|
||||
<li><a href="https://github.com/AlloyTeam/omi/tree/master/docs">[Edit the Docs]</a></li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`;
|
||||
|
|
|
|||
|
|
@ -1867,7 +1867,7 @@
|
|||
/* 12 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
module.exports = "module.exports = \"<h2 id=\\\"组件\\\">组件</h2>\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{items.length}}</button>\\r\\n </form>\\r\\n </div>`;\\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 `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <List omi-id=\\\"list\\\" name=\\\"list\\\" />\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{length}}</button>\\r\\n </form>\\r\\n </div>`;\\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 = \"<h2 id=\\\"组件\\\">组件</h2>\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{items.length}}</button>\\r\\n </form>\\r\\n </div>`;\\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 `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <List omi-id=\\\"list\\\" name=\\\"list\\\" />\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{length}}</button>\\r\\n </form>\\r\\n </div>`;\\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 = \"<h2 id=\\\"Omi的理念\\\">Omi的理念</h2>\\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<hr/>\\r\\n\\r\\n### 全文结束，感谢阅读。[开始Omi之旅吧!](https://github.com/AlloyTeam/Omi)\\r\\n\\r\\n\""
|
||||
module.exports = "module.exports = \"<h2 id=\\\"Omi的理念\\\">Omi的理念</h2>\\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<hr/>\\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 <div class="head bord-btm">\n <div class="logo_box">\n <a href="https://github.com/AlloyTeam/Omi">Omi</a>\n </div>\n <ul class="menu">\n <li class="github_li"><a href="https://github.com/AlloyTeam/Omi">Github</a>\n <li><a href="http://alloyteam.github.io/omi/example/playground/">Playground</a></li>\n <li><a href="https://github.com/AlloyTeam/Omi/tree/master/docs">[Edit the Docs]</a></li>\n </li>\n </ul>\n </div>';
|
||||
return '\n <div class="head bord-btm">\n <div class="logo_box">\n <a href="https://github.com/AlloyTeam/omi">Omi</a>\n </div>\n <ul class="menu">\n <li class="github_li"><a href="https://github.com/AlloyTeam/omi">Github</a>\n <li><a href="http://alloyteam.github.io/omi/example/playground/">Playground</a></li>\n <li><a href="https://github.com/AlloyTeam/omi/tree/master/docs">[Edit the Docs]</a></li>\n </li>\n </ul>\n </div>';
|
||||
}
|
||||
}]);
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
document.body.innerHTML = "Does not support IE8, IE7 and IE6...<br/>Please use modern browser!<br/>" +
|
||||
"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;
|
||||
})()
|
||||
|
|
|
|||
Loading…
Reference in New Issue