htsclch的博客

原创 requestIdleCallback和requestAnimationFrame

这是浏览器提供的另一个方法，用来处理不紧急的任务。它会告诉浏览器：“等你现在没事干（没有用户输入、动画等）的时候，再执行我的代码”。避免低优先级任务卡住主线程，影响用户体验。这是浏览器提供的一个方法，专门用来做动画或高频更新的视觉效果。它会告诉浏览器：“在下一次屏幕刷新绘制画面时，请先执行我的代码”。这样你的动画会和屏幕刷新同步，避免卡顿。像数据上报、预加载内容等任务不需要立刻完成，趁浏览器空闲时处理，可以提升页面响应速度。做动画，时间可能不精准，导致丢帧卡顿。会自动匹配屏幕刷新节奏，保证流畅。

转载 深入理解thunk函数

一.起源传值调用or传名调用var x = 1;function f(m){ return m * 2; }f(x + 5)// 一种意见是"传值调用"（call by value），即在进入函数体之前，就计算 x + 5 的值（等于6），再将这个值传入函数 f 。C语言就采用这种策略。// 另一种意见是"传名调用"（call by name），即直接将表达式 x + 5 传入函数体，只在用到它的时候求值。Hskell语言采用这种策略。传值调用和传名调用，哪一种比较好？回

原创 js手写toUpperCase和toLoweCase

function toUpperCaseLch(str) { let strArr = str.split(""); let max = "z".charCodeAt(); let min = "a".charCodeAt(); let resultArr = []; strArr.forEach(item => { let curr = item.charCodeAt(); if(curr <= max && curr >= min).

转载 js加载 拒绝js阻塞—defer、async作用和区别分析

原创 深拷贝

1.递归function deepCopy(a) { let cloned = Array.isArray(a)? [] : {}; if(a && typeof a === "object") { for (let i in a) { if(a.hasOwnProperty(i)) { if(a[i] && typeof a[i] === "object") { cloned[i] = deepCopy(

原创 js驼峰和中划线连字符相互转化的最佳实践

1.驼峰转连字符var s = "thisIsTest"; s = s.replace(/([A-Z])/g,"-$1").toLowerCase();2.连字符转驼峰function toHump(name) { return name.replace(/\-(\w)/g, function(all, letter){ console.log(all) //"_T" console.log(letter) //"T" return letter.toUp...

原创 vue项目几个比较好的实践(路由模块化，打包dll优化，vuex)

一.路由的模块化和统一自动加载团队之间协作开发，为了防止对统一路由的修改，可以采用路由的模块化自动统一加载的方法，使用webpack的require.context来实现，项目的views目录结构如下：每个页面设置一个router的配置文件，内容如下：const IndexLayout = () => import("@/views/index.vue");setRoutersPath(routers) { var arryPath = []; routers.k.

原创 JavaScript的执行机制(异步，内存回收，性能监控)

一. 异步任务微任务： Promise，process.nextTick宏任务：整体代码script，setTimeout，setIntervalsetTimeout(()=>{ console.log("1")})var p = new Promise((resolve, reject) => { console.log("2") resolve()})p.then(() => { console.log("3")})console.log(".

转载 centos彻底删除mysql

centos7彻底卸载mysql和通过yum安装mysql原创innerpeacez 最后发布于2018-05-10 21:46:38 阅读数 33352 收藏展开彻底卸载mysql查看是否有安装的mysqlrpm -qa | grep -i mysql // 查看命令1yum list install mysql* // 查看命令2卸载mysql安装包yum remove ...

原创 精通ES6系列三（Promise 对象）

1.Promise 的概念（参考http://es6.ruanyifeng.com/#docs/promise#Promise-%E7%9A%84%E5%90%AB%E4%B9%89）Promise是一种异步编程解决方案，所谓Promise，它可以理解为一个容器，里面包含未来才要结束的事件（通常是指异步事件）。Promise对象的状态不受外界影响，只有三种状态 pending（进行中）、ful...

原创 精通ES6系列二（Generator函数）

1.简单概念Generator函数是ES6提供的一种异步编程解决方案，可以理解为一种状态机，内部包含多个状态。执行Generator函数会返回一个遍历器（iterator）,通过next方法去获取状态机里面的值。形式上，Generator函数是一个普通函数，但是有两个特征，一是function后面有一个*，二是函数体内部通过yield表达式，定义不同的内部状态。function* sim...

原创 精通ES6系列一（遍历器iterator）

1.Iterator的概念和作用 iterator的主要目的是为了给JS中的集合如Array、Map、Set或者自定义的一些集合等提供一种统一的、方便的访问和遍历机制。它其实是一个接口，任何数据结构只要部署了iterator接口就可以进行遍历，ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。Iterator 的遍历过程是这...

原创 JS基础知识查漏补缺二（函数）

1.函数的定义两种方式定义函数：function func(x){}let func = function(x){};两种方式完全等价，第二种相当于先声明了一个匿名函数，然后将引用赋值给func。JS会默认给每一行加一个分号，所以写return的时候要注意，不能这么写：function func(x){ return {'some code'} }2....

原创 JS基础知识查漏补缺一（数据类型）

数据类型分类 详细类型 原始类型 数字（Number） 字符串（String） 布尔型（Boolean） null undefined 引用类型 对象（object） 函数（Function）特殊的引用 数组（Array） 1.null和undefined的区别 null表示一个对象不存在，即“没有对象”；und...

原创 JavaScript prototype的深入理解

所有在js中定义的函数中，都会包含一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性， 也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。1.函数的作用域function demo(){ var a=0; //私有变量 var privat...

原创 JS继承属性/本地属性和对象的遍历

1、in 运算符varobj = {name:'jack'};alert('name'inobj);// --> truealert('toString'inobj);// --> true2、hasOwnProperty方法varobj = {name:'jack'};obj.hasOwnProperty('name');// --> t...

原创 react的生命周期及react16的一些新特性

react16之前旧的生命周期Mounting（加载阶段：涉及6个钩子函数）constructor()加载的时候调用一次，可以初始化stategetDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性。getInitialState()初始化state，可以直接在constructor中定义this.sta...