- 博客(24)
- 收藏
- 关注
RSS订阅原创 前端项目极致性能优化
背景领导：这个怎么一直在loading，打开这么长时间我：初次加载就是有些慢，你看这里有提示性文字领导：这体验太差了，想办法优化一下我：这项目太大了，近两百个页面的系统……后端同学：那淘宝，阿里云那页面不比咱们这个系统页面多?领导：(领导瞥了我一眼)我：好的，领导（嘴上笑嘻嘻心里MMP）以上内容为了节目效果，纯属虚构，本次优化完全是出于对技术的热爱以及工作的热忱下面我们对项目进行优化，先剧透一下结果，以基础的Vue Cli3的项目为例：优化项优化前优化后首屏加载时间30
2022-03-29 15:07:43
932
原创 前端简单请求&非简单请求
问题背景Vue项目里用axios调用一个公共开放的API服务（该服务已经设置Access-Control-Allow-Origin:*）问题表现在axios服务里面的代码（部分逻辑代码已省略）// request.js……axios.defaults.withCredentials = true;axios.defaults.crossDomain = true;axios.interceptors.request.use(config => { …… config.h
2021-10-12 15:10:57
1118
原创 微信公众号开发总结
本次微信公众号的开发是，依托AA公众号的一个配置入口，然后做一个BB的功能开发，其中涉及到跨项目的用户信息认证，支付，移动端的适配，https协议升级等问题跨域cookie认证背景：辅导服务号的前端域名：https://testfudao-wechat.AAA.com好分数服务号前端域名：https://hfs-wechat.AAA.com/test辅导后端的接口域名：https...
2019-03-01 19:00:09
850
1
原创 常用的正则表达式
正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/; v...
2018-11-27 11:19:28
200
原创 React部分总结
React是什么？React虽然抽离自一个具备完整框架的生态系统中，但它并不像Angular等是一个完整的框架，而仅仅是一个View层。React提供了模板语法及一些函数钩子用于基本的HTML渲染，将HTML与javascript合在一起成为「组件」，允许把它们自己的状态存在内存中，不过最后的全部输出只是HTML。所以，我们没办法仅使用React来创建一个功能完备的动态应用。在实际应用中有三...
2018-11-05 10:09:00
175
原创 React 组件生存周期
React组件有以下生存周期1、getDefaultProps 获取默认的props熟悉，最先执行，主要用于初始化props2、getInitialState 获取初始的state状态3、componentWillMount 新创建组件后即将被渲染4、render 组件渲染5、componentDidMount 组件完成渲染6、componentWillUpdate...
2018-10-31 16:11:45
145
原创 visual studio 基础配置
编辑器设置按下图打开编辑器配置：将下面的配置粘贴到配置文件中：// 适合笔记本的工作环境"editor.tabSize": 2,// 避免格式修改和逻辑代码混在一起，解决冲突时非常费事"editor.formatOnSave": false,// 按下Tab后输入空格而不是tab："editor.insertSpaces": true,// 失焦保存（可选）
2018-10-29 14:25:44
1139
原创 网络抓包工具Charles
Charles是Mac 下的截取网络封包的工具，在做 iOS 开发时，为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现网络封包的截取和分析。1. 安装Charles http://www.charlesproxy.com （破解补丁）http://note.sdo.com...
2018-10-26 14:08:57
201
原创 Git 介绍及常用命令
一.Git简介Git是一种非常流行的分布式版本控制系统。Git另一个比较好的地方在于绝大多数操作都可以在本地执行，而每个本地都可以从服务器获取一份完整的仓库代码，而且在没网的时候仍然可以修改和使用大部分命令，在方便的时候再跟服务器进行同步，这样可以更好的实现多人联合编程。Git安装：http://iissnan.com/progit/html/zh/ch1_4.html参考资料：廖雪峰Gi...
2018-10-24 14:13:58
138
原创 微信浏览器兼容问题
微信H5兼容问题总结1.CSS3对于低版本手机如(安卓4.3,IOS8以下)不兼容问题问题描述:以上手机处理动画的时候,动画不加载,若界面设置的在动画加载后出现,即给页面设置overflow:hidden样式使得页面加载为空白界面.解决办法:以上手机版本CSS3动画帧的处理上应格外小心:@-webkit-keyframes每一帧动画都需要添加-webkit-前缀.IOS8处理动画的时候因...
2018-10-22 14:17:35
2572
原创 vue双向绑定解读
vue通过使用数据劫持+发布订阅实现数据的双向绑定。首先，先要搞懂两个问题：什么是数据劫持(Object.defineProperty)。什么是发布/订阅模式。1、什么是数据劫持：举个例子，现在有个obj对象，在他身上有个name属性是’vue’，像这样： var obj = { name: ‘vue’ }，现在我们想通过监听obj.name的变化，当name属性发生变化时，我们可以...
2018-10-19 20:15:19
659
原创 Vuex在工程项目中的使用
本文旨在阐明在工程项目中如何使用Vuex(如何念？)。阅读本文前，请先熟悉Vuex的官方教程。1.Vuex组织方式工程应用中通过modules的方式来组织Vuex内的状态。一个module可能对应一个页面（例如考试详情页）或一个逻辑模块（如用户模块，包含所有有关用户信息的状态）。通过module的方式组织代码能够在一定程度上避免在多人开发情景中代码冲突的不悦和风险。在文件组织上的形式如下图所...
2018-10-19 10:03:11
2285
原创 webStroge
http cookiesHTTP cookies，我们通常称之为“cookie”，简单地说，cookie 就是浏览器储存在用户电脑上的一小段文本文件。cookie 是纯文本格式，不包含任何可执行的代码。一个 Web 页面或服务器告知浏览器按照一定规范来储存这些信息，并在随后的请求中将这些信息发送至服务器，Web 服务器就可以使用这些信息来识别不同的用户。Cookie主要用在以下三个方面:会...
2018-10-18 11:57:23
543
原创 前端优化方法参照
1.减少Http请求：1.梳理逻辑，避免单页面多接口调用，单页面调用超出5个，考虑优化；2.多页面公用数据，也避免重复请求（增加判断当已有该数据时不再发送接口请求，若无，则正常发起请求），利用数据缓存；2.接口异常预判及必要提示：接口返回数据，code值为0为接口联通正常且存在数据，2为登录异常，3为参数错误，4为后端服务报错，5为数据获取不到；所以仅有code值为0时，属于...
2018-10-10 14:31:13
192
原创 Vue实用方法与技巧探索
1. Vue对象的选项var vm = new Vue({// 数据 data: "声明需要响应式绑定的数据对象", props: "接收来自父组件的数据", propsData: "创建实例时手动传递props，方便测试props", computed: "计算属性", methods: "定义可以通过vm对象访
2018-10-09 10:36:41
936
原创 命名规范
本文罗列在代码实践中涉及命名时需要考虑的主要规范。Vue中更多命名相关的规范详情请参考《风格指南》。1. 组件的命名：1.1 组件名应该由多个单词组成，并采用PascalCase的命名方式。（规范索引）GoodBadNewsList.vueNews.vue1.2 子组件的名字里以父组件名作为前缀。（规范索引）GoodBadcomponents...
2018-09-29 14:38:26
178
原创 客户端代码调试
在开发过程中，我们不可能保证所写的页面代码很完美，所以遇到问题可能就会进行代码调试。下面为大家找了几篇文章，针对浏览器，编译器等对代码的调试方法，有不全面的地方也欢迎大家补充修改~1.chrome调试bug在我们公司的开发中，最常用的就是谷歌浏览器，ie什么的暂不考虑chrome浏览器调试参考：chrome浏览器-调试及插件下面是断点相关的调试方法：http://blog.csdn.ne...
2018-09-29 11:23:27
660
原创 Chrome 浏览器 - 调试及插件
下面总结一下一些chrome浏览器常用的调试方法和插件，这些方法能让开发的工作顺利并且高效相关参考：1.Chrome开发工具指南：http://wiki.jikexueyuan.com/project/chrome-devtools/2.Chrome开发者工具中文文档：http://www.css88.com/doc/chrome-devtools/一、先来认识一下这些按钮先来看这张图...
2018-09-28 14:58:49
4025
原创 初识 axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF安装使用 npm:$ npm install axio...
2018-09-26 10:39:28
128
原创 H5 换起 APP
背景： 在一些分享出去的场景，为了增加用户量和用户活跃度，产品会使用一些手段，将app内的内容分享至各种社交平台，最主要的是微信和qq两个社交平台。根据ios和Android不同场景下，灵活变换。方案： ios 与 android 都支持一种叫做 schema 协议的链接。这种协议的类似于我们熟悉的http协议，我们只要跟 APP 协商好协议头，APP 通过拦截到这个协议头...
2018-09-26 10:35:43
397
原创 vue-cli 的 EsLint 配置
以vue-cli脚手架初始化的项目为例(脚手架版本：v.2.6.x)1、首先需要下载eslint所需依赖：npm install babel-eslint eslint eslint-loader eslint-plugin-vue -D2、下载完毕后初始化eslint配置:执行 ./node_modules/eslint/.bin/eslint执行完毕后，会发现多了一个.eslint...
2018-09-26 10:35:21
7446
原创 Stylelint
中文翻译文档（稍晚于官方）https://cloud.tencent.com/developer/doc/1267官方：https://stylelint.io/stylelint是什么A mighty, modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in...
2018-09-26 10:35:12
3394
原创 GET 请求缓存问题
原文：https://www.jianshu.com/p/31ad2cef69d5 （非原创）缘起关于get请求，不同浏览器间产生不同的问题，想必很多前端开发人员都遇到过。常见的是ajax请求过一次以后，以后的相同 url 的 get 请求：case 1 有时返回304，有时返回200;case 2 有时无论后台数据是否变化始终返回304，有时却始终返回200；同一套代码在不同浏览器间...
2018-09-25 15:35:59
15477
原创 H5 兼容性问题
H5 兼容性问题聚焦问题Android会出现点击聚焦的情况，出现黄色的边框，通过对相应的元素设置css –webkit-tap-highlight-color: rgba(0,0,0,0)解决，另外一些高版本的系统也可能会出现有黄色边框的情况，这时候试着用outline：none来解决。Android position:fixed及input中文输入bug在android系统中，如果页面...
2018-09-21 19:13:22
1156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人