# focusingjs **Repository Path**: kekejia/focusingjs ## Basic Information - **Project Name**: focusingjs - **Description**: 面向开发者的沉浸式阅读插件 Immersive reading plugin for developers - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-01-27 - **Last Updated**: 2022-01-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, JavaScript, React ## README English Doc ## 项目介绍 FocusingJs 是一款可植入的沉浸式阅读插件,易用,开源 [//]: # ([试试看](https://spacingjs.com)) [//]: # (![](screenshot.png)) 兼容常见的 PC 浏览器:Chrome,Firefox,Safar,Edge,QQ 浏览器,IE11 简单两行代码,即可实现简约的阅读器功能 ![这是图片](./assets/cn.gif) ### 支持 CodePen 体验 [![CodePen](https://img.shields.io/badge/-CodePen-000000?style=for-the-badge&logo=CodePen&logoColor=ffffff)](https://codepen.io/huzig/pen/qBVWezR?editors=1112) ## 安装和使用 ### npm 安装 ``` npm i focusingjs --save ``` 使用 ```js
文章内容 ......
// 入口文件引入 css 样式文件 import 'focusingjs/dist/focusingjs.min.css' import FocusingJs from 'focusingjs' const fs = new FocusingJs('#article') fs.open() ``` ### cdn ```html
文章内容 ......
``` ### ⚠️ 在 ssr 渲染模式下使用,react 框架看这里 插件中涉及到了浏览器的 **window** 属性 , 在 react 的生命周期中 render() 阶段负责创建虚拟 dom 等等操作, render 及之前的阶段,并没有将组件渲染为实际的dom节点,所以**无法获取**浏览器 window 对象,需要改善写法,如下 ```js // react class componentDidMount() { const fs = new FocusingJs('#id') fs.open() } // react hook useEffect(() => { const fs = new FocusingJs('#id') fs.open() }, []) ``` [//]: # (# 安装视频) [//]: # (可以通过视频,更加直观地去学习使用)