- 博客(36)
- 收藏
- 关注
RSS订阅原创 TypeScript 基础入门
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。我们只会去关注值的外形。泛型是 Typescript 中使用最多的类型之一，它用来表示当前的数据类型，同时也能支持未来的数据类型，可以理解成一种动态的数据类型，类似于函数里面的形参，数据类型由外界的调用者决定，即类型参数化。TypeScript 函数类型中的=>用来表示函数的定义，其左侧是函数的参数类型，右侧是函数的返回值类型；...
2022-08-26 09:50:32
894
原创 Vue代码规范指南
Vue代码规范指南一、命名规范市面上常用的命名规范：camelCase（小驼峰式命名法 —— 首字母小写）PascalCase（大驼峰式命名法 —— 首字母大写）kebab-case（短横线连接式）Snake（下划线连接式）1.1 项目文件命名1.1.1 项目名全部采用小写方式， 以短横线分隔。例：vue-project-name。1.1.2 目录名参照项目命名规则，有复数结构时，要采用复数命名法。例：docs、assets、components、directives、mixins、ut
2021-09-28 22:29:20
2562
原创 页面添加水印
如何给页面添加水印在生活中，经常会在看到手机里面一些页面比如公司发的比较机密的文件、个人工资详情等会有水印背景。那么，这个在前端怎么实现？如何给页面添加相应水印？思路：通过canvas画出一个以水印文字为内容生成的图片，将图片设置为页面的背景图片，调整样式就OK了。是不是很简单呢？上代码// 水印相关配置项defaultOption: { id: "watermark-1", width:&nbs
2021-09-28 22:04:34
483
原创 浅谈HTTP 和 HTTPS的区别
HTTP 和 HTTPS 的区别无论是在校学习还是找工作的时候，老师和面试官都问过同学 HTTP 和 HTTPS 的区别。HTTP和HTTPS是计算机网络中很重要的知识点，面试的时候很容易被问他们的区别，可能每个人都会有自己理解；1.什么是HTTP？超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。它可以使浏览器更加高效。HTTP 协议是以明文方式发送信
2021-09-28 21:58:32
496
原创 前端性能优化总结
前端性能优化总结前端性能优化网站性能的好坏直接决定了用户体验的好坏，而互联网的本质还是为人服务，因此更好的用户体验是每个公司都在追求的目标。1.图片优化对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。如果图片为CSS图片，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。如果图片展示区域小于图片的真实
2021-09-28 21:45:15
215
原创 vue之学习使用Vuex
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用 vuexnpm install vuex --save然后 在src...
2020-04-16 00:18:43
147
原创 在微信小程序中使可视化图表ECharts
下载ec-canvas，把ec-canvas文件夹放在项目根目录下载地址在需要使用图表的页面index.json引用组件{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }}index.wxm里面写入组件<view class="container"> <...
2020-03-24 11:41:39
1469
2
原创 css文本溢出截断省略
在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去平常 ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？单行文本溢出省略核心 CSS 语句overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）white-space:...
2020-03-21 09:44:46
333
原创 前端安全知识
CSRF（Cross-site request forgery）跨站请求伪造CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。一个典型的CSRF攻击有着如下的流程：1.受害者...
2020-03-16 19:45:48
182
原创 浏览器缓存机制
浏览器缓存机制有两种，一种为强缓存，一种为协商缓存。对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存。强缓存方案Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Expri...
2020-03-16 19:24:41
121
原创 从输入URL到看到页面发生的全过程
从输入URL到看到页面发生的全过程浏览器的地址栏输入URL并按下回车浏览器查找当前URL是否存在缓存，并比较缓存是否过期浏览器首先查询当前URL是否有缓存,有的话,再查询是否过期,没过期则读缓存.过期了则访问web服务器.DNS解析URL对应的IP互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也...
2020-03-16 14:39:16
276
原创 Vue知识点整理
关于Vue很全的一篇知识点和面试总结，面试前可以学习一遍！1. 什么是MVVM及实现原理？MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知view...
2020-03-14 12:17:03
280
原创 原生js上传图片
html: <input accept="image/*" type="file" class="myFileUpload" (change)="fileupload($event)" />js: fileupload(e) { var imgFile = e.target.files[0]; //获取图片文件 if(imgFile.size/1...
2020-03-06 19:33:08
220
原创 vue cli3.x完整项目搭建和相关配置
vue的脚手架cli目前已经升级到了3.0,和之前的2.x有什么区别呢？今天就完整的走一遍vuecli 3.x项目搭建的流程。安装脚手架 npm install -g @vue/cli创建项目 vue create hello-world安装依赖 vue ui运行 npm run serve1.完整的项目就创建了，下面我们看下项目目录和一些基本的配置...
2020-03-03 12:05:31
347
原创 获取天气信息
在工作中，有时候需要获取城市的天气情况，在这里给大家推荐一个免费查询天气的apihttps://www.tianqiapi.com/api/?appid=78877574&appsecret=TY93I915&version=v6详情可以点击appid和appsecret可以注册账号拿到...
2020-03-03 09:45:14
314
原创 常用的js开发技巧
比较时间大小 const time1 = "2019-02-14 21:00:00"; const time2 = "2019-05-01 09:00:00"; const overtime = time1 > time2; // overtime => false 或者： compareDate(date1, date2) { var oDate1 ...
2020-02-28 14:32:25
180
原创 小程序页面分享
小程序的右上角有个分享按钮，我们可以对这个页面进行分享给好友。 onShareAppMessage: function (res) { return { title: '自定义转发标题', path: '/page/user?id=123'， imageUrl：'' } }当然，分享按钮也可以自定义放在任何地方。button ...
2020-02-27 19:02:33
636
原创 微信小程序请求封装
小程序官方有自己网络请求的api，但这种写法不好去维护,耦合度太高，也容易出现回调地狱。 wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }...
2020-02-27 13:47:37
256
原创 ionic3请求封装
引入对应依赖以及方法 import { Storage } from '@ionic/storage'; import { HttpClient ,HttpHeaders} from '@angular/common/http'; import { Injectable } from '@angular/core'; import { config } from '../api/con...
2020-02-26 19:24:45
180
原创 axios接口统一管理
接口的统一管理优点：1.更加模块化2.更方便多人开发，有效减少解决命名冲突3.处理接口域名有多个情况——————————————————————————————————————————————新建文件夹api，里面写一个article.js.表示这个js里面的接口全是关于文章这块的。引入写好的axios.js文件（已经写了请求的拦截，响应拦截以及错误处理这些）。import axio...
2020-02-22 14:32:28
460
原创 vue修改页面的title
在h5中，跳转页面会显示不同的页面标题。 routes: [ { path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } } ] router.beforeEach((to, from, next) ...
2020-02-21 21:37:41
521
原创 vue里面的data为什么是函数而不是对象
js中对象是引用类型，而引用类型存储的是指向值的指针，这样做了为了节省内存，引用类型的赋值是变量指针的赋值，不是真的拷贝，他们之间的值是会相互干扰的，而在开发vue项目中我们有多组件，如果组件的data是对象，那么，当我们修改其中的一个参数，那所有使用这个参数的页面都会跟着改变，这显然不是我们需要的。用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题；...
2020-02-21 21:14:34
767
原创 小程序获取位置信息
开发小程序过程中，很多情况下都需要获取地理位置 wx.getLocation({ type: "wgs84", success: res => { this.setData({ latitude: res.latitude, longitude: res.longitude }); ...
2020-02-21 20:11:01
611
原创 小程序获取用户微信步数
在我们开发小程序过程中，可能会用到用户的微信步数 wx.login({ success: login => { /** * 获取步数 */ wx.getWeRunData({ success(runRes) { this.getS...
2020-02-21 19:30:32
742
原创 vue返回页面不刷新，进入该页面刷新问题
vue返回页面不刷新，进入该页面刷新问题在vue项目中，会遇到页面返回不需要刷新，但是进入页面需要刷新的问题。vue提供了keep-alive这个属性可以解决改问题。在路由文件里面，找到该页面，然后加入 ： meta:{ keepAlive:true, isBack: false }, component: () => import('../pages/d...
2019-12-26 18:41:07
4049
原创 小程序自定义组件通信
小程序自定义组件小程序的自定义组件和页面一样由 json wxml wxss js 4个文件组成。首先要在组件的json文件里面加入"component": true，表示将这个文件设置为自定义组件。然后在全局app.json里面加入 "usingComponents": { "component-tag-name": "path/to/the/custom/component" ...
2019-12-25 18:14:17
144
原创 常见数组去重的方法
常见数组去重的方法es6的set方法 function unique(arr) { return Array.from(new Set(arr)) }新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。 function unique(arr) { var newArr = []; ...
2019-12-23 21:06:52
97
原创 获取url后面参数
获取url后面参数 function getParamByName(name:any, url:any) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(url); return match && decodeURIComponent(match[1].replace...
2019-12-23 20:22:12
184
原创 js常用的正则匹配
js常用的正则匹配正则匹配电话号码 funtion regMobile(mobile:string,msg:string){ if(!(/^1[345789]\d{9}$/.test(mobile))){ this.toast.create({message:msg,duration:1000}).present(); ...
2019-12-23 20:20:44
172
原创 关于时间日期方面的常见转换
关于时间日期方面的常见转换获取当前日期，例如为yyyy-mm-dd function getDate(){ let time = new Date(); let y = new Date().getFullYear(); let m = time.getMonth() + 1 < 10 ? '0' + (time.getMont...
2019-12-23 20:17:18
219
原创 微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标，得到iconfont.wxss文件。将iconfont.wxss文件放在style目录下。在页面里面添加代码 <i class="iconfont icon-jianshao" ></i>icon-jianshao就是对应图标的名字。...
2019-12-19 18:51:07
530
原创 vue中axios封装
在vue项目中，我们经常是使用axios去与后台进行数据交互，axios是基于http的promise库。安装axiosnpm install axios2.新建文件夹http,里面建立文件http.js,引入axiosimport axios from 'axios'可以根据process.env.NODE_ENV判断开发的环境，比如development，productio...
2019-12-18 19:43:00
178
原创 vant实现移动端的适配
最近公司做一个移动端的项目，需要做适配，框架本身是提供了vue-cli3.0结合lib-flexible和px2rem实现移动端适配的方案，这里记录下自己做适配的方法。
2019-12-16 18:48:34
5414
原创 vue移动端ui框架vant如何自定义引入阿里巴巴图标库
vue移动端ui框架vant如何自定义引入阿里巴巴图标库 **最近公司要用vant做h5的一个项目，页面中有很多地方使用了图标，框架虽然本身有提供部分icon，但是很多时候都无法满足我们得需要，这个时候我们就需要自定义引入icon，这里我是使用的阿里巴巴图标库。**首先，我们先打开阿里巴巴图标库地址，下载我们项目里的图标资源。下载完的目录如下：在项目src/assets路径下新建...
2019-12-16 12:44:06
3762
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人