js前端
文章平均质量分 51
清风笑~
display:none
展开
-
react从render开始与内部执行与实现(一)
学习笔记react17.0.2中render方法内部执行与实现原创 2023-04-14 16:25:49 · 566 阅读 · 0 评论 -
echarts地图导航飞线与层级穿透
echartsjs地图导航飞线与层级穿透原创 2022-04-25 12:56:21 · 2958 阅读 · 0 评论 -
webpack插件编写dumi实现js静态参数文档生成
项目是umijs搭建的,为了完善项目说明文档就引入dumi 负责组件开发及组件文档生成,但项目是js编程非ts,dumi解析props参数时只支持ts不只是js的。完善功能就配合Webpack编写一个插件解析js中的参数props。...原创 2022-03-24 20:50:59 · 2030 阅读 · 0 评论 -
pont生成前端接口层代码
Pont 利用接口元数据,可以高度定制化生成前端接口层代码原创 2022-02-17 14:23:50 · 1271 阅读 · 3 评论 -
基于umijs+lerna+qiankun的微前端实现
基于umijs+lerna+qiankun的微前端实现原创 2022-02-09 15:15:02 · 2338 阅读 · 2 评论 -
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 · 1232 阅读 · 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 · 3256 阅读 · 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 · 3249 阅读 · 1 评论 -
react中对PureComponent的深度认识
谈react优化其中最重要的一个组件就是PureComponent,主要的特点就是当数据即使发生深层次的变化,PureComponent也不会更新而且影响到子组件。那PureComponent和Component的之间的联系在哪里,以下是对react框架代码的一些理解。一、都是从React.js中暴露出来, 删除多此次不相关代码import {Component, PureComponent} from './ReactBaseClasses';const React = { Childre原创 2020-05-10 23:16:34 · 947 阅读 · 0 评论 -
提高生产率swagger接口文档映射生成前端接口方法
前后端分离时,前端对接口都需要有接口文档,根据接口文档写接口方法,看文档还要去写接口方法基本都是粘贴复制,把这个机械的任务解除了我们可以根据swagger接口文档,前端来自动生成接口方法根据swagger.json文件来npm 生成接口方法接口信息都截去了大概数据结构如下我们主要需要用到的是path里的path: { "/api/****/Login": { "post": {...原创 2020-05-01 21:31:02 · 2439 阅读 · 0 评论 -
前端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 · 1424 阅读 · 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 · 628 阅读 · 0 评论 -
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 · 541 阅读 · 0 评论 -
移动端适配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 · 3201 阅读 · 0 评论 -
前端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 · 351 阅读 · 0 评论 -
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 · 1092 阅读 · 0 评论 -
关于 IScroll5 和IScroll4 的一些用法
最近做滚动效果,用到IScroll,当然就直接使用IScroll5了,在移动端用的iscroll-lite,轻而小但是 没翻页无限加载的功能 主要是 用到了在IScroll 里面在嵌入 一个IScroll ,在IScroll4 里还是有决绝的办法,IScroll5就无能为力了(ps:应该有办法,只是本人没找到),最后只把两个IScroll 做为同一级的元素,实现的。iScrol...原创 2016-01-26 20:58:13 · 7577 阅读 · 0 评论 -
前端自动化部署基于jenkins和gitlab
一个项目的三个环节,开发环境,测试环境,生产环境,然后每次 npm 打包ftp去拖是不是很麻烦,只想一次提交git后不同环境就能够根据不同环境的对应的分支进行打包,代码发布。 jenkins和gitlab配合起来的确是特别爽 当然genkins需要先安装git插件,下载地址 http://updates.jenkins-ci.org/download/plugins/gitlab-plugi...原创 2018-09-11 14:22:02 · 3285 阅读 · 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 · 27993 阅读 · 3 评论 -
记react中antd打包的坑体积太大和className命名
前端使用antd的时后打包体积太大, 如图1.6M还是挺大的,把antd所有的资源都加载进入了根据antd 官网的推荐,按需加载方式居于.babel配置这样再来看看打包分析的按需加载打包了button和layout 在src文件下也只引用了这个两个组件这样做很方便的,同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了, 这样就不对了entry: {...原创 2018-11-26 13:07:20 · 8153 阅读 · 0 评论 -
react中redux利用redux-persist数据持久化
前端数据需要存在本地,来避免多次请求,提高前端效率。可以选的有cookie,localstorage,localsession各中区别,主要的就是大小限制等比如登录信息,管理系统的权限,菜单列表等,还是选择存localstorage/localsession吧。在每次请求到数据后都去调用一次localstorage.set()感觉也挺麻烦的,最好的就是redux里有了数据就直接自动放入local...原创 2018-12-04 13:19:51 · 8620 阅读 · 0 评论 -
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 · 4018 阅读 · 1 评论 -
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 · 1763 阅读 · 0 评论 -
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 · 2018 阅读 · 0 评论 -
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 · 2989 阅读 · 0 评论 -
小程序使用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 · 2025 阅读 · 0 评论 -
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 · 436 阅读 · 0 评论 -
小计最近踏的微信小程序的坑
最近做小程序,实在不想做。然后来吐槽下小程序的坑吧。也只做了这一个项目,有不对的地方请指正见谅。一、 tabbar app.json里配置tabbar是原生层的,所以要实现比价奇怪的tabbar只有自己用view写了,比如: 这样选中的按钮图标都超出了tabbar 的高度,只有的就自己定义一个组件吧&amp;lt;template name=&quot;tabbar&quot;&amp;gt;原创 2018-05-29 14:54:11 · 395 阅读 · 0 评论 -
跨界闭包之javascript,java,groovy
一提闭包,前端首先想到的肯定就是javascript的闭包,接着就是其特性,闭包里的变量常驻内存不会消失,外部函数可以访问内部函数的变量,似乎是摆脱了作用域的限制。那么就先说说前端js的闭包,最简单的一个例子 function closure1() { var tmp = 'hello world'; return function() { ...原创 2018-03-18 19:55:14 · 361 阅读 · 0 评论 -
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 · 4974 阅读 · 0 评论 -
react-native结合react-navigation之TabNavigator
react-native开发需时肯定有tab的切换,或者页面的转调,当然用RN自身的Navigator也可以但是也不是那么方便react-navigation 就能满足很多大部分需求,如下图的三种切换方式,下面就说下TabNavigator 和StackNavigator的应用,才踏的一个坑,还是太年轻呀,横刀一撸!!!!主要的界面 用tab 切换即是TabNavigator, 切换如下...原创 2017-07-08 02:35:15 · 20988 阅读 · 3 评论 -
gulp开发简单配置以及配合browserify应用
前端开发都需要对css ,js 打包压缩,less 编译,gulp简单的风格,可以完美的完成这项任务。首先需要安装gulpnpm install gulp -gnpm install gulp--save-dev安装gulp 需要的插件 如下npm install gulp-*** --save-devvar uglify = require('gulp-ug...原创 2017-01-28 23:22:26 · 1076 阅读 · 0 评论 -
cordova ,ionic 中cordova.js 提示deviceready has not fired after 5 seconds
我用的是ionic start 命令生成项目 ,用 cordova create 也是可以的。都会在index.html 有这么一行 <script type="text/javascript" src='cordova.js'></script> 但在浏览器运行时 提示deviceready has not fired after 5 seco...原创 2016-08-12 00:21:31 · 9338 阅读 · 0 评论 -
fileapi ajax上传图片显示
fileapi ajax formdata 上传图片显示原创 2016-06-20 16:02:34 · 1426 阅读 · 0 评论 -
关于html5--localStorage 储存json
关于html5--localStorage 储存json 以及json的 嵌套原创 2016-03-03 17:47:23 · 2496 阅读 · 0 评论 -
angular 中 cacheFactory 数据传递
angular 中 cacheFactory 数据传递原创 2015-12-21 14:52:39 · 5204 阅读 · 1 评论 -
js ajax 异步 同步 区别
ajax 同步异步的区别原创 2015-09-17 22:29:45 · 2854 阅读 · 3 评论 -
竖直滚动 jquery 文字 图片
jquery 竖直滚动 图片 文字 均可 html css原创 2015-09-26 21:39:54 · 706 阅读 · 0 评论 -
关于firefox的高度 html,body{ height:100%;}
关于 html,body{ height:100%;}的 作用原创 2015-09-05 14:10:17 · 2029 阅读 · 0 评论 -
document.createElement的返回值
document.createElement的返回值原创 2015-06-01 15:43:09 · 2021 阅读 · 0 评论