小柒的博客

转载 子元素宽度受flex影响，导致父元素的宽度不能自动增长的解决方法

原创 移动端实现1物理像素边框，解决dpr造成的边框问题

https://www.cnblogs.com/xiaoan0705/p/11268584.html

原创 根据dpr动态设置font-size

Dpr为逻辑像素和物理像素的像素比1：1代表1px=1pt1：2代表1px=2pt1：3代表1px=3ptdpr2-3时会将逻辑像素缩小2-3倍然后解析为物理像素呈现以下图为例Dpr:1下应设置的逻辑像素Dpr:2下应设置的逻辑像素Dpr:3下应该设置的逻辑像素查看dpr...

原创 vue新坑-配置反向代理无效

原因分析反向代理的值pathRewrite只能设置单段路由，比如/test/不能设置双段，比如api/test/如何解决把前半段写到target的ip后半段中,比如ip/xx/xx/proxy反向代理配置http://blog.starpoetry.cn/2018/12/04/Vue-proxy/...

原创 css移动端新坑---修改input默认字体色

解决方法使用hack符让不同的浏览器解析并找到该浏览器对应的input的默认字体，将样式渲染到字体中

原创 移动端css新坑---仿站时屏幕分辨率被转换为css分辨率时造成像素偏差

原因原有网站的屏幕分辨率转css分辨率时没有转换为对应的物理像素，自己写的分辨率被转了解决方法测出来的元素像素乘以2再转换为对应的rem...

原创 js原生---函数的动态创建

1.函数在未执行前本身只是一段字符串2.function为函数的构造器，通过构造器才能在堆空间构建一个函数

原创 js原生---变量的作用域链

js函数执行时，函数里的变量为从当前函数开始从下往上逐一寻找变量，所以子级函数被调用时，自己函数可以获取父级函数的变量执行原理图

原创 js原生---函数的调用栈和函数的编译执行原理

1.函数执行之前为一段字符串2.函数通过function构造器构建3.函数构建完成后存储于堆空间4.它被调用的时候，函数会被一个内容为空的object对象作为主体对象，将这个函数获取并调并存储至栈空间中执行5.执行完后，这个调用函数的object对象自动被销毁，所以函数的调用是存储于栈空间的...

原创 js原生---变量的分类和变量的编译原理

变量分类函数参数形式声明的函数的局部变量 函数内部声明的局部变量 不属于任何函数的全局变量变量是什么变量的起源是源于数学中的抽象概念，顾名思义，变量就是可变的值编程世界中，高级语言为了模拟数学中的抽象概念，从而产生变量作为高级语言的语法规则变量的类型主要分为两类，(1)值类型 (2)Object类型存储原理图从上图我们不难看出，Object类型的对象存储于堆空间...

原创 js原生---js代码的if else代码有return时的性能优化

1.else if可以去除并更改为if2.else去掉 只留return原因if else的else会占用文件四个字节，但此由于代码加入了return，所以return之后的代码不会继续被解释执行，造成了资源浪费，js文件字节数越大，用户从服务器端请求下载的速度就越长，会影响用户体验优化案例...

原创 每日一练---输出1-100数字并按条件输出

需求（1）打印1-100的数字 当数字能被3整除，不打印数字 打印Fizz（2）当数字能被5整除，但又不能被3整除，不打印数字，打印BUZZ 当数字既能被3整除又能被5整除打印FizzBuzz（3）把这个循环的具体实现封装为一个函数...

原创 js每日一练---输出棋盘

每日一练 输出棋盘

原创 bfc独立渲染区

Bfc是什么1.bfc是每个元素的独立渲染区2.浏览器的视图为一个3d视图，每一层元素都是犹如千层片一般一层层渲染到z轴上的3.除了position:absolute和position:fixed的元素的构建bfc的条件·根元素或其它包含它的元素·浮动元素 (元素的 float 不是 none)·绝对定位元素 (元素具有 position 为 absolut...

原创 微信小程序-绝对定位元素z-index:-1后定位元素的点击事件无法触发

原因分析：当元素的bfc层级设置为z-index:-1后，这个元素的层级就是当前浏览器的3d视图中z轴层级最低的元素，所以这个时候从视觉效果看起来是点击了绝对定位元素，但实际上点击事件是触发的html根元素下的bfc渲染区的元素解决方法：1.使用事件捕获机制，给被点击的空白区域的元素设置事件监听，将事件传递给绝对定位元素(不推荐)2.保持绝对定位元素的默认层级，将被覆盖的元素的层级...

原创 function对象的理解

function是function类的实例，声明function等同于创建一个function对象虽然function也是一个对象，但是为了区分function对象与其他的Object类型的对象，所以function对象不是一个Object类型的对象，而是属于object对象的父级对象案例var sum = new Function("a", "b", "return a + b;"...

原创 js原生-module的加载机制及原理

node引擎中的每个js文件都属于module类 node引擎中每个js文件都会被解析为Module对象加载到栈内存中 node引擎中所有框架，包括小程序，最终都会被编译为js文件 node引擎中所有js文件被编译后才逐一被创建为module对象并加载到栈内存中Module类的构成commonJS语法的实现原理（1）exports只是一个语法糖，exports的默认值为{}空...

原创 处理flex布局中多个模块横向显示，尾部行信息的元素数量不够造成的视图不对齐的转换算法

/*** 转换评价信息的imgs数据结构* @param data 需要的转换Imgs数据信息*/const getImgs = (data) => {data.forEach((item, index, arr) => {//判断当前img是否为img所对应的行的第一个imgif ((index + 1) % 3 !== 0) {item['margi...

原创 前端编程思想

局部组件建模思想完成组件的模板层静态模板构建 完成组件的数据层静态数据设计 根据业务需求和功能需求完成组件的业务功能构建滑动切换版tab页分段请求建模思想（1）完成tab导航组件的组件建模（2）完成tab子页面的页面组件的数据结构的雏形(如果没有demo参考可以在最后再分析构建)（3）完成tab子页面的页面组件中的所有局部组件的静态内容构建( 4 ) 完成tab子页面的页面...

原创 JS原生-es6之proxy的实现

/**代理实现类**/function ProxyCopy(target,handle){ /**浅拷贝工具方法**/ this.clone=function(myObj){ if(typeof(myObj) !== 'object' || myObj == null) return myObj; var newObj = new Object(...

原创 JS原生-对象的属性特征defineProperty

var obj= {};//defineProperty为设置对象的属性的属性特征 value设置熟悉名，enumerable设置该属性是否可以被枚举//未设置的枚举的属性不能被for in遍历和keys获取Object.defineProperty(obj, "a", { value : 1, enumerable:true });Object.defineProperty(obj, ...

原创 微信小程序新坑-编译错误

编译器的混淆代码选项，导致下拉的线上代码被篡改 小程序编译器编译时需要选最新的基础编译库 选项只选es6转es5和自动补全样式 混淆代码的选项会导致代码被编译两次，容易导致开发调试中开发文件被影响产生文件被篡改而无法编译通过大写的Page被编译后会自动变为page，所以导致编译一直无法通过解决方法1.开发阶段选择最新版本的源文件编译库，除了开启es6转es5和自动补全C...

原创 将git clone时错误的密码缓存清空的方法

将git clone时错误的密码缓存清空的方法https://blog.csdn.net/alceyping/article/details/80271170?tdsourcetag=s_pcqq_aiomsg注:如果系统为windows系统 用管理员权限的dos命令窗口执行linux命令，才能清空缓存，否则无权限清空...

原创 JS原生-原型污染 原型继承 原型覆盖性和排查原型链bug的技巧

//原型的继承性var b={};b.__proto__.name="qinyi";var t=function() {};console.log(b.name);console.log(new Object().name);console.log(new t().name);//原型链的原型污染//由于此时通过{}修改了{}的原型属性name的指针指向，导致Obje...

原创 微信小程序新坑-空白部分被解析为换行符

异常分析css解析器会默认认为空白部分需要换行，会默认地在解析时新增换行符所对应的代码，从而导致最终的模型出现空白解决方法标签不要有空白...

原创 微信小程序新坑-文字溢出连续英文或者英文溢出 会出现字符

异常分析腾讯的浏览器内核中的css解析器对英文不太友好，自带的坑解决方法确保溢出部分是中文，不要是连续字母或者多个不同字母的英文，中国产品以中国为主...

原创 微信小程序新坑-微信小程序限制重复请求后小程序依然发送请求的bug

异常分析理论上是限制了请求后，代码就不能往下继续执行可是微信系统的安全体系为一共请求两次，第一次为试探请求，第二次才是真实请求它的编译引擎解析到请求代码的时候，不管应用层有没有做限制编写，解析器都会默认发生一次试探性请求，目的是为了安全确保信息安全只会，解析器才根据是否已限制请求决定是否发送真实请求所以限制请求只是限制了真实请求，但是无法限制初次的试探请求...

原创 APP数据缓存建模思路

实现缓存的建模思路1.将需要缓存的数据缓存至APP的全局属性(小程序里叫全局属性，vue里叫Vuex，名称不一样而已) 确保这个数据在不刷新的情况下能一直存在，基于应用栈的缓存2.将基于应用栈的缓存的缓存信息缓存至storage 实现客户端缓存...

原创 JS对象编译原理和construct __proto__ prototype的理解

function a(){}var b=new a();匿名函数的实例化原理var b={};b.__proto__=a.prototype;a.call(b);1.引用类型的实例对象的原型是堆空间的声明函数2.引用类型的对象没有prototype属性，只有__proto__属性3.引用类型的对象的__proto__属性指向声明函数的prototype属性obj...

原创 微信小程序新坑 监听模式下调用函数并用setData更新模板层时，模板层不触发重新渲染

原因分析mvvm架构和Mini架构都是遵循数据层渲染模板层思想1.真实DOM是由虚拟DOM构建完成然后渲染输出的真实DOM。2.在mini架构和mvvm架构中，要触发页面对象的数据属性所对应的虚拟DOM或子对象的接收参数的重新渲染必须通过触发这个对象的es5属性监听器set属性3.通过set属性的监听函数调用虚拟DOM的构建函数才能完成模板层的重新渲染。由于微信小程序的...

原创 排错技巧和代码优化技巧

排查框架错误是基于编程语言的框架原理去排查 排查编程语言错误基于编程语言的语法和编程语言的编译机制去排查(因为JS编程语言的解析是由node引擎去解析编译的，所以需要具备编译原理知识，当语法规则符合编译规则却仍然无法编译通过就是编译器自身的问题，可能是缓存问题，也可能是别的问题，总之编译原理很重要)排查网络错误基于网络交互原理去排查4. 排查css错误和Html错误基于webkit内核知...

原创 微信小程序新坑 swiper监听被使用setData后会不停触发swiper的滑动事件

swiper对象在真机产生滑动事件一次滑动就无限地被触发的原因分析swiper切换的滑动原理swiper对象本身是通过h5触摸事件触发的swiper对象内部所封装的滑动事件处理函数，通过这个切换处理函数实现的swiper对象的子对象swiper-item所生成的模块的滑动切换效果swiper切换的真机滑动产生异常的罪魁祸首原生swiper对象会对内部的滑动动画函数的调用进行...

原创 proto和constructor和prototype的理解

var p=function() {};p.prototype.name="qinyi";//new p()的实现原理为创建了一个{}这个对象继承了函数对象p的所有属性和方法var temp=new p();//__proto__指针指向当前对象所对应的函数对象的prototype属性console.log(temp.__proto__);//constructor指向当前...

原创 bind call apply的实现原理

** * 模拟call call使用合并运算符对参数进行了合并，所以不需要传入数组形式的参数 * @param context 执行函数体的主体对象 * @param parameter 函数体执行时的所有参数 */Function.prototype.newCall = function(context, ...parameter) { //判断是否为非法类型的主体对象 ...

原创 小程序新坑 Component组件的引用类型的参数值不能和Page组件的原有参数保持一致

原因分析小程序属于Mini架构，不属于mvvm架构，所以它的自定义组件并没有进行缓存，由于自定义组件并未缓存，所以自定义组件从父组件接收的引用类型参数值被改变时，自定义组件的父组件的引用类型参数值不能实时更新解决方法使用组件对象的自定义事件采取事件传值，将参数值传递给父级对象 父级对象接收参数值后，与父级当前的引用类型的参数值做对比，如果已发生变化则更新，反之则不更新...

原创 apply实现数组降维

var arr = [ [0,1,2,3], [4,5,6,7], [8,9,0,1], [2,3,4,5]];console.log([].concat.apply([],arr));

原创 微信小程序新坑line-height无法居中内部文字

原因：line-height以父元素为基准进行居中，所以无法居中内部文字解决方法：font-size缩小文字 line-height向上调整，视觉上模拟居中效果

原创 模拟ES6的filter reduce map

/** * 模拟ES6的filter实现filter * @method fakeFilter * @param fn filter条件限定的回调函数 * @returns {Array} */Array.prototype.fakeFilter = function fakeFilter(fn) { if (typeof fn !== "function") { ...

原创 微信小程序新坑-去除button点击时的默认背景色

默认背景色为.button-hover样式渲染，只需覆盖这个背景色即可

原创 JSON数据格式

json不支持变量、函数或对象实例，它就是一种表示结构化数据的格式。JSON有两个方法1.stringify 用于把对象序列化成JSON2.parse 用于把JSON序列化为对象原文博客https://www.cnblogs.com/zoumiaomiao/p/4909539.html...