Category: Javascript /Jquery / React / Bootstrap / Web

深入理解Shadow DOM, 什么是 shadow DOM, shadow DOM入门, 影子 DOM(Shadow DOM)

  shadow DOM不是超级英雄电影中的恶棍,也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型(或简称DOM)中缺少的树封装方法。 网页通常使用来自外部源的数据和小部件,如果它们没有封装,那么样式可能会影响HTML中不必要的部分,迫使开发人员使用特定的选择器和!important 规则来避免样式冲突。 尽管如此,在编写大型程序时,这些努力似乎并不是那么有效,并且大量的时间被浪费在防止CSS和JavaScript的冲突上。 Shadow DOM API旨在通过提供封装DOM树的机制来解决这些问题。 Shadow DOM是用于创建Web组件的主要技术之一,另外两个是自定义元素和HTML… Read More

到底是什么DOM?, What, exactly, is the DOM?, 什么是 HTML DOM?

  文档对象模型或“ DOM”是网页的接口。它本质上是页面的API,允许程序读取和操纵页面的内容,结构和样式。让我们分解一下。   网页是如何构建的? 浏览器如何从源HTML文档转换为在视口中显示样式化的交互式页面的方式称为“关键渲染路径”。尽管此过程可以分为几个步骤,但是正如我在“了解关键渲染路径”一文中所介绍的那样,这些步骤可以大致分为两个阶段。第一阶段涉及浏览器解析文档以确定最终将在页面上呈现的内容,第二阶段涉及浏览器执行呈现。 第一阶段的结果就是所谓的“渲染树”。渲染树表示将在页面上渲染的HTML元素及其相关样式。为了构建此树,浏览器需要两件事: CSSOM,表示与元素关联的样式… Read More

React钩子构建CRUD应用,React Hooks CRUD应用, Build a CRUD App in React with Hooks

  在React- Hooks中引入了一个新概念。钩子是类的替代方法。如果您以前使用过React,那么您将熟悉简单的(功能性)组件 simple (functional) components 和类组件 class components。 Simple component const Example = () => { return <div>I'm a simple component</div> } Class component class Example extends Component { render() { return <div>I'm a class component</div>… Read More

React Hooks入门教程, React钩子入门, React钩子用法

    本教程将带你学习 如何使用React Hooks 如何定制自己的Hook   起步准备 要继续学习本教程,你应该基本了解: ES6(箭头函数,解构,类) React   项目安装 请确保已经配置好React开发环境,并且是最新版本的Node.js,再执行: npx create-react-app exploring-hooks   setState起步 首先让我们快速回顾一下React。 React是一个用于构建用户界面的库,其优点之一是React本身会强制开发人员使用严格数据流。还记得jQuery吗?使用jQuery几乎不可能清晰地构建项目,更不用说如何定义UI中的数据流… Read More

轻量级“新颖”小巧的网页内容编辑器:ContentTools, A JS library for building WYSIWYG editors for HTML content.

  介绍 ContentTools是一个美观小巧的网页内容工具(一个JS库),具备所见即所得(WYSIWYG)的编辑器功能,只需几个简单的步骤,即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了!   Github地址 https://github.com/GetmeUK   特性 ContentTools是用于HTML页面的美观小巧的内容编辑器。它被设计为: 与框架无关的库不使用任何JavaScript框架(没有JQuery),但可以很好地使用它们。 灵活的ContentTools软… Read More

Javascript 箭头函数, 箭头函数基础知识, 深入理解箭头函数, JS箭头函数为何用?怎么用?何时用?

  定义 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。   语法   基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于:(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时,圆括号是可选的: (singleParam) => { statem… Read More

React Hooks钩子用法, 如何在受控表单组件上使用 React Hooks

  React Hooks 是一个闪亮的新提案,将优化 90% 的 React 代码。 根据 Dan Abramov 的说法,Hooks 是 React 的未来。 这听起来不错,但什么是 Hooks,它们将如何帮助我编写更好的代码? 很高兴你这么问。 Hooks 允许你访问函数组件中的状态和生命周期方法。 如果前面这句话对你来说很陌生,那么你应该在这里更新关于 React 的记忆。 React 团队说,它将帮助你编写没有有状态组件包袱的干净的代码。 在使用 Hooks 实现了一个准系统表单之后,我同意了他们的观点。 让我们首先在有状态组件中写一个简单的表单,我们将使用 Hooks 重写该表单,你可以决定更喜欢哪种。   设置 访问 … Read More

React搭配PHP的使用方法, PHP 和 React.js一起使用, An advanced guide on how to setup a React and PHP

A quick guide on setting up a React and PHP web. I love React and I still use PHP   在本文中,我将引导您为React Application设置PHP后端服务器。 要下载或浏览代码,请通过Github链接访问存储库。 通过此设置,您将能够在普通的Apache localhost而不是node js localhost:3000上运行和开发React应用,当您在开发Web应用时不想通过PHP或使用安全cookie强制进行身份验证重定向时,这很疯狂。或在应用程序启动前用PHP渲染一些东西。我还将添加SCSS支持和不错的高级功能。 好吧,现在让我们开始吧! 要… Read More

React Hook 钩子检测外部点击, React Hook 钩子监控外部点击, react onClickOutside, react-click-outside-hook

    1. 使用组件 react-cool-onclickoutside   react-cool-onclickoutside 是一个React 钩子  ,当用户在目标组件区域之外单击时触发回调。这是UI交互设计(IxD)的有用逻辑,例如关闭下拉菜单,模态或工具提示等。帮助大家❤️。   特征 React监听基于React hook的外部点击  。 Support‍♀️支持多个引用,以涵盖更多用例。 ?使用  被动事件侦听  器改善滚动性能。 ️滚动条可以从外部点击的回调中排除。 the 在事件循环中忽略某些元素。 ?使您可以在需要时停止监听外部喀哒声。 for由于某些原因支持自定义引… Read More

React基础: React Hook 钩子入门,React Hook 钩子要用法, useEffect() 实例

  下面就来谈谈,怎样正确理解钩子,并且深入剖析最重要的钩子之一的useEffect()。内容会尽量通俗,让不熟悉 React 的朋友也能看懂。   一、React 的两套 API 以前,React API 只有一套,现在有两套:类(class)API 和基于函数的钩子(hooks) API。     任何一个组件,可以用类来写,也可以用钩子来写。下面是类的写法。 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }   再来看钩子的写法,… Read More

React.js:创建新的 React 应用, 深入浅出 Create React App, Create React App 中文文档, Create React App 快速入门

    初始化 React App 的多种方式 常见的初始化 React App 的方式有: 不使用构建工具构建 React App; 使用 Webpack 手动构建 React App; 使用 Create React App 一站式构建 React App; 在在线沙箱平台直接构建 React App   入门 Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。   快速开始 npx create-react-app my-app cd my-app npm start (npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明) 然后打开 http://loca… Read More

React.js 入门实例:AJAX处理, Form表单处理, 表单事件

  React AJAX React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。   以下实例演示了获取 Github 用户最新 gist 共享描述: class UserGist extends React.Component { constructor(props) { super(props); this.state = {username: '', lastGistUrl: ''}; } c… Read More

细数jQuery和React用法差别, jQuery转React, jQuery和React的区别, jQuery和React实例对比

  我也听说过React.js很好,最近花了一些时间玩它。既然我对React非常满意,我决定写一个关于这个主题的教程。   目标受众群:足够了解jQuery的人 在开始之前,我想澄清一下我的目标受众是谁。 在从未尝试过React的人们中,有些人对Backbone,Ember或Angular之类的前端JS框架感到满意,有些人非常了解JavaScript,有些人知道足够的jQuery可以解决。 对其中一些人有效的教程,对他一些可能就不是最佳的。   在本教程中,我针对的是我提到的第三组:了解jQuery的人。可能适合该类别的人员包括: 可以在HTML / CSS / jQuery中进行基本编码… Read More