web前端
文章平均质量分 69
kuke_kuke
想要成为一名优秀的、卓越的攻城狮
展开
-
es6中的map
详解map?创建map集合?Map集合支持的方法?传入数组来初始化Map集合?同名属性碰撞?遍历?转为数组?forEach?JS的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当做键,这给它的使用带来了很大的限制。为了解决这个问题,ES6提供了MAP数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。...原创 2020-04-22 15:47:19 · 288 阅读 · 0 评论 -
对es6中class的理解
ES6提供了更接近传统语言的写法,引入Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。// 定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.y + ')'; ...转载 2020-04-21 17:01:38 · 395 阅读 · 0 评论 -
对es中的iterable的理解
iterable为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型,具有iterable类型的集合可以通过for…of循环来遍历var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z'...原创 2020-04-21 09:11:55 · 426 阅读 · 0 评论 -
基于webpack搭建到抽离前端组件到发布在npm库
本篇分为三个部分,webpack搭建,前端组件抽离,在npm库上发布自己的包(基于vue)webpack搭建用npm init初始化,得到package.json,下载几个常见的webpack中的包,配置“dev”,“build”用于运行和打包项目。 运行项目的配置则存在于webpack.dev.config.js文件中 打包项目的配置存在于webpack.build.confi...原创 2018-04-20 11:34:28 · 3761 阅读 · 0 评论 -
如何在npm发布自己的包和上传文件到github
基于上一篇抽离完前端组件,现在想要把组件放在npm库里,并上传到自己的github上在npm库发布包你必须拥有npm库的账号 注册: https://www.npmjs.com/在抽离组件的文件夹中打开cmd,运行npm publish 注意:发布的包名为package.json中的name几种报错: a.当前的npm为淘宝镜像或其他,不是在npm,用nrm ls查看,nrm ...原创 2018-04-20 14:54:45 · 4707 阅读 · 0 评论 -
极验证的运用(nodejs部署)
在页面中加入一些验证码,避免外部恶意破坏。下面描述的是本人在工作过程中用nodejs对极验证部署的总结。 1、用nodejs部署极验证思路: 安装依赖:request、express、body-parser、supervisor、express-session。 利用 npm install gt3-sdk –save 安装SDK,然后引入:var Geetest = require(...原创 2018-05-03 14:33:50 · 1506 阅读 · 0 评论 -
两种时间选择器(移动端和PC端)
1、移动端时间选择器,以年月为例 此款时间选择器需要引入两个js文件,jquery.js和query.date.js下载地址在本文最后,代码如下:<script type="text/javascript" src="./jquery.min.js"></script><script type="text/javascript" src="jquery.d.原创 2018-05-03 11:15:47 · 15395 阅读 · 2 评论 -
浏览器的加载以及重绘和回流问题总结
浏览器的加载原则:按照自上而下的顺序加载,一般来说浏览器会依据html来创建DOM树,并通过CSS来共同生成Render树(去掉一些没用的东西)。而JS作为整体载入,需要等待DOM树创建完成,通常放在最后(window.onload)。详细一点的HTML加载流程如下: 1、输入网址浏览器向服务器发送请求获得html文件。 2、浏览器载入html代码,自上而下开始解析。 3、发现...原创 2018-08-26 10:57:58 · 974 阅读 · 0 评论 -
es6的一些新特性总结
1、let和constlet命令也用于声明对象,但是作用域为局部{ let a = 10; var b = 1;}在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let。const用于声明一个常量,设定后值不会在改变const PI = 3.1415;PI // 3.1415PI = 3;强行对其进行重新赋值会报错。2、iterable...原创 2018-10-23 19:28:00 · 792 阅读 · 0 评论 -
前端处理后端传来的文件流实现下载或预览
直接下载var url = this.GLOBAL_URL + "/api/GetFile?id=" + id; // 请求的url + idvar xhr = new XMLHttpRequest();xhr.open("GET", url, true)xhr.responseType = "blob";xhr.setRequestHeader("client_type", "DES...原创 2019-01-07 16:29:28 · 21265 阅读 · 6 评论 -
websocket心跳重连(避免断网、服务器重启等)
背景websocket链接,为实现断网、服务器重启等特殊情况。原理每隔一段时间向服务器发送一次数据 即(heartCheck.start()),服务器接收数据后返回一次信息,用来证明一切正常,否则就开始启动新的定时器来尝试重新连接(websocketReconnect()一定的时间尝试重连,如此重复)。代码var lockReconnect = false;//避免重复连接var ws...原创 2019-02-18 17:19:14 · 14601 阅读 · 3 评论 -
各种时间日期处理收集
当前日期:function currentTime() { var now = new Date(); var year = now.getFullYear(); // 年 var month = now.getMonth() + 1; // 月 var day = now.getDate(); // 日 var hh = now.getHours(); // 时 var m...原创 2019-08-27 13:41:46 · 311 阅读 · 0 评论 -
微信小程序有关事件绑定与冒泡捕获的描述
事件绑定的写法和组件属性一致,以key="value"的形式,其中:1、key以bind或者catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。2、value是一个字符串,需要在对应的页面Page构造器中定义同名的函数,否则触发事件时在控制台会有报错信息。bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段,如图:以下示例中,点击 in...原创 2019-10-09 09:25:25 · 236 阅读 · 1 评论 -
用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装:实现动态传入内容,实现取消,确认等回调函数。首先写一个基本的弹窗样式,如上图所示。在需要用到弹窗的地方中引入组件:import dialogBar from './dialog.vue'components:{ 'dialog-bar': dialogBar,},<dialog-bar></...原创 2018-04-10 17:52:48 · 106844 阅读 · 10 评论 -
nodejs的express实现上传文件到七牛
本文实现上传文件到七牛,动态切换上传空间,MD5设置key值,点击复制七牛返回的链接。 在七牛中注册开发者,获取key 七牛官网——管理控制台(偏右上角)——个人中心(获取秘钥)——对象存储,新建存储空间,获取存储空间名和对应的域名链接。 最开始,进入工程目录下,使用npm init初始化一个项目,其中包括以下几个文件: 文件夹public用于放置静态资源包括images、js等。rout...原创 2018-03-12 11:31:12 · 1815 阅读 · 0 评论 -
前端各种链接的收集(个人笔记)
一.a链接:语法示例如下:百度a 是英文 anchor的缩写, 锚的意思href: 是hyper(超) reference(引用) 的缩写 href的值是一般情况下是一个网络地址Target: 是目标的意思_blank: 是空白的窗口也就是新窗口_self或默认样式:是在本身窗口打开Title: 悬停文字, 用于补充解释说明给图片添加超链接的语原创 2017-07-17 13:13:10 · 516 阅读 · 0 评论 -
前端属性选择器的权重分析
以上内容为本人学习总结,如发现有误请多多指点,感激不尽!!!原创 2017-07-17 16:27:13 · 1310 阅读 · 0 评论 -
flybird飞翔的小鸟步骤分解
本文为个人初学阶段的练手小项目多有不足,如发现有错误还望指出,谢谢!!!原创 2017-07-07 16:24:02 · 3253 阅读 · 1 评论 -
web前端清除浮动详解
本文为个人学习笔记、总结,希望对前端初学者有所帮助,如发现有误还望指出,谢谢!!!原创 2017-07-18 10:39:02 · 3974 阅读 · 0 评论 -
github的建立
个人github的建立原创 2017-07-06 16:01:42 · 538 阅读 · 0 评论 -
js判断移动端、ios或android、不同浏览器
js判断移动端、ios或android、不同浏览器原创 2018-01-04 10:50:16 · 596 阅读 · 0 评论 -
实时监控文本框输入字数
需求:实时监控文本输入框的字数,并加以限制 1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如: div> textarea id="txt" maxlength="10">textarea> p>span id="txtNum">0span>/10p> div> var tx原创 2018-01-17 17:34:56 · 2969 阅读 · 0 评论 -
简单分析MVVM
最常见的客户端框架:MVC: Model-View-Controller MVP: Model-View-Presenter MVVM: Model-View-ViewModel 在MVC里面,Model是数据模型,是应用程序中用于处理应用程序数据逻辑的部分;View是视图或者说就是界面需要去展示的东西,Controller是用来控制Model的读取、存储,以及如何在View上展示数据,...原创 2018-02-27 09:22:03 · 497 阅读 · 0 评论 -
vuex store的运用
vuex用来管理vue的所有组件状态。 首先下载vuex,”vuex”:”^3.0.1”,运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate” 在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)import Vue from 'vue'import Vuex from 'vuex'impor...原创 2018-02-27 19:47:35 · 26689 阅读 · 4 评论 -
vue中引用高德地图API
调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下): 进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key 安装高德地图组件: vue-amap 引入组件:import AMap from 'vue-amap'Vue.use(AMap)初始化vue-amap,放入对应的key值,在插件中加入所需要的搜索和定...原创 2018-02-28 08:42:05 · 2139 阅读 · 0 评论 -
几种前端跨域总结
在做前端开发的一年多时间里,碰见各种前端跨域,今天在这里做一个简单的总结。 简单的理解一下为什么要跨域: 由于同源策略的限制,一个域下的文档或脚本不能去请求另一个域下的资源,跨域就是为了解决这样的问题。 同源是指:“协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 解决跨域的方案有: 1、通过jsonp跨域 2、document.dom...原创 2018-03-11 18:54:30 · 479 阅读 · 0 评论 -
sublime部分插件安装详解
个人下载安装sublime时的一些经验总结原创 2017-07-10 18:44:08 · 218 阅读 · 0 评论