tencent / omi Goto Github PK
View Code? Open in Web Editor NEWWeb Components Framework - Web组件框架
Home Page: http://omijs.org
License: Other
Web Components Framework - Web组件框架
Home Page: http://omijs.org
License: Other
Could there rise any problems when defining Omi component with native browser implementation ?
For example i would use customElements.define('like-button', LikeButton)
instead of define('like-button', LikeButton)
method and just use regular HTML tag instead of render(h('like-button'), 'body')
.
I can understand that there might come issues with browser compatibility, but could any other problem rise?
Here's example for my question.
https://jsbin.com/zumiday/edit?html,output
omi 的模板换成artTemplate后在IE8 运行不了。
我在入口文件更换了模板
import artTemplate from "artTemplate";
Omi.template = function(tpl, data){
return artTemplate.compile(tpl)(data);
}
之后在组件中使用artTemplate语法
如下:
import Omi from "omi";
const stylecss = require('./style.css');
// const tpl = require('./index.html');
// console.log(tpl)
class Header extends Omi.Component {
constructor (data) {
super(data);
this.data.name = "header louis";
this.data.items = [{
id:'1'
,name:'louis'
},{
id:'2'
,name:'wq'
},{
id:'3'
,name:'shirley'
}];
}
handleDelClick(dom,evt,index){
this.data.items.splice(index,1);
this.update();
}
style () {
return stylecss;
}
render () {
return `
<div class="header-css">
{{name}}
<ul>
{{each items as item index}}
<li>{{index}} - {{item.name}} <a href="javascript:void(0)" onclick="handleDelClick(this,event,{{index}})">x</a></li>
{{/each}}
</ul>
</div>
`;
}
}
export default Header;
上面的代码在chrome上没有问题,但是在IE8上面直接显示的是
{Template Error}
先说说我为什么想改模板,因为自带的模板在循环时无法获取索引,在删除时比较困难。
Eslint
风格检查(代码风格实在有点飘逸。。。);现在ng2和ng4,vue2都换成for-of写法了。
可以统一一下,切换成本。
建议改成o-for="item of items"这样的写法。
https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md#store
当使用 store 体系是
应该是 当使用 store 体系时
吧
没有react直观 期待之后的更新
目前能想到的办法就是不断地update相关的值,性能感觉不是特别好
我已经在index页面上引入了es5-shim.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Omi</title>
<script src="js/es5-shim.min.js"></script>
<link rel="stylesheet" href="css/index-ef14a72eca.css">
</head>
<body>
<script src="js/vendor.9da31384.js"></script>
<script src="js/omi.27cdf71e.js"></script>
<script src="js/index.25f7b79d.js"></script>
</body>
</html>
但是在运行的时候还是出现了错误。
错误如下:
网页错误详细信息
用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.2)
时间戳: Thu, 30 Mar 2017 07:39:28 UTC
消息: 对象不支持此操作
行: 1059
字符: 2
代码: 0
URI: file:///D:/screwspace/webfront/omi/test/dist/js/omi.27cdf71e.js
消息: 对象不支持此属性或方法
行: 1
字符: 1
代码: 0
URI: file:///D:/screwspace/webfront/omi/test/dist/js/omi.27cdf71e.js
消息: 缺少标识符、字符串或数字
行: 16
字符: 79
代码: 0
URI: file:///D:/screwspace/webfront/omi/test/dist/js/index.25f7b79d.js
应该还是兼容性的问题。
如题
omi-router 没有history模式吗?
I cannot find the repository for babel-preset-omi
The README seems to be the copy of babel-preset-react
Any hints?
只是一个提议,感觉 Jekyll 或 Hexo 更适合做这种静态的文档网站。
React 是在主项目中使用 Jekyll 生成文档。
Vue 是另开了一个项目,使用的 Hexo。
就像 React 那样:
LikeButton = React.create({...})
CommentBox = React.create({
render: function () {
return (
...
<LikeButton/>
);
}
})
因为render会给模板套一层div,所以无法传递html和body的height:100%了
多谢大家献计献策,留言的 Github 昵称是入场凭证之一,如果人数够了留言顺序分先后!
🥇 抽奖也从留言名单里抽取 🥇
Thank you for your advice. Github's nickname is one of the admission vouchers. If there are enough people left, the order of the messages will be different.
每次给data赋值之后得手动的调用update页面才会更新数据?
没有配套的router吗?
Q1: 这算重复造轮子吗?
Q2: 和目前主流的 Vue 或 React 框架相比,有什么优势所在吗?
The unit tests fail due to Saucelabs and that the JWT plugin can not be used anymore.
请问有计划支持TypeScript语言吗?
虽然ES6的使用解决了很多问题,但是随着组件化和模块化的前端开发模式,以及业务量的增大,ES6急需增强以便辅助开发者专心开发业务,TypeScript就是为此而生的。
TypeScript可以为JS添加类型和智能分析,可以帮助开发者构建大型的、强壮的软件。
TypeScript也不会为开发者增加很大的学习成本,TS≈Type+ES。
现在三大流行前端库或者框架(React、Vue和Angular 2)都可以使用TypeScript来编码。
如题
如题。
我的代码如下,非常简单的helloworld:
var data = {
name:'louis'
};
var helloWorld = Nuclear.create({
render:function(){
console.log("render")
return ''+
'<div>hello,{{name}}</div>';
}
});
new helloWorld( data, document.body);
用chrome调试时发现控制台中输出了两个render,既然走了两次render,那么言外之意也会走两次onfresh。这样对于一个ui庞大的SPA应用,会严重影响性能的。
当然,我不知道这是bug,还是我那个地方写的有问题。
貌似这三者是一样的作用?
步骤:
$ npm install omi-cli -g
/usr/local/bin/omi -> /usr/local/lib/node_modules/omi-cli/bin/omi
/usr/local/lib
└── [email protected]
$ omi init omi-demo
env: node\r: No such file or directory
system:macos
node:6.9.1
请看我写的demo,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的嵌套</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/nuclear.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
//第三方模板的替换
Nuclear.render = function(tpl, data){
return template.compile(tpl)(data);
};
var ItemList = Nuclear.create({
deleteEvent:function(index){
var _this = this;
},
add:function(){
this.option.users.push({"name":"333"});
},
render:function(){
return '\
<ul>\
{{each users as item index}}\
<li>{{item.name}} <a onclick="deleteEvent({{index}})" href="javascript:void(0)">delete</a></li>\
{{/each}}\
</ul>\
';
}
});
var App = Nuclear.create({
install: function () {
var _this = this;
var listData = _this.option.users;
// console.log(listData)
this.childrenOptions = [{users:listData}];
},
add:function(){
this.itemList.option.users.push({name:'aaa'});
},
clear:function(){
this.itemList.option.users = [];
},
render:function(){
return '\
<div nc-id="app">\
<child nc-constructor="ItemList" nc-name="itemList"></child>\
<div><a onclick="add()" href="javascript:void(0)">添加</a></div>\
<div><a onclick="clear()" href="javascript:void(0)">清空</a></div>\
</div>\
';
}
});
var app = new App({
users:[{
name:'item1'
},{
name:'item2'
},{
name:'item3'
}]
},$("#demo").get(0));
</script>
</body>
</html>
在App的install方法中初始化ItenList组件,在初始化的时候,我给ItemList组件的users初始值是App的option.users。之后问题就来了,执行的add方法添加数据时没有效果。。。
如果我讲ItemList初始化中的users赋值成[],即:this.childrenOptions = [{users:[]];,add方法就好使。
再者就是我执行清空之后,将this.itemList.option.users = [];赋成一个新数组后,add方法也好使了。
类似我这样的写法应该是很正常的,通过给App初始化的数据给各个组件初始化。
最新版本的omi3版本还支持IE6吗?
如果不支持ie6,至少兼容ie哪个版本?
docs/
, tutorial/
, website/
, todomvc/
, md2site/
这几个目录感觉功能重复,对新人不友好。
不知道可否整理一下?感觉眼花缭乱的。。。
我实验了一下声明事无限嵌套的demo,感觉很好。可是我想到另一个问题。就是组件之间如何通信?
比如最上层有一个app组件,app组件里面有两个组件,组件A和组件B,组件A的点击事件或者方法里面,如何更改组件B的内容呢?为此我写了一个demo。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>特殊标志符</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/nuclear.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
//第三方模板的替换
Nuclear.render = function(tpl, data){
return template.compile(tpl)(data);
};
//子组件
var SubCompement = Nuclear.create({
render:function(){
return '<div>{{title}}</div>';
}
,installed:function(){
var _this = this;
// console.log(_this)
// var parent = _this.option.parent;
// parent.option.text = "11111111";
}
});
var SubButton = Nuclear.create({
changeParentTitle:function(){
console.log(this)
//这个方法中如何修改SpecialMark组件里面的option?
console.log(this.node.parentNode);
},
render:function(){
return '<button onclick="changeParentTitle(event)">{{buttonText}}</button>';
}
});
var SpecialMark = Nuclear.create({
install: function () {
var _this = this;
// debugger;
this.childrenOptions = [{title: "Todo"},{buttonText:"改变父组件的内容"}];
}
//改变title的方法
,changeTitle:function(){
var _this = this;
//此方法用来修改SubCompement组件的内容,也就是改变子组件的内容
this.title.option.title = "Todo changed";
}
,render:function(){
return '\
<div class="demo">\
<child nc-constructor="SubCompement" nc-name="title"></child>\
<child nc-constructor="SubButton" nc-name="subButton"></child>\
<div>\
<div>{{title}}</div>\
<input type="text" nc-id="inputDom" value="{{text}}" />\
<input type="checkbox" nc-class="chechbox" />\
<input type="checkbox" nc-class="chechbox" />\
<button onclick="changeTitle(event)">changeTitle</button>\
</div>\
</div>\
';
}
,installed:function(){
var _this = this;
//在任何一个方法中可以通过this.inputDom获取到这个input的dom节点,返回的是原声的dom节点,可以通过jquery包装后继续使用
var text = this.inputDom.value;
//nc-class也是特殊标识符,标志之后,可以通过this.class内容获取到一个数组,但是只能获取衡等于chechbox的内容,如果有额外样式的就获取不到了。
var chechboxDoms = this.chechbox;
}
});
new SpecialMark({
title:'父组件的内容',
text:'这是一个demo'
},$("#demo").get(0));
</script>
</body>
</html>
上面的例子中,我想用SubButton组件的click事件来更改父组件的title值,但是不知道用什么方法能修改。
假设有三个自定义标签A,B,C,使用结构如下:
<A> <B> <C>...</C> <A>...</A> <A>...</A> </B> </A>
我想将A标签包含的内容全部渲染到A中,B包含的内容渲染到B中,不知道我应该怎样解决
这个问题的难点在于三个标签可以互相包含,如果通过传入data,那样代码的可读性就太差了
Hi there!
Omi looks really neat! I'm wondering you think it would be possible to use Preact as an upstream dependency rather than inlining it? There are some "hooks" in the source that might be useful for this (options.vnode
, options.event
, etc).
The advantage of doing so would be that when Preact is updated, Omi would be updated without having to write any code 🍰
Cheers!
-jason
之前的md2site项目,是没维护了么,有替代品么
前端框架好的太多 现在关键缺一个整体完美支持小程序的框架
morphdom.js
,但是放在src里面,而没有放到package.json的require里面?这样没法正常更新morphdom.js
。src/omi.js
有点乱,另外有出处就更好了。...
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
...
关于第一个问题:我看了下,貌似是对文件进行修改,增加了插槽。
参照官方教程,明白了路由的使用。
现在我需要使用嵌套路由。
即路由默认进入home页面(将home组件放置于#views区域)后,我的home页面也有一个路由插座(#home-sub),我如何把其它组件放到home-sub对应的页面中呢?
下面是代码
import OmiRouter from 'omi-router'
class HomeChild extends Omi.Component {
render() {
return `
<p>child</p>
`;
}
}
Omi.tag('HomeChild', HomeChild)
class Home extends Omi.Component {
install(){
OmiRouter.init({
routes:[
{path:'/home/sub1',component:HomeChild},// TODO demo
{path:'/home/sub2',component:HomeChild},
{path:'/home/sub3',component:HomeChild}
],
renderTo:'#home-sub',
defaultRoute:'/home/sub1'
})
}
render() {
return `
<div >Home</div>
<ul>
<li><a omi-router to="/home/sub1" >yanagao</a></li>
<li><a omi-router to="/home/sub2" >vorshen</a></li>
<li><a omi-router to="/home/sub3" >dntzhang</a></li>
</ul>
<div id="home-sub"> </div>
`
}
}
Omi.tag('Home', Home)
export default Home
这是仿照官方omi-router/example/simple/main.js写的路由相关内容。
因为已经在main.js里install一次了,运行到它时会报错,如下:
index.js:41 Uncaught TypeError: Cannot read property 'onInstalled' of undefined
at Object.OmiRouter.init (index.js:41)
at Home.install (home.js:14)
at Object.Omi.render (omi.js:369)
at render (index.js:100)
at index.js:42
at omi.js:1266
at Array.forEach (<anonymous>)
at App._execInstalledHandlers (omi.js:1265)
at Object.Omi.render (omi.js:373)
at Object.<anonymous> (index.js:39)
请问正确的使用方式是什么样?
http://tencent.github.io/omi/ 这个网址能打开
alloyteam开头那个 404了
为什么不用自家的 js 模板呢(!art-template - Template Engine | http://aui.github.com/artTemplate/)? 自家的框架,不用自家的模板,真是搞不懂。。真是没事做。。看来腾讯集团部门之间。。。。
腾讯开源的东西不多啊,有种闷声发大财的感觉。
为了更好联动关系,我写了三个组件,App、ItemList以及ListTitle
其中ItemList和ListTitle都属于App的子组件。ListTitle动态显示列表的数量。为了当ItemList发生变化,及时的更新到ListTitle上,我用了一个比较慵懒的方法,就是共享App的option。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的嵌套</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/nuclear.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
//第三方模板的替换
Nuclear.render = function (tpl, data) {
return template.compile(tpl)(data);
};
var ListTitle = Nuclear.create({
render:function(){
return '<div>List num {{users.length}}</div>'
}
});
var ItemList = Nuclear.create({
deleteEvent: function (index) {
this.option.users.splice(index, 1);
},
add: function () {
this.option.users.push({ "name": "333" });
},
render: function () {
return '\
<ul>\
{{each users as item index}}\
<li>{{item.name}} <a onclick="deleteEvent({{index}})" href="javascript:void(0)">delete</a></li>\
{{/each}}\
</ul>\
';
}
});
var App = Nuclear.create({
install: function () {
var _this = this;
// var listData = _this.pureOption.users;
// this.childrenOptions = [
// _this.pureOption
// ,_this.pureOption
// ];
this.childrenOptions = [
{users:_this.pureOption.users}
,{users:_this.pureOption.users}
];
},
add: function () {
this.itemList.option.users.push({ name: 'aaa' });
},
clear: function () {
this.itemList.option.users = [];
},
render: function () {
return '\
<div nc-id="app">\
<child nc-constructor="ListTitle" nc-name="listTitle"></child>\
<child nc-constructor="ItemList" nc-name="itemList"></child>\
<div><a onclick="add()" href="javascript:void(0)">添加</a></div>\
<div><a onclick="clear()" href="javascript:void(0)">清空</a></div>\
</div>\
';
}
});
var app = new App({
users: [{
name: 'item1'
}, {
name: 'item2'
}, {
name: 'item3'
}]
}, "#demo");
</script>
</body>
</html>
可是上述代码在运行时直接就报错了。内容如下:
nuclear.js:1453 Uncaught SyntaxError: Invalid regular expression: /\bforEach\b/: Stack overflow(…)
问题在于下面的这个代码
this.listTitle = new ListTitle(this.option);
this.itemList = new ItemList(this.option);
只要我注释其中一条就可以了,只要是有两个初始化则就报错。
store没有模块的概念?
对于一个复杂的项目来说,这个store写起来会很累吧。
除非我自己影响的把data划分成模块。
而且对于方法我还得使用各个模块的前缀进行划分。
比如下面的代码
export default {
data: {
manager:{//manager模块用到的data
items:[]
}
,userprofile:{
id:'1',
name:'louis'
}
},
methods: {//对于方法为了模块化,所以要定义namespace
["manager/add"]: function (value) {//manager模块下的add方法
},
["userprofile/update"]:function(){//userprofile模块下的update方法
}
}
}
为了区分模块,似乎只能用上面的方式吗?
js目录添加的vendor.js中没有Omi全局对象上也没有useStore方法
// docs_main_cn.js
import Omi from 'omi';
import Frame from '../component/frame.js';
import AppStore from './app-store.js'
var store = new AppStore({lan:'cn'})
Omi.useStore(store,true);
Omi.render(new Frame(),'body',true);
浏览器控制台报错:
docs-cn.js:22 Uncaught TypeError: _omi2.default.useStore is not a function
Omi的测试项目的vendor.js【132KB】和md2site的vendor.js【177KB】不一样,没懂为什么
AppStore继承Omi.Store且添加了实例方法来将Markdown进行转化,应该不会增加md2site的vendor.js的文件体积.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.