uz
Feedback
ToCode

ToCode

Kanalga Telegramโ€™da oโ€˜tish

ื˜ื™ืคื™ื ืงืฆืจื™ื ืœืžืชื›ื ืชื™ื ืžืืช ื™ื ื•ืŸ ืคืจืง

Ko'proq ko'rsatish
1 419
Obunachilar
-124 soatlar
Ma'lumot yo'q7 kunlar
-230 kunlar
Postlar arxiv
ToCode
1 419
ืฉื•ื‘ ืืชื ื™ื›ื•ืœื™ื ืœืฉื—ืง ืขื ื”ืงื•ื“ ื‘ืื•ืชื• ืงื•ื“ืกื ื“ื‘ื•ืงืก ื‘ืงื™ืฉื•ืจ: https://codesandbox.io/s/damp-rain-q71w55?file=/src/App.js ื›ืฉื ืœื—ืฅ ืขืœ ื”ื›ืคืชื•ืจ ื”ื—ื“ืฉ ืื ื—ื ื• ืจื•ืื™ื ืฉืงื™ื‘ืœื ื• ื”ื•ื“ืขื•ืช render ืจืง ืžื”ืคืจื™ื˜ื™ื ืฉื‘ืืžืช ื”ืฉืชื ื• (ืฉื ื™ ืคืจื™ื˜ื™ื, ืื—ื“ ืื™ื‘ื“ ืืช ื”ืชื•ืกืคืช ืœื˜ืงืกื˜ ื•ื”ืฉื ื™ ืงื™ื‘ืœ ืชื•ืกืคืช). ื‘ืชื•ื›ื ื™ื•ืช ื’ื“ื•ืœื•ืช ื™ื•ืชืจ, ื›ืฉืฉืžื™ืจื” ืขืœ ื–ื”ื•ืช References ื™ื›ื•ืœื” ืœื—ืกื•ืš ืœื›ื ืืคืงื˜ื™ื, ืจื ื“ืจื™ื ื•ืขื•ื“ ื‘ืœืื’ื ื™ื, ื˜ื›ื ื™ืงื” ื›ื–ื• ืชื•ื›ืœ ืœืฉืžื•ืจ ืขืœ ื”ืงื•ื“ ืฉืœื›ื ืขืงื‘ื™ ื’ื ืื—ืจื™ ืงื‘ืœืช ืขื“ื›ื•ื ื™ื ืžื”ืฉืจืช.

ToCode
1 419
# ืื™ืชื—ื•ืœ ืจื™ื“ืืงืก ืžืžื™ื“ืข ืฉืžื’ื™ืข ืžื”ืฉืจืช ืื ื—ื ื• ืื•ื”ื‘ื™ื ื‘ืจื™ื“ืืงืก ืฉื›ืœ ื”ืžื™ื“ืข ืฉืžื•ืจ ื‘ืื•ื‘ื™ืงื˜ ืื—ื“ ื•ืงืœ ืžืื•ื“ ืœืขื“ื›ืŸ ื‘ืžื›ื” ืื—ืช ืืช ื›ืœ ื”ืืคืœื™ืงืฆื™ื”. ื›ืฉื™ืฉ ืœื™ ืžื™ื“ืข ืฉืฉืžื•ืจ ื‘ืฆื“ ื”ืฉืจืช, ืื ื™ ื™ื›ื•ืœ ืชืžื™ื“ ืœืฉืœื•ืฃ ืืช ื” JSON ืฉืœ ื›ืœ ื”ืžื™ื“ืข, ืœื”ื•ืฆื™ื dispatch ืฉืžื—ืœื™ืฃ ืืช ื”ืกื˜ื™ื™ื˜ ื‘ืืคืœื™ืงืฆื™ื” ื‘ืžื” ืฉืงื™ื‘ืœืชื™ ืžื”ืฉืจืช ื•ื”ื›ืœ ืžืชืขื“ื›ืŸ. ื”ื—ื™ืกืจื•ืŸ ื‘ื’ื™ืฉื” ื›ื–ืืช ื”ื•ื ืฉืื—ืจื™ "ื”ืชืงื ืช" JSON ื—ื“ืฉ ืžื”ืฉืจืช, ื›ืœ ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ื™ืจื•ื ื“ืจื• ืžื—ื“ืฉ, ื’ื ืื ื”ื—ืœืง ืฉืœื”ืŸ ื‘ืžื™ื“ืข ืœื ื”ืฉืชื ื”. ื‘ JavaScript ื›ืฉืื ื™ ืžื—ืœื™ืฃ ืืช ื›ืœ ื”ืกื˜ื™ื™ื˜ ื‘ืื•ื‘ื™ืงื˜ ื—ื“ืฉ, ื’ื ืื ื–ื”ื”, ืขื“ื™ื™ืŸ ื”ื—ืœืคืชื™ ืืช ื” References ื•ืœื›ืŸ ืจื™ืืงื˜ ืœื ื™ื›ื•ืœ ืœื–ื”ื•ืช ืฉืœื ื”ื™ื” ืฉื™ื ื•ื™. ื‘ืคื•ืกื˜ ื–ื” ืื ื™ ืจื•ืฆื” ืœื”ืจืื•ืช ื’ื™ืฉื” ืงืฆืช ื™ื•ืชืจ ืžืชื•ื—ื›ืžืช ืœืฉื™ืœื•ื‘ ืฉื™ื ื•ื™ื™ื ืžื”ืฉืจืช, ืชื•ืš ืฉื™ืžื•ืฉ ื‘ JSON Patch, ื›ื“ื™ ืœืขื“ื›ืŸ ืจืง ืืช ื”ื—ืœืงื™ื ื‘ืื•ื‘ื™ืงื˜ ื” State ืฉื‘ืืžืช ื”ืฉืชื ื•, ื›ื“ื™ ืœื”ื™ื•ืช ืžืกื•ื’ืœ ืœืฉืžื•ืจ ืขืœ ืขืงื‘ื™ื•ืช ื‘ืจืžืช ื” References ื‘ื™ืŸ ืขื“ื›ื•ื ื™ื ืžื”ืฉืจืช. ## ื”ืงื•ื“ ืขื ื”ื‘ืขื™ื” ื”ืชื•ื›ื ื™ืช ืฉืœื ื• ื”ื™ื•ื ืžื›ื™ืœื” ืงื•ื“ ืจื™ื“ืืงืก ืฉื™ื•ื“ืข ืœืขื“ื›ืŸ ืืช ื”ืกื˜ื™ื™ื˜ ืฉืœื• ื“ืจืš action:
export const slice = createSlice({
  name: 'items',
  initialState,
  reducers: {
    reset: (state, action) => {
      return action.payload;
    },
  },
})
ื”ืกื˜ื™ื™ื˜ ื”ื•ื ื‘ืกืš ื”ื›ืœ ืžืขืจืš ืฉืœ 4 ืคืจื™ื˜ื™ื, ื•ื‘ืฉื‘ื™ืœ ืฉื™ื”ื™ื” ืงืœ ืœืฉื—ืง ืขื ื”ืงื•ื“ ื’ื ื‘ืœื™ ืฉืจืช ื™ืฆืจืชื™ ืคื•ื ืงืฆื™ื” ืฉืžื™ื™ืฆืจืช ื’ื™ืจืกื” ื—ื“ืฉื” ืฉืœ ื”ืกื˜ื™ื™ื˜ ืขืœ ื™ื“ื™ ืฉื™ื ื•ื™ ื”ื˜ืงืกื˜ ืฉืœ ืื—ื“ ื”ืคืจื™ื˜ื™ื:
const initialItems = [
  { id: 1, text: 'first item' },
  { id: 2, text: 'second item' },
  { id: 3, text: 'third item' },
  { id: 4, text: 'fourth item' },
];


function randomizeItems() {
  const item = _.sample(initialItems);
  return initialItems.map(i => (
    i.id === item.id ? { ...i, text: `${i.text} ${_.random(10)}`} : {...i }
  ));
}
ื™ืฉ ืงื•ืžืคื•ื ื ื˜ื” ืฉื™ื•ื“ืขืช ืœื”ืฆื™ื’ ืคืจื™ื˜ ืžื”ืจืฉื™ืžื”, ื•ืขื•ื“ ืงื•ืžืคื•ื ื ื˜ื” ืฉืžืฆื™ื’ื” ืืช ื›ืœ ื”-4:
const Item = React.memo(({ id }) => {
  console.count(`Item ${id}`);
  const me = useSelector(state => state.items.find(i => i.id === id));
  if (!me) {
    return <p>Missing item {JSON.stringify(id)}</p>
  }
  return (<p>{me.id} - {me.text}</p>);
});

function Main() {
  const items = useSelector(state => state.items);
  const dispatch = useDispatch();
  return (
    <>
      <button onClick={() => dispatch(slice.actions.reset({ items: randomizeItems() }))}>Randomize</button>
      {items.map(i => <Item id={i.id} key={i.id} />)}
    </>
  )
}
ืขื›ืฉื™ื• ื‘ื•ืื• ื ืจืื” ืžื” ืงื•ืจื” ื›ืืŸ: 1. ื›ืฉืœื•ื—ืฆื™ื ืขืœ ื›ืคืชื•ืจ Randomize ืื ื—ื ื• ืžื’ืจื™ืœื™ื ืื•ื‘ื™ืงื˜ ืกื˜ื™ื™ื˜ ื—ื“ืฉ ืฉืžื•ืจื›ื‘ ืž-4 ืคืจื™ื˜ื™ื ื—ื“ืฉื™ื ืœื’ืžืจื™. ืื•ืชื• ื“ื‘ืจ ื”ื™ื” ืงื•ืจื” ืื ื”ื™ื™ืชื™ ืžืคืขื™ืœ JSON.parse ืขืœ ืื•ื‘ื™ืงื˜ ืฉืžื’ื™ืข ืžื”ืฉืจืช. 2. ื‘ื’ืœืœ ืฉื”ืคืจื™ื˜ื™ื ื—ื“ืฉื™ื, ื›ืœ useSelector ื‘ืชื•ืš Item ืœื•ืงื— ืืช ื”ืžื™ื“ืข ื”ื—ื“ืฉ ื•ืžืจื ื“ืจ ืืช ืขืฆืžื• ืžื—ื“ืฉ. ืจื™ืืงื˜ ืžืคืขื™ืœ ืืช render ื›ื™ ื”ื•ื ืžื–ื”ื” ืฉื”ืชื•ืฆืื” ืฉืœ useSelector ืฉื•ื ื” ืžืžื” ืฉื”ื™ืชื” ืงื•ื“ื - ืืคื™ืœื• ื›ืฉืžื“ื•ื‘ืจ ืขืœ ืคืจื™ื˜ื™ื ืฉืœื ื”ืฉืชื ื• ื‘ืžืขืจืš. ืืชื ื™ื›ื•ืœื™ื ืœืฉื—ืง ืขื ื”ืงื•ื“ ื•ื”ื›ืคืชื•ืจ ื‘ืงื•ื“ืกื ื“ื‘ื•ืงืก ื‘ืงื™ืฉื•ืจ: https://codesandbox.io/s/damp-rain-q71w55?file=/src/App.js ## ืื™ืš ืœืฆืžืฆื ืจื ื“ืจื™ื ื‘ืจื’ืข ืฉืื ื™ ืžื‘ื™ืŸ ืฉื” render-ื™ื ื”ืžื™ื•ืชืจื™ื ื”ื’ื™ืขื• ื‘ื’ืœืœ ืฉืจื™ื“ืืงืก ื”ื—ืœื™ืฃ ืืช ื›ืœ ื”ืื•ื‘ื™ืงื˜ื™ื ื‘ื—ื“ืฉื™ื, ืื ื™ ื™ื›ื•ืœ ืœืชืงืŸ ืืช ื”ื‘ืขื™ื” ื‘ืจืžื” ืฉืœ Redux. ื”ืกืคืจื™ื” rfc6902 ื™ื•ื“ืขืช ืœื–ื”ื•ืช ื”ื‘ื“ืœื™ื ื‘ื™ืŸ ืฉื ื™ ืื•ื‘ื™ืงื˜ื™ JSON ื•ืœืฉื ื•ืช ืื•ื‘ื™ืงื˜ ืื—ื“ ื›ื“ื™ "ืœื”ื’ื™ืข" ืœืฉื ื™, ื‘ืฆื•ืจื” ืฉื”ื™ื Mutable. ื›ืฉืื ื™ ืฉื ืืช ื”ืงื•ื“ ื”ื–ื” ื‘ืชื•ืš immer ืื– ื™ื•ื—ืœืคื• ืจืง ื”ื—ืœืงื™ื ืฉื‘ืืžืช ื”ืฉืชื ื• ื‘ืื•ื‘ื™ืงื˜ ื”ืกื˜ื™ื™ื˜. ืื ื™ ืžื•ืกื™ืฃ ืœืกืœื™ื™ืก ืืช ื”ืคื•ื ืงืฆื™ื”:
resetWithDiff: (state, action) =>{
  applyPatch(state, createPatch(state, action.payload));
},
ื•ืžื™ื™ื‘ื ืืช ืฉืชื™ ื”ืคื•ื ืงืฆื™ื•ืช applyPatch ื• createPatch ืž rfc6902:
import {applyPatch, createPatch} from 'rfc6902'
ื•ืžื•ืกื™ืฃ ื›ืคืชื•ืจ ืœืืคืœื™ืงืฆื™ื” ืฉื™ืฉืœื— dispatch ืขื ื”ืคืขื•ืœื” ื”ื—ื“ืฉื”:
function Main() {  
  const items = useSelector(state => state.items);
  const dispatch = useDispatch();
  return (
    <>
      <button onClick={() => dispatch(slice.actions.reset({ items: randomizeItems() }))}>Randomize</button>
      <button onClick={() => dispatch(slice.actions.resetWithDiff({ items: randomizeItems() }))}>Randomize With Diff</button>
      {items.map(i => <Item id={i.id} key={i.id} />)}
    </>
  )
}

ToCode
1 419
# ืกื™ืงื•ืจ ื‘ืื’ - ื”ืืจื›ืช ืžื ื•ื™ ืฉืœื ืขื‘ื“ื” ื—ืฉื‘ืชื™ ืฉืื ื™ ื‘ื•ื ื” ืืช ื”ืคื™ืฆ'ืจ ื”ื›ื™ ืงืœ ื‘ืขื•ืœื, ืื‘ืœ ื›ืžื• ืฉืงื•ืจื” ื”ืจื‘ื” ืคืขืžื™ื ื‘ืžืขืจื›ื•ืช ืชื•ื›ื ื”, ื›ืฉืคื™ืฆ'ืจ ื—ื“ืฉ ืคื•ื’ืฉ ืงื•ื“ ืงื™ื™ื ื”ื•ื ืขืœื•ืœ ืœื“ื—ื•ืฃ ืืช ื”ืงื•ื“ ื‘ื›ื™ื•ื•ื ื™ื ืœื ืฆืคื•ื™ื™ื. ื›ืš ืงืจื” ืขื ืคื™ืฆ'ืจ ื”ืืจื›ืช ืžื ื•ื™ ื‘ืชืฉืœื•ื ืžืจืืฉ. ื”ืžื ื’ื ื•ืŸ ืฉืœ ืžื ื•ื™ ื‘ืชืฉืœื•ื ืžืจืืฉ ืื•ืžืจ ืฉืืชื ื™ื›ื•ืœื™ื ืœืงื ื•ืช ืžื ื•ื™ ืœืชืงื•ืคื” ืœื‘ื—ื™ืจืชื›ื, ืคืฉื•ื˜ ืžืฉืœืžื™ื ืžืจืืฉ ืขืœ ื›ืœ ื”ื—ื•ื“ืฉื™ื ื•ืื– ืœื ืฆืจื™ืš ืœืฉืœื ืคืขื ื‘ื—ื•ื“ืฉ. ืื‘ืœ ืื ืฉื™ื ื™ื›ื•ืœื™ื ืœื˜ืขื•ืช ื•ืœืคืขืžื™ื ืื ื—ื ื• ืงื•ื ื™ื ืžื ื•ื™ ืœื—ื•ื“ืฉื™ื™ื ื•ืื– ืื—ืจื™ ื—ื•ื“ืฉ ืžื’ืœื™ื ืฉื™ื™ืงื— ืœื ื• ื™ื•ืชืจ ื–ืžืŸ ืœืกื™ื™ื ืืช ื”ืงื•ืจืก ื•ืจื•ืฆื™ื ืœื”ืืจื™ืš. ื‘ืžืฆื‘ ืฉืœ ื”ืืจื›ื” ืื ืื ื™ ืžืฉืœื ืžืจืืฉ ืขืœ ื—ื•ื“ืฉื™ื™ื ืื ื™ ืจื•ืฆื” ืฉื”ื—ื•ื“ืฉื™ื™ื ื”ืืœื” ื™ืฆื˜ืจืคื• ืœืชืงื•ืคืช ื”ืžื ื•ื™ ื”ืงื™ื™ื ืฉืœื™, ื›ืœื•ืžืจ ื‘ืŸ ืื“ื ืฉืงื ื” ืžื ื•ื™ ืœืฉืœื•ืฉื” ื—ื•ื“ืฉื™ื, ื•ืื– ืื—ืจื™ ื—ื•ื“ืฉ ืงื ื” ืขื•ื“ ื—ื•ื“ืฉื™ื™ื ืžืฆืคื” ืฉื”ื—ื•ื“ืฉื™ื™ื ื”ื ื•ืกืคื™ื ื™ืชื—ื™ืœื• ืžื”ืจื’ืข ืฉื”ืฉืœื•ืฉื” ื—ื•ื“ืฉื™ื ื”ืจืืฉื•ื ื™ื ื ื’ืžืจื• (ื•ืœื ืžืจื’ืข ืฉื”ื•ื ืงื•ื ื” ืื•ืชื). ื–ื” ืžืฆื‘ ื—ื“ืฉ ืฉืงื•ื“ื ืœื ื ื“ืจืฉื ื• ืœื”ืชืžื•ื“ื“ ืื™ืชื•. ื”ืคื•ื ืงืฆื™ื” ืฉื˜ื™ืคืœื” ื‘ืขื“ื›ื•ืŸ ืคืจื˜ื™ ืžืฉืชืžืฉ ืื—ืจื™ ืจื›ื™ืฉื” ื ืจืืชื” ื‘ืžืงื•ืจ ื›ืš:
def subscribe(duration)
    self.subscription_end_date = (Time.zone.now + duration)
end
ืื‘ืœ ื‘ืจื’ืข ืฉืื ื—ื ื• ืžื•ืกื™ืคื™ื ืืคืฉืจื•ืช ืœืžืฉืชืžืฉ "ืœื”ืืจื™ืš" ืžื ื•ื™ ื™ืฉ ืœืฉื ื•ืช ืืช ื”ืคื•ื ืงืฆื™ื”. ืฆืจื™ืš ืœื‘ื“ื•ืง ืื ืœืื•ืชื• ืžืฉืชืžืฉ ื™ืฉ ื›ื‘ืจ ืžื ื•ื™ ืงื™ื™ื, ื•ืื ื›ืŸ ืœื”ืืจื™ืš ืืช ื”ืžื ื•ื™. ืงืœ? ืœื ืœื’ืžืจื™. ื–ื” ื”ื™ื” ื”ื ื™ืกื™ื•ืŸ ื”ืจืืฉื•ืŸ ืขื ื”ื˜ืขื•ืช:
def subscribe(duration)
    self.subscription_end_date = ((subscription_end_date || Time.zone.now) + duration)
end
ื›ืœ ื‘ื“ื™ืงื•ืช ื”ื™ื—ื™ื“ื” ื•ื‘ื“ื™ืงื•ืช ื”ืžืขืจื›ืช ืฉื”ืจืฆืชื™ ืœื ืขืœื• ืขืœ ื”ื‘ืขื™ื”, ื•ืื•ืœื™ ื–ื” ื”ืœืงื— ื›ืืŸ. ื‘ื“ื™ืงื•ืช ืขื•ื–ืจื•ืช ื‘ื‘ื“ื™ืงืช ืžืฆื‘ื™ื ืฉืืคืฉืจ ืœื—ืฉื•ื‘ ืขืœื™ื”ื, ืื‘ืœ ื‘ืื’ื™ื ื ื•ื˜ื™ื ืœื”ื•ืคื™ืข ื‘ืื–ื•ืจื™ื ืฉืื ื—ื ื• ืœื ื—ื•ืฉื‘ื™ื ืขืœื™ื”ื. ืœืคื—ื•ืช ืขื“ ืฉื”ื ืžื’ื™ืขื™ื. ื‘ืžืงืจื” ืฉืœื ื• ื”ื‘ืื’ ืžืชื’ืœื” ื›ืฉืžืฉืชืžืฉ ืฉื›ื‘ืจ ื”ื™ื” ืœื• ืžื ื•ื™ ื‘ืขื‘ืจ ืžื ืกื” ืœืจื›ื•ืฉ ืžื ื•ื™ ื—ื“ืฉ. ื‘ืžืฆื‘ ื›ื–ื” ื” subscription_end_date ื”ื•ื ืชืืจื™ืš ื‘ืขื‘ืจ, ื•"ืชื•ืกืคืช" ื”ื–ืžืŸ ืœืžื ื•ื™ ืžืฆื˜ืจืคืช ืœืžื•ืขื“ ื”ืžืงื•ืจื™ ื‘ื• ื”ืžื ื•ื™ ืคื’ ืชื•ืงืฃ, ื›ืš ืฉื’ื ืื—ืจื™ ืชืฉืœื•ื ืœืื•ืชื• ืžืฉืชืžืฉ ืขื“ื™ื™ืŸ ืื™ืŸ ืžื ื•ื™ ื‘ืชื•ืงืฃ. ื•ื›ืžื• ื”ืจื‘ื” ื‘ืื’ื™ื, ื’ื ื›ืืŸ ืื—ืจื™ ืฉืจื•ืื™ื ืืช ื”ื‘ืขื™ื” ื”ืคื™ืชืจื•ืŸ ื”ื•ื ืคืฉื•ื˜ ื˜ื™ืคื•ืœ ื‘ืžืงืจื” ื”ื ื•ืกืฃ. ื”ืงื•ื“ ื‘ Ruby ืœืชื™ืงื•ืŸ ื”ื™ื”:
def subscribe(duration)
    existing_subscription_period = if subscription_end_date.present? && Time.zone.now < subscription_end_date
      subscription_end_date
    else
      Time.zone.now
    end

    self.subscription_end_date = (existing_subscription_period + duration)
end
ื•ื›ืžื• ืชืžื™ื“ ื‘ืคื•ืกื˜ื™ื ื›ืืœื” ืื ื™ ืžื–ื›ื™ืจ ืฉืื ืืชื ื ืชืงืœื™ื ื‘ื“ื‘ืจื™ื ื‘ืืชืจ ืฉืœื ืขื•ื‘ื“ื™ื ื›ืžื• ืฉืืชื ื—ื•ืฉื‘ื™ื ืฉืฆืจื™ื›ื™ื ืœืขื‘ื•ื“, ื‘ื‘ืงืฉื” ืืœ ืชืงื—ื• ืœืœื‘ ื•ืขื“ื›ื ื• ื‘ื˜ื•ืคืก ืฆื•ืจ ืงืฉืจ. ืื ื—ื ื• ืขื“ื™ื™ืŸ ื‘ืจื™ืงื•ืฉื˜ื™ื ืžื” Rewrite ืื‘ืœ ืœืื˜ ืœืื˜ ื ืกื“ืจ ืืช ื›ืœ ื”ื‘ืขื™ื•ืช.

ToCode
1 419
# ื”ื™ื•ื ืœืžื“ืชื™: ืื™ืจื•ืขื™ mousedown ื• mouseup ื‘ JavaScript ืœื ืชืžื™ื“ ืžืชื•ืืžื™ื ืื ื™ ืžืื•ื“ ืื•ื”ื‘ ืœืคืจืกื ืคื” ื‘ืขื™ื•ืช ืฉื ืชืงืœืชื™ ื‘ื”ืŸ ืฉืขื‘ื•ืจืŸ ืžืฆืืชื™ ื™ื•ืคื™ ืฉืœ ืคื™ืชืจื•ืŸ. ืœืฆืขืจื™ ืœืคืขืžื™ื ืื ื—ื ื• ื ืชืงืœื™ื ื‘ื‘ืื’ื™ื ืฉืื™ืŸ ืœื”ื ืคื™ืชืจื•ื ื•ืช ื™ืคื™ื, ื•ืฉืคืฉื•ื˜ ืฆืจื™ืš ืœื”ื›ื™ืจ ื•ืœืืœืชืจ. ื›ื›ื” ื’ื™ืœื™ืชื™ ื”ื™ื•ื ืขื ืื™ืจื•ืขื™ mousedown ื• mouseup ื‘ JavaScript. ื”ืชื•ื›ื ื™ืช ืื—ืจื™ ื ื™ืงื•ื™ ืขื•ืฉื” ื“ื‘ืจ ืžืื•ื“ ืคืฉื•ื˜ - ื›ืœ ืคืขื ืฉืžื™ืฉื”ื• ืœื•ื—ืฅ ืขืœ ื›ืคืชื•ืจ ืฉืœ ื”ืขื›ื‘ืจ ื”ื™ื ืžืฆื™ื’ื” ืืช ื”ื˜ืงืกื˜ down, ื•ื›ืฉืขื•ื–ื‘ื™ื ืืช ื”ื›ืคืชื•ืจ ื”ื™ื ืžืฉื ื” ืืช ื”ื˜ืงืกื˜ ืœ up. ืืคืฉืจ ืœืฉื—ืง ืขื ื”ืงื•ื“ ื‘ืงื•ื“ืคืŸ ื‘ืงื™ืฉื•ืจ ื”ื–ื”: https://codepen.io/ynonp/pen/vYrrRPz?editors=1010 ืื• ืœืจืื•ืช ืื•ืชื• ืžื•ื˜ืžืข ื›ืืŸ: <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ynonp/embed/vYrrRPz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/ynonp/pen/vYrrRPz"> Untitled</a> by Ynon Perek (<a href="https://codepen.io/ynonp">@ynonp</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ืื‘ืœ ืžืกืชื‘ืจ ืฉืžืื•ื“ ืงืœ ืœืฉื‘ื•ืจ ืืช ื”ืžื ื’ื ื•ืŸ: ืคืฉื•ื˜ ืœื•ื—ืฆื™ื ืขืœ ื›ืคืชื•ืจ ื”ืขื›ื‘ืจ ื”ืฉืžืืœื™ ื•ืื– ืขืœ ื”ื™ืžื ื™, ื›ืฉื ืคืชื— ื”ืชืคืจื™ื˜-ื›ืคืชื•ืจ-ื™ืžื ื™ ืœื•ื—ืฆื™ื ืขืœ Escape ื›ื“ื™ ืœืกื’ื•ืจ ืื•ืชื•, ืžื–ื™ื–ื™ื ืงืฆืช ืืช ื”ืขื›ื‘ืจ ืื• ืขื•ื‘ืจื™ื ืœื—ืœื•ืŸ ืื—ืจ ื•ืื– ืขื•ื–ื‘ื™ื ืืช ื”ื›ืคืชื•ืจื™ื. ืื ืชืฉื—ืงื• ืขื ื–ื” ื‘ื˜ื•ื— ืชืžืฆืื• ืืคื™ืœื• ืฉื™ื˜ื•ืช ื™ื•ืชืจ ืงืœื•ืช ืžืฉืœื™. ืงื•ื“ ื“ื•ืžื” ื™ื™ื›ืฉืœ ื’ื ืื ื ืขื‘ื•ืจ ืœื”ืฉืชืžืฉ ื‘ Pointer Events. ื”ื ืงื•ื“ื” ื”ื—ืฉื•ื‘ื” - ืงืฉื” ืœื–ื”ื•ืช ื›ืฉืžืฉืชืžืฉ ืžืคืกื™ืง ืœืœื—ื•ืฅ ืขืœ ื”ืขื›ื‘ืจ. ืœืคื™ ื”ืคื™ืฆ'ืจ ืฉืืชื ื‘ื•ื ื™ื ืชืฆื˜ืจื›ื• ืœืžืฆื•ื ืคื™ืชืจื•ืŸ ื˜ื•ื‘ ื™ื•ืชืจ, ืœื“ื•ื’ืžื” ืื ื™ ื ืชืงืœืชื™ ื‘ื–ื” ื›ืฉืชื™ืงื ืชื™ ืžื ื’ื ื•ืŸ ืฉืœ Resize ื‘ื“ืคื“ืคืŸ, ืฉื ืืคืฉืจ ืœื–ื”ื•ืช ื›ืฉืกืžืŸ ื”ืขื›ื‘ืจ "ื™ื•ืฆื" ืžืื–ื•ืจ ื” Resize ื•ืœื”ืคืกื™ืง ืืช ื”ืคืขื•ืœื”, ืื• ืœืชืคื•ืก ืื™ืจื•ืขื™ Mouse Move ื•ืœื‘ื“ื•ืง ื‘ื›ืœ ืื™ืจื•ืข ื›ื–ื” ืื™ื–ื” ื›ืคืชื•ืจื™ื ืขื“ื™ื™ืŸ ืœื—ื•ืฆื™ื. ืขื‘ื•ืจ ืžืฉื™ืžื•ืช ืื—ืจื•ืช ืชืฆื˜ืจื›ื• ืœืžืฆื•ื ืžืขืงืคื™ื ืื—ืจื™ื, ืื‘ืœ ื‘ืื•ืคืŸ ื›ืœืœื™ ืืœ ืชื‘ื ื• ืขืœ ื”ืชืืžื” ื‘ื™ืŸ ืื™ืจื•ืขื™ mousedown ื• mouseup.

ToCode
1 419
# ื”ื–ืžื ื” ืœื•ื•ื‘ื™ื ืจ: ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื‘ืงื˜ื ื” ื‘ืฉื‘ื•ืข ืฉืขื‘ืจ ื”ื’ืขืชื™ ืœืœืžื“ ืงื•ืจืก ืจื™ืืงื˜ ื‘ืื™ื–ื• ื—ื‘ืจื”, ื•ืฉื•ื‘ ื›ื•ืœื ืฉืืœื• "ื”ื“ื•ื’ืžืื•ืช ื™ื”ื™ื• ื‘ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื ื›ื•ืŸ?". ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื›ื‘ืจ ืžื–ืžืŸ ื”ืคืš ืœืขื•ื‘ื“ื” ืžื•ื’ืžืจืช, ืœืฉืคื” ืฉื›ื•ืœื ืจื•ืฆื™ื ืœื‘ื—ื•ืจ ื‘ื” ื•ื™ืฉ ื›ืžื•ืช ื”ื•ืœื›ืช ื•ื’ื“ืœื” ืฉืœ ืžืชื›ื ืชื™ ื•ื•ื‘ ื•ืคืจื•ื™ืงื˜ื™ื ืฉืขื‘ื•ืจื JavaScript ื ืงื™ ื›ื‘ืจ ืื™ื ื” ืื•ืคืฆื™ื”. ื”ื™ืชืจื•ื ื•ืช ืฉืœ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ืจื‘ื™ื, ื‘ื™ื ื™ื”ื ื”ืฉืœืžื” ืื•ื˜ื•ืžื˜ื™ืช ืฉืขื•ื‘ื“ืช ื˜ื•ื‘ ื™ื•ืชืจ, ืงืœ ื™ื•ืชืจ ืœืžืฆื•ื ืืช ื›ืœ ื”ื”ืชื™ื—ืกื•ื™ื•ืช ืœืคื•ื ืงืฆื™ื” ืื• ืžื—ืœืงื” ืžืกื•ื™ืžืช ื›ื™ ื”ื—ื™ืคื•ืฉ ื”ื•ื ืœื ืจืง ืœืคื™ ืฉื, ื•ืœื›ืŸ ืงืœ ื™ื•ืชืจ ืœืฉื ื•ืช ืฉืžื•ืช, ืœื”ื–ื™ื– ื“ื‘ืจื™ื ืžืžืงื•ื ืœืžืงื•ื ื•ืœืฉื ื•ืช ืžืžืฉืงื™ื. ืืช ืจื•ื‘ ื”ื™ืชืจื•ื ื•ืช ืื ื—ื ื• ืžืงื‘ืœื™ื ื™ืฉืจ ืžื”ืงื•ืคืกื”, ื‘ืœื™ ืฉื ืฆื˜ืจืš ืœื”ืชืืžืฅ ื™ื•ืชืจ ืžื“ื™. ื›ืŸ ืฆืจื™ืš ืœื”ื’ื“ื™ืจ ื˜ื™ืคื•ืก ืœื›ืœ ื“ื‘ืจ, ืื‘ืœ ื‘ื–ื›ื•ืช ื” Type Inference ืฉืœ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื™ื—ืกื™ืช ืœื ืฆืจื™ืš ืœื”ื’ื“ื™ืจ ื™ื•ืชืจ ืžื“ื™ ื˜ื™ืคื•ืกื™ื ื•ืœื›ืŸ ื–ื• ืœื ืชื•ืกืคืช ืžืฉืžืขื•ืชื™ืช ืœืงื•ื“. ื•ื‘ื›ืœ ื–ืืช ื™ืฉ ื“ืจื›ื™ื ื˜ื•ื‘ื•ืช ื™ื•ืชืจ ื•ืคื—ื•ืช ืœื”ืฉืชืžืฉ ื‘ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื•ืœืคืขืžื™ื ื‘ื’ืœืœ ื”ื™ื›ืจื•ืช ืœื ืžืกืคื™ืง ื˜ื•ื‘ื” ืขื ื”ืฉืคื” ืื ื—ื ื• ืžื•ืฆืื™ื ืืช ืขืฆืžื ื• ืžืชืืžืฆื™ื ื™ื•ืชืจ ืžืžื” ืฉืฆืจื™ืš ืื• ื›ื•ืชื‘ื™ื ื”ื’ื“ืจื•ืช ื˜ื™ืคื•ืกื™ื ืขื ื—ื–ืจื•ืช ืื• ืœื ื’ื ืจื™ื•ืช ืžืกืคื™ืง. ื”ื•ื“ืขื•ืช ื”ืฉื’ื™ืื” ืฉืœ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื™ื›ื•ืœื•ืช ื’ื ื”ืŸ ืœื‘ืœื‘ืœ ื•ืื ื—ื ื• ื ืžืฆื ืืช ืขืฆืžื ื• ืžื‘ืœื™ื ื–ืžืŸ ืจื‘ ื‘"ืชื™ืงื•ืŸ" ืงื•ื“ ืœืžืจื•ืช ืฉื‘ืœื™ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื”ื•ื ื”ื™ื” ืชืงื™ืŸ ืœื’ืžืจื™. ื‘ื™ื•ื ื—ืžื™ืฉื™ ื”ืงืจื•ื‘ ื‘ืฉืขื” ืขืฉืจ ื‘ื‘ื•ืงืจ ืืขื‘ื™ืจ ื•ื•ื‘ื™ื ืจ ืฉืœ ืฉืขื” ืขืœ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื‘ืžื˜ืจื” ืœื”ืื™ืจ ืืช ื”ืฆื“ื“ื™ื ื”ื˜ื•ื‘ื™ื ื™ื•ืชืจ ืฉืœ ื”ืฉืคื”, ื•ืœืขื–ื•ืจ ืœื›ื ืœืžืฆื•ื ื“ืจื›ื™ื ื˜ื•ื‘ื•ืช ืœืคืชื•ืจ ื‘ืขื™ื•ืช ื•ื›ืš ืœื—ืกื•ืš ื–ืžืŸ ืคื™ืชื•ื—. ื”ื•ื•ื‘ื™ื ืจ ื™ื”ื™ื” ืžืขื ื™ื™ืŸ ื’ื ืื ืœื ืขื‘ื“ืชื ืžืขื•ืœื ื‘ื˜ื™ื™ืคืกืงืจื™ืคื˜, ื•ื’ื ืื ืขื‘ื“ืชื ื‘ื” ื•ืจื•ืฆื™ื ืœืงื‘ืœ ื˜ื™ืคื™ื ืœืฉื™ืžื•ืฉ ื˜ื•ื‘ ื™ื•ืชืจ. ื‘ืžื”ืœืš ื”ืฉืขื” ื ื“ื‘ืจ ืขืœ: 1. ืœืžื” ื›ื“ืื™ ืœื‘ื—ื•ืจ ื‘ื˜ื™ื™ืคืกืงืจื™ืคื˜, ืงืฆืช ืขืœ ื”ื”ื™ืกื˜ื•ืจื™ื” ืฉืœื” ื•ืžื” ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื ื•ืชื ืช ืœื ื• ื›ืžืคืชื—ื™ื. 2. ื˜ื›ื ื™ืงื•ืช ืœื›ืชื™ื‘ืช ื˜ื™ืคื•ืกื™ื ื‘ืฆื•ืจื” ื’ื ืจื™ืช ื™ื•ืชืจ, ื›ืžื•ื‘ืŸ ืขื ื“ื•ื’ืžืื•ืช ืœืฉื™ืžื•ืฉ ื‘ืื•ืชืŸ ื˜ื›ื ื™ืงื•ืช. 3. ืื™ืš ืœืฉืœื‘ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื‘ืคืจื•ื™ืงื˜ื™ื ื•ืžื”ื• ืงื•ื‘ืฅ ื”ื”ื’ื“ืจื•ืช tsconfig ืชืจื’ื™ืฉื• ื—ื•ืคืฉื™ ืœื‘ื•ื ืขื ืฉืืœื•ืช ืขืœ ื˜ื™ื™ืคืกืงืจื™ืคื˜ ืื• ื“ื•ื’ืžืื•ืช ืฉืœ ื“ื‘ืจื™ื ืฉืืชื ืœื ื‘ื˜ื•ื—ื™ื ืื™ืš ืœื›ืชื•ื‘ ื•ืื ื™ ืืฉืžื— ืœืจืื•ืช ื•ืœืขื–ื•ืจ. ืคืจื˜ื™ื ื ื•ืกืคื™ื ื•ื”ืจืฉืžื” ื‘ื“ืฃ ื”ื•ื•ื‘ื™ื ืจ ื‘ืงื™ืฉื•ืจ: https://www.tocode.co.il/workshops/122. ื ืชืจืื” ื‘ื—ืžื™ืฉื™ ื‘ื‘ื•ืงืจ, ื™ื ื•ืŸ

ToCode
1 419
# ื›ื›ื” ืžืฆืืชื™ ืืช ื–ื” ื‘ืฉื™ื˜ื•ื˜ ืžืงืจื™ ื‘ืงื•ื“ ืฉืœ axios ื ืชืงืœืชื™ ื‘ืงื•ื“ ื”ื‘ื ืขื‘ื•ืจ ืื—ืช ื”ื‘ื“ื™ืงื•ืช:
// from: https://github.com/axios/axios/blob/v1.x/test/specs/promise.spec.js#L10

it('should provide succinct object to then', function (done) {
  let response;

  axios('/foo').then(function (r) {
    response = r;
  });

  getAjaxRequest().then(function (request) {
    request.respondWith({
      status: 200,
      responseText: '{"hello":"world"}'
    });

    setTimeout(function () {
      expect(typeof response).toEqual('object');
      expect(response.data.hello).toEqual('world');
      expect(response.status).toEqual(200);
      expect(response.headers['content-type']).toEqual('application/json');
      expect(response.config.url).toEqual('/foo');
      done();
    }, 100);
  });
});
ื”ื ืžื’ื“ื™ืจื™ื ืฉืจืช ืคื™ืงื˜ื™ื‘ื™ ื•ืžืืชื—ืœื™ื ืืช ืคืจื˜ื™ ื”ืชืฉื•ื‘ื” ื”ืคื™ืงื˜ื™ื‘ื™ืช ืฉื”ื•ื ื™ืฉืœื—, ืฉื•ืœื—ื™ื ื‘ืงืฉืช ืจืฉืช ืขื axios ื•ืื– ืžื—ื›ื™ื 100 ืžื™ืœื™ ืฉื ื™ื•ืช ื•ื‘ื•ื“ืงื™ื ืืช ืื•ื‘ื™ืงื˜ ื”ืชืฉื•ื‘ื”. ืื‘ืœ ืœืžื” ืœื—ื›ื•ืช ื“ื•ื•ืงื 100 ืžื™ืœื™ ืฉื ื™ื•ืช? ืœืคื™ ื’ื™ื˜ ื‘ืœื™ื™ื ื”ืืฉืžื” ื”ื™ื ื‘ืงื•ืžื™ื˜ 46a9639. ื›ืœ ื”ื‘ื“ื™ืงื•ืช ืขื“ ืื•ืชื• ืงื•ืžื™ื˜ ื”ืฉืชืžืฉื• ื‘ setTimeout ืขื ื–ืžืŸ ื”ืžืชื ื” ืฉืœ 0, ืื‘ืœ ื—ืœืงืŸ ื›ื ืจืื” ื ื›ืฉืœื• ืžื“ื™ ืคืขื ื•ื‘ืื•ืชื• ืงื•ืžื™ื˜ ื›ืœ ื”ื‘ื“ื™ืงื•ืช ืฉื›ืœืœื• setTimeout ืขืœื• ืœื–ืžืŸ ื”ืžืชื ื” 100 ืžื™ืœื™ ืฉื ื™ื•ืช. ืื‘ืœ ืฉืืœื” ื™ื•ืชืจ ืžืขื ื™ื™ื ืช ื”ื™ื ืœืžื” ื‘ื›ืœืœ ืœื”ืฉืชืžืฉ ื‘ setTimeout ืฉื. ื”ืจื™ ืืช ืื•ืชื” ื‘ื“ื™ืงื” ืืคืฉืจ ืœืชืงืŸ ื‘ืฆื•ืจื” ื™ื•ืชืจ ื™ืขื™ืœื” ื‘ืืžืฆืขื•ืช ื”ื–ื–ืช ื”ืงื•ื“ ืœืžืงื•ื ื”ืžืชืื™ื (ื›ืœื•ืžืจ ืื—ืจื™ ื” then). ื‘ืงื™ืฆื•ืจ ื•ื‘ืงื•ื“:
  it('should provide succinct object to then', function (done) {
    axios('/foo').then(function (response) {
      expect(typeof response).toEqual('object');
      expect(response.data.hello).toEqual('world');
      expect(response.status).toEqual(200);
      expect(response.headers['content-type']).toEqual('application/json');
      expect(response.config.url).toEqual('/foo');
      done();
    });

    getAjaxRequest().then(function (request) {
      request.respondWith({
        status: 200,
        responseText: '{"hello":"world"}'
      });
    });
  });
ื”ืชืฉื•ื‘ื” ืœื“ืขืชื™ ื”ื™ื ืฉืฉื™ื ื•ื™ ืžื‘ื ื™ ื›ื–ื” ื”ื•ื ื™ื•ืชืจ ืžืคื—ื™ื“ - ืื•ืœื™ ื”ืคืงื•ื“ื•ืช ืœื ืขื•ืฉื•ืช ื‘ื“ื™ื•ืง ืืช ืžื” ืฉืื ื™ ื—ื•ืฉื‘ ืฉื”ืŸ ืขื•ืฉื•ืช, ืื•ืœื™ ื” setTimeout ื”ื™ื” ืฉื ืžืกื™ื‘ื” ืžืกื•ื™ืžืช, ืื•ืœื™ ื”ืžื‘ื ื” ื”ืžืงื•ืจื™ ืขื ื” setTimeout ืžื˜ืคืœ ื‘ืžืงืจื™ ืงืฆื” ืฉืื ื™ ืœื ืจื•ืื” ืขื›ืฉื™ื•. ื™ื•ืชืจ ืงืœ ืœืกื“ืจ ืืช ื”ื‘ืขื™ื” ื‘ืื•ืชื• ืžื‘ื ื” ื‘ื• ืžืฆืืชื™ ืืช ื”ืงื•ื“. ืื‘ืœ ื™ืฉ ืฉืชื™ ื‘ืขื™ื•ืช ื‘ื’ื™ืฉื” ื›ื–ืืช: 1. ื’ื ืื ืœืžื‘ื ื” ืฉื‘ื• ืžืฆืืชื™ ืืช ื”ื‘ื“ื™ืงื” ื™ืฉ ืกื™ื‘ื” ืžืงื•ืจื™ืช (ืื• ื”ื™ืชื” ืกื™ื‘ื”), ืื ืื ื™ ืœื ื™ื•ื“ืข ืžื” ื”ื™ื ื•ืœื ืžืฆืœื™ื— ืœืžืฆื•ื ืื•ืชื” ืื– ืœืฉืžื•ืจ ืขืœื™ื” ืจืง ืžื•ืกื™ืฃ "ืงืกื ืืคืœ" ืœืงื•ื“. ืขื›ืฉื™ื• ื›ืœ ืžืชื›ื ืชืช ื—ื“ืฉื” ืฉืชื’ื™ืข ืœืฆื•ื•ืช ืชืจืื” ืฉื” setTimeout ื”ื–ื” ื ืžืฆื ื‘ื›ืœ ื”ื‘ื“ื™ืงื•ืช ื•ืชืขืชื™ืง ืื•ืชื• ื’ื, ื•ืื– ืœืื•ืจืš ื–ืžืŸ ื›ื•ืœื ื• ื ื”ื™ื” ื‘ื˜ื•ื—ื™ื ืฉื–ืืช ื”ื“ืจืš ื”ื ื›ื•ื ื” ืœืขืฉื•ืช ื“ื‘ืจื™ื ืœืžืจื•ืช ืฉืื•ืœื™ ื”ื™ื ื›ื‘ืจ ืžื–ืžืŸ ืœื. 2. ื›ืฉืื ื™ ื ืฉืืจ ื‘ืื•ืชื ืžื‘ื ื™ื ืฉืœ ืงื•ื“ ืื ื™ ืœื ื ื•ืชืŸ ืœืขืฆืžื™ ืืช ื”ืื•ืคืฆื™ื” ืœื ืกื•ืช ืจืขื™ื•ื ื•ืช ื—ื“ืฉื™ื ื•ืœืœืžื•ื“ ืžื”ื. ื›ืฉืืชื ืจื•ืื™ื ืงื•ื“ ืœื ื”ื’ื™ื•ื ื™ ืื™ืŸ ื˜ืขื ืœื”ื™ืฉืืจ ื‘ืื•ืชื• ืžื‘ื ื” ื›ื™ "ื›ื›ื” ืžืฆืืชื™ ืื•ืชื•". ื›ืŸ ืฆืจื™ืš ืœืฉื‘ืช ื•ืœื ืกื•ืช ืœืžืฆื•ื ืืช ื”ื”ื’ื™ื•ืŸ ื•ื”ืกื™ื‘ื•ืช ืœื“ื‘ืจื™ื, ืื‘ืœ ื‘ืกื•ืฃ ืื—ืจื™ ืฉืžื•ืฆืื™ื (ืื• ืื ืœื ืžื•ืฆืื™ื), ืžื•ืชืจ ื•ืจืฆื•ื™ ืœืืจื’ืŸ ืงื•ื“ ืžื—ื“ืฉ ื›ื“ื™ ืฉื™ื”ื™ื” ื˜ื•ื‘ ื™ื•ืชืจ.

ToCode
1 419
# ื•ืื™ืš ื–ื” ื ืฉื‘ืจ? ืจื•ื‘ ื”ื–ืžืŸ ื‘ื›ืชื™ื‘ืช ืงื•ื“ ืื ื—ื ื• ืžื—ืคืฉื™ื ืื™ืš ืœื’ืจื•ื ืœื“ื‘ืจื™ื ืœืขื‘ื•ื“: ืื™ื–ื” ืกืคืจื™ื™ืช ืงื•ื“ ืชืขื–ื•ืจ ืœื™ ืœื”ืชืงื“ื ื™ื•ืชืจ ืžื”ืจ, ืื™ืš ืœืชืงืŸ ืืช ื”ื‘ืื’, ืื™ืš ืœื›ืชื•ื‘ ืงื•ื“ "ื ืงื™" ืฉื™ื—ื–ื™ืง ืžืขืžื“ ืœืื•ืจืš ื–ืžืŸ. ื˜ื›ื ื™ืงื” ืงืœื” ืฉืื ืฉื™ื ืœืคืขืžื™ื ืฉื•ื›ื—ื™ื ื”ื™ื ืœืฉื‘ื•ืจ ื“ื‘ืจื™ื ื‘ื›ื•ื•ื ื”, ืจืง ื‘ืฉื‘ื™ืœ ืœืจืื•ืช ืื™ืš ื–ื” ื ืฉื‘ืจ: ืื™ืš ืื ื™ ื’ื•ืจื ืœืงื•ื“ ื”ื–ื” ืœื ืœืขื‘ื•ื“? ืื™ืš ืื ื™ "ืžื ืงื”" ืืช ื”ื‘ืื’ ืฉืžืฆืืชื™? ืื™ื–ื” ืคื™ืฆ'ืจ ืื ื™ ืฆืจื™ืš ืœื”ื•ืกื™ืฃ ืœืžืขืจื›ืช ื›ื“ื™ ืฉื›ืœ ื”ื‘ืื’ื™ื ื™ื‘ื•ืื•? ืœืื•ืจืš ื–ืžืŸ ื›ื›ืœ ืฉื ื”ื™ื” ื™ื•ืชืจ ื˜ื•ื‘ื™ื ื‘ืœืฉื‘ื•ืจ ืงื•ื“, ื›ืš ื™ื”ื™ื” ืœื ื• ื’ื ื™ื•ืชืจ ืงืœ ืœื›ืชื•ื‘ ืงื•ื“ ื™ืฆื™ื‘ ื•ืœื”ื™ืžื ืข ืž Code Smells ืฉืžื•ื‘ื™ืœื™ื ืœื‘ืื’ื™ื ื”ืžื•ื–ืจื™ื ื‘ืืžืช.

ToCode
1 419
# ืกื™ื›ื•ื ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ืขื shift ื”ืคืงื•ื“ื” shift ื‘ bash "ืžื–ื™ื–ื”" ืืช ื”ืืจื’ื•ืžื ื˜ื™ื ืžืงื•ื ืื—ื“ ืฉืžืืœื”, ื›ืš ืฉ $1 ื ืžื—ืง, $2 ื”ื•ืคืš ืœ $1, $3 ื”ื•ืคืš ืœ $2 ื•ื›ืš ื”ืœืื”. ื”ืกืงืจื™ืคื˜ ื”ื‘ื ืžืฆื™ื’ ื“ื•ื’ืžืช ืฉื™ืžื•ืฉ ืคืฉื•ื˜ื” ื‘ shift ืฉืคืฉื•ื˜ ืžื“ืคื™ืกื” ืืช ืฉื ื™ ื”ืืจื’ื•ืžื ื˜ื™ื ื”ืจืืฉื•ื ื™ื ืฉืงื™ื‘ืœื”:
#!/bin/bash

echo $1
shift
echo $1
ื˜ืจื™ืง ืคืฉื•ื˜ ืขื shift ื”ื•ื ืžื™ืžื•ืฉ ืœื•ืœืื” ื‘ืฆื•ืจื” ืจืงื•ืจืกื™ื‘ื™ืช ื‘ืกืงืจื™ืคื˜ bash. ืœื“ื•ื’ืžื” ืื ืื ื™ ืจื•ืฆื” ืœื”ื“ืคื™ืก ืืช ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ืฉื”ืกืงืจื™ืคื˜ ืงื™ื‘ืœ ืื ื™ ื™ื›ื•ืœ ืœื”ื“ืคื™ืก ืื—ื“, ืœื”ืคืขื™ืœ shift ื•ืื– ืœื”ืคืขื™ืœ ืืช ืื•ืชื• ื”ืกืงืจื™ืคื˜ ื‘ืฆื•ืจื” ืจืงื•ืจืกื™ื‘ื™ืช:
#!/bin/bash

[[ $# == 0 ]] && exit 0

echo $1
shift
exec $0 "$@"
ืื• ื‘ื—ื–ืจื” ืœื›ื•ืชืจืช - ืื ืื ื™ ืจื•ืฆื” ืœืกื›ื•ื ืืช ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ืฉื”ืกืงืจื™ืคื˜ ืงื™ื‘ืœ ืื ื™ ื™ื›ื•ืœ ืœื ืกื•ืช ืฉื•ื‘ ื‘ืจืงื•ืจืกื™ื”, ื•ื”ืคืขื ืื ื™ ืžืขื‘ื™ืจ ืœ shift ืืช ื”ืžืกืคืจ 2, ืžื” ืฉื’ื•ืจื ืœื• ืœื”ื–ื™ื– ืืช ื”ืืจื’ื•ืžื ื˜ื™ื ื‘ืฉื ื™ ืžืงื•ืžื•ืช:
#!/bin/bash

if [[ $# == 1 ]]
then
        echo $1
        exit 0
fi

(( sum = $1 + $2 ))

shift 2

exec $0 $sum "$@"
ื•ืœืžืจื•ืช ืฉืจืงื•ืจืกื™ื•ืช ื‘ืกืงืจื™ืคื˜ื™ื ื™ื›ื•ืœื•ืช ืœื”ื™ื•ืช ืจืขื™ื•ืŸ ืžืขื ื™ื™ืŸ, ืื—ื“ ื”ืฉื™ืžื•ืฉื™ื ื”ืืžื™ืชื™ื™ื ื•ื”ืžื•ืขื™ืœื™ื ื‘ shift ื”ื•ื ื‘ืคื™ืขื ื•ื— ืคืจืžื˜ืจื™ื. ื ืชื‘ื•ื ืŸ ื‘ืชื•ื›ื ื™ืช ื”ื‘ืื”:
while getopts "c:o:l" opt; do
  case $opt in
    c)
      COUNT=$OPTARG;;
    o)
      OUTFILE=$OPTARG;;
    l)
      PADDING=1;;
  esac
done

shift $((OPTIND-1))
ื”ืชื•ื›ื ื™ืช ื”ืฉืชืžืฉื” ื‘ getopts ื›ื“ื™ ืœืคืขื ื— ืืช ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ืฉืžืชื—ื™ืœื™ื ื‘ืžื™ื ื•ืกื™ื, ื›ื•ืœืœ ืืช ื”ืคืจืžื˜ืจื™ื ืฉ"ืชืคืกื•" ืขืจื›ื™ื ืื—ืจื™ื”ื (ื‘ืžืงืจื” ืฉืœื ื• c ื• o), ื•ืื– "ื”ื–ื™ื–ื”" ืืช ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ื›ื“ื™ ืœื”ื™ืคื˜ืจ ืžื›ืœ ืืœื” ืฉืคื•ืขื ื—ื• ืขืœ ื™ื“ื™ getopts ื›ืš ืฉื”ืžืฉืš ื”ืงื•ื“ ื™ื›ื•ืœ ืœืขื‘ื•ื“ ืขื $1, $2 ื•ื›ืŸ ื”ืœืื”. ื .ื‘. ืœืžืจื•ืช ืฉืจืงื•ืจืกื™ื•ืช ื–ื” ื›ื™ืฃ, ืฉื•ื•ื” ืœื–ื›ื•ืจ ืฉื‘ bash ืืคืฉืจ ืœืจื•ืฅ ืขืœ ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ืขื ืœื•ืœืืช for ืคืฉื•ื˜ื” - ืจืง ืฆืจื™ืš ืœื•ื•ืชืจ ืขืœ ื” in. ืœื“ื•ื’ืžื” ื—ื™ืฉื•ื‘ ืกื›ื•ื ืฉืœ ื›ืœ ื”ืืจื’ื•ืžื ื˜ื™ื ื™ื”ื™ื” ืคืฉื•ื˜:
#!/bin/bash

for arg
do
  (( sum += arg ))
done

echo $sum

ToCode
1 419
# ืงืจื™ืื” ืขื read ืž Pipe ื‘ Bash ื”ืคืงื•ื“ื” read ืงื•ืจืืช ืฉื•ืจื” ืžื”ืงืœื˜ ื”ืกื˜ื ื“ืจื˜ื™, ืฉื•ื‘ืจืช ืื•ืชื” ืœืžื™ืœื™ื (ืขื ืชื• ื”ื”ืคืจื“ื” ื‘ืžืฉืชื ื” IFS) ื•ืฉื•ืžืจืช ืืช ื”ืชื•ืฆืื” ืœืžืฉืชื ื” ืื—ื“ ืื• ื™ื•ืชืจ ืฉืืช ืฉืžื• ื”ื™ื ืžืงื‘ืœืช ื‘ื”ืคืขืœื”. ืœื›ืŸ ื”ืงื•ื“ ื”ื‘ื ืงื•ืจื ืืช ื”ืฉื•ืจื” ื”ืจืืฉื•ื ื” ืžื”ืงื•ื‘ืฅ /etc/shells ื•ืฉื•ืžืจ ืื•ืชื• ืœืžืฉืชื ื” ื‘ืฉื first_line:
read first_line < /etc/shells
ื•ื”ืงื•ื“ ื”ื‘ื ืงื•ืจื ืจืง ืืช ื”ืžื™ืœื” ื”ืจืืฉื•ื ื” ืžืื•ืชื• ืงื•ื‘ืฅ ื•ืฉื•ืžืจ ืื•ืชื” ืœืžืฉืชื ื” first_word:
read first_word rest < /etc/shells
ืงืœ ืœืฉื›ื•ื— ืฉื”ื”ืชื ื”ื’ื•ืช ืฉืœ read ื‘ืฉื™ืœื•ื‘ | ืื™ื ื” ืื™ื ื˜ื•ืื™ื˜ื™ื‘ื™ืช, ื•ื–ื” ืœื ื‘ื’ืœืœ read. ื›ืœ ืคืขื ืฉืื ื—ื ื• ืžืคืขื™ืœื™ื ืคืงื•ื“ื•ืช ื‘ืชื•ืš Pipeline, ื‘ืืฉ ืคื•ืชื— ืชืช-ืžืขื˜ืคืช (Sub Shell) ื•ืžื‘ืฆืข ืืช ื”ืคืงื•ื“ื•ืช ื‘ืชื•ื›ื”. ื”ื‘ืขื™ื” ื”ื™ื ืฉืžืฉืชื ื™ื ืฉืžื•ื’ื“ืจื™ื ื‘ืื•ืชื• Sub Shell ื™ื™ืžื—ืงื• ื›ืฉื” Sub Shell ื™ืกืชื™ื™ื, ื›ืœื•ืžืจ ื‘ื™ืฆื™ืื” ืžื” Pipeline. ื”ืคืงื•ื“ื” ื”ื–ืืช ืœื“ื•ื’ืžื” ืœื ืœื•ืงื—ืช ืืช ื”ืžื™ืœื” ื”ืจืืฉื•ื ื” ืžื”ืคืœื˜ ืฉืœ wc /etc/shells ืœืชื•ืš ื”ืžืฉืชื ื” lines:
wc /etc/shells | read lines
ื›ืœื•ืžืจ ื”ื™ื ื›ืŸ, ืื‘ืœ ื”ืžืฉืชื ื” ื ืฉืžืจ ื‘ืชื•ืš Sub Shell ื•ื ืžื—ืง ืื™ืš ืฉื”ืฉื•ืจื” ื ื’ืžืจืช. ื‘ืฉื‘ื™ืœ ืฉ read ืชื•ื›ืœ ืœืฉืžื•ืจ ืžืฉืชื ื” ืœ Shell ื”ื ื•ื›ื—ื™ ืฉืœื™ ื”ื™ื ื—ื™ื™ื‘ืช ืœื”ื™ื•ืช ืžื•ืคืขืœืช ืžืžื ื”, ื›ืœื•ืžืจ ืœื ืžืฆื“ ื™ืžื™ืŸ ืฉืœ ืกื™ืžืŸ Pipe. ื‘ืžืฆื‘ ื›ื–ื” ืื ื™ ืฆืจื™ืš ืœื”ืฉืชืžืฉ ื‘ืคืงื•ื“ืช <() ื›ื“ื™ ืœื”ืจื™ืฅ ืคืงื•ื“ื” ื•ืœืฉืžื•ืจ ืืช ื”ืคืœื˜ ืฉืœื” ืœืชื•ืš File Handle, ื•ืื– ื‘ืขื–ืจืช ื”ืคื ื™ื™ืช ืงืœื˜ ืจื’ื™ืœื” ืื ื™ ื™ื›ื•ืœ ืœื”ืขื‘ื™ืจ ืืช ื”ืฉื•ืจื” ื”ืจืืฉื•ื ื” ืžืื•ืชื• File Handle ืœ read:
read lines words chars rest < <(wc /etc/passwd)

ToCode
1 419
# ืœืœืžื•ื“ ืžื”ื˜ื•ื‘ื™ื ื‘ื™ื•ืชืจ ื”ืืžื•ื ื” ืฉื›ื“ืื™ ืœืœืžื•ื“ ืžื”ื˜ื•ื‘ื™ื ื‘ื™ื•ืชืจ ืžืฉื•ืชืคืช ืœืจื•ื‘ ื”ืื ืฉื™ื ื•ื‘ืจื•ื‘ ืชื—ื•ืžื™ ื”ืœื™ืžื•ื“. ื›ื™ืฃ ืœื—ืฉื•ื‘ ืฉืื ืจืง ืžืกื™ ื”ื™ื” ืžืืžืŸ ืื•ืชืš ื‘ื›ื“ื•ืจื’ืœ ื”ื™ื™ืช ื”ื•ืคืš ืžื—ืจ ืœืืœื•ืฃ ื”ืขื•ืœื, ืฉืื ื•ื•ืจืŸ ื‘ืืคื˜ ื”ื™ื” ื”ืžืืžืŸ ื”ืขืกืงื™ ืฉืœืš ื”ืขืกืงื™ื ื”ื™ื• ืžืžืจื™ืื™ื ืื• ืฉืงื•ืจืก ื“ื™ื‘ื•ืจ ืžื•ืœ ืงื”ืœ ืชื™ืื•ืจื˜ื™ ืฉื”ื™ื” ืžืขื‘ื™ืจ ื˜ื•ื ื™ ืจื•ื‘ื™ื ืก ื”ื™ื” ื ื•ืชืŸ ืœืš ืืช ื”ื›ืœื™ื ื”ื˜ื•ื‘ื™ื ื‘ื™ื•ืชืจ ืœืขืžื•ื“ ืขืœ ื‘ืžื”. ื”ืืžื•ื ื” ื”ื–ืืช ืžืกื‘ื›ืช ืื•ืชื ื• ื‘ืฉื ื™ ืžืงื•ืžื•ืช: 1. ื‘ืชื—ื™ืœืช ื”ืœื™ืžื•ื“, ื›ืฉืื™ืŸ ืœื ื• ืขื“ื™ื™ืŸ ืืช ื”ื›ืœื™ื ืœื”ื‘ื™ืŸ ืขืœ ืžื” ืžื“ื•ื‘ืจ, ื”ืœื™ืžื•ื“ ืžื”ื›ื™ ื˜ื•ื‘ื™ื ื”ื•ื ืจืง ืžื‘ืœื‘ืœ. ื”ื ืœื•ืงื—ื™ื ื›ืžื•ื‘ืŸ ืžืืœื™ื• ื“ื‘ืจื™ื ืฉืœืš ืื™ืŸ ืžื•ืฉื’ ื‘ื”ื, ื•ืœื›ืŸ ืจื•ื‘ ื”ื˜ื™ืคื™ื ืฉื™ืชื ื• ืคืฉื•ื˜ ืœื ื™ื”ื™ื• ืจืœื•ื•ื ื˜ื™ื™ื ืœืžืชื—ื™ืœื™ื. 2. ื‘ื”ืžืฉืš ื”ืœื™ืžื•ื“ ื›ืฉืื ื—ื ื• ื›ื‘ืจ ื›ืŸ ืžืชื—ื™ืœื™ื ืœื”ื‘ื™ืŸ ืขืœ ืžื” ืžื“ื•ื‘ืจ, ืคืขืจื™ ื”ืจืžื•ืช ื’ื•ืจืžื™ื ืœืื™ื‘ื•ื“ ื—ื•ืฉ ื”ื‘ื™ืงื•ืจืชื™ื•ืช, ื•ืงืฉื” ืœืจืื•ืช ืืช ื”ื˜ืขื•ื™ื•ืช ืฉืœ ืื•ืชื ืžืืกื˜ืจื™ื. ื–ื” ืงืฆืช ื›ืžื• ื˜ื™ืคื•ืก ื‘ืžื“ืจื’ื•ืช - ืชืžื™ื“ ื›ื“ืื™ ืœื”ื ื™ื— ืืช ื”ืจื’ืœ ืขืœ ืžื“ืจื’ื” ืงืฆืช ื™ื•ืชืจ ื’ื‘ื•ื”ื” ืžืื™ืคื” ืฉืืชื” ื ืžืฆื. ื›ืœืœ ืืฆื‘ืข ื˜ื•ื‘ ื”ื•ื ืœื”ืงืฉื™ื‘ ืœืื ืฉื™ื ืฉืื ื—ื ื• ืžื‘ื™ื ื™ื ืื•ืชื ื•ื™ื›ื•ืœื™ื ืœื”ื™ื•ืช ื‘ื™ืงื•ืจืชื™ื™ื ื›ืœืคื™ื”ื, ื›ื™ ื—ื•ืฉ ื‘ื™ืงื•ืจืช ื˜ื•ื‘ ื™ืืคืฉืจ ืœื ื• ื‘ื”ืžืฉืš ืœื–ื”ื•ืช ื’ื ืืช ื”ื˜ืขื•ื™ื•ืช ืฉืœื ื• ื•ืœืœืžื•ื“ ืžื”ืŸ. ื•ื›ืŸ ืœื—ืคืฉ ื—ื•ืžืจื™ ืœื™ืžื•ื“ ื˜ื•ื‘ื™ื, ืœื—ืคืฉ ืขื•ื“ ืžืงื•ืจื•ืช ืœืœืžื•ื“ ืžื”ื, ื•ืœืฉืœื‘ ืืช ื”ื“ื‘ืจื™ื ื”ื˜ื•ื‘ื™ื ืžื›ืœ ืžืงื•ืจ ื–ื” ื—ืœืง ืžื”ืชื”ืœื™ืš.