前端开发综合
Tiramisu_C
认定的事,如果不执着,就什么都没有。
展开
-
前端性能优化的几个重要规则
1.减少http请求1--图片地图2--css sprites3--内联图片4--合并脚本和样式表2.使用内容发布网络--CDN3.添加expires头4.压缩组件5.将样式放在顶部6.将脚本放在底部7.避免css表达式8.使用外部js和css9.减少cdn查找10.精简javascript11.避免重定向12.删除重复脚本13.配置原创 2017-01-20 23:46:51 · 648 阅读 · 0 评论 -
a标签拨打电话,打开qq,table消除表格间隙
拨打电话:a href="tel:020-8888888">a>打开qq:a class="o-btn" href="http://wpa.qq.com/msgrd?v=3&uin=您的qq&site=oicqzone.com&menu=yes">联系客服a>table消除表格间隙:table原创 2018-02-04 21:37:47 · 856 阅读 · 0 评论 -
webpack配置多页面项目
相信经常使用webpack的人已经深刻体验到自动化工具给我们带来的便利。我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目,聪明的前辈已经为我们配好了项目,可以让我们不必去配置就可以轻松使用。然而在真正的项目中,我们常常需要写一些简单的页面,并不基于vue这样比较大的框架,比如我明天上班就要做的这个公众号介绍,只有几个页面,但是我又希望能使用webpack来辅助我更好完成原创 2018-02-04 23:21:58 · 14137 阅读 · 3 评论 -
github中提交预览演示静态页面
有时候我们写的开源的项目,可能有一些打包出来的静态页面需要直观的展示给他人,github上我们除了可以上传源码之外,还可以上传我们的打包出来的静态页面,用户通过访问相应的链接就可以直接访问到这些页面。1--使用git checkout -b gh-pages在你本地切一个gh-pages的分支2-打包你的项目,将打包出来的页面(我这里打包出来的是dist目录,注意如果你的gitignore原创 2018-02-04 23:45:01 · 911 阅读 · 0 评论 -
JS通过url获取参数
//获取url中的参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var result = window.location.search.substr(1).match(reg); if (result != null)...原创 2018-03-15 20:31:57 · 522 阅读 · 0 评论 -
CSS实现垂直水平居中
前言面试中常常被问到,如何使用css来实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率还是比较高的,当然,在我们的生活中,也常常会有垂直水平居中的需求。css实现垂直水平居中的三种方案### 1.容器内元素display:inline/inline-block 这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中...原创 2018-06-11 16:45:48 · 1140 阅读 · 0 评论 -
【兼容性】ios上设置overflow: scroll不滚动bug
背景目前遇到这么一个问题:我有一个可以向下展开的下来菜单,菜单初始高度大于300px左右,没有超过手机屏幕高度,当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动,就是说内容的高度是动态的。描述此前我通过js动态获取屏幕高度,并设置为父元素的max-height。然后设置父元素overflow-y: scroll;起初,我大概的代码布局如下: <div className...原创 2018-10-13 16:35:20 · 22183 阅读 · 5 评论 -
【React】使用shouldComponentUpdate对组件性能进行优化
前言react中,我们通过this.setState()方法去改变自身组件的state,以及子组件的props,然后触发组件重新渲染。那么,当我们setState之后,新的state和旧的state值是一样,页面也会进行重新渲染,这是不必要的,也是损耗性能的。举例写一个demoimport React, { Component } from 'react';//子组件const...原创 2018-10-13 17:29:30 · 5796 阅读 · 1 评论 -
【微信小程序】公共方法实现实时捕捉input输入
项目中,一个表单中经常有好几个input,但是微信小程序并不像vue那样实现双向绑定,所以我们要自己去实现当用户输入的时候,实时获取用户输入的值。方法比较简单,就两个步骤。1.wxml <input data-name='form.base.name' bindinput="inputChange" name="text" value="{{ form.base.name }}...原创 2018-10-09 10:40:37 · 2836 阅读 · 0 评论 -
Nuxt.js关闭ESLint代码检查
使用Nuxt构建的项目,默认是开启了ESLint代码检查,我们写的代码格式一点点不符合规范,如空格太多等问题的时候,npm run dev就会报err不能正常运行,这对于新手来说是非常头痛的。当然,我们可以关掉ESLint,只需要在nuxt.config.js中注释掉以下:build: {/*** Run ESLint on save*/// extend原创 2017-12-29 11:31:37 · 10014 阅读 · 0 评论 -
解决设置了body宽高,但设置背景颜色仍然会铺满问题
近期开发遇到一个问题,命名给body设置了宽高,然后给body设置背景,背景仍然会铺满整个屏幕。以下是我的代码: body{ width: 200px; height:200px; margin: 0 auto; background: green;原创 2017-06-17 11:08:41 · 8724 阅读 · 1 评论 -
css实现鼠标上移图标旋转效果
鼠标上移图标旋转效果在企业的项目中经常会使用到,特别是顶部导航栏,比如:接下来就是要使用css实现鼠标上移图标旋转效果。 div,img,body{ margin: 0; padding: 0; } .box{ heigh原创 2017-06-17 11:57:52 · 10716 阅读 · 0 评论 -
微信小程序点击控件修改样式
现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它。第一步:在wxss中定义被点击和未被点击的样式,如下:.service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002原创 2017-06-30 18:23:45 · 52522 阅读 · 10 评论 -
解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
近期项目中也使用到了Echarts来画图表,也是两个tab切换页面中都存在图表,页面加载完成后都对所有图表进行了初始化和绘制,然而在tab切换中出现了如下动图中的问题:图中可以看到,第一个tab显示是很正常的,但是第二个tab中内容显示不完整。我的解决方式如下:1--在tab导航中加入radio单选按钮并隐藏,当第二个tab被选中的时候,再初始化图表数据原创 2017-08-10 11:10:08 · 21489 阅读 · 28 评论 -
JS正则表达式验证是否为11位有效手机号码
最近在做注册登陆页面,都要涉及到验证11位有效手机号码,这里贴出代码,希望能帮到有这个开发需求的朋友。 function isPoneAvailable($poneInput) { var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; if (!myreg.test($poneInput.val())) {原创 2017-06-30 16:40:11 · 216291 阅读 · 8 评论 -
angular的http请求本地文件出现跨域提醒
用angular测试请求本地的json数据,请求出错,提示跨域,我的代码如下: angular使用http请求数据 angular使用http请求数据 请求结果:{{resultData}} var module=angular.module("app",[]); module.controller("testCtrl",funct原创 2017-08-31 18:00:42 · 2697 阅读 · 0 评论 -
解决git pull/push每次都需要输入密码问题
如果我们git clone的下载代码的时候是连接的https://而不是git@git (ssh)的形式,当我们操作git pull/push到远程的时候,总是提示我们输入账号和密码才能操作成功,频繁的输入账号和密码会很麻烦。解决办法:git bash进入你的项目目录,输入:git config --global credential.helper store原创 2017-09-01 14:28:28 · 88674 阅读 · 14 评论 -
MySql下载、配置、安装、启动
1.下载进入mysql官网进行下载,选择适合你的操作系统,我选择的如下:点击download你会进入如下页面,以上两个按钮分别是登录和注册,因为我们一般使用不到收费的功能,所以选择底下的No thanks, just start my download.点击下载即可。下载完成之后解压,放在你目录下,此目录将作为你的安装目录,我的是:D:\software\mys原创 2017-09-20 17:13:04 · 642 阅读 · 1 评论 -
mysql报错Access denied for user 'ODBC'@'localhost' (using password: N O)解决
在my.ini文件中的 [mysqld] 添加 skip-grant-tables这一句。然后net stop mysql停止mysql;然后net start mysql重启即可。原创 2017-09-20 17:58:14 · 2739 阅读 · 1 评论 -
【Vue】vue父子组件通信
1. 父组件向子组件传递父组件代码<template> <div id="app"> <h1>This is Parent component</h1> <Child :parent-word='msg'></Child> </div></tem原创 2018-11-23 11:56:07 · 555 阅读 · 1 评论