⭐️ javascript
文章平均质量分 56
javascript
丶乘风破浪丶
前端
展开
-
js 复制图片到微信
在Web应用中,剪切板API可用于实现剪切、复制、粘贴的功能。点击图片下的复制二维码实现复制图片功能,方便用户粘贴到微信等。1、基于浏览器Navigator.clipboardAPI实现。接口添加了只读属性clipboard。,该属性返回一个可以读写剪切板内容的。......原创 2022-07-28 16:31:25 · 813 阅读 · 0 评论 -
js操作DOM的方法总结整理
一、什么是DOM?DOM(Document Object Model)文档对象模型。DOM为HTML提供了结构化表示方法,定义了访问和处理文档结构的方法规范。HTML可以理解为是由DOM节点构成的集合,主要由元素节点、文本节点、属性节点三部分构成。二、js操作DOM的方法js操作dom主要分对元素节点、文本节点、属性节点的增删改查:判断元素节点类型新增节点:var newNode=document.createElement("div"); //创建一个元素节点var textNode=.原创 2018-09-04 14:26:17 · 2877 阅读 · 0 评论 -
js 生成器函数实际应用实例
js 生成器函数实际应用实例原创 2022-04-19 10:50:38 · 287 阅读 · 0 评论 -
js 文件上传 图片上传 传输速度计算
js 文件上传 图片上传 传输速度计算原创 2022-04-06 19:00:00 · 1121 阅读 · 0 评论 -
接口返回流、前端实现下载
接口返回流、前端实现下载原创 2019-02-18 10:42:16 · 259 阅读 · 0 评论 -
常用正则整理
常用正则原创 2022-03-31 15:17:38 · 110 阅读 · 0 评论 -
js 设计模式【白话文】 (策略模式,发布-订阅模式,装饰器模式,责任链模式)
手把手教你项目中使用:JavaScript设计模式想必很多程序员谈到设计模式,肯定是一头雾水,我才没心思管你什么设计模式不设计模式呢!只要能够实现需要就行,就是一顿搞。其实在编码中合理按照一定设计模式去设计项目代码结构,是能够很好的提高代码的可维护行/可读性,和减少代码的数量。这样性能不就提示了么,自己编码的时候不香,不舒服么?今天将通过4个实际案例学习前端的设计模式。下面是常见的四种设计模式策略模式 发布-订阅模式 装饰器模式 责任链模式策略模式假设我们有一个要求,当用户试原创 2021-03-12 10:50:09 · 243 阅读 · 0 评论 -
TS-泛型
TS-泛型原创 2022-03-22 14:45:00 · 467 阅读 · 0 评论 -
输入框限制字节数 区分中英文
// 规则名称验证规则 不包含特殊字符 let checkGroupName= (rule, value, callback) => { let reg = /^[0-9A-Za-z\u4e00-\u9fa5\(\)\(\)]+$/; if (value!=='' && !reg.test(value)) { callback(new Error("请填写正确格式的规则名称")); }...原创 2022-03-01 06:00:00 · 396 阅读 · 0 评论 -
js call 回顾分析 apply用法同理
A.call(B,x,y) 忽略其他解释 简单理解为1、改变函数A的this指向,使之指向B。2、把A函数放到B中运行,x和y是A函数的参数。//父类 Person function Person() { this.sayName = function() { return this.name; } } //子类 Chinese function Chinese(name) { ...原创 2022-01-17 10:48:15 · 449 阅读 · 0 评论 -
document.compatMode属性
document.compatMode属性document.compatMode用来判断当前浏览器采用的渲染方式。官方解释:BackCompat:标准兼容模式关闭。CSS1Compat:标准兼容模式开启。当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;当document转载 2018-01-15 18:40:58 · 99 阅读 · 0 评论 -
js实现滚动条滚动到页面底部继续加载
原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/;如果这个判断为true则表示滚动条滚动到了底部。实例?转载 2018-01-15 18:42:41 · 2779 阅读 · 0 评论 -
ts基础类型 type 类型别名
与js不同的是 ts的变量都可以类型注解 : 后面注明变量类型let isDone: boolean = false;与js的类型相比多出的 比如枚举(个人理解 将对象数据化了 类似数组通过下角标得到值) enum Color {Red, Green, Blue} let c: Color = Color[0]; console.log(c)//Red //也可以手动添加下角标 enum Color {Red = 1, Green,...转载 2021-07-22 17:36:04 · 3993 阅读 · 0 评论 -
ES6中的Reflect
Reflect是ES6提供的新对象 将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty,Proxy对象上所有新增函等),放到Reflect对象上。 让Object操作都变成函数行为,将对象的操作符操作封装为函数以让用户明显感知操作的成败。修改某些Object方法的返回结果,让其变得更合理。 如: let obj = { name:'zhangsan'}obj.name = 'lisi';console.log(obj)//{n转载 2021-07-16 11:29:42 · 2115 阅读 · 0 评论 -
js中,双问号??和双竖杠||的区别
它们的共同特点是语法一样,前面是值,后面也是值,中间是符号;都是根据前面的值来决定到底取前面还是取后面。双竖杠|| :前面的值转为布尔值为 false 时,就取后面,否则取前面如undefined、null、false、空字符串和数值 0双问号:前面的值为null、undefined,则取后面的值,否则都取前面的值。例:console.log(1 || "xx") //1console.log(0 || "xx") //xxconsole.log(.原创 2021-07-12 16:15:10 · 450 阅读 · 0 评论 -
简单抽奖代码
function draw(count) { //模拟 setTimeout(()=>{ console.log(`还剩余${count}次机会!`); }, 1000); } function *generatorDraw(count) { // 生成generator函数 while(count > 0) { count --;原创 2021-06-01 11:25:15 · 3125 阅读 · 0 评论 -
tsLint配置
{ "rules": { // TS特性 "member-access": true, // 设置成员对象的访问权限(public,private,protect) "member-ordering": [// 设置修饰符顺序 true, { "order": [ "public-static-field", .原创 2021-04-22 11:01:39 · 602 阅读 · 0 评论 -
js实现数组扁平化
数组扁平化概念:数组扁平化是指将一个多维数组变为一维数组reduce遍历数组每一项,若值为数组则递归遍历,否则concat。function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten(item) : item); }, []);}[1, [2, 3, [4, 5]]] ------>原创 2021-04-06 09:35:33 · 80 阅读 · 0 评论 -
es6 数组扁平化
数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。[1, 2, [3, 4]].flat()// [1, 2, 3, 4]12上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。[1, 2, [3, [4, 5]原创 2021-03-30 16:55:13 · 3101 阅读 · 0 评论 -
js 深拷贝和浅拷贝回顾 [ 初学都能懂的白话文]
js 深拷贝和浅拷贝回顾浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。 深拷贝和浅拷原创 2021-03-25 09:50:02 · 1401 阅读 · 5 评论 -
单例模式
《parctical common lisp》的作者曾说,如果你需要一种模式,那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案。不管是弱类型或强类型,静态或动态语言,命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些。术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬。 换到程序中, 静态语言里可能需要花很多功夫来实现装饰者,而 js 由于能随时往对象上面扔方转载 2021-03-22 19:43:05 · 138 阅读 · 0 评论 -
设计模式 - 建造者模式
1 什么是建造者模式?建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示。建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不同意义的对象,通常使用者并不需要知道建造的细节,通常使用链式调用来进行建造过程,最后调用build方法来生成最终对象。同样作为创建型的设计模式,需要注意和工厂模式的区别,工厂虽然也是创建对象,但怎样创建无所谓,工厂模式关注的是创建的结果;而建造者模式不仅得到了结果,同时也参与了创建的具体过程,适合用来创原创 2021-03-22 13:57:41 · 115 阅读 · 0 评论 -
动态表单构建器——建造者模式
在编写一个弹出框时,它可以包含确定按钮,取消按钮,标题栏,关闭按钮,最小化按钮,内容,最大化按钮等内容,但这些内容在不同的需求下又不是必须存在的,不同的需求需要对这些组件自由组合,显然每次组合都要重复编码。将这些不同的,容易变动的组件分离开来,通过一个Builder类一步一步的构造复杂的对象,这就是建造者模式。下面的例子是通过设计一个表单构造器来演示建造者模式。现在流行的Hybrid App的开发网络请求基本都是通过Ajax实现,设想一下如果应用要求根据不同的用户角色来提交不同的表单,...原创 2021-03-22 13:46:01 · 199 阅读 · 0 评论 -
vue中install 和 vue.use()
install 方法Vue.js 的插件应该暴露一个 install 方法。第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象用途 开发插件 以及 全局注册组件等MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-d原创 2019-11-29 19:13:00 · 462 阅读 · 0 评论 -
原生js判断滚动条滚动方向
js判断滚动条滚动方向原创 2017-11-17 10:12:30 · 945 阅读 · 0 评论 -
Class的继承
一、跳转历史URL不记录需求的由来上上篇文章“JS获取上一访问页面URL地址document.referrer实践”提到左上角的返回链接按钮,有了document.referrer为空时候的返回首页处理看上去一切都完美了,但是,实际的交互场景总是错综复杂千变万化的,于是,就有了下面这个尴尬的体验问题。比方说我们点击首页的“分类”进入分类页,如下图:然后分类页头部有个原创 2017-11-17 14:38:12 · 5467 阅读 · 0 评论 -
Object.prototype.toString.call() 、instanceof 以及 Array.isArray()三种方法判别数组的优劣和区别
使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同。可以看看下边的图:从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对原创 2017-11-14 10:14:08 · 559 阅读 · 0 评论 -
Vue.js插件axios——封装一个可以灵活使用的ajax
Vue.js插件axios——封装一个可以灵活使用的ajax原创 2017-11-29 11:37:43 · 648 阅读 · 0 评论 -
Vue 路由拦截
axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用功能特性在浏览器中发送XMLHttpRequests请求在 node.js 中发送http请求支持PromiseAPI拦截请求和响应转换请求和响应数据自动转换 JSON 数据客户端支持保护安全免受XSRF攻击浏览器支持安装使用 bo原创 2017-11-15 17:00:39 · 325 阅读 · 0 评论 -
vue-router动态路由注意事项
vue-router动态路由注意事项原创 2017-11-21 10:35:57 · 574 阅读 · 0 评论 -
vue动态路由匹配实例
vue动态路由匹配实例原创 2017-11-21 10:15:37 · 4131 阅读 · 0 评论 -
export ,export default 和 import 区别 以及用法
首先要知道export,import ,export default是什么ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几原创 2017-11-17 09:28:04 · 2073 阅读 · 0 评论 -
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法转载 2017-12-04 10:45:45 · 146 阅读 · 0 评论 -
require 使用jq插件
require 使用jq插件原创 2017-12-04 10:55:56 · 498 阅读 · 0 评论 -
reactive-tools安装
网页根据返回总秒数到计时原创 2017-12-21 10:18:37 · 246 阅读 · 0 评论 -
dotdotdot.js 中文特殊字符
dotdotdot.js 中文特殊字符在使用jquery.dotdotdot.min.js插件时,你会发现如果文本是中文的特殊字符,此时就无法解析了,因为需要配置插件wap属性,如下代码:Document#box{width: 80px;height: 50px;border: 1px solid blue原创 2017-11-27 10:29:03 · 998 阅读 · 0 评论 -
React Native初探
很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情。PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果。事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身转载 2018-01-11 20:14:08 · 268 阅读 · 0 评论 -
React 构建单页应用方法与实例
首先在学习这门框架前,你需要对以下知识有所了解:原生JS基础CSS基础npm包管理基础webpack构建项目基础ES6规范以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具,已原创 2018-01-24 00:14:44 · 1557 阅读 · 1 评论 -
IE9下JQuery发送ajax存在跨域问题
最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题。 目前有两种解决方案: 解决方案一: 设置浏览器安全属性,启用【通过域访问数据源】选项,如下图所示:原创 2018-01-08 14:52:01 · 1719 阅读 · 1 评论 -
使用pushState()改变url而不刷新
编者注:这个pushState()是一个HTML5的新接口,你可能在一些科技博客如36kr上看到过,ajax加载新的文章,并且改变网址却不需要刷新页面,本站也用到了这个,当你在首页往下拉时,加载分页内容,网址也随着改变,有利于后退和增加用户体验。HTML5 的 pushState+AjaxHTML5提供history接口,把URL以state的形式添加或者替换到浏览器中,其实现原创 2018-01-25 20:15:52 · 1491 阅读 · 0 评论