regularjs / guide Goto Github PK

View Code? Open in Web Editor NEW

52.0 52.0 19.0 5.24 MB

regularjs's offcial guide

HTML 93.39% JavaScript 2.67% CSS 3.94%

guide's People

Contributors

Stargazers

Watchers

Forkers

susfly leeluolee saintshaga chunboyu wangtaox swiminsky yuyingwu lisir yiqifendou elesos luminousssss zxc0328 zhonghe289 xie641200680 xiongxin aweiu six006 httpsa soonyoo

guide's Issues

求当组件有多个插槽区域时的解决办法

定义一个组件: dialog,需要有2个插槽,
1,内容区域
2,底部区域

请问有案例吗,谢谢

与NEJ Module结合

网易内部有大量的用户，使用的单页方案都是『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中）。

RegularModule使用指南

1. 直接在模块中上Regular

直接在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>

2. 在模块的js文件中注册模块

对于上面的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
});

3. 添加模块配置

最后一步，也是最关键的一步，在模块配置文件中添加配置。

这与以往的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',    // 原来的配置
                ...
            }
        });
    }
});

这样就大功告成了。

补充1：NEJ的模块方法

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);
});

补充2：模块组件切换时的重置问题

默认情况下，当模块切换出去再切换进来，即__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);
});

regularJS的track by没起作用

测试版本：0.4.3
测试步骤：
1、先创建一个简单的regular组件
var List = Regular.extend({
template: '

{#list list as item by item.a}

{item.a}

{/list}

'
});
var list = new List({
data: {
list: [{a: 0}, {a: 1} , {a: 2}, {a: 3}, {a: 4}, {a: 5}]
}
});
2、给列表中的每个div元素加上一个name属性作为标记
var divs = list.$refs.cnt.getElementsByTagName('div');
for(i = 0, l = list.data.list.length; i < l; i++){
divs[i].setAttribute('name','test');
}
console.log(list.$refs.cnt.innerHTML);
输出结果：

<\div name="test">\3

3、将模型中的数据倒序排列
list.data.list.reverse();
list.$update();
console.log(list.$refs.cnt.innerHTML);
输出结果：

比较步骤3和步骤2的输出结果，发现只有

的name属性还在，其他5个div的name属性都没有了，dom元素应该重新生成了，不是同一个dom元素了。

参考:
http://webcode.nie.netease.com/cuz/19/edit?html,js,console,output

regular文档代码笔误

http://regularjs.github.io/reference/?api-zh#api-reference-静态接口-componentimplement Regular的类式继承体系来源于著名的ded/klass.下的代码

http://regularjs.github.io/guide/zh/animation/syntax.html Exmaple 的代码

Add caveat about using regular with NEJ

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 ;)

There is a typo on document

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>

第三种尝试：用style进行插值
slogoHeight=120px
style="height:{slogoHeight}; line-height:{slogoHeight}"
ie8下正常

想知道ie8下的样式插值，只有这一种解决方式么

异步队列中改变data数据无法触发指令

代码如下：

// template
<div r-hide="!selecter" class="background"></div>
// js 组件部分
setTimeout(function () {
    this.data.selecter = '';
}.bind(this), 50);

异步函数中改变组件的data值， r-hide指令无法触发

Regularjs是如何获取焦点事件的呢？

我在官方文档找了很久都没有找到

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.