tree和array之间相互转换

(一)前言 对于大部分网站需求,我们经常会遇到一种需求,将list转为tree结构,或者将tree转为list结构,或者我们在tree结构中查找对于的数据,返回,或者返回顶层到查找级别的list。 (二)将list转为tree 我们一般会在后台数据库设计时候,当我们设计省市县联动时候,一般会在数据...

2019-08-19 23:13:43

阅读数 12

评论数 0

TweenMax.js 专业动画插件

(一)前言 当我们要做网页动画时候,不管是css还是js控制,其实在复杂连续动画下,都很难保证连续和流畅性,那么,我们就需要一个能给出的简单的解决方案,正好,TweenMax.js 就能解决这件事 (二)TweenMax初探 ...

2019-08-10 02:41:23

阅读数 16

评论数 0

React 设计模式

(一)前言 这里提到的设计模式并不是编程通用的设计模式,如常说的单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式等。而是在设计 React 组件时的一些解决方案与技巧,包括以下几种: (1) 容器与展示组件 (2) 高阶组件 (3) render props (4) context 模式 (...

2019-08-09 04:01:34

阅读数 52

评论数 0

代码规范之使用eslint和prettier格式化项目代码

(一)前言 对于团队而言,不管谁都有自己的代码习惯,这时候如何统一团队习惯来,js当然是eslint,ts对应就是tslint。当然这时候也不可或缺可以将Prettier集成到项目中 *(二)安装Prettier npm install --global prettier 安装好后 1、打开we...

2019-08-07 02:02:55

阅读数 29

评论数 0

解决跨平台合作开发中,win换行符问题

(一)前言 其实大情况下,win除了开机慢,软件打开慢,而且卡顿,安装包时候可能会出现一些问题外,也没那么多坑, (二)页面性能分析网址 当我们做完一个页面,肯定要分析,加载渲染速度等一系列问题,那么我们会怎么来处理这些问题,谷歌提供一个在线网站,可以帮你分析一部分问题,链接地址如下 https...

2019-08-05 02:32:51

阅读数 15

评论数 0

CleanMyMac清理工具(4.3.0)已注册中文特别版

(一)前言 目前最好用的Mac清理工具 (二) 安装过程 下载 gitlab:https://github.com/naodair/liane/raw/master/CleanMyMac_X_4.3.0.zip 种子下载:https://masuit.com/download?path=/...

2019-08-05 02:07:42

阅读数 597

评论数 0

React生产模式下禁止React Developer Tools、Redux DevTools

(一) 前言 开发者工具,能方便开发人员在开发环境调试代码,但是如果在生产环境也打开,那么,无疑会让代码细节暴露,所以,我们应该在生产环境中将,react 和 redux的开发工具禁用。 (二) 禁用React Developer Tools 开发工具都会在window上挂载属性,react就是_...

2019-08-05 02:03:41

阅读数 34

评论数 0

CSS3新属性 蒙版 Mask属性, 剪切文本以及用CSS绘制表格

(一)前言 工作中遇到需要实现一个视觉交互师的移动框,内容区域显示的内容,需要随这圆,边缘逐渐淡化,差不多类似如下效果 我尝试过使用渐变,过滤,内阴影都没办法处理,知道后面发现了mask,才得以解决这个问题, 所以现在将基本属性整理下 (二)CSS mask语法 语法: -webkit-mask...

2019-08-04 02:55:59

阅读数 28

评论数 0

ping github 请求超时解决方案

前言 蛋疼的产品需要定制编辑器,然后我肯定是太懒 去github找了个开源插件。fork改改就导入项目,然后就坑自己了。去公司安装 github地址连不上 这种时候肯定惯例 ping 下。。然后懵逼了,全是请求超时(哭笑脸) 正文 直接改本机host。以windows 为例子。 现在...

2019-08-04 02:31:26

阅读数 7202

评论数 2

H5端禁止蒙层底部页面跟随手势滚动

(一) 前言 说来真是搞笑,之前很多交互都是依赖UI库的modal实现,之前也遇到过类似天猫商品列表页面那种下拉筛选,也解决过相关手势问题,但是,后面一个同事再次问起这个问题,回头去总结下,发现之前通过选取dom并为背景和内容分别处理touchmove事件,但是这仅仅是对于h5的一个解决方案,所以...

2019-06-25 01:15:39

阅读数 191

评论数 0

Webpack的devtool的source maps

(一)前言 我们在处理webpack打包优化时候,除开使用happypack和webpack-parallel-uglify-plugin加速babel编译构建,使用dll动态链接库,指纹缓存,页面切片,gzip压缩等优化,其实还可以设置devtool中的source maps进一步处理构建速度和...

2019-05-28 02:10:33

阅读数 29

评论数 0

Vue 在sass中的主题切换方案

(一) 前言 主题切换,是目前很多产品需要定制的功能,常见的比如需要给用户提供两套主题,日间和夜间模式,那么我们需要找出一种在实际项目中使用的方案 (二) 切换方案 已知道的主题切换方案有如下几种 DWZ富客户端 实现方式: 将不同主题的样式抽取出来。 生成多份不同的主题样式文件。 动态引入。...

2019-05-27 00:53:37

阅读数 203

评论数 0

如何在Vue中使用slot定义组件

(一)前言 在react中,可以将组件理解为上下层级,使用children在子层级作为嵌套渲染,但是vue提供方案为slot,并且相对于react,还提供插槽的扩展功能,主要分为三种,匿名插槽(类似与children),具名插槽,作用域插槽 (可以提供数据绑定)。 (二) 匿名插槽 类似与reac...

2019-04-16 00:51:31

阅读数 206

评论数 0

使用jison解决JS处理后台返回的Number数据精度丢失

(一)前言 在拿到请求返回的数据的时候,不用json自带的那个parse方法,而是通过自己定义了一个json转换方法,然后再response给前端,这样一来前端拿到的数据就是一个动过手脚的json数据。 这个方法的确可以实现前端拿到的数据不出现精度丢失问题,但是再浏览器中的Preview上查看数据...

2019-03-21 00:20:21

阅读数 288

评论数 0

面试高频(三:前端路由)

(一)前言 单页面应用(SinglePage Web Application,SPA),跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,路由基于pushState,replaceState(history)或者location.hash(hash) 多页面应用(MultiPage A...

2019-02-28 14:00:49

阅读数 208

评论数 0

React Native三端同构(二: webpack@4脚手架构建和项目代码规范)

(一)前言 一个完整的web开发手脚架,应该包含以下 babel-loader 图片 音视频 字体 样式处理 开发环境配置 生产多环境scripts配置,流程化前端生产构建 生产环境打包优化, 如构建速度,打包外链库,抽离公共模块,页面切片处理(代码内部), git commit 检查规范 和 ...

2019-02-26 16:08:58

阅读数 106

评论数 0

React Native三端同构(一: 基础方案)

(一) 前言 React Native 三端(Web、iOS、Android)同构是指在使用 React Native封装组件 的代码下,让其在浏览器中运行出和在 React Native 环境下一样的页面。 对于使用 React Native 开发的页面,如果又单独为 Web 平台重复写一份代码...

2019-02-25 18:25:05

阅读数 159

评论数 0

升级Babel@6 到 7

(一) 前言 新开了pc项目, 在安装babel已经到7,既然如此,就把老项目和新项目统一换到babel@7 (二) 升级 使用官方命令直接升级 # 不安装到本地而是直接运行命令,npm 的新功能 npx babel-upgrade --write # 或者常规方式 npm i babel-u...

2019-02-15 18:55:50

阅读数 1017

评论数 0

React.js实用小技巧总结(React.Children顶层API)

(一) 正常显示你的 html 代码 当我们后台返回的富文本编辑器string html需要显示在html上,那么我们就需要直接显示 <div className="content"...

2019-02-10 02:43:48

阅读数 53

评论数 0

npm包发布流程和如何看插件源码

(一) 注册npm账号 去官网注册 方式二:通过终端注册 $ npm adduser 查看npm当前使用的用户 $ npm whoami (二) 登陆 $ npm login // 这里需要将淘宝镜像换成原npm地址, 反正现在前端一般安装都是yarn $ npm set re...

2019-02-10 02:18:38

阅读数 325

评论数 0

提示
确定要删除当前文章?
取消 删除