编程知识 cdmana.com

Huzhong Sword Front End Weekly # 10 (eslint8, Web end ai, React if)

Lire le texte original,L'expérience est meilleure!

La collection hebdomadaire comprend le Front End(Mais pas seulement à l'avant)Article de、Nouvelles、Projet Open Source、Outils, etc.,Mise à jour hebdomadaire.

News

ESLint 8

Soutien ES2022.

  • Class public instance fields and private instance fields
  • Class public static fields and private static fields
  • Class private instance methods and accessors
  • Class private static methods and accessors
  • RegExp match indices
  • Top-level await

https://eslint.org/blog/2021/10/eslint-v8.0.0-released

Sanitizer API

Prends ça.htmlIl est dangereux de rendre une chaîne directement sur une page sans traitement,Ça se déclenche par inadvertance.XSSQuestions,Sanitizer APILa proposition vise à résoudre ce problème.

const $div = document.querySelector('div')
const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
const sanitizer = new Sanitizer()
$div.setHTML(user_input, sanitizer) // <div><em>hello world</em><img src=""></div>

Il n'y a actuellement aucun support de navigateur pour ,Chrome 93+ Oui. about://flags La recherche est ouverte ,Peut également être utilisé sanitizer-polyfill Patch.

https://web.dev/sanitizer/

Article (s)

Dis - leWebCôté TerminalAI

AI Les limites techniques de la façade sont constamment élargies, L'ajout de l'algorithme a également injecté une toute nouvelle force dans le développement frontal.Cet article vous présente ce qu'est l'intelligence de bout en bout,Des scénarios d'application intelligents et Web Mise en œuvre de bout en bout AI Le concept de base de.

https://mp.weixin.qq.com/s/9PoFZVs7jiI992y6MWLqUQ

Reflow redessiné par le navigateur

Reflow et redessiner sont l'un des vocabulaires à haute fréquence développés par frontend , Vous pouvez passer par , Optimisation des performances article available in relation to , Mais beaucoup d'entre eux ont été emportés par l'herbe . Cet article vous montre les principes de Reflow et redessiner à partir du processus de rendu du navigateur .

https://mp.weixin.qq.com/s/EFwNP3EK8_D_azXEW-7WMA

Shadow DOM Une excavation de —— Découvrir les secrets range input Structure interne

https://mp.weixin.qq.com/s/sYnU-yUiuRF6gMTV3cvU2w

En profondeur WebAssembly La mise en œuvre de l'interpréteur

https://mp.weixin.qq.com/s/hktDuC1nky06tAaAi-mwMA

Vous apprendrez à créer un composant de boîte d'entrée d'édition en ligne

Photos

https://www.emgoto.com/react-inline-edit/

ReactLa philosophie de

À propos deReactPhilosophie du développement.

https://github.com/mithi/react-philosophies

Section I APK Comment est - il né??

Photos

https://mp.weixin.qq.com/s/214uq3G2qnDpiVZE5w5UkA

Outils、Logiciels

React Oxide

Version Web légère IDE.

demo:https://www.reactoxide.com/

https://github.com/bootrino/reactoxide

schummar-translate: TypeScript Outils de traduction entraînés

Un outil d'internationalisation intéressant et flexible .

Photos

https://github.com/schummar/schummar-translate

react-if

C'est comme Vue Dans le modèle ifConditions, Utilisé en même temps ReactEtVue Les personnes qui pensent que le langage du modèle est pratique pour le jugement de branche .

const Bar = ({ name, age, drinkingAge }) => (
  <div>
    <Header />
    <If condition={age >= drinkingAge}>
      <Then>
        <span className="ok">Have a beer, {name}!</span>
      </Then>
      <Else>
        <span className="not-ok">Sorry, {name}, you are not old enough.</span>
      </Else>
    </If>
    <Footer />
  </div>

);

https://github.com/romac/react-if

Suivez - nous

Numéro public au moment de la publication de chaque numéro(Épée du lac)Va pousser le message,Bienvenue à l'attention.

Photos

版权声明
本文为[Épée du lac]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/10/20211014014520258t.html

Scroll to Top