完美

[学习|工作|博客|交流平台|完美起航]

作者头像zyw3272018.05.21 11:29 

es6新类型之Symbol学习笔记(二)

Symbol 全局注册Symbol实现Symbol的共享 使用Symbol()函数的上述语法不会创建整个代码库中可用的全局Symbol。 要创建跨文件甚至跨域的Symbol(每个域都有自己的全局作用域),请使用Symbol.for()和Symbol.keyFor()方法设置和检索全局符号注册表中的符号。 在对象上查找Symbol属性 Object.getOwnPropertySymbols()方法返回一个符号数组,并允许您在给定对象上查找符号属性。 请注意,每个对象都没有自己的符号属性进行初始化,因此除非您已经在对象上设置符号属性,否则此数组将为空。 属性 Symbol.length 长度属性值为0 Symbol.prototype 表示Symbol构造函数的原型 内置符号 除了自己的符号之外,JavaScript还有一些内置的符号,代表了内部语言行为,这些符号在ECMAScript 5以及之前没有向开发者公开。 这些符号可以使用以下属性进行访问: Iteration symbols Symbol.iterator 返回对象的默认迭代器,通常使用for ... of Symbol.asyncIterator 返回对象的AsyncIterator,通常使用 for await of 正则表达式符号 Symbol.match 与字符串匹配的方法,也用于确定对象是否可用作正则表达式。 由String.prototype.match()使用。 Symbol.replace 一种替换字符串的匹配子字符串的方法。通常使用String.prototype.replace()。 Symbol.search 返回与正则表达式匹配的字符串中的索引的方法。通常使用String.prototype.search()。 Symbol.split 在匹配正则表达式的索引处拆分字符串的方法。 通常使用String.prototype.split()。 其他符号 Symbol.hasInstance 确定构造函数对象是否将对象识别为其实例的方法。通常使用instanceof。 Symbol.isConcatSpreadable 一个布尔值,指示对象是否应平铺到其数组元素。 通常使用Array.prototype.concat()。 Symbol.unscopables 一个对象的值,其自己的和继承的属性名称被排除在关联对象的with环境绑定之外。 Symbol.species 用于创建派生对象的构造函数。 Symbol.toPrimitive 将对象转换为原始值的方法。 Symbol.toStringTag 用于默认描述对象的字符串值。 通常使用Object.prototype.toString()。 方法 Symbol.for(key) 用给定键搜索现有符号,如果找到则返回它。 否则,使用该键在全局符号注册表中创建一个新符号。 Symbol.keyFor(sym) 从全局符号注册表中为给定符号检索共享符号密钥。 Symbol prototype(符号原型) 所有符号都从Symbol.prototype继承。 属性 Symbol.prototype.constructor 返回创建实例原型的函数。 这是默认的符号功能。 方法 Symbol.prototy

Symbol 194 2

作者头像zyw3272018.05.20 22:44 

redux与redux-thunk的使用

redux redux是一个可预测的状态容器,(区别于Wordpress framework - Redux Framework) 它可以帮助您编写在不同环境(客户端,服务器和本地)中运行一致并且易于测试的应用程序。 最重要的是,它提供了出色的开发者体验,例如结合时间旅行调试器进行实时代码编辑。 你可以结合react一起使用redux。或者其他任何的视图库,redux很小,包括依赖仅仅2kb。 安装 npm install --save redux # 补充包 # 也许你还要和react一起使用,并且需要开发工具 npm install --save react-redux npm install --save-dev redux-devtools 例子 import { createStore } from 'redux' /** * 这是一个reducer,它是一个具有(state,action)=>状态签名的纯函数。 * 它描述了动作如何将状态转换为下一个状态。 * 状态的形状取决于你:它可以是一个基元,一个数组,一个对象, * 甚至是Immutable.js数据结构。 唯一重要的部分是你应该 * 不改变状态对象,但如果状态改变则返回一个新的对象。 * 在这个例子中,我们使用`switch`语句和字符串,但是你可以使用一个帮助器 * 遵循不同的约定(如功能图),如果它适合你的项目。 */ function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } // 创建一个持有应用状态的Redux store。 // 他的api { subscribe, dispatch, getState }. let store = createStore(counter) // 你可以通过subscribe()来更新ui来响应状态的改变。 // 通常你会使用视图绑定库 (比如:React-Redux) 比起直接用 subscribe() 。 // 但是,将当前状态保存在localStorage中也可能非常方便。 store.subscribe(() => console.log(store.getState()) ) // 改变内部状态的唯一方法是发送一个action。 // 这些动作可以被序列化,记录或存储,并在以后重播。 store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) 您不需要直接改变状态,而是使用称为操作的简单对象指定想要发生的突变。然后编写一个称为reducer的特殊函数来决定每个操作如何转换整个应用程序的状态。 如果您用过Flux,那么您需要了解一个重要的差异。 Redux没有分派器或支持许多store。相反,只有一个store具有单一根reducer函数。随着您的项目的扩展,您不必添加store,

redux 184 0

作者头像zyw3272018.05.20 21:50 

React、Fiux与redux的学习笔记

React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成单向的数据流根据 state 的变化来更新 view利用虚拟 DOM 来提升渲染性能 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state 变化的情况进行统一管理,于是就有了 Flux。 Flux Flux 是一种应用架构,或者说是一种思想,它跟 React 本身没什么关系,它可以用在 React 上,也可以用在别的框架上。前面说到 Flux 在 React 中主要用来统一管理引起 state 变化的情况。Flux 维护着一个或者多个叫做Store的变量,就像 MVC 里面的 Model,里面存放着应用用到的所有数据,当一个事件触发时 ,Flux 对事件进行处理,对 Store 进行更新,当 Store 发生变化时,通常是由应用的根组件(也叫 controller view)去获取最新的 store,然后更新 state,之后利用 React 单向数据流的特点一层层将新的 state 向下传递实现 view 的更新。这里的 controller view 可以有多个也可以不是根组件,但是这样数据流维护起来就比较麻烦。 Flux 的思维模型如下: Flux 主要包括四个部分,Dispatcher、Store、View、Action,其中 Dispatcher 是 Flux 的核心枢纽,它相当于是一个事件分发器,将那些分散在各个组件里面的逻辑代码收集起来,统一在 Dispatcher 中进行处理。完整的 Flux 处理流程是这样的:用户通过与 view 交互或者外部产生一个 Action,Dispatcher 接收到 Action 并执行那些已经注册的回调,向所有 Store 分发 Action。通过注册的回调,Store 响应那些与他们所保存的状态有关的 Action。然后 Store 会触发一个 change 事件,来提醒 controller-views 数据已经发生了改变。Controller-views 监听这些事件并重新从 Store 中获取数据。这些 controller-views 调用他们自己的 setState() 方法,重新渲染自身以及组件树上的所有后代组件。使用 Flux 有个好处就是我只需要用 action 对象向 Dispatcher 描述当前的事件就可以执行对应的逻辑,因为 Dispatcher 是所有 Action 的处理中心,即使没有对应的事件发生,我们也可以“伪造”一个出来,非常利于测试。 Redux Redux 的作用跟 Flux 是一样的,它可以看作是 Flux 的一种实现,但是又有点不同,具体的不同总结起来就是: Redux 只有

React 163 2

作者头像zyw3272018.05.18 17:58 

es6新类型之Symbol学习笔记(一)

Symbol Symbol()函数返回一个类型符号的值,具有暴露内置对象的几个成员的静态属性,具有公开全局符号注册表的静态方法,并且类似于内置对象类,但作为构造函数不完整,因为 它不支持“new Symbol()”语法。 从Symbol()返回的每个符号值都是唯一的。 符号值可以用作对象属性的标识符; 这是数据类型的唯一目的。 关于目的和用法的进一步解释可以在Symbol的词汇表中找到。 symbol 是原始数据类型 // JavaScript Demo: Symbol - Constructor const symbol1 = Symbol(); const symbol2 = Symbol(42); const symbol3 = Symbol('foo'); console.log(typeof symbol1); // expected output: "symbol" console.log(symbol3.toString()); // expected output: "Symbol(foo)" console.log(Symbol('foo') === Symbol('foo')); // expected output: false 语法 Symbol([description]) 参数 description 可选 可选,字符串。 描述可用于调试但不访问符号本身的符号。 说明 要创建一个新的原始符号,可以使用可选字符串作为其描述来编写Symbol() var sym1 = Symbol(); var sym2 = Symbol('foo'); var sym3 = Symbol('foo'); 上面的代码创建了三个新的符号。 请注意,Symbol(“foo”)不会将字符串“foo”强制转换为符号。 它每次都会创建一个新符号: Symbol('foo') === Symbol('foo'); // false 新运算符的以下语法将引发TypeError: var sym = new Symbol(); // TypeError 这可以防止作者创建一个显式的Symbol包装器对象而不是新的符号值,并且可能会令人惊讶,因为通常可以在原始数据类型周围创建显式包装器对象(例如,new Boolean,new String和New Number)。 如果你真的想创建一个Symbol包装器对象,你可以使用Object()函数: var sym = Symbol('foo'); typeof sym; // "symbol" var symObj = Object(sym); typeof symObj; // "object"

symbol 900 2

作者头像zyw3272018.05.10 16:31 

nodejs之Buffer学习笔记(一)

类方法: Buffer.alloc(size[, fill[, encoding]])History版本变化v8.9.3指定无效的字符串填充将会被替换为0来填充缓冲区。v5.10.0新增于: v5.10.0参数参数字段类型说明sizeinteger指定新创建的Buffer大小fillstring | Buffer | integer指定填充Buffer的值。 Default: 0encoding<string>如果填充的是字符串,这个参数指定的就是字符串的编码。 默认: 'utf8'分配一个指定字节大小的新Buffer。如果填充未定义,则Buffer将被零填充。constbuf=Buffer.alloc(5); //Prints:<Buffer0000000000> console.log(buf);buf.toString([encoding[, start[, end]]])新增于: v0.1.90encoding <string> 要解码的字符编码。 默认: 'utf8'start <integer> 开始解码的字节偏移量。 默认: 0end <integer> 在(不包括)停止解码的字节偏移量. 默认: buf.lengthReturns: <string> 根据编码中指定的字符编码将BUF解码为字符串。可以通过开始和结束仅解码BUF的子集字符串实例的最大长度(在UTF-16编码单元中)可以作为Buffer-Struts.Max String长度来使用。constbuf2=Buffer.alloc(11,"你好12345",'utf8'); //以下输出:<Buffere4bda0e5a5bd3132333435> console.log(buf2); //以下输出:你好12345 console.log(buf2.toString('utf8')); constbuf3=Buffer.alloc(11,"你好123456",'utf8'); //以下输出:<Buffere4bda0e5a5bd3132333435> console.log(buf2); //以下输出:你好12345=>buf3长度11,utf-8编码中一个汉字占三个字节,你好123456共12个字节,所以丢失一个字节 console.log(buf2.toString('utf8'));

Buffer 5866 4

作者头像zyw3272018.05.02 10:29 

vue中使用vuex

首先是vuex的安装npminstallvuex--save引入并引用vueximportVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex)创建store.jsconststore=newVuex.Store({ state:{ count:0 }, mutations:{ increment(state){ state.count++ } } })现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:store.commit('increment')引用store的两种方式,在组件中引用//在组件中引用 importstorefrom'store'通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。constapp=newVue({ el:'#app', //把store对象提供给“store”选项,这可以把store的实例注入所有的子组件 store, components:{Counter}, template:` <divclass="app"> <counter></counter> </div> `})mapState 辅助函数当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键://在单独构建的版本中辅助函数为 Vuex.mapStateimport{mapState}from'vuex' exportdefault{ //... computed:mapState({ //箭头函数可使代码更简练 count:state=>state.count, //传字符串参数'count'等同于`state=>state.count` countAlias:'count', //为了能够使用`this`获取局部状态,必须使用常规函数 countPlusLocalState(state){ returnstate.count+this.localCount } }) }

vuex 10575 2

作者头像zyw3272018.04.22 20:33 

js基础算法学习

移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组//递归实现 functionremove(arr,item){ varnewArr=arr.slice(0); if(newArr.indexOf(item)===-1){ returnnewArr; } newArr.splice(newArr.indexOf(item),1) returnremove(newArr,item); } //循环遍历实现 functionremove1(arr,item){ varnewArr=[]; arr.forEach(function(e,index,arr){ if(e!==item){ newArr.push(e); } }) returnnewArr; }2.直接在原数组上操作functionremoveWithoutCopy(arr,item){ if(arr.indexOf(item)===-1){ returnarr; } arr.splice(arr.indexOf(item),1) returnremoveWithoutCopy(arr,item); }3. 查找数组中重复出现的数字//不改变原数组 functionduplicates(arr){ varnewArr=[]; arr.forEach(function(e,index){ if((arr.slice(index+1)).indexOf(e)!==-1){ if(newArr.indexOf(e)===-1){ newArr.push(e); } } }); returnnewArr; } //第二种方式 functionduplicates1(arr){ varnewArr=[]; arr.forEach(function(e,index){ if(arr.indexOf(e)!==arr.lastIndexOf(e)&&newArr.indexOf(e)===-1){ newArr.push(e); } }); returnnewArr; }4. 数组去重functionduplicates2(arr){ varnewArr=[]; arr.forEach(function(e,index){ if(newArr.indexOf(e)===-1){ newArr.push(e); } }); returnnewArr; }5.在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组functioninsert(arr,item,index){ varnewArr=[]; for(varkeyinarr){ if(key==index){ newArr.push(item); newArr.push(arr[key]); }else{ newArr.push(arr[key]); } } return!newArr.length?[item]:newArr; } //利用slice+concat functioninsert1(arr,item,index){ returnarr.slice(0,index).concat(item,arr.slice(index)); } //利用concat+splice functioninsert2(arr,

javascript 16003 3

作者头像zyw3272018.04.11 22:37 

兔子繁殖问题编程

问题如下:有人养了一对兔子,这对兔子以后每月生一对兔子,新生兔子从第三个月开始,也是每月生一对兔子,问 12 个月后这人有多少对新生兔子?首先分析:从上可以知道,从3月份开始每月增加的兔子对数成等差数列,因此此题从3月份开始可以通过求等差数列的前n项和求每月的兔子对数。因为是从三月开始所以n= n- 2; 首项为1,化简后得:result = 2 + (n - 2) + (n * n - 5n + 6) / 2; 其中n要大于等于2;1月则返回1对兔子C语言编程如下:/* 有人养了一对兔子,这对兔子以后每月生一对兔子,新生兔子从第三个月开始,也是每月生一对兔子,问12个月后这人有多少对新生兔子 */ #include<stdio.h> intmain(){ intn=0; intresult=0; printf("请输入月份:"); scanf("%d",&n); if(n==1){ result=1; }else{ result=2+(n-2)+(n*n-5*n+6)/2; } printf("%d月份共有%d对兔子\n",n,result); return0; }

兔子繁殖问题 21963 5

作者头像zyw3272018.04.10 17:16 

配置静态服务器与nginx的安装与配置

centos服务器可用登录远端服务器sshroot@ip#输入密码登入终端执行netstat -tunlp如果显示相关服务的相关情况。则进行下一步,如果提示命令不存在则执行yuminstall-ynet-tools配置静态服务器可以用的服务软件有apache、nginx等,这里以nginx为例。nginx的安装相关准备如下:首先先安装nginx所需的依赖#安装nginx依赖yuminstallzlibzlib-developensslopenssl-develpcre-devel-y yuminstall-ymakegccgcc-c++-y下载nginxnginx下载地址:http://nginx.org/en/download.html我们可以通过wget下载,当然首先要先安装wget#如果没有wget则执行yuminstall-ywget wgethttp://nginx.org/download/nginx-1.12.2.tar.gz #nginx安装另一个依赖pcre只要解压不需安装 wgethttps://ftp.pcre.org/pub/pcre/pcre-8.40.tar.gz tar-zxvfpcre-8.40.tar.gz #下载完成后解压 tar-zxvfnginx-1.12.2.tar.gz cdnginx-1.12.2 ./configure\ --prefix=/usr/local/nginx\ --sbin-path=/usr/local/nginx/sbin/nginx\ --conf-path=/usr/local/nginx/conf/nginx.conf\ --pid-path=/usr/local/nginx/nginx.pid\ --with-http_ssl_module\ --with-pcre=\ --with-zlib=\ --error-log-path=/data/nginx/error/error.log\ --http-log-path=/data/nginx/error/http.log\ --user=www\ --group=www\ --lock-path=/var/lock/nginx.lock\ --with-http_ssl_module\ --with-http_flv_module\ --with-http_stub_status_module\ --with-http_gzip_static_module\ --http-client-body-temp-path=/var/tmp/nginx/client/\ --http-proxy-temp-path=/var/tmp/nginx/proxy/\ --http-fastcgi-temp-path=/var/tmp/nginx/fcgi/\ --http-uwsgi-temp-path=/var/tmp/nginx/uwsgi\ --http-scgi-temp-path=/var/tmp/nginx/scgi\ --with-pcre=../pcre-8.40 make&&makeinstall配置首先要创建nginx的执行用户groupaddwww useraddwww-gwww-s/sbin/nologin然后进入nginx的配置文件目录cd/usr/local/nginx/c

nginx 22650 4

作者头像zyw3272018.04.10 11:26 

前端开发面试题

前言只看问题点这里看全部问题和答案点这里本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的!前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话:“每18至24个月,前端都会难一倍”,这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前端程序员必备的技能之一。最近也收到许多微博私信的鼓励和更正题目信息,后面会经常更新题目和答案到github博客。希望前端er达到既能使用也会表达,对理论知识有自己的理解。可根据下面的知识点一个一个去进阶学习,形成自己的职业技能链。面试有几点需注意:(来源寒冬winter老师,github:@wintercn)面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。题目类型: 理论知识、算法、项目细节、技术视野、开放性题、工作案例。细节追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种知识关联是长时期的学习,临时抱佛脚绝对是记不住的。回答问题再棒,面试官(可能是你面试职位的直接领导),会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事,还要会做人。(感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ ))资深的前端开发能把absolute和relative弄混,这样的人不要也罢,因为团队需要的是:你这个人具有可以依靠的才能(靠谱)。前端开发所需掌握知识点概要:HTML&CSS: 对Web标准的理解(结构、表现、行为)、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系,常用属性、布局、选择器、权重、盒模型、 Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5(离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas); JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、 内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP、其他: 主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、 重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等;作为一名前端工程师,无论工作年头长短都应该掌握的知识点:此条由 王子墨 发表在攻城师的实验室 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。 4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。 5、严格模式

前端开发 24638 0

a6bfb44cbd5549740eb36647f36ef83a