const result = watchList.map(({ Title: title, imdbRating: rating }) => ({ title, rating }));import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [value, setValue] = React.useState("");
const [hidden, setHidden] = React.useState("");
const ref = React.useRef();
function onInput(event) {
setValue(event.target.value);
}
React.useEffect(() => {
const observer = new MutationObserver(list => {
for (const mutation of list) {
if (mutation.attributeName === "value") {
setHidden(ref.current.value);
}
}
});
observer.observe(ref.current, {
attributes: true
});
return () => {
observer.disconnect();
};
}, []);
return (
<div className="App">
<div>Hidden: {hidden}</div>
<input type="text" value={value} onInput={onInput} />
<input type="hidden" value={value} ref={ref} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);-- http://lua-users.org/wiki/SimpleRound
function round(num, numDecimalPlaces)
local mult = 10 ^ (numDecimalPlaces or 0)
return math.floor(num * mult + 0.5) / mult
end
function round_or_nil(num)
local diff = math.abs(math.fmod(num, 1))
if diff <= 0.1 or diff >= 0.9 then
return round(num)
end
return nil
end
print(round_or_nil(7))
print(round_or_nil(7.3))
print(round_or_nil(-5.2))
print(round_or_nil(-5.9))
print(round_or_nil(-5.1))
print(round_or_nil(-5.05))// inheritance
class UrlLoader extends React.Component {
state = {
loading: false,
result: null,
error: null,
};
componentDidMount() {
this.setState({
loading: true,
});
this.load().then(
(result) => {
this.setState({
result,
loading: false,
});
},
(error) => {
this.setState({
error,
loading: false,
});
},
);
}
load() {
return fetch(this.props.url);
}
render() {
const { loading, error, result } = this.state;
if (loading) {
return 'Loading...';
}
if (error) {
return (
<div className="error">
{error}
</div>
);
}
return (
<div className="page-result">
{result}
</div>
);
}
}
class FancyUrlLoader extends UrlLoader {
componentDidMount() {
super.componentDidMount();
this.doSomethingElse();
}
doSomethingElse() {
// something else
}
render() {
const result = super.render();
return (
<div className="super-fancy">
{result}
</div>
);
}
}
// somewhere
const MyComponent = () => {
return (
<div>
<FancyUrlLoader url="https://google.com" />
</div>
);
};// composition
class UrlLoader extends React.Component {
state = {
loading: false,
result: null,
error: null,
};
componentDidMount() {
this.setState({
loading: true,
});
this.load().then(
(result) => {
this.setState({
result,
loading: false,
});
},
(error) => {
this.setState({
error,
loading: false,
});
},
);
}
load() {
return fetch(this.props.url);
}
render() {
const { loading, error, result } = this.state;
let render;
if (loading) {
render = 'Loading...';
} else if (error) {
render = (
<div className="error">
{error}
</div>
);
} else {
render = (
<div className="page-result">
{result}
</div>
);
}
return this.props.children(render);
}
}
class FancyMaker extends React.Component {
componentDidMount() {
this.doSomethingElse();
}
doSomethingElse() {
// something else
}
render() {
return (
<div className="super-fancy">
{this.props.children}
</div>
);
}
}
// somewhere
const MyComponent = () => {
return (
<div>
<UrlLoader url="https://google.com">
{(children) => (
<FancyMaker>
{children}
</FancyMaker>
)}
</UrlLoader>
</div>
);
};$buffer1.Add("`"$temp`",")
In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.