jsrope v1.0.1-alpha
Editor.md
RopeJS is a purely functional programming web framework that abstracts all elements into a single function, and all data binding is also implemented through passing parameters. So even if you don't use JSX like syntax, you can write a semantical DOM structure using javascript!
install or inject
npm i jsropeor
<script src="https://xxxxxx.ropejs.js"></script>Why use RopeJs?
Rope was born to perform simple page building without any web clis( npm vue-cli create-app... ), so once your HTML introduces RopeJs , your js can be as follows:
<html>
<body>
<style>
span {
display: block;
}
</style>
<script src="./lib/rope.js"></script>
<script type="text/javascript">
const { Rope } = window
const { text, div, hooks, input, list } = Rope;
const rope = new Rope(1);
const app = hooks((props, state, setState) => {
return div(
text(props, 'text'),
text(state, 'text')
);
}, { text: 'Hello world!From state!' });
document.body.appendChild(app({
text: 'Hello world!From props!'
}).element);
</script>
</body>
</html>The operation result is shown in the figure!
Element
VElement
All components inherit from the VElementClass. Let's take the 'div component' as an example to demonstrate the basic functions of a component:
const { div } = Rope;
const child1 = div()
.className('a-div-1')
.style({
width: '50px',
height: '50px',
backgroundColor: 'red'
})
.onClick(() => { alert('a-div-1') })
const child2 = div()
.className('a-div-2')
// Direct nesting is allowed here
div(child1, child2)Text
In Rope, a text component is defined as text, which is essentially a span. Let's take a look at the demonstration below:
const { text } = Rope;
test('I'm a span as text!)
.className('a-text')
.style({
contSize: '12px',
color: 'gray'
})
.onClick(() => { alert('a-text') })Hook Component
Usually, we need to reuse a set of elements, that is, the concept of components. At this point, we need to use hooks
Use
const { hooks, div, text } = Rope;
const myComponent = hooks((props, state, setState) => {
return div(
text(props, 'text'),
text(state, 'text')
)
}, { text: "I'm state.text!" });
const props = {
text: "I'm props.text!"
};
document.body.appendChild(myComponent(props))Bind state && set state
Because RopeJS is filled with functions everywhere, the binding rules for data can be represented by the number of parameters to the function, using text as an example:
Static
The value of text here will never change!
const app = hooks((props) => {
return text(props.text)
});
app({ text: "I'm props.text!" });Dynamics
Here, the value of text always points to object.text!
const app = hooks((props) => {
return text(props, 'text')
})
app({ text: "I'm props.text!" });Dynamics with filter
The third parameter here can be a function, and the final value is based on the return value of the function!
const app = hooks((props) => {
return text(props, 'text', (text) => {
return `Text is: ${text}!`
})
})
app({ text: "I'm props.text!" });1 year ago
1 year ago