crystalyy

crystalyy 查看完整档案

湘潭编辑湘潭大学  |  信息管理与信息系统 编辑  |  填写所在公司/组织 tinyfirefly.com 编辑
编辑

愿能平和生活

个人动态

crystalyy 提出了问题 · 9月25日

在HTML中显示公式,并且公式中包含input的输入框

目前我使用了katex库,显示的效果如下
image.png
,但是无法进行输入,我看了源码,根号那一部分是直接用svg画的,改也改不动,哪位大神有解决办法么,万分感谢

关注 1 回答 0

crystalyy 赞了文章 · 9月9日

PDF.js实现个性化PDF渲染(文本复制)

我肥来啦😁。看到Redux教程突破3w的浏览量,小窃喜,很高兴自己的文章能够帮助到大家。

这次重返,依然带给大家一个小指南,也是最近工作中遇到的一个小case。

前不久,产品经理提出要在界面上优雅地展示PDF文档,当即就有了两种实现方式:

实现方式一
使用embed标记来使用浏览器自带的pdf工具。

这种实现方式优缺点都很明显:
优点:自带“打印”,“搜索”,“翻页”等功能,强大且实现方便。
缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等。

我们的产品经理是挑剔的😒,于是...

实现方式二
使用Mozilla的PDF.js,自定义展示PDF。

下面我们就细致讲述一下使用PDF.js过程中遇到的问题。主要包括:
  • 基础功能集成
  • 使用Text-Layers渲染

什么是PDF.JS

PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。

基础功能集成

1️⃣引用

首先,引用PDF.js就遇到了问题,官网中提到通过CDN引用或者下载源码至本地。
而我们并不想污染我们的index.html并且希望可以对每一个引用的框架有统一的版本管理。于是,我们搜寻到一个包:pdfjs-dist

通过npm install pdfjs-dist,我们引入了PDF.js。

基础功能有两个必须引用的文件:

  • pdf.js
  • pdf.worker.js

如果使用CDN的方式,直接引用如下对应文件即可:

如果使用npm的方式,则在需要使用PDF.js的文件中如下引用:

import PDFJS from 'pdfjs-dist';

PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';

这两个文件包含了获取、解析和展示PDF文档的方法,但是解析和渲染PDF需要较长的时间,可能会阻塞其它JS代码的运行。

为解决该问题,pdf.js依赖了HTML5引入的Web Workers——通过从主线程中移除大量CPU操作(如解析和渲染)来提升性能。

PDF.js的API都会返回一个Promise,使得我们可以优雅的处理异步操作。

2️⃣使用

首先,我们需要在HTML中添加<canvas>元素以渲染PDF:

<canvas id="pdf-canvas"></canvas>

然后添加渲染PDF的js代码:

var url = 'Helloworld.pdf';

PDFJS.getDocument(url).then((pdf) => {
    return pdf.getPage(1);
}).then((page) => {
    // 设置展示比例
    var scale = 1.5;
    // 获取pdf尺寸
    var viewport = page.getViewport(scale);
    // 获取需要渲染的元素
    var canvas = document.getElementById('pdf-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    
    page.render(renderContext);
});

现在,PDF已经成功渲染在界面上了。我们来分析一下使用到的函数:

getDocument():用于异步获取PDf文档,发送多个Ajax请求以块的形式下载文档。它返回一个Promise,该Promise的成功回调传递一个对象,该对象包含PDF文档的信息,该回调中的代码将在完成PDf文档获取时执行。

getPage():用于获取PDF文档中的各个页面。

getViewport():针对提供的展示比例,返回PDf文档的页面尺寸。

render():渲染PDF。

到这里,基本功能告一段落了。
满心欢喜准备上线的时候,产品经理提出了另一个需求:文本复制。
然鹅。。。翻了好几遍官方文档,也没有找到文本复制的方法,并且stackoverflow上有很多类似的问题。
在不断的尝试下,我们发现了Text-Layer

使用Text-Layers渲染

PDF.js支持在使用Canvas渲染的PDF页面上渲染文本图层。然而,这个功能需要用到额外的两个文件:text_layer_builder.jstext_layer_builder.css。我们可以在GitHub的repo中获取到。

如果是使用npm,则需要做如下引用:

import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';

现在,我们开始实现文本复制功能。

首先,创建渲染需要用到DOM节点:

<div id="container"></div>

div#container为最外层节点,在该div中,我们会为PDF的每个页面创建自己的div,在每个页面的div中,都会有Canvas元素。

接着,我们修改JS代码:

var container, pageDiv;

function getPDF(url) {
    PDFJS.getDocument(url).then((pdf) => {
        pdfDoc = pdf;
        container = document.getElementById('container');
        for (var i = 1; i<= pdf.numPages; i++) {
            renderPDF(i);
        }
    })
}

function renderPDF(num) {
    pdf.getPage(num).then((page) => {
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        pageDiv = document.createElement('div');
        pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1));
        pageDiv.setAttribute('style', 'position: relative');
        container.appendChild(pageDiv);
        var canvas = document.createElement('canvas');
        pageDiv.appendChild(canvas);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = view.width;
        
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        
        page.render(renderContext);
    });
}

以上代码只是实现了多页渲染,接下来,开始渲染文本图层。我们需要将page.render(renderContext)修改为以下代码:

page.render(renderContext).then(() => {
    return page.getTextContent();
}).then((textContent) => {
    // 创建文本图层div
    const textLayerDiv = document.createElement('div');
    textLayerDiv.setAttribute('class', 'textLayer');
    // 将文本图层div添加至每页pdf的div中
    pageDiv.appendChild(textLayerDiv);
    
    // 创建新的TextLayerBuilder实例
    var textLayer = new TextLayerBuilder({
        textLayerDiv: textLayerDiv,
        pageIndex: page.pageIndex,
        viewport: viewport
    });
    
    textLayer.setTextContent(textContent);
    
    textLayer.render();
});

我们依旧来讲解以下用到的几个关键函数:

page.render():该函数返回一个当PDF页面成功渲染到界面上时解析的promise,我们可以使用成功回调来渲染文本图层。

page.getTextContent():该函数的成功回调会返回PDF页面上的文本片段。

TextLayerBuilder:该类的实例有两个重要的方法。setTextContent()用于设置page.getTextContent()函数返回的文本片段;render()用于渲染文本图层。

Bingo😎!通过以上改造,文本复制功能就实现了。官方文档上可没有这个小技巧哦。

PDF.js是一个很棒的工具,但无奈文档写的较为精简,需要开发人员不断探索PDF.js的强大功能。

如果这篇文章有帮助到您,记得点赞咯👍!

查看原文

赞 73 收藏 55 评论 22

crystalyy 赞了文章 · 2019-08-27

从路由原理出发,深入阅读理解react-router 4.0的源码


  react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发,详细介绍了前端路由原理的变迁。接着从react-router4.0的源码出发,深入理解react-router4.0是如何实现前端路由的。

  • 通过Hash实现前端路由
  • 通过H5的history实现前端路由
  • React-router4.0的使用
  • React-router4.0源码分析

原文的地址,在我的博客中:https://github.com/forthealll...

如有帮助,您的star是对我最好的鼓励~

一、通过Hash实现前端路由

1、hash的原理

  早期的前端路由是通过hash来实现的:

改变url的hash值是不会刷新页面的。

  因此可以通过hash来实现前端路由,从而实现无刷新的效果。hash属性位于location对象中,在当前页面中,可以通过:

window.location.hash='edit'

来实现改变当前url的hash值。执行上述的hash赋值后,页面的url发生改变。

赋值前:http://localhost:3000
赋值后:http://localhost:3000/#edit

在url中多了以#结尾的hash值,但是赋值前后虽然页面的hash值改变导致页面完整的url发生了改变,但是页面是不会刷新的。此外,还有一个名为hashchange的事件,可以监听hash的变化,我们可以通过下面两种方式来监听hash的变化:

window.onhashchange=function(event){
   console.log(event);
}
window.addEventListener('hashchange',function(event){
   console.log(event);
})

当hash值改变时,输出一个HashChangeEvent。该HashChangeEvent的具体值为:

{isTrusted: true, oldURL: "http://localhost:3000/", newURL:   "http://localhost:3000/#teg", type: "hashchange".....}

  有了监听事件,且改变hash页面不刷新,这样我们就可以在监听事件的回调函数中,执行我们展示和隐藏不同UI显示的功能,从而实现前端路由。

此外,除了可以通过window.location.hash来改变当前页面的hash值外,还可以通过html的a标签来实现:

<a href="#edit">edit</a>

2、hash的缺点

hash的兼容性较好,因此在早期的前端路由中大量的采用,但是使用hash也有很多缺点。

  • 搜索引擎对带有hash的页面不友好
  • 带有hash的页面内难以追踪用户行为

二、通过history实现前端路由

HTML5的History接口,History对象是一个底层接口,不继承于任何的接口。History接口允许我们操作浏览器会话历史记录。

(1)History的属性和方法

History提供了一些属性和方法。

History的属性:

  • History.length: 返回在会话历史中有多少条记录,包含了当前会话页面。此外如果打开一个新的Tab,那么这个length的值为1
  • History.state:

保存了会出发popState事件的方法,所传递过来的属性对象(后面会在pushState和replaceState方法中详细的介绍)

History方法:

  • History.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同
  • History.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同
  • History.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页
  • History.pushState():pushState可以将给定的数据压入到浏览器会话历史栈中,该方法接收3个参数,对象,title和一串url。pushState后会改变当前页面url,但是不会伴随着刷新
  • History.replaceState():replaceState将当前的会话页面的url替换成指定的数据,replaceState后也会改变当前页面的url,但是也不会刷新页面。

上面的方法中,pushState和repalce的相同点:

就是都会改变当前页面显示的url,但都不会刷新页面。

不同点:

pushState是压入浏览器的会话历史栈中,会使得History.length加1,而replaceState是替换当前的这条会话历史,因此不会增加History.length.

(2)BOM对象history

history在浏览器的BOM对象模型中的重要属性,history完全继承了History接口,因此拥有History中的所有的属性和方法。

这里我们主要来看看history.length属性以及history.pushState、history.replaceState方法。

  • history.pushState(stateObj,title,url) or history.replaceState(stateObj,title,url)

pushState和replaceState接受3个参数,分别为state对象,title标题,改变的url。

window.history.pushState({foo:'bar'}, "page 2", "bar.html");

此时,当前的url变为:

执行上述方法前:http://localhost:3000
执行上述方法后:http://localhost:3000/bar.html

如果我们输出window.history.state:

console.log(window.history.state);
// {foo:'bar'}

window.history.state就是我们pushState的第一个对象参数。

  • history.replaceState()方法不会改变hitroy的长度

    console.log(window.history.length);
    window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
    console.log(window.history.length);

上述前后两次输出的window.history.length是相等的。

此外。

每次触发history.back()或者浏览器的后退按钮等,会触发一个popstate事件,这个事件在后退或者前进的时候发生:

window.onpopstate=function(event){

}

注意:
history.pushState和history.replaceState方法并不会触发popstate事件。

如果用history做为路由的基础,那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址,且如果页面发生回退back或者forward时,会触发popstate事件。

hisory为依据来实现路由的优点:

  • 对搜索引擎友好
  • 方便统计用户行为

缺点:

  • 兼容性不如hash
  • 需要后端做相应的配置,否则直接访问子页面会出现404错误

三、React-router4.0的使用

了解了前端路由实现的原理之后,下面来介绍一下React-router4.0。在React-router4.0的代码库中,根据使用场景包含了以下几个独立的包:

  • react-router : react-router4.0的核心代码
  • react-router-dom : 构建网页应用,存在DOM对象场景下的核心包
  • react-router-native : 适用于构建react-native应用
  • react-router-config : 配置静态路由
  • react-router-redux : 结合redux来配置路由,已废弃,不推荐使用。

在react-router4.0中,遵循Just Component的设计理念:

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

1、React-router-dom常用的组件API

下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。

(1) <BrowserRouter>

用<BrowserRouter> 组件包裹整个App系统后,就是通过html5的history来实现无刷新条件下的前端路由。

<BrowserRouter>组件具有以下几个属性:

  • basename: string 这个属性,是为当前的url再增加名为basename的值的子目录。

     <BrowserRouter basename="test"/>
    

如果设置了basename属性,那么此时的:

http://localhost:3000 和 http://localhost:3000/test 表示的是同一个地址,渲染的内容相同。

  • getUserConfirmation: func 这个属性,用于确认导航的功能。默认使用window.confirm
  • forceRefresh: bool 默认为false,表示改变路由的时候页面不会重新刷新,如果当前浏览器不支持history,那么当forceRefresh设置为true的时候,此时每次去改变url都会重新刷新整个页面。
  • keyLength: number 表示location的key属性的长度,在react-router中每个url下都有为一个location与其对应,并且每一个url的location的key值都不相同,这个属性一般都使用默认值,设置的意义不大。
  • children: node children的属性必须是一个ReactNode节点,表示唯一渲染一个元素。

与<BrowserRouter>对应的是<HashRouter>,<HashRouter>使用url中的hash属性来保证不重新刷新的情况下同时渲染页面。

(2) <Route>

<Route> 组件十分重要,<Route> 做的事情就是匹配相应的location中的地址,匹配成功后渲染对应的组件。下面我们来看<Route>中的属性。

首先来看如何执行匹配,决定<Route>地址匹配的属性:

  • path:当location中的url改变后,会与Route中的path属性做匹配,path决定了与路由或者url相关的渲染效果。
  • exact: 如果有exact,只有url地址完全与path相同,才会匹配。如果没有exact属性,url的地址不完全相同,也会匹配。

举例来说,当exact不设置时:

<Route  path='/home' component={Home}/> 
<Route  path='/home/first' component={First}/> 

此时url地址为:http://localhost:3000/home/first 的时候,不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。

如果设置了exact:

 <Route  path='/home' component={Home}/> 

只有http://localhost:3000/home/first 不会匹配Home组件,只有url地址完全与path相同,只有http://localhost:3000/home才能匹配Home组件成功。

  • strict :与exact不同,strict属性仅仅是对exact属性的一个补充,设置了strict属性后,严格限制了但斜线“/”。

举例来说,当不设置strict的时候:

 <Route  path='/home/' component={Home}/> 

此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性:

<Route  path='/home/' component={Home}/> 

那么此时严格匹配斜线是否存在,http://localhost:3000/home 将无法匹配到Home组件。

当Route组件与某一url匹配成功后,就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢,Route的component、render、children决定渲染的内容。

  • component:该属性接受一个React组件,当url匹配成功,就会渲染该组件
  • render:func 该属性接受一个返回React Element的函数,当url匹配成功,渲染覆该返回的元素
  • children:与render相似,接受一个返回React Element的函数,但是不同点是,无论url与当前的Route的path匹配与否,children的内容始终会被渲染出来。

并且这3个属性所接受的方法或者组件,都会有location,match和history这3个参数。如果组件,那么组件的props中会存在从Link传递过来的location,match以及history。

(3) <Link>

<Route>定义了匹配规则和渲染规则,而<Link> 决定的是如何在页面内改变url,从而与相应的<Route>匹配。<Link>类似于html中的a标签,此外<Link>在改变url的时候,可以将一些属性传递给匹配成功的Route,供相应的组件渲染的时候使用。

  • to: string

to属性的值可以为一个字符串,跟html中的a标签的href一样,即使to属性的值是一个字符串,点击Link标签跳转从而匹配相应path的Route,也会将history,location,match这3个对象传递给Route所对应的组件的props中。

举例来说:

<Link to='/home'>Home</Link>

如上所示,当to接受一个string,跳转到url为'/home'所匹配的Route,并渲染其关联的组件内接受3个对象history,location,match。
这3个对象会在下一小节会详细介绍。

  • to: object

to属性的值也可以是一个对象,该对象可以包含一下几个属性:pathname、seacth、hash和state,其中前3个参数与如何改变url有关,最后一个state参数是给相应的改变url时,传递一个对象参数。

举例来说:

 <Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>
 

在上个例子中,to为一个对象,点击Link标签跳转后,改变后的url为:'/home?sort=name#edit'。 但是在与相应的Route匹配时,只匹配path为'/home'的组件,'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准,仅仅是做为参数传递到所匹配到的组件中,此外,state={a:1}也同样做为参数传递到新渲染的组件中。

(4) React-router中传递给组件props的history对象

介绍了 <BrowserRouter> 、 <Route> 和 <Link> 之后,使用这3个组件API就可以构建一个简单的React-router应用。这里我们之前说,每当点击Link标签跳转或者在js中使用React-router的方法跳转,从当前渲染的组件,进入新组件。在新组件被渲染的时候,会接受一个从旧组件传递过来的参数。

我们前面提到,Route匹配到相应的改变后的url,会渲染新组件,该新组件中的props中有history、location、match3个对象属性,其中hisotry对象属性最为关键。

同样以下面的例子来说明:

<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>

<Route exact path='/home' component={Home}/>

我们使用了<BrowserRouter>,该组件利用了window.history对象,当点击Link标签跳转后,会渲染新的组件Home,我们可以在Home组件中输出props中的history:

// props中的history
action: "PUSH"
block: ƒ block()
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 12
listen: ƒ listen(listener)
location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)

从上面的属性明细中:

  • push:f 这个方法用于在js中改变url,之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。
  • replace: f 这个方法也是用于在js中改变url,replace方法映射于window.history中的replaceState方法。
  • block:f 这个方法也很有用,比如当用户离开当前页面的时候,给用户一个文字提示,就可以采用history.block("你确定要离开当前页吗?")这样的提示。
  • go / goBack / goForward

在组件props中history的go、goBack、goForward方法,分别window.history.go、window.history.back、window.history.forward对应。

  • action: "PUSH" || "POP"

action这个属性左右很大,如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url,那么在新组件中的action就是"PUSH",否则就是"POP".

action属性很有用,比如我们在做翻页动画的时候,前进的动画是SlideIn,后退的动画是SlideOut,我们可以根据组件中的action来判断采用何种动画:

function newComponent (props)=>{
   return (
     <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionAppearTimeout={600}
          transitionEnterTimeout={600}
          transitionLeaveTimeout={200}
          transitionName={props.history.action==='PUSH'?'SlideIn':'SlideOut'}
         >
           <Component {...props}/>
    </ReactCSSTransitionGroup>
   )
}
  • location:object

在新组件的location属性中,就记录了从就组件中传递过来的参数,从上面的例子中,我们看到此时的location的值为:

    hash: "#edit"
    key: "uxs9r5"
    pathname: "/home"
    search: "?sort=name"
    state: {a:1}
    

除了key这个用作唯一表示外,其他的属性都是我们从上一个Link标签中传递过来的参数。

四、React-router4.0源码分析

在第三节中我们介绍了React-router的大致使用方法,读一读React-router4.0的源码。

这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的,因此设计到的组件为BrowserRouter、Router、Route和Link

1、React-router中的history

从上一节的介绍中我们知道,点击Link标签传递给新渲染的组件的props中有一个history对象,这个对象的内容很丰富,比如:action、goBack、go、location、push和replace方法等。

React-router构建了一个History类,用于在window.history的基础上,构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。

React-router中将这个新的History类的构建方法,独立成一个node包,包名为history。

npm install history -s 

可以通过上述方法来引入,我们来看看这个History类的实现。

const createBrowserHistory = (props = {}) => {
    const globalHistory = window.history;
    ......
    //默认props中属性的值
    const {
      forceRefresh = false,
      getUserConfirmation = getConfirmation,
      keyLength = 6,
      basename = '',
    } = props;
    const history = {
        length: globalHistory.length,
        action: "POP",
        location: initialLocation,
        createHref,
        push,
        replace,
        go,
        goBack,
        goForward,
        block,
        listen
    };                                         ---- (1)
    const basename = props.basename;   
    const canUseHistory = supportsHistory();   ----(2)
            
    const createKey = () =>Math.random().toString(36).substr(2, keyLength);    ----(3)
    
    const transitionManager = createTransitionManager();  ----(4)
    const setState = nextState => {
        Object.assign(history, nextState);
    
        history.length = globalHistory.length;
    
        transitionManager.notifyListeners(history.location, history.action);
    };                                      ----(5)
    
    const handlePopState = event => {
        handlePop(getDOMLocation(event.state));
    };
    const handlePop = location => {
    if (forceNextPop) {
      forceNextPop = false;
      setState();
    } else {
      const action = "POP";
      
      transitionManager.confirmTransitionTo(
            location,
            action,
            getUserConfirmation,
            ok => {
              if (ok) {
                setState({ action, location });
              } else {
                revertPop(location);
              }
            }
          );
        }
    };                                    ------(6)
    const initialLocation = getDOMLocation(getHistoryState());
    let allKeys = [initialLocation.key]; ------(7)
    
  
    // 与pop相对应,类似的push和replace方法
    const push ... replace ...            ------(8)
    
    return history                        ------ (9)
    
}


  • (1) 中指明了新的构建方法History所返回的history对象中所具有的属性。
  • (2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性,具体方法如下:
    export const supportsHistory = () => {
      const ua = window.navigator.userAgent;
    
      if (
        (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
        ua.indexOf("Mobile Safari") !== -1 &&
        ua.indexOf("Chrome") === -1 &&
        ua.indexOf("Windows Phone") === -1
      )
        return false;
    
      return window.history && "pushState" in window.history;
    };

从上述判别式我们可以看出,window.history在chrome、mobile safari和windows phone下是绝对支持的,但不支持安卓2.x以及安卓4.0

  • (3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位
  • (4)中 createTransitionManager方法,返回一个集成对象,对象中包含了关于history地址或者对象改变时候的监听函数等,具体代码如下:

         const createTransitionManager = () => {
             const setPrompt = nextPrompt => {
               
             };
       
             const confirmTransitionTo = (
               location,
               action,
               getUserConfirmation,
               callback
             ) => {
                if (typeof getUserConfirmation === "function") {
                     getUserConfirmation(result, callback);
                   } else {
                     callback(true);
                   }
                 } 
             };
             
             
             let listeners = [];
             const appendListener = fn => {
               let isActive = true;
           
               const listener = (...args) => {
                 if (isActive) fn(...args);
               };
           
               listeners.push(listener);
           
               return () => {
                 isActive = false;
                 listeners = listeners.filter(item => item !== listener);
               };
             };
           
             const notifyListeners = (...args) => {
               listeners.forEach(listener => listener(...args));
             };
           
             return {
               setPrompt,
               confirmTransitionTo,
               appendListener,
               notifyListeners
             };

};

setPrompt函数,用于设置url跳转时弹出的文字提示,confirmTransaction函数,会将当前生成新的history对象中的location,action,callback等参数,作用就是在回调的callback方法中,根据要求,改变传入的location和action对象。

接着我们看到有一个listeners数组,保存了一系列与url相关的监听事件数组,通过接下来的appendListener方法,可以往这个数组中增加事件,通过notifyListeners方法可以遍历执行listeners数组中的所有事件。

  • (5) setState方法,发生在history的url或者history的action发生改变的时候,此方法会更新history对象中的属性,同时会触发notifyListeners方法,传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。
  • (6)这个getDOMLocation方法就是根据当前在window.state中的值,生成新history的location属性对象,allKeys这是始终保持了在url改变时候的历史url相关联的key,保存在全局,allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时,会保持一个实时的更新。
  • (7) handlePop方法,用于处理“POP”事件,我们知道在window.history中点击后退等会触发“POP”事件,这里也是一样,执行action为“POP”,当后退的时候就会触发该函数。
  • (8)中包含了与pop方法类似的,push和replace方法,push方法同样做的事情就是执行action为“PUSH”(“REPLACE”),该变allKeys数组中的值,唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加,而action为“REPLACE”的方法replace则是替换掉当前的元素。
  • (9)返回这个新生成的history对象。

2、React-router中Link组件

其实最难弄懂的是React-router中如何重新构建了一个history工厂函数,在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码,接着来看Link组件就很容易了。

首先Link组件类似于HTML中的a标签,目的也很简单,就是去主动触发改变url的方法,主动改变url的方法,从上述的history的介绍中可知为push和replace方法,因此Link组件的源码为:

class Link extends React.Component {

    
   handleClick = event => {
   ...

     const { history } = this.context.router;
     const { replace, to } = this.props;
     if (replace) {
       history.replace(replace);
     } else {
      history.push(to);
     }
   }
  };
  render(){
    const { replace, to, innerRef, ...props } = this.props;
     <a {...props} onClick={this.handleClick}/>
  }
}

上述代码很简单,从React的context API全局对象中拿到history,然后如果传递给Link组件的属性中有replace为true,则执行history.replace(to),to 是一个包含pathname的对象,如果传递给Link组件的replace属性为false,则执行history.push(to)方法。

3、React-router中Route组件

Route组件也很简单,其props中接受一个最主要的属性path,Route做的事情只有一件:

当url改变的时候,将path属性与改变后的url做对比,如果匹配成功,则渲染该组件的componet或者children属性所赋值的那个组件。

具体源码如下:

class Route extends React.Component {


  ....
  constructor(){
  
  
  }
  render() {
    const { match } = this.state;
    const { children, component, render } = this.props;
    const { history, route, staticContext } = this.context.router;
    const location = this.props.location || route.location;
    const props = { match, location, history, staticContext };

    if (component) return match ? React.createElement(component, props) : null;

    if (render) return match ? render(props) : null;

    if (typeof children === "function") return children(props);

    if (children && !isEmptyChildren(children))
      return React.Children.only(children);

    return null;
  }

}

state中的match就是是否匹配的标记,如果匹配当前的Route的path,那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。

4、React-router中Router组件

Router组件中,是BrowserRouter、HashRouter等组件的底层组件。该组件中,定义了包含匹配规则match函数,以及使用了新history中的listener方法,来监听url的改变,从而,当url改变时,更改Router下不同path组件的isMatch结果。

class Router extends React.Component {
    componentWillMount() {
        const { children, history } = this.props
        
        //调用history.listen监听方法,该方法的返回函数是一个移除监听的函数
        
        this.unlisten = history.listen(() => {
          this.setState({
            match: this.computeMatch(history.location.pathname)
          });
        });
    }
    componentWillUnmount() {
      this.unlisten();
    }
    render() {
    
    }
}

上述首先在组件创建前调用了listener监听方法,来监听url的改变,实时的更新isMatch的结果。

5、总结

本文从前端路由的原理出发,先后介绍了两种前端路由常用的方法,接着介绍了React-router的基本组件API以及用法,详细介绍了React-router的组件中新构建的history对象,最后结合React-router的API阅读了一下React-router的源码。

查看原文

赞 39 收藏 27 评论 3

crystalyy 赞了文章 · 2019-08-02

在ES6模块特性中,import时如何正确使用花括号'{ }'

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

上文引用自:阮一峰老师的ECMAScript 6 入门


而我们这里要说的是在使用import语法引用模块时,如何正确使用{}

假如有一个B.js,想要通过import语法引用模块A.js,那么可以这么写:

// B.js
import A from './A'

而上面的代码生效的前提是,只有在如下A.js中有默认导出export default语法时才会生效。也就是:

// A.js
export default 42

在这种不使用{}来引用模块的情况下,import模块时的命名是随意的,即如下三种引用命名都是正确的:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

因为它总是会解析到A.js中默认的export default


而下面是使用了花括号命名的方式{A}来导入A.js

import { A } from './A'

上面代码生效的前提是,只有在模块A.js中有如下命名导出Aexport name的代码,也就是:

export const A = 42

而且,在明确声明了命名导出后,那么在另一个js中使用{}引用模块时,import时的模块命名是有意义的,如下:

// B.js
import { A } from './A'                 // 正确,因为A.js中有命名为A的export
import { myA } from './A'               // 错误!因为A.js中没有命名为myA的export
import { Something } from './A'         // 错误!因为A.js中没有命名为Something的export

要想上述代码正确执行,你需要明确声明每一个命名导出:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

ps: 一个模块中只能有一个默认导出export default,但是却可以有任意命名导出(0个、1个、多个),你也可以如下,一次性将他们导入:

// B.js
import A, { myA, Something } from './A'

这里我们使用导入默认导出A,以及命名导出myASomething

我们甚至可以在导入的时候重命名导入:

import X, { myA as myX, Something as XSomething } from './A'

总结:模块的默认导出通常是用在你期望该从模块中获取到任何想要的内容;而命名导出则是用于一些有用的公共方法,但是这些方法并不总是必要的。

原文stackoverflow:原文地址,如有问题欢迎指出。

查看原文

赞 28 收藏 20 评论 6

crystalyy 评论了文章 · 2019-04-23

纯CSS的星级评价效果

前言

图片描述

这种星星评价效果,相信大家这个并不陌生,经常会遇到这个。现在如果要我们自己实现一个,很多人第一反应可能用JS+CSS去实现它。这种方式并没有什么不好的地方,只是我们在复用的时候不是很方便,需要带上JS和CSS的两块代码。为了复用更简单,所以我们介绍一种纯CSS的方式。

小试牛刀

素材

icon-star-default.pngicon-star-active.png

原理

这里我们分为两层:
第一层:div.star_evaluate 设置图片背景icon-star-default.png,沿X轴平铺,超出部分隐藏,作为定位父级。
第二层:a标签作为第二层,这里我们需要设置其定位属性,初始化设定好每个a标签的位置,以及其背景图片。这边需要注意的是一定要给a便签加上层级。

鼠标移动对应的星星时,将其left属性设置为0,然后设置其宽度,这个宽度由其对应的星级决定,最后别忘了设置其层级。

关于层级的设定,我们一定要保证div.star_evaluate<a:hover<a。

代码实现

HTML

<div class="star_evaluate">
    <a class="star star_1" href="javascript:;" title="一星"></a>
    <a class="star star_2" href="javascript:;" title="两星"></a>
    <a class="star star_3" href="javascript:;" title="三星"></a>
    <a class="star star_4" href="javascript:;" title="四星"></a>
    <a class="star star_5" href="javascript:;" title="五星"></a>
</div>

CSS

/*去掉标签默认样式*/
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*初始化样式*/
.star_evaluate {
    position: relative;
    width: 100px;
    height: 20px;
    background: url("icon-star-default.png") repeat-x;
    background-size: 20px 20px;
    overflow: hidden;
}

.star {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 2;
}

.star_1 {
    left: 0;
}

.star_2 {
    left: 20px;
}

.star_3 {
    left: 40px;
}

.star_4 {
    left: 60px;
}

.star_5 {
    left: 80px;
}

/*鼠标悬浮*/
.star:hover {
    cursor: pointer;
    background: url("icon-star-active.png") repeat-x;
    background-size: 20px 20px;
    left: 0;
    z-index: 1;
}

.star_1:hover {
    width: 20px;
}

.star_2:hover {
    width: 40px;
}

.star_3:hover {
    width: 60px;
}

.star_4:hover {
    width: 80px;
}

.star_5:hover {
    width: 100px;
}

精益求精

上面我们的星星评分效果已初见成效,但是暴露了一个问题,就是我们的评价机制缺少记忆功能。接下来我们来优化一下。

素材

同上。

实现原理

这边我们实现星星评分记忆的功能主要依赖input[type=radio]单选框,我们的星星评分主要分为三个状态。
初始化状态:在初始化状态下,我们需要跟上面一样初始化星星的位置。这里有点不一样的是每个星星对应一个单选框和一个label标签,label的层级要高于单选框。另外我们通过label的for的属性来实现和单选框的联系。
悬浮状态:在悬浮状态下,我们要根据悬浮所对应的星星来设置label标签的宽度,left属性设置为0。此时我们要保证该悬浮状态下的label标签的层级低于其他label标签。
选中状态:在选中状态下,我们跟悬浮状态一样设置label标签的宽度。

代码实现

HTML


<form id="score_form">
    <div class="star_evaluate">
        <input type="radio" id="scoreId_1" class="score score_1" name="score" value="1"/>
        <label for="scoreId_1" class="star star_1"></label>
        <input type="radio" id="scoreId_2" class="score score_2" name="score" value="2"/>
        <label for="scoreId_2" class="star star_2"></label>
        <input type="radio" id="scoreId_3" class="score score_3" name="score" value="3"/>
        <label for="scoreId_3" class="star star_3"></label>
        <input type="radio" id="scoreId_4" class="score score_4" name="score" value="4"/>
        <label for="scoreId_4" class="star star_4"></label>
        <input type="radio" id="scoreId_5" class="score score_5" name="score" value="5"/>
        <label for="scoreId_5" class="star star_5"></label>
    </div>
</form>

CSS3

        /*去掉标签默认样式*/
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        input {
            margin: 0;
        }

        /*初始化样式*/
        .star_evaluate {
            position: relative;
            width: 100px;
            height: 20px;
            background: url("icon-star-default.png") repeat-x;
            background-size: 20px 20px;
            overflow: hidden;
        }

        .star,.score{
            display: block;
            height: 20px;
            width: 20px;
            position: absolute;
        }
        .star{
            z-index: 2;
        }
        .score{
            opacity: 0;
        }

        .star_1, .score_1 {
            left: 0;
        }

        .star_2, .score_2 {
            left: 20px;
        }

        .star_3, .score_3 {
            left: 40px;
        }

        .star_4, .score_4 {
            left: 60px;
        }

        .star_5, .score_5 {
            left: 80px;
        }

        /*鼠标悬浮*/
        .star:hover {
            cursor: pointer;
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
            z-index: 1;
        }

        .star_1:hover {
            width: 20px;
        }

        .star_2:hover {
            width: 40px;
        }

        .star_3:hover {
            width: 60px;
        }

        .star_4:hover {
            width: 80px;
        }

        .star_5:hover {
            width: 100px;
        }

        /*选中之后*/
        .score:checked + .star {
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
        }

        .score_1:checked + .star_1 {
            width: 20px;
        }

        .score_2:checked + .star_2 {
            width: 40px;
        }

        .score_3:checked + .star_3 {
            width: 60px;
        }

        .score_4:checked + .star_4 {
            width: 80px;
        }

        .score_5:checked + .star_5 {
            width: 100px;
        }
查看原文

crystalyy 赞了回答 · 2019-03-26

解决defer和async的区别

先来试个一句话解释仨,当浏览器碰到 script 脚本的时候:

  1. <script data-original="script.js"></script>

    没有 deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  2. <script async data-original="script.js"></script>

    async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

  3. <script defer data-original="myscript.js"></script>

    defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

接着,我们来看一张图咯:

请输入图片描述

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

此图告诉我们以下几个要点:

  1. deferasync 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

关注 69 回答 6

crystalyy 赞了文章 · 2018-05-30

url、href、src 详解

发现自己居然没把url、href、src关系及使用搞清楚,今天就理一下。主要包括:url、src、href定义以及使用区别。顺便试下在segmentfault来一发。

URL(Uniform Resource Locator)

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

结构

基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名,如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下:协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志

第一部分:

模式/协议(scheme):它告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议(Hypertext Transfer Protocol,缩写为HTTP),这个协议可以用来访问网络。1 其他协议如下:

  • http——超文本传输协议资源
  • https——用安全套接字层传送的超文本传输协议
  • ftp——文件传输协议
  • mailto——电子邮件地址
  • ldap——轻型目录访问协议搜索
  • file——当地电脑或网上分享的文件
  • news——Usenet新闻组
  • gopher——Gopher协议
  • telnet——Telnet协议

第二部分:

文件所在的服务器的名称或IP地址,后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。路径部分包含等级结构的路径定义,一般来说不同部分之间以斜线(/)分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。

分类

1、绝对URL

绝对URL(absolute URL)显示文件的完整路径,这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。

2、相对URL

相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。如果目标文件与当前页面(也就是包含URL的页面)在同一个目录,那么这个文件的相对URL仅仅是文件名和扩展名,如果目标文件在当前目录的子目录中,那么它的相对URL是子目录名,后面是斜杠,然后是目标文件的文件名和扩展名。

如果要引用文件层次结构中更高层目录中的文件,那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠,从而引用当前文件所在的硬盘上的任何文件,一般来说,对于同一服务器上的文件,应该总是使用相对URL,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。

以下为建立路径所使用的几个特殊符号,及其所代表的意义。

  • .:代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a><img data-original="./abc" />
  • ..:代表上一层目录,相对路径。 如:<a href="../abc">文本</a><img data-original="../abc" />
  • ../../:代表的是上一层目录的上一层目录,相对路径。 如:<img data-original="../../abc" />
  • /:代表根目录,绝对路径。 如:<a href="/abc">文本</a><img data-original="/abc" />
  • D:/abc/:代表根目录,绝对路径。

在使用相对路径时,我们用符号“.”来表示当前目录,用符号“..”来表示当前目录的父目录。

重点:href 和 src 的定义与区别

href和src是有区别的,而且是不能相互替换的。我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个关系。

href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下:

<link href="style.css" rel="stylesheet" />

浏览器明白当前资源是一个样式表,页面解析不会暂停(由于浏览器需要样式规则去画或者渲染页面,渲染过程可能会被被暂停)。这与把css文件内容写在<style>标签里不相同,因此建议使用link标签而不是@import来吧样式表导入到html文档里。

src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到

<script data-original="script.js"></script>

在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。
与img类似的有更多: replaced elements

参考:

查看原文

赞 17 收藏 71 评论 3

crystalyy 赞了回答 · 2017-04-20

解决求问bootstrap中 aria-haspopup="true" aria-expanded="true" 具体什么意思?

aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的。

关注 4 回答 3

crystalyy 赞了回答 · 2017-03-10

github上别人给我发了一个特别大的pr?

你应该告诉他哪些需要哪些不要,请他把 pr 修改过之后再 merge,而不是你 merge 了之后再修改。

一是流程本就应该如此,二也是一种尊重,协商。

关注 4 回答 2

crystalyy 赞了回答 · 2017-02-18

解决div块中加center-block为什么不能居中?

在这种情况下, 你应该给这个div设置一个宽度, 才行。
在bootstrap的文档中,介绍使用sass或者less版本时,有关于这个的

请输入图片描述

关注 1 回答 3

认证与成就

  • 获得 1 次点赞
  • 获得 14 枚徽章 获得 0 枚金徽章, 获得 4 枚银徽章, 获得 10 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-03-17
个人主页被 265 人浏览