- 博客(195)
- 收藏
- 关注
RSS订阅原创 IndexedDB前端数据库简单使用
webSQL已于2010年11月18日被W3C废弃，目前仅在chrome和safari等部分webkit浏览器使用，所以不选择使用（他是关系型数据库）。Web Storage(Local Storage和Session Storage)使用字符串键值对存储数据，根据不同浏览器存储容量在2.5M-10M之间，对于大量结构化数据会不够用，所以W3C推出了IndexedDB，容量250M。Ind...
2020-05-15 17:11:34
1156
1
原创 搭建最新版本react-native项目框架，react-navigation 4.x，react-navigation-redux-helpers 4.x，react-redux 7.x版本
由于国内能找到的react-native框架版本都不是最新的，在我搭建的时候遇到了很多坑都无法适用，所以在这里把我搭建的代码给大家参考一下。首先列出各种工具的版本package.json文件："react": "16.9.0","react-native": "0.61.5","react-native-gesture-handler": "^1.5.1","react-nativ...
2019-12-11 16:31:37
2441
1
原创 webpack开发环境压缩代码：Gzip
生产环境使用后端nginx可以配置Gzip前端使用compression-webpack-plugin插件，config中配置productionGzip: true即可，打包后会产生js、js.gz、js.map、css、css.gz、css.map这三类后缀文件，map是sourcemap生成的对应文件，gz是压缩文件，js是正常文件。...
2019-12-11 15:47:06
815
原创 ReactNative使用websocket实时通信，ios息屏重连websocket，ws.onclose无法触发
ReactNative使用websocket实现实时聊天与web端使用websocket的写法一样，直接newWebSocket就可以。我在github上找到了两个有关RN的websocket组件包（react-native-websocket和react-native-reconnecting-websocket），但是发现都是简单封装了原始websocket的API，并没有什么特殊的地方，所...
2019-11-08 17:59:59
5760
原创 ReactNative开发IOS环境打包ipa过程
一、使用Mac电脑二、打开vscode，打开ReactNative项目代码，npminstall安装依赖三、启动项目，使项目能正常运行使用Xcode打开项目中ios文件下的axychzApp.xcodeproj，点击三角形按钮启动，然后等待1.解决运行报错[] nw_connection_get_connected_socket 18 Connection has no conn...
2019-10-24 09:59:05
1630
原创 ReactNative底部随键盘弹起，KeyboardAvoidingView组件padding和position实际效对比
因为业务需求需要底部工具条要随键盘一起弹起，所以我使用了RN自带的KeyboardAvoidingView组件。KeyboardAvoidingView组件的behavior属性有三个参数padding、position、height。height使用后好像没什么变化，所以我这里不做介绍了。主要展示一下padding、position的效果，安卓环境。padding如图：pad...
2019-10-22 16:03:07
4878
原创 react-native打apk安卓包遇到的坑，官网推荐方法报错，使用Android studio打包
官网推荐的方法不可用，报错缺少各种依赖。我使用androidstudio来打apk包，打出来的包也是可以正常使用没有问题的。1、生成keystore签名文件：在react-native项目中cd到项目根目录，然后执行以下命令：keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyal...
2019-10-15 09:33:52
617
原创 reactnative在文本框光标处插入文字的实现方法
效果展示：注意：如果使用了scroll滚动插件，需要使用keyboardShouldPersistTaps="always"方法防止键盘阻止按钮被触发，上篇文章有介绍：https://blog.csdn.net/ywl570717586/article/details/102505241render中的简略代码：render () { const listItems = t...
2019-10-14 09:59:02
1221
原创 react-native点击按钮不让键盘自动收起键盘的方法，解决点击按钮需要两次的问题
在使用滚轮插件时，如ScrollView、KeyboardAwareScrollView等待，会出现点击该页面的按钮需要点两次才能触发。使用keyboardShouldPersistTaps={true}方法即可。代码如下：<KeyboardAwareScrollView style={{flex: 1}}>改为<KeyboardAwareScrollVi...
2019-10-11 17:20:20
2354
原创 极其完美的react-native教程，属于手把手教会
https://juejin.im/post/5a9602745188257a5c609b2fhttp://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
2019-09-16 14:47:38
6663
原创 websocket实时聊天通信的前端实现
学习地址：https://www.cnblogs.com/ximenxiazi/p/9233626.html阮大神源地址：http://www.ruanyifeng.com/blog/2017/05/websocket.html补上本项目实现：
2019-09-16 14:46:20
2177
原创 一个完整的react-native框架代码demo，供大家下载学习
gitclone地址：https://github.com/ywltoread/react-navigation-redux.git大家装好react-native环境后，把这个demo下载好，使用yarn安装依赖（npm不可以正常安装）然后运行react-nativerun-android，等待大概10分钟，即可看到demo效果。...
2019-09-06 15:34:05
1832
原创 react-native安装依赖npm install报错解决办法，使用yarn
报错：[email protected]不能安装，未在git上发现[email protected]文件。浪费一下午时间踩坑，发现必须要安装yarn来安装依赖，npm在RN上是不能使用的。谨记！另外第一次运行react-native run-android时，会等待很长时间，这是正常的。...
2019-09-06 14:59:14
4654
原创 搭建react-native开发环境，真是一步一坑
一、安装nodejs环境我以前已经安装好了，没安装的同学安装一下很简单，进入cmd，用以下命令来验证版本，必须大于v10.0.0版本，我的是v10.16.3node -v二、安装python2环境（貌似不安装也可以运行，我选择不安装，最后也正常启动项目了）官网说版本必须为2.x（不支持3.x）三、安装Java的jdk环境版本必须为1.8（不支持1.9及以上版本），我使用了...
2019-09-03 17:24:09
1370
转载 配置nginx直接使用webpack生成的gz压缩文件，而不用nginx自己压缩
前言：vue cli3的性能优化里面，开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件；当用nginx做服务器时，nginx通过_gzip on;_配置可对每个请求先压缩再输出，这样造成虚拟机浪费了很多cpu；而且webpack打包时已经生成了压缩文件，完全没必要重新通过nginx再压缩一下。发现这个问题后，通过...
2019-08-22 11:44:05
9525
3
原创 vue-cli + webpack3搭建框架要点
vue-cli + webpack3全局安装vue脚手架npm install vue-cli -g从项目名初始化vue init webpack一切默认设置，选Runtime+Compiler，使用vue-router项目可npm run dev安装sass-loder、node-sass、element-ui、debounce防抖节流，区分--save-dev和-save安装...
2019-08-07 10:08:05
537
原创 一整套项目开发流程所用到的项目管理工具
项目看板Sprint：leangoo领歌https://www.leangoo.com/kanban/board/go/2949840代码管理gitlab、Gogs本地搭建：http://39.106.4.115:3000/SinTecHobug看板、项目管理工具redmine：http://39.106.6.139:3000/my/page构建工具Jenkins后...
2019-08-06 14:13:33
814
转载 利用正则截取匹配的字符串前后内容同
js截取两个字符串之间的内容： var str = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee js截取某个字符串前面的内容： var str = "aaabbbcccdddeeefff"; tr = str...
2019-07-23 14:16:44
4419
2
原创 前端统一身份认证单点登录涉及到的非简单请求、跨域、重定向、cookie设置问题
最近有一个需求，本项目需要做统一身份认证，通过单点登录方式实现。简单来说，就是A企业有很多系统，使用的是同一套认证方式，并且打算使用我们的系统，希望我们可以对接他们的认证方式，只要他们授权通过，我们就不需要再使用用户名密码登录。我们的项目前后端分离，前端使用vue、axios，前端服务端口80，后端使用Java SpingBoot，nginx，服务端口8080。操作的思路如下：在浏览器...
2019-06-21 17:41:11
4072
转载 代码审查的四种方式
没有人能保证他产出的代码一定是完美的。下文阐述了4种主流的代码审查(code review)类型，相信作为专业的开发人员，你应该都了解它们！每个专业的软件开发者都知道，代码审查是任何正式开发过程中的必要环节。但大多数开发者不知道的是，代码审查分为很多种类型。根据你项目和团队架构的不同，每一种代码审查类型都有它特有的优缺点。我将在本文列出几种代码的审查的类型，并详细解释它们各自是如何工作的。...
2019-05-07 10:33:16
21986
转载 前端日志和前端埋点
前端日志一般需要依托native层提供接口来实现日志本地化文件存储，不过目前也可以使用立即发送和web持久化的方式来给后端传送前端日志，但需要耗费一些网络资源。埋点为什么要埋点？现在的互联网公司越来越关注转化、新增、留存，而不是简单的统计PV、UV。而完整的数据采集是一切的前提。埋点包括在IOS、Android、H5、小程序等前端埋点，也包括后端业务埋点。这里仅仅讲讲这些年和产品经理、...
2019-05-06 17:18:18
13440
原创 vertx前端通信部分
目前主流前后端通信技术有websocket长连接，socketIO长连接或轮询，vertx轮询等。需要做实时聊天室的用长连接，需要做通知提醒的一般用轮询，可自由根据业务而定下面介绍一下vertx的例子1.下载 vertx-eventbus.js文件并引入到你项目中<script src="lib/vertx/sockjs.min.js"></script>...
2019-04-17 11:22:38
828
转载 常见浏览器兼容性问题与解决方案
常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类是精确按照...
2019-03-12 15:06:08
916
原创 函数防抖和函数节流
1，函数防抖例如：输入验证，在用户输入完成后再进行格式校验，节省CPU开销。使用setTimeout来实现。2，函数节流例如：下拉滚动条，用户下拉滚动条时，由于人眼睛是有延迟的，所以不用全速CPU去计算变化，一般300ms更新一次页面就可以。也是使用setTimeout来实现。...
2019-03-06 17:41:47
216
转载 Vue2.0虚拟dom实现原理，diff算法
参考一下两个链接，能充分理解其原理https://blog.csdn.net/u010692018/article/details/78799335/https://blog.csdn.net/M6i37JK/article/details/78140159
2019-03-06 17:28:32
387
转载 前端鉴权方式
四种常见的鉴权方式。1.HTTP Basic Authentication：用的比较少，平常FTP登录是用的这种方式吧？感觉可以用在内部网系统。2.session-cookie：这个在老的系统见得多，只适用于web系统。以前用java servlet写服务端时候，都会自动维护session，会在cookie写一个JSESSIONID的值。3.Token：现在主流都是用这个，适用于app...
2019-03-06 16:37:39
8837
原创 强类型与弱类型，静态类型和动态类型
首先强弱是相对的。强类型：每个变量和对象都必须声明类型，在编译时确定好类型了，执行时不能更改。偏向于不容忍隐式类型转换。譬如说haskell的int就不能变成double。弱类型：编译时不确定类型，执行时根据语义确定是哪种类型。通俗地说，弱类型偏向于容忍隐式转换，把不同类型的变量放在一起运算。静态类型：编译的时候就知道每一个变量的类型，因为类型错误而不能做的事情是语法错误。...
2019-02-15 14:27:29
1874
原创 前端处理静态资源文件连接、压缩、缓存、预编译高级语言的框架Asset Pipeline
Asset Pipeline 提供了用于连接、简化或压缩 JavaScript 和 CSS 静态资源文件的框架。有了 Asset Pipeline，我们还可以使用其他语言和预处理器，例如 CoffeeScript、Sass 和 ERB，编写这些静态资源文件。应用中的静态资源文件还可以自动与其他 gem 中的静态资源文件合并。例如，与 jquery-rails gem 中包含的 jquery.js ...
2018-12-05 16:27:11
705
原创 前端部署打包时的性能方面探索
主要分为五个方面：1.减少请求数量：合并js、css文件，目前用构建打包工具可以方便的实现。2.压缩和精简代码：压缩js、css和图片等文件（Gzip），减小资源大小，利于网络传输，目前用构建打包工具可以方便的实现。3.页面结构：css引入放在顶部，js文件引入放在底部，目前用构建打包工具可以方便的实现。4.CDN和缓存：把静态资源发布到云端，让用户迅速的请求到资源，利用版本管理控...
2018-12-05 16:26:56
641
1
转载 前端工程与性能优化，读后受益良多
转自：https://github.com/fouber/blog/blob/master/201405/01.md#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E6%A1%86%E6%9E%B6每个参与过开发企业级web应用的前端工程师或许都曾思考过前...
2018-11-29 18:31:51
458
转载 Expires和Cache-Control的理解，另加备注
转载自： https://blog.csdn.net/u013160932/article/details/50682576最近在学Nginx，学到有个地方式设置响应头信息，其中有两项是设置Expires和Cache-Control，来设置缓存时间，后来发现"并没有什么卵用"，于是就搜了下资料，把整个思路理顺了。由于是讲讲Expires和Cache-Control这两个响应头的作用，所...
2018-11-08 17:20:53
1934
转载 大公司里怎样开发和部署前端代码？
作者：张云龙链接：https://www.zhihu.com/question/20790576/answer/32602154来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前百度工程师，曾负责百度 前端集成解决方案 的核心设计与开发工作。我现在称这个领域为【前端工程】。没错，这是我最爱唠叨的问题域。这是一个非常有趣的 非主流前端领域，这个领域要探...
2018-11-08 14:54:38
374
转载 灰度发布：灰度很简单，发布很复杂
什么是灰度发布，其要点有哪些？ 最近跟几个聊的来的同行来了一次说聚就聚的晚餐，聊了一下最近的工作情况如何以及未来规划等等，酒足饭饱后我们聊了一个话题“灰度发布”。因为笔者所负责的产品还没有达到他们产品用户的量级上（最低的都在1千万+），也就谈不上灰度发布这一环节，所以只有听的份。虽然笔者暂时没有涉及到，但在工作中也听过关于灰度发布的一些信息，只不过这一次听他们几个交谈后更是增长了不少...
2018-11-08 13:16:29
6948
1
转载 Flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。#box{ display: flex; width: 500px; height: 300px; border: 10px soli...
2018-08-29 20:02:44
154
转载 css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性：一、flex-direction: （元素排列方向）※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列==顶对齐） ※ ...
2018-08-29 20:00:44
4880
转载 剖析Vue原理&实现双向绑定MVVM
本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助<本文所有相关代码均在git...
2018-08-28 21:02:21
222
转载 js中神奇的Object.defineProperty方法
这个方法可牛比了。这么说吧，vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。干货在后面，绝对惊喜。首先看一下官方的定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个已...
2018-08-28 20:34:16
2314
转载 webpack2.x基础属性讲解
webpack作为构建工具平时作为前端作为优化、模块编程、和分片打包的重要组成部分,大家可能并不陌生，如果没有时刻的去关注文档，那么大家可能不太清楚webpack已经默默然的升级到2.x了，对比1.x版本，webpack2的文档结构和代码提示都非常友善。webpack从1.x升到2版，并没有作为大的更改改动，而且内部的接口文档形式也与1基本无修改，那么对比webpack2版本 我们对webpa...
2018-08-28 14:53:04
358
原创 vue框架搭建（移动端-crm7slyun项目）
一.开发环境安装nodejs、webpack，按网上教程即可二.vue-cli初始化项目拉取git已建好的项目名，在本地使用vue-cli初始化项目，按网上教程即可三.css处理方式（scss）使用scss方式处理css，首先安装scss：执行 npm install node-sass sass-loader --save-dev在vue的style标签中加入lang="...
2018-08-20 21:04:31
3236
转载 ES6的Promise讲解，通俗易懂
作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？ 别猜了，直接打印出来看看吧，console.dir(Promise)，就这么简单...
2018-07-19 15:22:05
1219
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人