路了个飞的博客

原创 前端优化方向总结图示

原创 react diff算法简图

众所周知react-diff算法是优于传统的diff算法，而且传统算法时间复杂度为O(n^3)，react-diff算法复杂度仅为O(n)；传统diff：从顶层逐级递归；react-diff：根据上图，分为三个层面的对比，先从dom tree层面，对不懂...

翻译 4.9.4 instanceof运算符

instanceof运算符希望左操作数是一个对象，右操作数标识对象得类，如果左侧得对象是右侧类的实例，则表达式会返回true；否则返回false。第九章会讲到，JavaScript中对象的类是通过初始化它们的构造函数来定义的。这样的话，instanceof的左操作数应当是一个函数。比如var d = new Date(); //通过Date()构造函数来创建一个新对象d instan...

翻译 4.9.3 in运算符

in运算符希望它的左操作数是一个字符串或者可以转换为字符串，希望它的右操作数是一个对象。如果右侧的对象拥有一个名为左操作数值得属性名，那么表达式返回true，例如：var point = {x:1,y:1}"x" in point //=>true:对象有一个名为x得属性"z" in point //=>false：对象中不存在名为...

翻译 3.10.3作用域链

JavaScript是基于词法作用域的语言：通过阅读包含变量定义在内的数行源码就能知道变量的作用域。全局变量再程序中始终都是有定义的。局部变量在声明它的函数体内以及所嵌套的函数内始终是有定义的。如果将一个局部变量看作是自定义实现的对象的属性的话，那么可以换个角度来解读变量作用域。每一段JavaScript代码（全局代码或函数）都有一个与之关联的作用域链（scope chain）。这个作用域链是...

原创 JS数组的插入和删除所有方式

indexOf():与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置var arr = [12, 21, 'yy', 'conso'];arr.indexOf(12); // 元素10的索引为0slice：slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：var ar...

原创 react的生命周期函数

生命周期钩子函数：生命周期钩子函数应用于有状态组件中，有些只运行一次，有些需要运行多次创建组件时候需要执行的钩子函数（按照执行顺序）：constructor()-------->componentWillMount()-->|render()------------>|componentDidMount()1、constructor：不是react的方法，是es...

原创 关于 injectBabelPlugin is not a function

在学习ant design的自定义主题这一功能时候，官方给到创建config-overrides.js文件，并且写入如下代码：const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBab...

原创 小程序scroll-view左右滑动失效问题

先说一下需求：每一行商品数量超过三个的时候需要左右滑动，在小程序中明显需要使用的scroll-view组件，我们在scroll-view中中循环生成多个view标签，因为view都是块元素，自然是每一个ciew占一行的排列方式。这时候就要让view横向排列一行：1、在scroll-view上使用display:flex,flex-direction:row;没有预期效果2、在vie...

原创 微信小程序中清除定时器

在微信小程序的开发过程中，经常会遇到使用倒计时的情况，但是小程序的页面跳转经常会遇到跳转的下一个页面后，前一个页面的倒计时还在运行。这时候需要我们在关闭或者离开当前页面的时候清除掉当前的倒计时，但是传统的方式在小程序中无法使用，在小程序中我采用的是赋值然后清除的方法。传统的方式：var myVar = setInterval(function(){ myTimer() }, 1000...

原创 微信小程序config.js文件配置

const config = { //本地测试模式 isFile: false, //接口开发路径 file: {//配置本地的开发路径 api: { test: "../data/test.js", login: "../data/login.js", login_noPhone: "../data/login_noPhone.js", } }, ...

原创 电商小程序价格数字处理函数汇总

价格格式化，数字统一转化，10=>10.00function getPrice(num) { let _num=num; _num = parseFloat(num).toFixed(2); let _integer = _num.split('.')[0]; let _decimal = _num.split('.')[1]; _integer...

原创 微信小程序template模板传值、传方法

小程序入手初期，没有接触组件开发的时候，一般先上手的都是模板开发，也就是小程序文档中的template部分，它可以让我们模板中定义代码片段，然后在不同的地方调用。template比较麻烦的就是在调用的时候要分别导入wxml代码和wxss先说一下一下数据的导入：在页面js文件中定好数据Page({ data: { pageData:{ scrollHeight:null...

原创 javascript 对象深浅拷贝的解决方案

问题背景，小程序开发，后台传过来大量的json数据，对传输过来的值进行处理渲染页面，返现修改会导致源数据发生改变，处理思路：将请求的数据进行拷贝一份，页面渲染等实用拷贝后的数据，在拷贝后的数据上进行格式化等修改，不对源数据进行任何处理1、浅拷贝：数据深度只有一层，也只能拷贝一层：例如let obj={name:'zhang san',age:12}属性值为字符串、数字、布尔值等；进行拷贝的时候可以...

原创 小程序组件开发-商品数量加减box

商品列表和商品详情常常用到数量的加减，比如这个样子：传入一个最大值和最小值，在这个范围可以自由加减，上代码：wxml:<view class="count_box"> <view class="count_group"> <view class="count_btn" data-tar="minus" bind:tap="ta

原创 重构微信小程序单选（Radio)、多选(checkbox)组件

需求说明：组件实现单选、多选功能，在form中点击提交可以拿到值贴上代码：wxml:<view class="component {{theme}}"> <view class="radio_item {{item.disabled?'cur':''}}" wx:for="{{range}}" wx:key bind:tap="tapChose" data-num="

原创 javascript数组循环方法合集

arr.forEach();无返回数据；两个参数：回调函数，this指向（一般不使用该参数）arr.map();有返回新的数组，没有的话使用forEach;两个参数：回调函数，this指向（一般不使用该参数）arr.filter();有返回新的数组；过滤；需要使用return；如果回调函数返回为true则返回数组中包含对应的数组中的值；两个参数：回调函数，this指向（一般不使用该参数）ar...