前端
文章平均质量分 64
清风木子云
这个作者很懒,什么都没留下…
展开
-
盘点JavaScript设计模式(常用十五大设计模式)
javaScript设计模式前言一、设计原则单一职责原则(SRP)最少知识原则(LKP)开放-封闭原则(OCP)里氏替换原则 The Liskov Substitution Principle (LSP)接口分离原则 The Interface Segregation Principle (ISP)依赖倒置原则 The Dependency-Inversion Principle (DIP)二、JavaScript设计模式1、单例模式2、策略模式3、代理模式4、迭代器模式5、发布-订阅模式6、命令模式7、组转载 2021-07-30 21:11:04 · 2772 阅读 · 2 评论 -
HTML的<noscript>标签
定义和用法noscript 元素用来定义在脚本未被执行时(浏览器不支持脚本时)显示的替代内容(文本)。此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。如果浏览器支持并启用脚本,则<noscript>元素中的任何内容都不会被渲染。JavaScript<body> ... ... <script type="text/javascript"> <!-- document.write("Hello原创 2021-09-07 10:03:32 · 307 阅读 · 1 评论 -
defer和async的区别
script标签用于加载脚本与执行脚本,是前端开发中非常重要的标签直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载及执行分过程中,会阻塞后续的DOM渲染。现在script提供了async和defer两个属性来解决DOM渲染阻塞的问题没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。<script src="script.js">转载 2021-09-07 09:40:42 · 4472 阅读 · 0 评论 -
JS十进制与二进制互转
将给定数字转换成二进制字符串。如果字符串长度不足 8 位,则在前面补 0 到满8位。('00000000' + num.toString(2)).slice(-8);给定二进制字符串,将其换算成对应的十进制数字return parseInt(str,2);获取数字 num 二进制形式第 bit 位的值。注意:1、bit 从 1 开始2、返回 0 或 13、举例:2 的二进制为 10,第 1 位为 0,第 2 位为 1function valueAtBit(num, bit) .原创 2021-08-29 22:59:33 · 1496 阅读 · 0 评论 -
JS判断数据类型的几种方式
1)、Object.prototype.toString.call() 所有类型都可以判断Object.prototype.toString.call('abc') //[object String]Object.prototype.toString.call(1) //[object Number]Object.prototype.toString.call(true) //[object Boolean]Object.p原创 2021-08-29 22:51:38 · 218 阅读 · 0 评论 -
JS防抖、节流
防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。防抖防抖://scroll方法中的do somthing至少间隔500毫秒执行一次 window.addEventListener('scroll',function(){ var timer;//使用闭包,缓存变量 return function(){ if(timer) clearTimeout(timer); .原创 2021-08-29 22:45:57 · 59 阅读 · 0 评论 -
如何解决fetch方法请求数据的时候http请求被转成https
问题描述如下图,我们在做请求的时候明明请求的是http://www.xxxasfas.com,但是总会出现报错,报错的原因是URL错误,导致fetch请求失败,可是我们明明没有做其他操作,为什么url会自动变成https://www.xxxasfas.com呢,难道此fetch非彼fetch吗,我们可以做个假设:1、全局fetch的api的被重写了2、其他配置影响,让原生 api 出现异常;经检查,fetch 请求没有被重写,所以就着重看下思路二。经过不断的查找, 发现一个meta 标签:原创 2021-08-09 20:14:39 · 2144 阅读 · 0 评论 -
调用百度OCR接口识别身份证 微信小程序
申请百度AI账号获取百度OCR接口API Key和Secret Key申请地址:http://ai.baidu.com/?track=cp:aipinzhuan|pf:pc|pp:AIpingtai|pu:title|ci:|kw:10005792除了身份证识别,百度还提供了人脸识别、车牌识别等接口,有兴趣都可以申请试试,日请求量不超过500好像是免费的。身份证识别接口相关文档地址https://ai.baidu.com/ai-doc/OCR/rk3h7xzck,申请过程文档基本上有说明Acce原创 2021-07-30 10:19:54 · 1751 阅读 · 0 评论 -
HTML 之textContent、innerText、innerHTML、nodeValue之间的区别
textContenttextContent 属性设置或者返回指定节点的文本内容。如果设置了textContent属性,任何子节点都会被移除,然后被指定的字符串的文本节点替换。注意:某些时候textContent属性可以被nodeValue属性替代,但是这个属性可以返回子节点的文本。//获取所有列表的文本内容:document.getElementById("myList").textContent;//结果:CoffeeTea,提取了所有子节点的文本内容,并且无空格的并列显示innerT原创 2021-07-26 11:15:01 · 983 阅读 · 0 评论 -
JS之Promise(必会),手写promise
JS之Promise,你不知道的哪些知识前言一、Promise有什么用?1.异步编程2.Promise能解决什么问题3.Promise的优势二、什么是promise1.Promise介绍2.Promise特点3.Promise缺点三、Promise应用1.Promise创建2.Promise Ajax3.Promise.prototype.then方法:链式操作4.Promise.prototype.catch方法:捕捉错误5.Promise.all方法,Promise.race方法6.Promise.re转载 2021-07-26 00:21:45 · 194 阅读 · 0 评论 -
js从事件驱动到数据驱动,从jQuery到react、vue的转变
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。原创 2021-07-19 17:52:59 · 572 阅读 · 0 评论 -
web前端工程师做什么
前端开发工程师是web前端开发工程师的简称,互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间2005年开始,是指web前端开发工程师的简称。web前端开发是从美工演变而来的,名原创 2021-07-19 15:59:51 · 443 阅读 · 0 评论 -
JS实现继承的七种方式(包括es6的class方法实现的继承)
1、原型链继承核心: 子类的原型是父类的实例// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); }}// 原型方法Animal.prototype.eat = function(food) { console.log(this.name +转载 2021-07-18 22:37:42 · 758 阅读 · 0 评论 -
create-react-app脚手架新建react项目
一.创建项目用react 创建一个项目,这也是官方给出的1.npm install create-react-app -g2.create-react-app react-demo (react-demo项目名)3.cd react-demo4.npm install5.npm start #运行二.配置路由1.安装npm install --save react-router-dom #这样就可以使用react router 了三.添加less配置使用create原创 2021-07-16 10:42:59 · 165 阅读 · 0 评论 -
nodeJs 环境变量设置
nodeJS 安装路径不能嵌套,必须安装在一个目录下,解压缩以后将安装路径添加到环境变量里面,如果是用户安装就添加到用户环境变量里面,npm config set prefix "F:\Program Files\node-v8.11.1-win-x64\node_global"npm config set cache "F:\Program Files\node-v8.11.1-win-x64\node_cache"npm install create-react-app -g全局安装.原创 2021-07-16 10:33:19 · 285 阅读 · 0 评论 -
Vue-cli自动安装Element-UI
Element-UI介绍官方文档:http://element-cn.eleme.io/#/zh-CN/component什么是Element-UIelement-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI 。整个ui风格简约,很实用,同时也极大的提高了开发者的效率,是一个非常受欢迎的组件库。安装Element-UI,推荐使用npm安装方式npm install element-ui -sa原创 2021-07-05 18:07:47 · 643 阅读 · 0 评论 -
史上最全搭建vue脚手架(vue-cli)到开发流程
1、vue脚手架基本用法:vue脚手架用于快速生成Vue项目基础架构,其官方网址为:https://cli.vuejs.org/zh/2、使用步骤2.1安装3.x版本的vue脚手架win + R 输入cmd打开Windows终端,执行以下命令npm install -g @vue/cli终端命令执行完成之后,通过以下命令检查vue脚手架(vue/cli)是否安装完成以及查看版本号vue -V2.2基于3.x版本的脚手架创建vue项目//1、基于交互式命令行的方式,创建新版vu原创 2021-07-05 17:11:39 · 1960 阅读 · 0 评论 -
剑指offer前端基础刷题
剑指offer前端基础刷题1、题目描述在一个长度为n的数组里的所有数字都在0到n-1的范围内。 数组中某些数字是重复的,但不知道有几个数字是重复的。也不知道每个数字重复几次。请找出数组中第一个重复的数字。 例如,如果输入长度为7的数组[2,3,1,0,2,5,3],那么对应的输出是第一个重复的数字2。没有重复的数字返回-1。示例1输入:[2,3,1,0,2,5,3],输出:2class Solution:def duplicate(self , numbers ): temp = {} fo转载 2021-06-23 20:21:19 · 489 阅读 · 0 评论 -
JavaScript实现排序算法汇总
排序算法排序算法是《数据结构与算法》中最基本的算法之一。排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。常见的内部排序算法有:插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。1、冒泡排序比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。针对所有的元素重复以上的原创 2021-06-23 19:58:33 · 132 阅读 · 0 评论 -
JavaScript面向对象编程
JavaScript面向对象编程var that;//constructor里面的this指向实例化的对象,而函数里面的this指向函数的调用者,故用that保存对象的this,以免和函数里面的this冲突class Tab{ constructor(id){ that = this; //通过id获取main元素以及元素内容 this.main = document.querySelector(id); this.add = t原创 2021-06-23 20:02:42 · 80 阅读 · 0 评论