regularjs / guide Goto Github PK
View Code? Open in Web Editor NEWregularjs's offcial guide
regularjs's offcial guide
定义一个组件: dialog,需要有2个插槽,
1,内容区域
2,底部区域
请问有案例吗,谢谢
这部分文档不再放入新文档,放在issue管理吧
网易内部有大量的用户,使用的单页方案都是『NEJ的umi调度系统』,由于单页系统中单个模块逻辑较小,很多时候只需要一个Regular组件即可。
所以经常会有同事写出这种重复的代码,把一个大的Regular组件插入到空空的NEJ模块中:
NEJ模块的html文件(module/test/index.html
):
<meta charset="utf-8">
<textarea name="ntp" id="module-test">
<div class="j-flag"></div>
</textarea>
<!-- @TEMPLATE -->
<textarea name="js" data-src="./index.js"></textarea>
<!-- /@TEMPLATE -->
NEJ模块的js文件(module/test/index.js
):
_pro.__onShow = function(_options) {
new TestComponent({
data: {...}
}).$inject(this.__eFlag);
...
}
或者是这样,把大模块的功能拆成几个小组件分别插入到空空的NEJ模块中:
NEJ模块的html文件(module/test/index.html
):
<meta charset="utf-8">
<textarea name="ntp" id="module-test">
<div class="j-flag"></div>
<div class="j-flag"></div>
<div class="j-flag"></div>
</textarea>
<!-- @TEMPLATE -->
<textarea name="js" data-src="./index.js"></textarea>
<!-- /@TEMPLATE -->
NEJ模块的js文件(module/test/index.js
):
_pro.__onShow = function(_options) {
new TestTab(...).$inject(this.__eFlags[0]);
new TestSummary(...).$inject(this.__eFlags[1]);
new TestDetail(...).$inject(this.__eFlags[2]);
...
}
在一个项目中,如果一两个模块这样做可以容忍,但是多了就会有点小抓狂。
其实我们想要的功能很简单——用NEJ的umi调度系统直接路由Regular组件。
对此,@赵雨森同学 在NEJ里封装了一个叫RegularModule的util(在NEJ目录下的util/dispatcher/regularModule
中)。
直接在NEJ的module
目录下写Regular代码,方式和写Regular的其他组件一样。
Regular模块的js文件(module/test/index.js
):
define([
'regular!./index.html'
...
], function(template, ...) {
var TestModule = Component.extend({
template: template,
config: function() {
...
}
});
return TestModule;
});
Regular模块的html文件(module/test/index.html
):
<div on-click={this.soEasy()}>{'按Regular模板写就行'}</div>
对于上面的Regular模块组件,NEJ肯定调度不了的。接下来就要引入RegularModule,并注册umi:
define([
'util/dispatcher/regularModule',
'regular!./index.html'
...
], function(_m, template, ...) {
var TestModule = Component.extend({
template: template,
config: function() {
...
}
});
return _m._$regist('test', TestModule); // 注册umi
});
最后一步,也是最关键的一步,在模块配置文件中添加配置。
这与以往的NEJ模块不同,要用js的方式把该模块引入,然后添加到相应的位置:
NEJ.define([
'base/klass',
'base/util',
'util/dispatcher/dispatcher',
'pro/widget/module',
'{pro}../html/module/test/index.js'
], function(_k, _u, _s, _m, _$$TestModule, _p){
/**
* 启动模块配置
*/
_pro.__startup = function() {
_t._$startup({
// 规则配置
rules: {
title: {
'/m/test/': 'Test模块',
...
},
alias: {
'test': '/m/test/',
...
}
},
// 模块配置
modules: {
'/m/test/': _$$TestModule,
// '/m/test/': 'module/test/index.html', // 原来的配置
...
}
});
}
});
这样就大功告成了。
NEJ的模块方法在RegularModule中可以继续用,例如:
define([
'util/dispatcher/regularModule',
'regular!./index.html'
...
], function(_m, template, ...) {
var TestModule = Component.extend({
template: template,
config: function() {
...
},
__onShow: function(_options) {
console.log('show', _options);
},
__onRefresh: function(_options) {
console.log('refresh', _options);
},
__onMessage: function(_options) {
console.log('message', _options);
},
__onBeforeHide: function(_options) {
console.log('beforeHide', _options);
},
__onHide: function() {
console.log('hide');
}
});
return _m._$regist('test', TestModule);
});
默认情况下,当模块切换出去再切换进来,即__onHide
再__onShow
时,Regular组件是不会销毁的。
但有些情况下,比如一些表单模块或者要刷新的列表模块,我们希望模块切换后整个组件的内容重置。
可以自己实现reset
方法,在__onHide
时把组件中的data
清理一次,但这样有些麻烦。
在RegularModule中有另一种方法,在__onHide
时把这个组件destroy掉,在__onShow
时RegularModule会重新构建这个组件。示例如下:
define([
'util/dispatcher/regularModule',
'regular!./index.html'
...
], function(_m, template, ...) {
var TestModule = Component.extend({
template: template,
config: function() {
...
},
__onHide: function() {
this.destroy(); // 起到reset的作用
}
});
return _m._$regist('test', TestModule);
});
测试版本:0.4.3
测试步骤:
1、先创建一个简单的regular组件
var List = Regular.extend({
template: '
3、将模型中的数据倒序排列
list.data.list.reverse();
list.$update();
console.log(list.$refs.cnt.innerHTML);
输出结果:
比较步骤3和步骤2的输出结果,发现只有
参考:
http://webcode.nie.netease.com/cuz/19/edit?html,js,console,output
http://regularjs.github.io/reference/?api-zh#api-reference-静态接口-componentimplement Regular的类式继承体系来源于著名的ded/klass.下的代码
http://regularjs.github.io/guide/zh/animation/syntax.html Exmaple 的代码
because NEJ doesn't support importing umd library directly, we have to use regular in this way
define( [
'path/to/regular'
], function ( R ) {
Regular.extend( ... )
} )
Is it necessary to add some caveat in regular guide about this?
@AndyRightNow said he can provide some help on this ( PR )
head to regularjs/regular#150 for details
feel free to close this issue if we don't want this ;)
http://regularjs.github.io/guide/zh/basic/animation.html
In example,
<div r=animation="on: click; class: animated fadeIn; wait: 1000; class: animated fadeOut; "></div>
should be
<div r-animation="on: click; class: animated fadeIn; wait: 1000; class: animated fadeOut; "></div>
@leeluolee 指南只有一节了?
我按着文档最后一页实现了整个demo,后来好奇在getList()里的头部打了个log。刷新页面发现刷新一次页面getList()被调用了10次。请问这是为什么呢?
注册一个指令的时候,function(el,value,attrs),这个时候,我想对这个dom节点绑定的模型做操作,这个时候如何获取模型呢?
r-style插值在ie8下好像不兼容
r-style={{height: logoHeight+'px'}}
第二种尝试:用style来进行插值,将样式拼接成字符串插入到style属性下
style={slogoHeight}
但是好像只能识别一个样式,比如slogoHeight="height:120px"
如果像这样添加多个样式,slogoHeight="height:120px;line-height:120px;"
效果就是一个都没有添加上...
第三种尝试:用style进行插值
slogoHeight=120px
style="height:{slogoHeight}; line-height:{slogoHeight}"
ie8下正常
想知道ie8下的样式插值,只有这一种解决方式么
代码如下:
// template
<div r-hide="!selecter" class="background"></div>
// js 组件部分
setTimeout(function () {
this.data.selecter = '';
}.bind(this), 50);
异步函数中改变组件的data值, r-hide
指令无法触发
我在官方文档找了很久都没有找到
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.