- 博客(69)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 webpack插件编写dumi实现js静态参数文档生成
项目是umijs搭建的，为了完善项目说明文档就引入dumi 负责组件开发及组件文档生成，但项目是js编程非ts，dumi解析props参数时只支持ts不只是js的。完善功能就配合Webpack编写一个插件解析js中的参数props。...
2022-03-24 20:50:59
1984
原创 codeceptjs前端UI自动化测试
最近做UI自动化测试，就选择了codeceptjs。其框架好处文档里都有，比如场景驱动——从用户的角度编写验收测试。使测试可读且易于遵循。Driver Agnostic — 测试可以通过WebDriver、Puppeteer、TestCafe、Protractor、Appium等帮助程序运行。所有这些代码都是相同的。初始化项目npm init -ynpm install -g allure-commandlinenpm i codeceptjs --save一路回车键或者自行定义.b
2021-06-07 11:35:17
1149
5
原创 提高生产率swagger接口文档映射生成前端（Typescript）接口方法
前面整理过swagger生成javascript的接口方法，最近再整理下ts的吧一、定义url地址和引入依赖const fs = require('fs')const path = require('path')const parse = require('swagger-parser')const beautify = require('js-beautify').js_beautify;const swaggerUrl = 'https://www.**.com/v2/api-docs?gr
2021-03-31 15:05:12
2994
1
原创 chainWebpack配置WebWorkers
WebWorker作为浏览器开启子线程的一种新方式，Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。一、UmiJS中配置使用WebWorkers在chainWebpack里面基于worker-plugin配置首先 npm 依赖npm install -D worker-pluginconfig.ts文件里配置chainWebpack中配置import WorkerPlugin from 'worker-plugin';export d
2021-02-20 12:01:53
3049
1
原创 vue中动态加入ECharts图表时，ECharts宽度自适应/不能100%撑开
首先上图吧， 关于vue动态加入echarts时，宽度不能100%的问题，首先上图 如图，echarts中的canvas的width才500，显然不对呀，右边还有那么大的一片空白，需要说明下交互步骤看看代码， 按钮触发click方法 显示弹窗或者动态加载组件 <span class="btn" @click="showecharts&
2020-06-14 17:54:41
25201
2
原创 react中对PureComponent的深度认识
谈react优化其中最重要的一个组件就是PureComponent，主要的特点就是当数据即使发生深层次的变化，PureComponent也不会更新而且影响到子组件。那PureComponent和Component的之间的联系在哪里，以下是对react框架代码的一些理解。一、都是从React.js中暴露出来, 删除多此次不相关代码import {Component, PureComponent} from './ReactBaseClasses';const React = { Childre
2020-05-10 23:16:34
924
原创 提高生产率swagger接口文档映射生成前端接口方法
前后端分离时，前端对接口都需要有接口文档，根据接口文档写接口方法，看文档还要去写接口方法基本都是粘贴复制，把这个机械的任务解除了我们可以根据swagger接口文档，前端来自动生成接口方法根据swagger.json文件来npm 生成接口方法接口信息都截去了大概数据结构如下我们主要需要用到的是path里的path: { "/api/****/Login": { "post": {...
2020-05-01 21:31:02
2323
原创 前端style的git提交验证
才记录了javascript的git提交验证，接下来是style的提交验资以less为列子先安装dev依赖npm install --save-dev stylelint stylelint-config-prettier stylelint-config-standard项目根目录下创建.stylelintrc 文件{ "extends": ["stylelint-config-...
2020-05-01 16:59:10
1376
2
原创 前端javascript的git提交验证
项目中代码风格或者代码规范的遵守，在自觉的情况下就是强制要求。从git提交验证开始做起。首选安装npm install --save-dev eslint babel-eslint pre-commitnpm install --save-dev lint-staged eslint-config-standard eslint-plugin-nodenpm install --save-...
2020-05-01 15:32:33
600
原创 vscode试调ts
一、新建工程如下二、安装依赖npm install ts-node --save-dnpm install typescript --save-d三、.vscode 配置文件launch.json配置{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microso...
2020-02-26 01:07:42
518
原创 移动端适配webpack配置px转rem或vh，vw
移动端适配常用百分比，rem，后来又多了一个vh，vw。当然在less，sass可以写计算规则来转换px，比较麻烦，打包一次搞定就好px转rem的配置安装依赖npm install px2rem-loader -D --save配置loadervar px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75...
2020-02-19 20:29:59
3148
原创 关于影子(shadow)DOM
经常写video，audio等html元素在带的控制条或者模块，但是这这些模块哪里来的用什么实现的发现步骤进入setttins, 在elements里勾选如此打开新世界的大门...
2019-12-12 22:41:16
2482
2
原创 前端DNS预读取
点开淘宝，F12看到淘宝head 元素里 有这么一个代码<link rel="dns-prefetch" href="//res.mmstat.com">dns-prefetch 字面理解就是 dns预取或者预解析，解析后存储在缓存里，一次dns查询一次的时间大概能在60-120ms，对于复杂的网页，分秒必争，也算时间长了。如此通过rel="dns-prefetch"可以将当...
2019-12-08 20:32:14
327
原创 webpack开发或打包多环境配置
项目开发流程一般流程可能有开发和生产，但是也会有测试和预发，这样四个环境下。npn run dev 或者npm run build 时就需要对应不同环境。如此增加一个环境参数env_config 分别在dev.env.js 和prod.env.jsvar merge = require('webpack-merge');var prodEnv = require('./prod.env'...
2019-11-25 21:24:55
1048
原创 wekpack多页面配置
首先配置多个页面的入口，找config目录index.js中module.exports = { build: { }, dev: { }, multiPage: ['index', 'index2', 'index3'], };webpack.base.conf.js 文件中entry 配置多个var config = require('../config');...
2019-07-06 22:11:10
409
原创 小程序使用taro时集成redux-saga
使用taro开发小程序时，初始化小程序taro init myApp选择redux组件。可以看到redux中， store.js里使用的是redux-thunk管理异步import { createStore, applyMiddleware, compose } from 'redux'import thunkMiddleware from 'redux-thunk'import ...
2019-06-04 00:21:37
1993
原创 webpack3升级到webpack4
webpack4出来有一段时间了，现在3升级到4运行npm i npm-check -gnpm-check -u选择要更新的依赖，loader之类都更新到最新npm i webpack-cli --save-devdev和prod 添加不同modeutils.js css 预编译处理 前缀于 loder配置， 生产打包使用MiniCssExtractPluginexpor...
2019-04-22 16:34:47
2897
原创 react使用redux时reducer的重用和去switch判断
通常在redux中写reducer时，根据action传递过来的type，进行判断，数据处理也是在reducer中。当然不用if 就用switch，大多数还用的switchexport default (state = initState, action) => { switch(action.type) { case LOGIN: retu...
2018-12-08 20:25:17
1998
原创 react中redux利用redux-persist数据持久化
前端数据需要存在本地，来避免多次请求，提高前端效率。可以选的有cookie，localstorage，localsession各中区别，主要的就是大小限制等比如登录信息，管理系统的权限，菜单列表等，还是选择存localstorage/localsession吧。在每次请求到数据后都去调用一次localstorage.set()感觉也挺麻烦的，最好的就是redux里有了数据就直接自动放入local...
2018-12-04 13:19:51
8394
原创 css3单位使用vh摆脱父级元素高度
在给元素设置高度时，一般使用px，但是当父类元素没有设置height时，子类设置height：*%，是没有高度的。main元素没有高度没设置，导致layout–1Ow-jP元素设置了高度为100%，也没有撑开，现有高度还是button元素的高度遇到这样的情况，只有从根元素开始html，body，root, main, layout--1Ow-jP { height： 100%}这样...
2018-11-27 17:31:58
1728
原创 vue-cli中 css3加前缀
看了在utils.js文件下添加修改//postcss: generateLoaders('postcss'),postcss:[require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari &amp;gt;= 6', 'ie &amp;gt; 8'] })]或者pac...
2018-11-27 16:57:12
3909
1
原创 记react中antd打包的坑体积太大和className命名
前端使用antd的时后打包体积太大， 如图1.6M还是挺大的，把antd所有的资源都加载进入了根据antd 官网的推荐，按需加载方式居于.babel配置这样再来看看打包分析的按需加载打包了button和layout 在src文件下也只引用了这个两个组件这样做很方便的，同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了， 这样就不对了entry: {...
2018-11-26 13:07:20
8089
原创 前端自动化部署基于jenkins和gitlab
一个项目的三个环节，开发环境，测试环境，生产环境，然后每次 npm 打包ftp去拖是不是很麻烦，只想一次提交git后不同环境就能够根据不同环境的对应的分支进行打包，代码发布。 jenkins和gitlab配合起来的确是特别爽 当然genkins需要先安装git插件，下载地址 http://updates.jenkins-ci.org/download/plugins/gitlab-plugi...
2018-09-11 14:22:02
3254
2
原创 nginx配置多个前端项目
最近一台服务器要配置多个前端项目，当然前后端分离就需要nginx来配置了。单个项目还好说，如下 修改nginx的nginx.conf配置文件#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error....
2018-09-06 15:40:23
27849
3
原创 小计最近踏的微信小程序的坑
最近做小程序，实在不想做。然后来吐槽下小程序的坑吧。也只做了这一个项目，有不对的地方请指正见谅。一、 tabbar app.json里配置tabbar是原生层的，所以要实现比价奇怪的tabbar只有自己用view写了，比如： 这样选中的按钮图标都超出了tabbar 的高度，只有的就自己定义一个组件吧&amp;lt;template name=&quot;tabbar&quot;&amp;gt;
2018-05-29 14:54:11
382
原创 跨界闭包之javascript，java，groovy
一提闭包，前端首先想到的肯定就是javascript的闭包，接着就是其特性，闭包里的变量常驻内存不会消失，外部函数可以访问内部函数的变量，似乎是摆脱了作用域的限制。那么就先说说前端js的闭包，最简单的一个例子 function closure1() { var tmp = 'hello world'; return function() { ...
2018-03-18 19:55:14
343
原创 h5开发之cordova/phonegap自定义组件调用android native代码
h5混合开发有时需要调用本地的代码，就是js和原生代码交互。当然rn的封装和调用都很方便，现在用下cordova封装自定义插件plugin，cordova和phonegap的关系自行百度吧，当然cordova的安装此处也省略。首先以 js 调用安卓的Toast为例，显示Toast提示，同时android studio中Log 一下。具体怎么做，下面然后我们来一件一件...
2018-01-23 20:09:39
614
原创 react-native，redux，redux-saga组合开发实现
简单的说搞react开发的痛点之一，单向数据流的传递，redux统一管理数据，redux-saga又处理管理了异步调用。要实现的内容如下，界面目录结构首先从请求接口入手，用axios封装请求接口，统一处理请求 axios.jsimport axios from 'axios'let defaultConfig = { timeout: 3000,}let ...
2017-12-24 23:11:15
4301
2
原创 添加自定义vue全局方法，同时给自定义的方法 传递component调用其方法
项目中会遇到一个组件/方法， 在多个地方被调用，比较方便的的方式之一，this.$custom(agruments) 这样就比较方便，不然用组件引入的办法调用就就比较麻烦，每可能都需要这样调用import coustom from './coustom'export default { components: { coustom }}<coustom :data...
2017-11-05 17:41:33
12989
1
原创 vue-cli的webpack配置，迁移适用到react开发配置webpack
最近搞vue，用的vue-cli，快速构建开发环境，当然核心还是集成的webpack。之前自己做react的webpack环境配置总觉得差强人意，于是就把vue-cli的迁移过来，感觉还是不错的。对应一般开发需要，下面需要修改的就在build和config目录下的几个文件中从webpack.base.conf.js 文件开始，无论生产环境还是开发环境都以这个为基础的，...
2017-10-26 22:44:45
1979
原创 vue-cli 打包找不到 css 资源或者图片资源问题
用vue-cli 开发，要打包了，放到tomcat 上发现css 或者图片加载不出来，控制台一看是资源路径不对资源是在assets 目录下的彻底的解决办法 utils.js 文件中 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, p...
2017-10-14 15:39:00
5023
2
原创 拾趣小记，input 限制输入数字
form 表单 要限制 input 只能输入数字，首先想到的是<input type="number"/>不过问题来了 , 如图，能输入字母e ， 而且用了 下面的正则也能输入console.log 输入看看 e 就是也是代表数字 次方。。。那还是老实的用<input type="text"/>...
2017-08-24 23:00:02
569
原创 react-navigation之TabNavigator, StackNavigator使用配合redux
我在react-navigation的组件StackNavigator 和TabNavigator组合使用在加上redux，出现如下问题there is no route defined for key ***must be one of这个类似的在react-navigation的github也有，StackNavigator里嵌套一个TabNavigator，navred...
2017-07-09 17:21:53
4952
原创 react-native结合react-navigation之TabNavigator
react-native开发需时肯定有tab的切换，或者页面的转调，当然用RN自身的Navigator也可以但是也不是那么方便react-navigation 就能满足很多大部分需求，如下图的三种切换方式，下面就说下TabNavigator 和StackNavigator的应用，才踏的一个坑，还是太年轻呀，横刀一撸！！！！主要的界面 用tab 切换即是TabNavigator， 切换如下...
2017-07-08 02:35:15
20947
3
原创 react-native，react-redux和redux配合开发
react-native 的数据传递是父类传递给子类，子类通过this.props.** 读取数据，这样会造成组件多重嵌套，于是用redux可以更好的解决了数据和界面View之间的关系， 当然用到的是react-redux,是对redux的一种封装。react基础的概念包括：1.action是纯声明式的数据结构，只提供事件的所有要素，不提供逻辑，同时尽量减少在 action 中传递的数据...
2017-05-31 22:14:38
6582
原创 关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题
写这个么个题目好像，有点晦涩。直接来张gif图就知道，主要是是当手指触摸到元素时，元素的初始位置变成了left:0, top:0; js 设置监听事件 都是 一样的套路 touch.addEventListener('touchstart', function(evtend) {}, false);touch.addEventListener('touchmove', fu...
2017-04-18 14:52:26
2405
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人