JS高程：读书摘要（十四）拖放、音视频

一、跨文档消息传递

跨文档消息传送（cross-document messaging），有时候简称为XDM，指的是在来自不同域的页面间传递消息。

XDM 的核心是postMessage()方法，向另一个地方(包含在当前页面中的</code>元素，或者由当前页面弹出的窗口。)传递数据。</p> <p><code>otherWindow.postMessage(message, targetOrigin, [transfer]);</code></p> <ul> <li> <code>otherWindow</code>：其他窗口的一个引用，比如<code>iframe</code>的<code>contentWindow</code>属性、执行<code>window.open</code>返回的窗口对象、或者是命名过或数值索引的<code>window.frames</code>。</li> </ul> <ul> <li><p><code>message</code> : 将要发送到其他 <code>window</code>的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。</p></li> <li><p><code>targetOrigin</code>：通过窗口的<code>origin</code>属性来指定哪些窗口能接收到消息事件，其值可以是字符串<code>"*"</code>（表示无限制，不建议使用）或者一个<code>URI</code>。如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配<code>targetOrigin</code>提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口(非常重要)；</p></li> <li><p><code>transfer</code>[可选]：是一串和<code>message</code>同时传递的 <code>Transferable</code> 对象. 这些对象的所有权将被<strong>转移给消息的接收方</strong>，而发送一方将不再保有所有权。</p></li> </ul> <p>接收到<code>XDM</code>消息时，会触发<code>window</code>对象的<code>message</code>事件。这个事件是以异步形式触发的，因此从发送消息到接收消息（触发接收窗口的<code>message</code>事件）可能要经过一段时间的延迟。触发<code>message</code>事件后，传递给<code>onmessage</code>处理程序的<strong>事件对象</strong>包含以下三方面的重要信息。</p> <ul> <li> <code>data</code>：从其他 <code>window</code>中传递过来的对象。</li> <li> <code>origin</code>：调用 <code>postMessage</code> 时消息发送方窗口的 <code>origin</code>. 这个字符串由协议、域名、端口号拼接而成。端口号（<code>443</code>为<code>https</code>的默认值）</li> <li> <code>source</code>：对发送消息的窗口对象的引用; 可以使用此来在具有不同<code>origin</code>的两个窗口之间建立双向通信。</li> </ul> <p>安全相关：如果您不希望从其他网站接收<code>message</code>，请不要为<code>message</code>事件添加任何事件侦听器。这是一个完全万无一失的方式来避免安全问题；如果您确实希望从其他网站接收<code>message</code>，请始终使用<code>origin</code>和<code>source</code>属性验证发件人的身份。当您使用<code>postMessage</code>将数据发送到其他窗口时，始终指定精确的目标<code>origin</code>，而不是<code>"*"</code>。</p> <pre><code class="js">// 示例： // 主窗口域名是<http://example.com:8080> 传递"i am main" 给弹出页 // 弹出页域名是<http://example.org> 传递"i am pop"给主窗口 // 主窗口 JS var popup = window.open('http://example.org','pop') // 参数是(url,新窗口名称) 不是title 而是可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。 popup.postMessage("i am main", "http://example.org"); // 发送-> 传递消息给弹出页第二个参数必须精准匹配 // 接收-> 定义事件处理程序处理接收到的消息 function receiveMessage(event){ // 必须使用判断以保证安全网站不被攻击 if (event.origin !== "http://example.org"){ return; }else{ // do something } // event.source 是我们通过window.open打开的弹出页面 popup // event.data 是 popup发送给当前页面的消息 } window.addEventListener("message",receiveMessage,false) </code></pre> <pre><code class="js">// 弹出页 JS function popReceiveMessage(event){ if (event.origin !== "http://example.com:8080"){ return; }else{ // 向来源窗口发送回执 event.source.postMessage("i am pop" +event.origin); } } window.addEventListener("message", popReceiveMessage, false); </code></pre> <h4>二、拖放</h4> <h5>拖放事件</h5> <ul> <li>发生在被拖放的元素上。 <ul> <li> <code>dragstart</code>：按下鼠标键并开始移动鼠标时触发。</li> <li> <code>drag</code>：在元素被拖动期间会持续触发该事件</li> <li> <code>dragend</code>：当拖动停止时触发（无论是否将元素放到了有效目标）</li> </ul> </li> <li>发生在放置目标上。 <ul> <li> <code>dragenter</code>：有元素被拖入时触发。</li> <li> <code>dragover</code>：被拖动元素在放置目标内部移动时触发。</li> <li> <code>dragleave</code>：被拖动元素被拖出放置目标后触发。（进来之后出去）</li> <li> <code>drop</code>：元素被放到了放置目标中时触发。</li> </ul> </li> </ul> <p>如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生<code>drop</code> 事件。不过，你可以把任何元素变成有效的放置目标，方法是阻止<code>dragenter</code> 和<code>dragover</code> 事件的<strong>默认行为</strong>。你就会发现当拖动着元素移动到放置目标上时，光标变成了允许放置的符号。当然，释放鼠标也会触发<code>drop</code>事件。</p> <p>在<code>Firefox 3.5+</code>中，放置事件的默认行为是打开被放到放置目标上的<code>URL</code>(被放入元素是图片则页面转向图像文件，如果是文本，则导致错误，无效的<code>URL</code>)，如果想正常处理放置事件，也需要阻止<code>drop</code>事件打开<code>URL</code>的行为</p> <h5> <code>dataTransfer</code>对象</h5> <p>它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。只能在拖放事件的事件处理程序中访问<code>dataTransfer</code>对象。有两个主要方法：<code>getData()</code>和<code>setData()</code></p> <pre><code class="js">//设置和接收文本数据 event.dataTransfer.setData("text", "some text"); var text = event.dataTransfer.getData("text"); //设置和接收URL event.dataTransfer.setData("URL", "http://www.wrox.com/"); var url = event.dataTransfer.getData("URL"); </code></pre> <p><code>IE</code>只定义了<code>"text"</code>和<code>"URL"</code>两种有效的数据类型，而<code>HTML5</code>则对此加以扩展，允许指定各种<code>MIME</code>类型。考虑到向后兼容，<code>HTML5</code> 也支持<code>"text"</code>和<code>"URL"</code>，但这两种类型会被映射为<code>"text/plain"</code>和<code>"text/uri-list"</code>。</p> <p>保存在<code>dataTransfer</code>对象中的数据只能在<code>drop</code>事件处理程序中读取。如果在<code>ondrop</code>处理程序中没有读到数据，那就是<code>dataTransfer</code>对象已经被销毁，数据也丢失了。</p> <p>在拖动文本框中的文本或链接、图像时，浏览器会调用<code>setData()</code>方法以<code>"text"</code>或<code>"URL"</code>保存，然后，在这些元素被拖放到放置目标时，就可以通过<code>getData()</code>读到这些数据。当然，作为开发人员，你也可以在<code>dragstart</code>事件处理程序中调用<code>setData()</code>，手工保存自己要传输的数据，以便将来使用。如果将数据保存为<code>URL</code>，浏览器会将其当成网页中的链接。换句话说，如果你把它放置到<strong>另一个浏览器窗口</strong>中，浏览器就会打开该<code>URL</code>。</p> <pre><code class="js">// 兼容Firefox5之前不能正确映射"text"和"url" 只能把"Text"（T 大写）映射为"text/plain"。 var dataTransfer = event.dataTransfer; //读取URL var url = dataTransfer.getData("url") ||dataTransfer.getData("text/uri-list"); //读取文本 var text = dataTransfer.getData("Text"); </code></pre> <h5> <code>dataTransfer</code> 对象的两个属性 <code>dropEffect</code>与<code>effectAllowed</code> </h5> <ul> <li> <code>dropEffect</code>属性可以知道被拖动的元素能够执行哪种放置行为 <ul> <li> <code>"none"</code>：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。</li> <li> <code>"move"</code>：应该把拖动的元素移动到放置目标。</li> <li> <code>"copy"</code>：应该把拖动的元素复制到放置目标。</li> <li> <code>"link"</code>：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有<code>URL</code>）。</li> </ul> </li> </ul> <p>使用<code>dropEffect</code>属性，必须在<code>ondragenter</code>事件处理程序中针对放置目标来设置它。在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号。然而，浏览器只能帮你改变光标的样式，而其他的都要靠你自己来实现。</p> <p><code>dropEffect</code> 属性只有搭配<code>effectAllowed</code> 属性才有用。<code>effectAllowed</code> 属性表示允许拖动元素的哪种<code>dropEffect</code>，必须在<code>ondragstart</code> 事件处理程序中设置<code>effectAllowed</code> 属性，定义此次拖动可以允许哪些操作，而当<code>ondragenter</code>触发时，针对放置目标来设置<code>dropEffect</code>属性来进行该操作。</p> <ul> <li> <code>effectAllowed</code> 属性表示允许拖动元素的哪种<code>dropEffect</code> <ul> <li> <code>"uninitialized"</code>：没有给被拖动的元素设置任何放置行为。</li> <li> <code>"none"</code>：被拖动的元素不能有任何行为。s</li> <li> <code>"copy"</code>：只允许值为<code>"copy"</code>的<code>dropEffect</code>。</li> <li> <code>"link"</code>：只允许值为<code>"link"</code>的<code>dropEffect</code>。</li> <li> <code>"move"</code>：只允许值为<code>"move"</code>的<code>dropEffect</code>。</li> <li> <code>"copyLink"</code>：允许值为<code>"copy"</code>和<code>"link"</code>的<code>dropEffect</code>。</li> <li> <code>"copyMove"</code>：允许值为<code>"copy"</code>和<code>"move"</code>的<code>dropEffect</code>。</li> <li> <code>"linkMove"</code>：允许值为<code>"link"</code>和<code>"move"</code>的<code>dropEffect</code>。</li> <li> <code>"all"</code>：允许任意<code>dropEffect</code> </li> </ul> </li> </ul> <h5> <code>draggable</code> 可拖动</h5> <p>文本在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。<code>HTML5</code> 为所有<code>HTML</code>元素规定了一个<code>draggable</code> 属性，表示元素是否可以拖动。图像和链接的<code>draggable</code> 属性自动被设置成了<code>true</code>，而其他元素这个属性的默认值都是<code>false</code>。要想让其他元素可拖动，或者让图像或链接不能拖动，都可以设置这个属性。</p> <h5>其他成员</h5> <p><code>dataTransfer</code> 对象还应该包含下列方法和属性</p> <ul> <li> <code>addElement(element)</code>：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而响应回调的对象），不会影响拖动操作时页面元素的外观。部分浏览器支持</li> <li> <code>clearData(format)</code>：清除以特定格式保存的数据。实现这个方法的浏览器有<code>IE</code>、<code>Fireforx 3.5+</code>、<code>Chrome</code> 和<code>Safari 4+</code>。</li> <li> <code>setDragImage(element, x, y)</code>：指定一幅图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的<code>HTML</code>元素和光标在图像中的<code>x、y</code>坐标。其中，<code>HTML</code>元素可以是一幅图像，也可以是其他元素。是图像则显示图像，是其他元素则显示渲染后的元素。实现这个方法的浏览器有<code>Firefox 3.5+</code>、<code>Safari 4+</code>和<code>Chrome</code>。</li> <li> <code>types</code>：当前保存的数据类型。这是一个类似数组的集合，以"text"这样的字符串形式保存着数据类型。实现这个属性的浏览器有<code>IE10+</code>、<code>Firefox 3.5+</code>和<code>Chrome</code>。</li> </ul> <h4>三、媒体元素</h4> <h5> <code><audio></code>和<code><video></code> </h5> <p>位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示。因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定<code>src</code>属性，而是要像下面这样使用一或多个<code><source></code>元素。</p> <pre><code class="html"> <video id="myVideo"> <source src="conference.webm" type="video/webm; codecs='vp8, vorbis'"> <source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'"> <source src="conference.mpg"> Video player not available. </video> </code></pre> <p>通过这些属性可以知道媒体的当前状态。：</p> <ul> <li> <code>src</code>：指向要加载的媒体文件。</li> <li> <code>width</code>和<code>height</code>：指定视频播放器的大小</li> <li> <code>poster</code>：属性指定图像的<code>URI</code>可以在加载视频内容期间显示一幅图像。（封面）</li> <li> <code>controls</code>：布尔值，浏览器是否显示UI 控件，以便用户直接操作媒体</li> <li> <code>autoplay</code> : 布尔值取得或设置<code>autoplay</code>标志</li> <li> <code>buffered</code> :时间范围表示已下载的缓冲的时间范围的对象</li> <li> <code>bufferedBytes</code> : 字节范围表示已下载的缓冲的字节范围的对象</li> <li> <code>bufferingRate</code>: 整数下载过程中每秒钟平均接收到的位数</li> <li> <code>bufferingThrottled</code> : 布尔值表示浏览器是否对缓冲进行了节流</li> <li> <code>currentLoop</code>: 整数媒体文件已经循环的次数</li> <li> <code>currentSrc</code> :字符串当前播放的媒体文件的URL</li> <li> <code>currentTime</code> : 浮点数已经播放的秒数</li> <li> <code>defaultPlaybackRate</code> :浮点数取得或设置默认的播放速度。默认值为1.0秒</li> <li> <code>duration</code> :浮点数媒体的总播放时间（秒数）</li> <li> <code>ended</code> : 布尔值表示媒体文件是否播放完成</li> <li> <code>loop</code>: 布尔值取得或设置媒体文件在播放完成后是否再从头开始播放</li> <li> <code>muted</code>: 布尔值取得或设置媒体文件是否静音</li> <li> <code>networkState</code>: 整数表示当前媒体的网络连接状态：<code>0</code>表示空，<code>1</code>表示正在加载，<code>2</code>表示正在加载元数据，<code>3</code>表示已经加载了第一帧，<code>4</code>表示加载完成</li> <li> <code>paused</code>: 布尔值表示播放器是否暂停</li> <li> <code>playbackRate</code> : 浮点数取得或设置当前的播放速度。用户可以改变这个值，让媒体播放速度变快或变慢，这与只能由开发人员修改的<code>defaultPlaybackRate</code>不同</li> <li> <code>played</code>: 时间范围到目前为止已经播放的时间范围</li> <li> <code>readyState</code> :整数表示媒体是否已经就绪（可以播放了）。<code>0</code>表示数据不可用，<code>1</code>表示可以显示当前帧，<code>2</code>表示可以开始播放，<code>3</code>表示媒体可以从头到尾播放</li> <li> <code>seekable</code> : 时间范围可以搜索的时间范围</li> <li> <code>seeking</code>: 布尔值表示播放器是否正移动到媒体文件中的新位置</li> <li> <code>start</code>:浮点数取得或设置媒体文件中开始播放的位置，以秒表示</li> <li> <code>totalBytes</code>: 整数当前资源所需的总字节数</li> <li> <code>videoHeight</code>: 整数返回视频（不一定是元素）的高度。只适用于<code><video></code> </li> <li> <code>videoWidth</code>: 整数返回视频（不一定是元素）的宽度。只适用于<code><video></code> </li> <li> <code>volume</code>:浮点数取得或设置当前音量，值为<code>0.0到1.0</code> </li> </ul> <p>事件有：</p> <ul> <li> <code>abort</code> 下载中断</li> <li> <code>canplay</code> 可以播放时；<code>readyState</code>值为2</li> <li> <code>canplaythrough</code>: 播放可继续，而且应该不会中断；<code>readyState</code>值为3</li> <li> <code>canshowcurrentframe</code> :当前帧已经下载完成；<code>readyState</code>值为1</li> <li> <code>dataunavailable</code>:因为没有数据而不能播放；<code>readyState</code>值为0</li> <li> <code>durationchange</code> :<code>duration</code>属性的值改变</li> <li> <code>emptied</code>：网络连接关闭</li> <li> <code>empty</code> ：发生错误阻止了媒体下载</li> <li> <code>ended</code> ：媒体已播放到末尾，播放停止</li> <li> <code>error</code>：下载期间发生网络错误</li> <li> <code>load</code>：所有媒体已加载完成。这个事件可能会被废弃，建议使用<code>canplaythrough</code> </li> <li> <code>loadeddata</code>：媒体的第一帧已加载完成</li> <li> <code>loadedmetadata</code>：媒体的元数据已加载完成</li> <li> <code>loadstart</code>：下载已开始</li> <li> <code>pause</code>：播放已暂停</li> <li> <code>play</code>：媒体已接收到指令开始播放</li> <li> <code>playing</code>：媒体已实际开始播放</li> <li> <code>progress</code>：正在下载</li> <li> <code>ratechange</code>：播放媒体的速度改变</li> <li> <code>seeked</code>：搜索结束</li> <li> <code>seeking</code> ：正移动到新位置</li> <li> <code>stalled</code> 浏览器尝试下载，但未接收到数据</li> <li> <code>timeupdate</code>：<code>currentTime</code>被以不合理或意外的方式更新</li> <li> <code>volumechange</code>： <code>volume</code>属性值或<code>muted</code>属性值已改变</li> <li> <code>waiting</code>：播放暂停，等待下载更多数据</li> </ul> <pre><code class="js">//取得元素的引用 var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration"); //更新播放时间 duration.innerHTML = player.duration; //为按钮添加事件处理程序 EventUtil.addHandler(btn, "click", function(event){ if (player.paused){ player.play(); // play方法播放 btn.value = "Pause"; } else { player.pause(); // pause方法暂停 btn.value = "Play"; } }); //定时更新当前时间以小于1000ms触发 setInterval(function(){ curtime.innerHTML = player.currentTime; }, 250); </code></pre> <h5>检测编解码器的支持情况</h5> <p><code>canPlayType()</code>方法，该方法接收一种格式/编解码器字符串，返回<code>probably"</code>、<code>"maybe"</code>或<code>" "</code>，如果给<code>canPlayType()</code>传入了一种<code>MIME</code>类型（期望接受的是编码格式字符串），则返回值很可能是<code>"maybe"</code>或空字符串。这是因为媒体文件本身只不过是音频或视频的一个容器，而<strong>真正决定文件能否播放的还是编码的格式</strong>。在同时传入<code>MIME</code>类型和编解码器的情况下，可能性就会增加，返回的字符串会变成<code>"probably"</code>。</p> <pre><code class="js">var audio = document.getElementById("audio-player"); //很可能"maybe" if (audio.canPlayType("audio/mpeg")){ // MIME //进一步处理 } //可能是"probably" if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){ // MIME & 编码格式 //进一步处理 } </code></pre> <p>常用音频的音频格式和编解码器</p> <ul> <li> <code>AAC</code>： <code>audio/mp4; codecs="mp4a.40.2"</code> ，浏览器支持的有 <code>IE9+</code>、<code>Safari 4+</code>、<code>iOS版Safari</code> </li> <li> <code>MP3</code> ：<code>audio/mpeg</code>，浏览器支持的有 <code>IE9+</code>、<code>Chrome</code> </li> <li> <code>Vorbis</code> ：<code>audio/ogg; codecs="vorbis"</code>，浏览器支持的有<code>Firefox 3.5+</code>、<code>Chrome</code>、<code>Opera 10.5+</code> </li> <li> <code>WAV</code> ： <code>audio/wav; codecs="1"</code>，浏览器支持的有<code>Firefox 3.5+</code>、<code>Opera 10.5+</code>、<code>Chrome</code> </li> </ul> <p>常用视频的视频格式和编解码器</p> <ul> <li> <code>H.264</code> ：<code>video/mp4; codecs="avc1.42E01E, mp4a.40.2"</code> ，浏览器支持的有<code>IE9+</code>、<code>Safari 4+</code>、<code>iOS版Safari</code>、<code>Android版WebKit</code> </li> <li> <code>Theora</code> ：<code>video/ogg; codecs="theora"</code>，浏览器支持的有 <code>Firefox 3.5+</code>、<code>Opera 10.5</code>、<code>Chrome</code> </li> <li> <code>WebM</code> ：<code>video/webm; codecs="vp8, vorbis"</code>，浏览器支持的有<code>Firefox 4+</code>、<code>Opera 10.6</code>、<code>Chrome</code> </li> </ul> <h5> <code>Audio</code>类型</h5> <p><code><audio></code>元素还有一个原生的<code>JavaScript</code> 构造函数<code>Audio</code>，可以在任何时候播放音频。从同为<code>DOM</code>元素的角度看，<code>Audio</code> 与<code>Image</code>很相似，但<code>Audio</code>不用像<code>Image</code>那样必须插入到文档中。只要创建一个新实例，并传入音频源文件即可。</p> <pre><code class="js">var audio = new Audio("sound.mp3"); EventUtil.addHandler(audio, "canplaythrough", function(event){ audio.play(); }) // 创建实例即可开始下载指定的文件。下载完成后，调用play()就可以播放音频。 </code></pre> <p>在<code>iOS</code> 中，调用<code>play()</code>时会弹出一个对话框，得到用户的许可后才能播放声音。如果想在一段音频播放后再播放另一段音频，必须在<code>onfinish</code>事件处理程序中调用<code>play()</code>方法。</p> <h4>四、历史状态管理</h4> <h5><code>history.pushState()</code></h5> <p>通过状态管理<code>API</code>，能够在不加载新页面的情况下改变浏览器的<code>URL</code> 。为此，需要使用<code>history.pushState()</code>方法，该方法可以接收三个参数：状态对象、新状态的标题和新<code>URL</code></p> <p>新<code>URL</code>不必须为绝对路径。如果新<code>URL</code>是相对路径，那么它将被作为相对于当前<code>URL</code>处理。新<code>URL</code>必须与当前<code>URL</code>同源，否则 <code>pushState()</code>会抛出一个异常。<strong>该参数是可选的，缺省为当前<code>URL</code>。</strong></p> <pre><code class="js">// 假设在 http://mozilla.org/foo.html 中执行了以下 JS 代码: var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); // 第二个参数没有浏览器实现，可以传空字符串或者一个短标题（安全的选择）。 // 这将使浏览器地址栏显示为 http://mozilla.org/bar.html // 但并不会导致浏览器加载 bar.html ，甚至不会检查bar.html 是否存在。 </code></pre> <p>执行<code>pushState()</code>方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对<code>URL</code>。状态改变之后查询<code>location.href</code>也会返回与地址栏中相同的地址，但是浏览器并不会真的向服务器发送请求。</p> <p>假设现在用户又访问了 <code>http://google.com</code>，然后点击了返回按钮。此时，地址栏将显示 <code>http://mozilla.org/bar.html</code>，同时页面会触发 <code>popstate</code> 事件，事件对象<code>state</code>中包含了 <code>stateObj</code> 的一份拷贝。<strong>页面本身与 <code>foo.html</code> 一样</strong>，尽管其在 <code>popstate</code> 事件中可能会修改自身的内容。</p> <p>如果我们再次点击返回按钮，页面<code>URL</code>会变为<code>http://mozilla.org/foo.html</code>，文档对象<code>document</code>会触发另外一个 <code>popstate</code> 事件，这一次的事件对象<code>state object</code>为<code>null</code>。这里也一样，返回并不改变文档的内容，尽管文档在接收 <code>popstate</code> 事件时可能会改变自己的内容，<strong>其内容仍与之前的展现一致</strong>。</p> <pre><code class="js">EventUtil.addHandler(window, "popstate", function(event){ var state = event.state; if (state){ //第一个页面加载时state 为空 // 进一步操作 } }) </code></pre> <h5><code>history.replaceState()</code></h5> <p><code>history.replaceState()</code>与<code>history.pushState()</code>非常相似，区别在于 <code>replaceState()</code> 是修改（替换）了当前的历史栈栈顶的状态信息，而不是新增。注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。</p> <p><code>AURL</code> push到 <code>BURL</code>，再push到<code>CURL</code>，后退会后退到<code>BURL</code>；<br> <code>AURL</code> push到 <code>BURL</code>，再replace到 <code>CURL</code>，后退会后退到<code>AURL</code>；</p> <h5> <code>popstate</code>事件</h5> <p>每当活动的历史记录项发生变化时， <code>popstate</code> 事件都会被传递给<code>window</code>对象。如果当前活动的历史记录项是被 <code>pushState</code>创建的，或者是由 <code>replaceState</code> 改变的，那么 <code>popstate</code> 事件的状态属性 <code>state</code> 会包含一个当前历史记录状态对象的拷贝（调用这两个方法的第一个参数）</p> <p>页面加载时，或许会有个非<code>null</code>的状态对象。这是有可能发生的，举个例子，假如页面（通过<code>pushState()</code> 或<code>replaceState()</code>方法）设置了状态对象而后用户重启了浏览器。那么当页面重新加载时，页面会接收一个<code>onload</code>事件，但没有<code>popstate</code>事件，但是此时访问<code>history.state</code>属性会得到如同<code>popstate</code>被触发时能得到的状态对象。</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1214691994337644544"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(JS高程：读书摘要（十四）拖放、音视频)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> <span class="text-muted">巨木擎天</span> <div>唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835506616682770432.htm" title="每日一题——第八十四题" target="_blank">每日一题——第八十四题</a> <span class="text-muted">互联网打工人no1</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye</div> </li> <li><a href="/article/1835506236842405888.htm" title="C#中使用split分割字符串" target="_blank">C#中使用split分割字符串</a> <span class="text-muted">互联网打工人no1</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc</div> </li> <li><a href="/article/1835498547785592832.htm" title="【华为OD机试真题2023B卷 JAVA&JS】We Are A Team" target="_blank">【华为OD机试真题2023B卷 JAVA&JS】We Are A Team</a> <span class="text-muted">若博豆</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代</div> </li> <li><a href="/article/1835497074049773568.htm" title="数组去重" target="_blank">数组去重</a> <span class="text-muted">好奇的猫猫猫</span> <div>整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法</div> </li> <li><a href="/article/1835495551186071552.htm" title="读书||陶新华《教育中的积极心理学》1—28" target="_blank">读书||陶新华《教育中的积极心理学》1—28</a> <span class="text-muted">流水淙淙2022</span> <div>读一本好书，尤如和一位高尚者对话，亦能对人的精神进行洗礼。但是若不能和实践结合起来，也只能落到空读书的状态。读书摘要与感想1、塞利格曼在《持续的幸福》一书中提出了幸福2.0理论，提出幸福由5个元素决定——积极情绪、投入的工作和生活、目标和意义、和谐的人际关系、成就感。2、人的大脑皮层在进行智力活动时，都伴有皮下中枢活动，对这些活动进行体验请假，并由此产生了情感解读。人的情绪情感体验总是优先于大脑的</div> </li> <li><a href="/article/1835494258262503424.htm" title="【JS】执行时长(100分) |思路参考+代码解析（C++）" target="_blank">【JS】执行时长(100分) |思路参考+代码解析（C++）</a> <span class="text-muted">l939035548</span> <a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835485429059645440.htm" title="docker" target="_blank">docker</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a> <div>Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息</div> </li> <li><a href="/article/1835483984516182016.htm" title="日常演播练习0822" target="_blank">日常演播练习0822</a> <span class="text-muted">开阳春天</span> <div>日常演播练习0822一、绕口令练习司小四和史小世，四月十四日十四时四十上集市，司小四买了四十四斤四两西红柿，史小世买了十四斤四两细蚕丝。司小四要拿四十四斤四两西红柿换史小世十四斤四两细蚕丝。史小世十四斤四两细蚕丝不换司小四四十四斤四两西红柿。司小四说我四十四斤四两西红柿可以增加营养防近视，史小世说我十四斤四两细蚕丝可以织绸织缎又抽丝。二、文本练习狗熊是动物街有名的美食家，它吃得多所以长得胖，它能吃</div> </li> <li><a href="/article/1835480639814594560.htm" title="在Ubuntu中编译含有JSON的文件出现报错" target="_blank">在Ubuntu中编译含有JSON的文件出现报错</a> <span class="text-muted">芝麻糊76</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/kill_bug/1.htm">kill_bug</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"</div> </li> <li><a href="/article/1835478496810463232.htm" title="Xinference如何注册自定义模型" target="_blank">Xinference如何注册自定义模型</a> <span class="text-muted">玩人工智能的辣条哥</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/Xinference/1.htm">Xinference</a> <div>环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</a> <span class="text-muted">亚丁号</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</div> </li> <li><a href="/article/1835447985601867776.htm" title="Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net" target="_blank">Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net</a> <span class="text-muted">佛一脚</span> <a class="tag" taget="_blank" href="/search/error/1.htm">error</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不</div> </li> <li><a href="/article/1835443569528238080.htm" title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a> <span class="text-muted">m0_l5z</span> <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835431726982197248.htm" title="vue 创建项目报错：command failed: npm install --loglevel error" target="_blank">vue 创建项目报错：command failed: npm install --loglevel error</a> <span class="text-muted">那鱼、会飞</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue-cli3/1.htm">vue-cli3</a> <div>这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错</div> </li> <li><a href="/article/1835430719363575808.htm" title="更改npm镜像源为淘宝镜像" target="_blank">更改npm镜像源为淘宝镜像</a> <span class="text-muted">骆小骆</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8Enode.js/1.htm">基于node.js</a> <div>npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de</div> </li> <li><a href="/article/1835430340806668288.htm" title="COCO 格式的数据集转化为 YOLO 格式的数据集" target="_blank">COCO 格式的数据集转化为 YOLO 格式的数据集</a> <span class="text-muted">QYQY77</span> <a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>"""--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances</div> </li> <li><a href="/article/1835425101122727936.htm" title="辰辰日记四十四" target="_blank">辰辰日记四十四</a> <span class="text-muted">谷子</span> <div>昨天是重阳节，当然我们都没有刻意提起这个节日，似乎并不重要，生长在城市，连爬山都不是寻常事。人人都是忙碌之人，虽然人人也都难以说清自己都在忙些什么。其实这一天以又是你外婆的生日。原来妈妈想好给外婆买一双鞋子，不过，这段时间外婆生病了。病得挺严重，无法睡眠，不能行走。辰辰，你一定不能想象这是一种什么情况，人怎么会无法睡觉，躺不下床。当人颈椎有伤，且血管不通畅就会这样。你一躺下就整个人头晕目眩。那就是</div> </li> <li><a href="/article/1835424412342513664.htm" title="ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀" target="_blank">ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀</a> <span class="text-muted">kkai人工智能</span> <a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>最近这段时间，AI热潮因ChatGPT的火爆再次掀起。如今，网上大部分内容都在调侃AI，但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者，第一次和ChatGPT深度交流后，我就确信：ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后，我越发感受到它的颠覆性。因此，我想从工作和学习的角度，分享它的优势及我的一些使用技巧，而非娱</div> </li> <li><a href="/article/1835422140325785600.htm" title="pyhon+ffmpeg 常用音视频处理命令" target="_blank">pyhon+ffmpeg 常用音视频处理命令</a> <span class="text-muted">不再游移</span> <a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>FFmpeg是多媒体领域的万能工具。只要涉及音视频领域的处理，基本上没有它做不了的事情！通俗点讲，从视频录制、视频编辑再到播放，它都能做！前段时间做了个短视频自动化脚本项目，需要自动处理音视频（包括一些合成、拼接、转场、调色等等），当时做的时候找各种命令还是很痛苦的，因此对用到的所有处理命令做了个汇总，方便以后使用。目录一、获取音频时长二、获取视频信息三、获取视频时长四、多个视频合并五、视频提取视</div> </li> <li><a href="/article/1835415332345442304.htm" title="NPM私库搭建-verdaccio（Linux）" target="_blank">NPM私库搭建-verdaccio（Linux）</a> <span class="text-muted">Beam007</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT</div> </li> <li><a href="/article/1835400203130204160.htm" title="高级UI<第二十四篇>：Android中用到的矩阵常识" target="_blank">高级UI<第二十四篇>：Android中用到的矩阵常识</a> <span class="text-muted">NoBugException</span> <div>（1）定义在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合。由m×n个数aij排成的m行n列的数表称为m行n列的矩阵，简称m×n矩阵。记作：图片.png这m×n个数称为矩阵A的元素，简称为元，数aij位于矩阵A的第i行第j列，称为矩阵A的(i,j)元，以数aij为(i,j)元的矩阵可记为(aij)或(aij)m×n，m×n矩阵A也记作Amn。元素是实数的矩阵称为实矩阵，元素是复</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835397938482868224.htm" title="golang获取用户输入的几种方式" target="_blank">golang获取用户输入的几种方式</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的</div> </li> <li><a href="/article/1835393400380157952.htm" title="VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。</a> <span class="text-muted">焚木灵</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> <span class="text-muted">zoyation</span> <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/125.htm" title="apache 安装linux windows" target="_blank">apache 安装linux windows</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/inux/1.htm">inux</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式     通过二进制文件安装Apache需要的软件有apr,apr-util,pcre  1，安装 apr        下载地址：htt</div> </li> <li><a href="/article/252.htm" title="fill_parent、wrap_content和match_parent的区别" target="_blank">fill_parent、wrap_content和match_parent的区别</a> <span class="text-muted">Cb123456</span> <a class="tag" taget="_blank" href="/search/match_parent/1.htm">match_parent</a><a class="tag" taget="_blank" href="/search/fill_parent/1.htm">fill_parent</a> <div>fill_parent、wrap_content和match_parent的区别:   1）fill_parent   设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2） wrap_conte</div> </li> <li><a href="/article/379.htm" title="网页自适应设计" target="_blank">网页自适应设计</a> <span class="text-muted">天子之骄</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">响应式设计</a><a class="tag" taget="_blank" href="/search/%E9%A1%B5%E9%9D%A2%E8%87%AA%E9%80%82%E5%BA%94/1.htm">页面自适应</a> <div>网页自适应设计        网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所</div> </li> <li><a href="/article/506.htm" title="[sql server] 分组取最大最小常用sql" target="_blank">[sql server] 分组取最大最小常用sql</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>--分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1</div> </li> <li><a href="/article/633.htm" title="ImageIO写图片输出到硬盘" target="_blank">ImageIO写图片输出到硬盘</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/image/1.htm">image</a> <div>package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei</div> </li> <li><a href="/article/760.htm" title="自己的String动态数组" target="_blank">自己的String动态数组</a> <span class="text-muted">宝剑锋梅花香</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E6%95%B0%E7%BB%84/1.htm">动态数组</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div>数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10];    但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？  动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符</div> </li> <li><a href="/article/887.htm" title="pinyin4j工具类" target="_blank">pinyin4j工具类</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，</div> </li> <li><a href="/article/1014.htm" title="StarUML学习笔记----基本概念" target="_blank">StarUML学习笔记----基本概念</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/UML%E5%BB%BA%E6%A8%A1/1.htm">UML建模</a> <div>介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。         模型、视与图（Model, View and Diagram）        &</div> </li> <li><a href="/article/1141.htm" title="Activiti最终总结" target="_blank">Activiti最终总结</a> <span class="text-muted">avords</span> <a class="tag" taget="_blank" href="/search/Activiti+id+%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">Activiti id 工作流</a> <div>1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和（ActivityImpl activityId </div> </li> <li><a href="/article/1268.htm" title="从省市区多重级联想到的，react和jquery的差别" target="_blank">从省市区多重级联想到的，react和jquery的差别</a> <span class="text-muted">bee1314</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a> <div>在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。   针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面</div> </li> <li><a href="/article/1395.htm" title="Eclipse快捷键大全" target="_blank">Eclipse快捷键大全</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a> <div>Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En</div> </li> <li><a href="/article/1522.htm" title="js 笔记函数" target="_blank">js 笔记函数</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用函数变量的调用：      vName(params); 函数定义时自发调用：(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff</div> </li> <li><a href="/article/1649.htm" title="【Scala四】分析Spark源代码总结的Scala语法二" target="_blank">【Scala四】分析Spark源代码总结的Scala语法二</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>1. Some操作   在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， Some的文档说明：   /** Class `Some[A]` represents existin</div> </li> <li><a href="/article/1776.htm" title="java 匿名内部类" target="_blank">java 匿名内部类</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/java%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">java匿名内部类</a> <div>组合优先于继承 Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。   在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相</div> </li> <li><a href="/article/1903.htm" title="盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用" target="_blank">盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用</a> <span class="text-muted">ljy325</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/XP/1.htm">XP</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a> <div>Mac mini 型号: MC270CH-A RMB:5,688   Apple 对windows的产品支持不好,有以下问题:   1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响!   2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 &nbs</div> </li> <li><a href="/article/2030.htm" title="读《研磨设计模式》-代码笔记-生成器模式-Builder" target="_blank">读《研磨设计模式》-代码笔记-生成器模式-Builder</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF） * 个人理解： * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构</div> </li> <li><a href="/article/2157.htm" title="JIRA与SVN插件安装" target="_blank">JIRA与SVN插件安装</a> <span class="text-muted">chenyu19891124</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/jira/1.htm">jira</a> <div>JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB</div> </li> <li><a href="/article/2284.htm" title="常用数学思想方法" target="_blank">常用数学思想方法</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>  对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考   函数思想　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法</div> </li> <li><a href="/article/2411.htm" title="pl/sql集合类型" target="_blank">pl/sql集合类型</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88/1.htm">集合</a><a class="tag" taget="_blank" href="/search/type/1.htm">type</a><a class="tag" taget="_blank" href="/search/pl%2Fsql/1.htm">pl/sql</a> <div>--集合类型 /*   单行单列的数据，使用标量变量   单行多列数据，使用记录   单列多行数据，使用集合（。。。）   *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 */ /*     --集合方法 &n</div> </li> <li><a href="/article/2538.htm" title="[Ofbiz]ofbiz初用" target="_blank">[Ofbiz]ofbiz初用</a> <span class="text-muted">dinguangx</span> <a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%95%86/1.htm">电商</a><a class="tag" taget="_blank" href="/search/ofbiz/1.htm">ofbiz</a> <div>从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby，通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别)   2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &</div> </li> <li><a href="/article/2665.htm" title="结构体中最后一个元素是长度为0的数组" target="_blank">结构体中最后一个元素是长度为0的数组</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/gcc/1.htm">gcc</a> <div>在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n</div> </li> <li><a href="/article/2792.htm" title="Linux cp 实现强行覆盖" target="_blank">Linux cp 实现强行覆盖</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。方法一我们输入alias命令，看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a</div> </li> <li><a href="/article/2919.htm" title="Memcached(一)、HelloWorld" target="_blank">Memcached(一)、HelloWorld</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>一、简介高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。二、客户端选择一个memcached客户端，我这里用的是memc</div> </li> <li><a href="/article/3046.htm" title="Search in Rotated Sorted Array II" target="_blank">Search in Rotated Sorted Array II</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/search/1.htm">search</a> <div>Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta</div> </li> <li><a href="/article/3173.htm" title="Spring4新特性——更好的Java泛型操作API" target="_blank">Spring4新特性——更好的Java泛型操作API</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/generic+type/1.htm">generic type</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3300.htm" title="CentOS安装JDK" target="_blank">CentOS安装JDK</a> <span class="text-muted">liuxingguome</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>1、行卸载原来的： [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost</div> </li> <li><a href="/article/3427.htm" title="二分搜索专题2-在有序二维数组中搜索一个元素" target="_blank">二分搜索专题2-在有序二维数组中搜索一个元素</a> <span class="text-muted">OpenMind</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%90%9C%E7%B4%A2/1.htm">二分搜索</a> <div>1,设二维数组p的每行每列都按照下标递增的顺序递增。用数学语言描述如下：p满足 (1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题：给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析： (</div> </li> <li><a href="/article/3554.htm" title="java 随机数 Math与Random" target="_blank">java 随机数 Math与Random</a> <span class="text-muted">SaraWon</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/Random/1.htm">Random</a> <div>今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式： //Math Math.roun</div> </li> <li><a href="/article/3681.htm" title="oracle创建表空间" target="_blank">oracle创建表空间</a> <span class="text-muted">tugn</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>create temporary tablespace TXSJ_TEMP   tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent m</div> </li> <li><a href="/article/3808.htm" title="使用Java8实现自己的个性化搜索引擎" target="_blank">使用Java8实现自己的个性化搜索引擎</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/superword/1.htm">superword</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/java8/1.htm">java8</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%96%87%E6%A3%80%E7%B4%A2/1.htm">全文检索</a> <div>需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

JS高程：读书摘要（十四）拖放、音视频

一、 跨文档消息传递

一、跨文档消息传递