标签搜索
搜索到
109
篇与
的结果
-
-
JS数组去重 一. 利用ES6 Set()实现数组去重let arr = [1, '1', 2, 3, 2, 4]; let newArr = new Set(arr) //Set(5) {1, "1", 2, 3, 4} //在利用ES6中Array新增了一个静态方法Array.from，可以把类似数组的对象转换为数组 Array.from(newArr) //(5) [1, "1", 2, 3, 4]二. 以ES5实现数组去重let arr = [1, '1', 2, 3, 2, 4]; let Obj = {}; let result = []; arr.forEach(v=>{ let key = (typeof v)+v if(!Obj[key]){ Obj[key] = true; result.push(v) } }) console.log(result)//[1, "1", 2, 3, 4] //这里利用了数组元素的类型与值进行去重操作
-
Blob对象 blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。创建blob对象创建blob对象本质上和创建一个其他对象的方式是一样的，都是使用Blob() 的构造函数来进行创建。 构造函数接受两个参数：第一个参数为一个数据序列，可以是任意格式的值。第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决定第一个参数的数据格式，可以取值为 "transparent" 或者 "native"（transparent的话不变，是默认值，native 的话按操作系统转换） 。 }Blob()构造函数允许使用其他对象创建一个Blob对象，比如用字符串构建一个blobvar debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});既然是对象，那么blob也拥有自己的属性以及方法属性Blob.isClosed (只读)布尔值，指示 Blob.close() 是否在该对象上调用过。 关闭的 blob 对象不可读。Blob.size (只读)Blob 对象中所包含数据的大小（字节）。Blob.type (只读)一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。方法Blob.close()关闭 Blob 对象，以便能释放底层资源。Blob.slice([start[, end[, contentType]]])返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。其实就是对这个blob中的数据进行切割，我们在对文件进行分片上传的时候需要使用到这个方法。看到上面这些方法和属性，使用过HTML5提供的File接口的应该都很熟悉，这些属性和方法在File接口中也都有。 其实File接口就是基于Blob，继承blob功能并将其扩展为支持用户系统上的文件，也就是说：File接口中的Flie对象就是继承与Blob对象。blob对象的使用上面说了很多关于Blob对象的一些概念性的东西，下面我们来看看实际用途。分片上传首先说说分片上传，我们在进行文件上传的时候，因为服务器的限制，会限制每一次上传到服务器的文件大小不会很大，这个时候我们就需要把一个需要上传的文件进行切割，然后分别进行上传到服务器。假如需要做到这一步，我们需要解决两个问题:怎么切割?怎么得知当前传输的进度?首先怎么切割的问题上面已经有过说明，因为File文件对象是继承与Blob对象的，因此File文件对象也拥有slice这个方法，我们可以使用这个方法将任何一个File文件进行切割。代码如下：var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB . var blob = document.getElementById("file").files[0]; var slices = Math.ceil(blob.size / BYTES_PER_CHUNK); var blobs = []; slices.forEach(function(item, index) { blobs.push(blob.slice(index,index + 1)); });通过上面的方法。我们就得到了一个切割之后的File对象组成的数组blobs；接下来要做的时候就是讲这些文件分别上传到服务器。在HTTP1.1以上的协议中，有Transfer-Encoding这个编码协议，用以和服务器通信，来得知当前分片传递的文件进程。这样解决了这两个问题，我们不仅可以对文件进行分片上传，并且能够得到文件上传的进度。粘贴图片blob还有一个应用场景，就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后，需要在网页上进行粘贴操作。粘贴图片我们需要解决下面几个问题监听用户的粘贴操作获取到剪切板上的数据将获取到的数据渲染到网页中首先我们可以通过paste事件来监听用户的粘贴操作:document.addEventListener('paste', function (e) { console.info(e); });然后通过事件对象中的clipboardData 对象来获取图片的文件数据。clipboardData对象介绍介绍一下 clipboardData 对象，它实际上是一个 DataTransfer 类型的对象， DataTransfer 是拖动产生的一个对象，但实际上粘贴事件也是它。clipboardData 的属性介绍属性 类型 说明dropEffect String 默认是 noneeffectAllowed String 默认是 uninitializedfiles FileList 粘贴操作为空Listitems DataTransferItemList 剪切板中的各项数据types Array 剪切板中的数据类型 该属性在Safari下比较混乱items 介绍items 是一个 DataTransferItemList 对象，自然里面都是 DataTransferItem 类型的数据了。属性items 的 DataTransferItem 有两个属性 kind 和 type属性 说明kind 一般为 string 或者 filetype 具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即 MIME-Type方法方法 参数 说明getAsFile 空 如果 kind 是 file ，可以用该方法获取到文件getAsString function(str) 如果 kind 是 string ，可以用该方法获取到字符串str在原型上还有一些其他方法，不过在处理剪切板操作的时候一般用不到了。type 介绍一般 types 中常见的值有 text/plain 、 text/html 、 Files 。值 说明text/plain 普通字符串text/html 带有样式的htmlFiles 文件(例如剪切板中的数据)有了上面这些方法，我们可以解决第二个问题即获取到剪切板上的数据。document.addEventListener('paste', function (e) { console.info(e); var cbd = e.clipboardData; for(var i = 0; i < cbd.items.length; i++) { var item = cbd.items[i]; console.info(item); if(item.kind == "file"){ var blob = item.getAsFile(); if (blob.size === 0) { return; } console.info(blob); } } });最后我们需要将获取到的数据渲染到网页上。其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接通过HTML5的File接口将获取到的文件上传到服务器然后通过讲服务器返回的url地址来对图片进行渲染。也可以使用fileRender对象来进行图片本地浏览。fileRender对象简介从Blob中读取内容的唯一方法是使用 FileReader。FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。方法名 参数 描述readAsBinaryString file 将文件读取为二进制编码readAsText file,[encoding] 将文件读取为文本readAsDataURL file 将文件读取为DataURLabort (none) 终端读取操作FileReader 接口包含了一套完整的事件模型，用于捕获读取文件时的状态。事件 描述onabort 中断onerror 出错onloadstart 开始onprogress 正在读取onload 成功读取onloadend 读取完成，无论成功失败通过上面的方法以及事件，我们可以发现，通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。最终代码如下：document.addEventListener('paste', function (e) { console.info(e); var cbd = e.clipboardData; var fr = new FileReader(); var html = ''; for(var i = 0; i < cbd.items.length; i++) { var item = cbd.items[i]; console.info(item); if(item.kind == "file"){ var blob = item.getAsFile(); if (blob.size === 0) { return; } console.info(blob); fr.readAsDataURL(blob); fr.on<x>load=function(e){ var result=document.getElementById("result"); //显示文件 result.innerHTML='<img src="' + this.result +'" alt="" />'; } } } });原文
-
js图片压缩 function canvasDataURL(path, obj, callback) { var img = new Image(); img.src = path; img.onload = function () { var that = this; // 默认按比例压缩 let w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); let quality = 0.7; // 默认图片质量为0.7 //生成canvas let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); // 创建属性节点 let anw = document.createAttribute("width"); anw.nodeValue = w; let anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // quality值越小，所绘制出的图像越模糊 let base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); }; }// 三个参数// file：一个是文件(类型是图片格式)，// config：一个是文件压缩的后宽度，宽度越小，字节越小{width,height,quality}// callback：一个是容器或者回调函数base64转Blob对象 /** * 将以base64的图片url数据转换为Blob * @param urlData * 用url方式表示的base64图片数据 */ function convertBase64UrlToBlob(urlData) { var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
-
redux-persist数据持久化 import { createStore } from 'redux'; import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import reducer from './reducer'; let persistedReducer = persistReducer({ key: 'auto', storage }, reducer); let store = createStore(persistedReducer); export default store;persistReducer(config, reducer)argumentsconfig objectrequired config: key, storagenotable other config: whitelist, blacklist, version, stateReconciler, debugreducer functionany reducer will work, typically this would be the top level reducer returned by combineReducersreturns an enhanced reducerimport React from "react"; import { HashRouter as Router, Route } from "react-router-dom"; import { PersistGate } from 'redux-persist/integration/react'; import { persistStore } from 'redux-persist'; import store from '../redux/store'; import { Provider } from 'react-redux'; import Index from '../redux/index'; import Login from '../redux/login'; let persistor = persistStore(store); export default ( <PersistGate loading={null} persistor={persistor}> <Router> <Provider store={store}> <div> <Route exact path='/' component={Index}></Route> <Route exact path='/login' component={Login}></Route> </div> </Provider> </Router> </PersistGate> );persistStore(store, [config, callback])argumentsstore redux store The store to be persisted.config object (typically null)callback function will be called after rehydration is finished.returns persistor objectpersistor objectthe persistor object is returned by persistStore with the following methods:.purge()purges state from disk and returns a promise.flush()immediately writes all pending state to disk and returns a promise.pause()pauses persistence.persist()resumes persistence官方文档
-
webpack按需加载 **require.ensurerequire.ensure() 是 webpack 特有的，已经被 import() 取代**require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String) //示例 const home = (location, callback) => { require.ensure([], require => { callback(null, require('./HomePage.jsx')) }, 'home') }给定 dependencies 参数，将其对应的文件拆分到一个单独的 bundle 中，此 bundle 会被异步加载。当使用 CommonJS 模块语法时，这是动态加载依赖的唯一方法。意味着，可以在模块执行时才运行代码，只有在满足某些条件时才加载依赖项。dependencies：字符串构成的数组，声明 callback 回调函数中所需的所有模块。callback：只要加载好全部依赖，webpack 就会执行此函数。require 函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用 require() 来加载依赖。函数体可以使用此参数，来进一步执行 require() 模块。errorCallback：当 webpack 加载依赖失败时，会执行此函数。chunkName：由 require.ensure() 创建出的 chunk 的名字。通过将同一个 chunkName 传递给不同的 require.ensure() 调用，我们可以将它们的代码合并到一个单独的 chunk 中，从而只产生一个浏览器必须加载的 bundle。
-
-
js获取设置光标位置 window.getSelection() //返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 <!DOCTYPE html> <html> <head> <title>js24.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 输入完毕之后光标自动移动到下一个框的方法 --> <script type="text/javascript"> function moveNext(object, index) { if (object.value.length == 4) { document.forms[0].elements[index + 1].focus(); } } function showResult() { var f = document.forms[0]; var result = ""; for (var i = 0; i < 4; i++) { result += f.elements[i].value; } alert(result); } </script> </head> <body onload="document.forms[0].elements[0].focus();"> <form> <input type="text" size=3 maxlength=4 onkeyup="moveNext(this,0);">- <input type="text" size=3 maxlength=4 onkeyup="moveNext(this,1);">- <input type="text" size=3 maxlength=4 onkeyup="moveNext(this,2);">- <input type="text" size=3 maxlength=4 onkeyup="moveNext(this,3);"><br> <input type="button" value="显示所有" onclick="showResult();"> </form> </body>
-
判断360浏览器 window.onload = function() { //application/vnd.chromium.remoting-viewer 可能为360特有 var is360 = _mime("type", "application/vnd.chromium.remoting-viewer"); if (isChrome() && is360) { alert("检测到是360浏览器"); } } //检测是否是谷歌内核(可排除360及谷歌以外的浏览器) function isChrome() { var ua = navigator.userAgent.toLowerCase(); return ua.indexOf("chrome") > 1; } //测试mime function _mime(option, value) { var mimeTypes = navigator.mimeTypes; for (var mt in mimeTypes) { if (mimeTypes[mt][option] == value) { return true; } } return false; }
-
React按需加载 1.Bundle.js Bundle组件会接受一个名为 load 的 props load值一是一个组件异步加载的方法 load -> function (cb) {...cb(/ 异步加载的组件 /)},由bundle-loader封装 这个方法需要传入一个回调函数作为参数 回调函数会在在方法内异步接收加载完的组件import React from 'react'; class Bundle extends React.Component { constructor(props){ super(props); this.state = { // 默认为空 mod: null } } componentWillMount() { // 加载初始状态 this.load(this.props); } componentWillReceiveProps(nextProps) { if (nextProps.load !== this.props.load) { this.load(nextProps); } } load(props) { // 重置状态 this.setState({ mod: null }); // 传入组件的组件 props.load((mod) => { this.setState({ mod: mod.default ? mod.default : mod }); }); } render() { // 不为空，则渲染传入的子组件函数 return this.state.mod ? this.props.children(this.state.mod) : null; } } export default Bundle; 2.lazyLoad.js 这个包装函数接受两个值，一个为经过bundle-loader封装的组件，另一个是组件的属性import React from 'react'; import Bundle from './Bundle'; // 默认加载组件，可以直接返回 null const Loading = () => <div>Loading...</div>; /* 包装方法，第一次调用后会返回一个组件（函数式组件） 由于要将其作为路由下的组件，所以需要将 props 传入 <Bundle load={loadComponent}> {Comp => (Comp ? <Comp {...props} /> : <Loading />)} </Bundle> */ const lazyLoad = (loadComponent,props) => {//Bundle 包含的是一个函数子组件 由Bundle.js里的this.props.children(this.state.mod)渲染 return( <Bundle load={loadComponent}> {Comp => (Comp ? <Comp {...props} /> : <Loading />)} </Bundle> );} export default lazyLoad; 3.路由使用有两种使用方式，一种是webpack配置（见下面第四点），另一种是在组件内直接引用bundle-loader（下面代码没注释的就是）//import Home from './page/Home.bundle';//这种方式需要配置webpack的loader //import Detail from './page/Detail.bundle';//这种方式需要配置webpack的loader //-------------------------------------------------- import Detail from 'bundle-loader?lazy&name=home!./page/Detail.bundle'; import Home from 'bundle-loader?lazy&name=home!./page/Home.bundle'; <BrowserRouter> <div> <Route exact path="/" render={()=> <Redirect to="/home"/> // <Home dispatch={dispatch} getState={getState} questionList={value.question}></Home> }/> <Route path="/home" render={()=>{ return lazyLoad(Home, { dispatch:dispatch, getState:getState, questionList:value.question } ); }}/> <Route path="/detail" render={(props)=>{ return lazyLoad(Detail, { pid:props.location.id, questionList:value.question, dispatch:dispatch, answer:value.answer } ); }}/> </div> </BrowserRouter> 4.如果使用webpack配置注意这段代码要放在js的loader之前，不然可能会报错，这段配合下面这两句引用使用//import Home from './page/Home.bundle';//这种方式需要配置webpack的loader//import Detail from './page/Detail.bundle';//这种方式需要配置webpack的loader[html] view plain copy{ test: /\.bundle\.js$/, loader: 'bundle-loader', options: { lazy: true, name: '[name]' }
