JavaScript
文章平均质量分 63
唐宋元明清.
0.0
展开
-
puppeteer爬取知乎答案列表爬虫
知乎应该很多人没事的时候都会去看, 毕竟知乎上平均年收入几十万, 日常出国. 哈哈 听朋友说, 今天闲来无事写了一个爬取知乎答案列表的爬虫. 当然知乎有营养的内容还是很多的之前写过一次抓答案列表接口的爬虫, 感觉不太好, 还得找每个问题的请求接口, 这次使用puppeteer来通过页面显示内容抓取Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools ...原创 2020-03-05 14:43:53 · 1269 阅读 · 0 评论 -
JavaScript 的 API 设计原 则
一、接口的流畅性好的接口是流畅易懂的,他主要体现如下几个方面:1.简单操作某个元素的css属性,下面是原生的方法:document.querySelectorAll('#id').style.color = 'red';封装之后function a(selector, color) { document.querySelectorAll(selector)[0].style.color = co原创 2017-06-20 22:12:14 · 463 阅读 · 0 评论 -
理解JavaScript作用域
简介JavaScript 有个特性称为作用域。尽管对于很多开发新手来说,作用域的概念不容易理解,我会尽可能地从最简单的角度向你解释它们。理解作用域能让你编写更优雅、错误更少的代码,并能帮助你实现强大的设计模式。什么是作用域?作用域是你的代码在运行时,各个变量、函数和对象的可访问性。换句话说,作用域决定了你的代码里的变量和其他资源在各个区域中的可见性。为什么需要作用域?最小访问原则那么,限制变量的可见原创 2017-06-14 06:48:17 · 763 阅读 · 0 评论 -
JS的六种继承方式
继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。一、原型链首先得要明白什么是原型,原型链继承基本思想就是让一个原型对象指向另一个的实例function SuperType() { this.property = true}SuperType.prototype.getSuperValue = function ()原创 2017-06-27 07:02:29 · 362 阅读 · 0 评论 -
APICloud框架——总结一下最近开发APP遇到的一些问题 (二)
高度自适应flex布局 允许子元素伸缩手机号正则function checkPhone(data){ if(!(/^1[34578]\d{9}$/.test(data))){ alert("手机号码有误,请重填"); return false; } }function checkTel(data){ if(!/^(\(\d{3,4原创 2017-07-15 07:29:02 · 4711 阅读 · 0 评论 -
彻底理解 JS 中 this 的指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。为什么要学习th原创 2017-08-12 21:50:48 · 232 阅读 · 0 评论 -
仿微信联系人列表滑动字母索引
今天做到了一个联系人列表的需求, 要求和微信的一样! 写出来分享给大家, 使用了jq和doT模版引擎(doT模版教程) 预览页面地址首先对数据源进行数据排序 // 数据排序 function sortData(data) { var letterArr = []; for (var i = 0; i < data.length; i++) {原创 2017-08-15 21:53:08 · 7940 阅读 · 2 评论 -
浅谈 Web 缓存
在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。那么下面我们就来看看服务器端缓存的原理。缓存分类web缓存分为很多种,比如数据库缓存、代理服务器缓存、还有我们熟悉的CDN缓存,以及浏览器缓存。原创 2017-10-18 07:46:23 · 235 阅读 · 0 评论 -
图与例解读Async/Await
JavaScript ES7的async/await语法让异步promise操作起来更方便。如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调。然而使用async/await可以让我们用更加可读、可维护的方式来表达这种逻辑。这篇教程以图表与简单例子来阐述JS async/await的语法与运行机理。在深入之前,我们先简单回顾一下promise,如果对这原创 2017-10-30 07:57:30 · 632 阅读 · 0 评论 -
深入 JavaScript 数组:进化与性能
正式开始前需要声明,本文并不是要讲解 JavaScript 数组基础知识,也不会涉及语法和使用案例。本文讲得更多的是内存、优化、语法差异、性能、近来的演进。在使用 JavaScript 前,我对 C、C++、C# 这些已经颇为熟悉。与许多 C/C++ 开发者一样,JavaScript 给我的第一印象并不好。Array 是主要原因之一。JavaScript 数组不是连续(contiguous)的,其实原创 2017-10-21 21:54:21 · 454 阅读 · 0 评论 -
从头开始开发一个vue幻灯片组件
首先新建项目vue init webpack projectName 安装依赖包npm i这些就不说了 接下来就是构建我们的swiper组件因为我写的代码不规范, 通不过eslint的检测, 会频繁报警告, 所以不愿意看警告的可以打开\build\webpack.base.conf.js的32行到41行注释掉 接下来才开始正式的构建组件我直接把脚手架工具\src\components\Hell原创 2017-11-19 21:10:28 · 620 阅读 · 0 评论 -
mock.js模拟假数据
mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>原创 2017-12-02 17:40:43 · 4250 阅读 · 0 评论 -
函数的call、apply以及bind的作用与区别
每个函数都包含两个非继承而来的方法: apply()和call(), 这两个方法的用途就是在特定的作用域中调用函数,实际上就是设置函数体内this对象的值。apply()apply()接受两个参数,第一个就是指定运行函数的作用域(就是this的指向)第二个是参数数组, Array实例arguments对象function sum(sum1, sum2) { ...原创 2018-03-06 23:36:58 · 2162 阅读 · 0 评论 -
JS函数传递参数问题
JS函数传递参数问题js中所有函数的参数都是按值传递的, 也就是说把函数外部的值复制给函数内部的参数, 就如同把一个变量赋值给另一个变量一样. 基本类型值传递如同基本类型变量复制一样引用类型则同引用类型变量的复制一样基本类型值传递定义一个处理函数, 传递给函数一个数值类型的值, 只会修改韩顺局部变量的值. 而不会修改外部变量function handleNum(num) ...原创 2018-03-03 13:46:12 · 5639 阅读 · 0 评论 -
js类型检查工具flow的基本使用
文章目录Flow的使用Flow 安装Flow 的命令行工具的使用为代码添加Flow类型Flow中的类型Flow是JavaScript代码的静态类型检查器。它可以帮助您提高工作效率。让您的代码更快,更智能,更自信,更大规模。Flow的使用Flow 安装安装Flownpm i flow-bin -D安装Babelnpm i babel-cli babel-preset-flow...原创 2018-10-18 22:22:51 · 2572 阅读 · 0 评论 -
JS中的高阶函数
如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语。这听起来复杂,其实不然。使JavaScript适合函数式编程的原因是它接受高阶函数。高阶函数在JavaScript中广泛使用。如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道。要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念。函数...原创 2018-11-05 17:21:35 · 6939 阅读 · 0 评论 -
JavaScript 创建对象的七种方式
JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。工厂模式function createPerson(name, job) { var o = new Object() o.name = name o.job = job原创 2017-06-30 07:16:46 · 445 阅读 · 1 评论 -
doT模板引擎
doT模板引擎是一个比较高效的引擎,一直都在使用,只有3kb大小,简洁的语法,无任何依赖,简单易用;下面的代码直接拷贝引用就可以使用;插件代码(function(){function p(b,a,d){return("string"===typeof a?a:a.toString()).replace(b.define||h,function(a,c,e,g){0===c.indexOf("def.原创 2017-06-06 17:58:44 · 2116 阅读 · 0 评论 -
构造函数复习
构造函数是什么? 构造函数是用来给初始化的实例化对象赋值执行过程 1.使用new关键字创建出来一个新的对象 2.构造函数把新建的对象赋值给函数内的this对对象 3.在函数内通过this关键字给新建的对象添加成员 4.默认返回新建的对象注意事项 1.构造函数名最好大写 2.和new一起使用 3.如果手动原创 2016-10-27 08:51:05 · 612 阅读 · 0 评论 -
前端面试题目
1 //填一个表达式,使控制台可以打印出 100 150 2 function obj(){ 3 (_______???_____) 4 } 5 6 var a = new Object; 7 var b = new Object; 8 9 a.value = '100';10 b.value = '150';11 12 a.obj = obj;原创 2016-10-28 00:51:05 · 282 阅读 · 0 评论 -
Array.prototype.map()的用法
map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。array.map(callback[, thisArg]) 注:[]在语法中[]内的内容表示可选参数callback原数组中的元素经过该方法后返回一个新的元素。 currentValue callback 的第一个参数,数组中当前被传递的元素。原创 2016-10-31 00:54:04 · 767 阅读 · 0 评论 -
forEach的用法
1 array.forEach(callback[, thisArg])callback在数组每一项上执行的函数,接收三个参数:currentValue当前项(指遍历时正在被处理那个数组项)的值。index当前项的索引(或下标)。array数组本身。thisArg可选参数。用来当作callback 函数内this的值的对象。forEach 方法按升序为数组中原创 2016-10-30 22:35:24 · 1417 阅读 · 0 评论 -
写一个方法clone; 实现js五种数据类型(string, number, boolean, array, object)的复制
//先来方法的代码function clone(obj) { var copy; switch(typeof obj){ case 'number': case 'string': case 'boolean': copy = obj; b原创 2016-12-01 14:30:42 · 3168 阅读 · 0 评论 -
input输入事件
1、onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。 2、oninput事件与onpropertychange事件的区别: oninput原创 2017-01-17 10:23:22 · 2036 阅读 · 0 评论 -
简单的gulp应用
简单的gulp应用使用方法全局安装gulp npm install --global gulp 安装gulp到项目目录 npm install --save-dev gulp在项目根目录下创建一个名为 gulpfile.js 的文件,把下面的代码拷贝到该文件中var gulp = require('gulp');gulp.task('default', function() {原创 2017-02-17 13:48:40 · 354 阅读 · 0 评论 -
使用cnpm
npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);首先安装nodejs , 官网下载 nodejs安装完后打开控制台win+R 输入cmd 然后输入node -v 查看版本 显示v x.x.x 表示安装成功 npm是内嵌在nodejs的,nodejs安装完成后,npm自动安装,查看版本npm -v 说明:npm(no原创 2017-02-17 16:27:25 · 4357 阅读 · 0 评论 -
常用正则表达式大全
常用正则表达式大全!(例如:匹配中文、匹配html) 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行原创 2017-01-23 11:15:08 · 265 阅读 · 0 评论 -
RequireJS基础知识
RequireJS解决代码依赖问题,异步加载js,避免页面失去相应 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。 RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊原创 2017-03-20 20:49:23 · 369 阅读 · 0 评论 -
常见排序算法
排序算法 冒泡排序 , 选择排序 , 插入排序, 快速排序冒泡排序: 最简单的排序之一了,其大体思想就是通过与相邻元素的比较和交换来把小的数交换到最前面。这个过程类似于水泡向上升一样,因此而得名。举个栗子,对5,3,8,6,4这个无序序列进行冒泡排序。首先从后向前冒泡,4和6比较,把4交换到前面,序列变成5,3,8,4,6。同理4和8交换,变成5,3,4,8,6,3和4无需交换。5和原创 2017-03-20 22:05:53 · 304 阅读 · 0 评论 -
webpack最基本的用法
webpack安装webpack是所以Node.js开发的工具,可通过npm安装,首先要保证node已经安装完毕,可以去node官网下载, 然后通过npm下载webpacknpm install webpack -g我们只需要webpack构建项目, 项目上线后是不需要依赖webpack的 所以我们在项目文件夹下安装时候可以安装在dev-dependencies中, 即:npm install we原创 2017-03-24 00:27:17 · 567 阅读 · 0 评论 -
汉字转换拼音函数
汉字转换为拼音调用ConvertPinyin()函数, 参数为你要转换的汉字返回值就是转换后的拼音可以只返回首字母或者首字母大写的全拼拼音var phoneticTranscriptionObj = { "a": "\u554a\u963f\u9515", "ai": "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u8原创 2017-05-10 21:42:27 · 19406 阅读 · 0 评论 -
一个简单的倒计时函数
今天写app的注册页面, 牵扯到了发送验证吗的间隔时间, 就要写一个倒计时函数, 倒计时期间禁用发送验证码的按钮, 页面显示倒计时秒数APICloud的方法 // 倒计时 function countDown() { var n = 60; var inta = setInterval(function(){ // 设置.time的文原创 2017-04-23 09:22:40 · 6376 阅读 · 0 评论 -
前端跨域请求原理及实践
一、 跨域请求的含义浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。一般的,只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用 NodeJs 创建了两个服务器,分别监听 3000、 3001 端口(下面简称 服务器3原创 2017-06-15 22:29:02 · 778 阅读 · 1 评论 -
唯快不破:Web 应用的 13 个优化步骤
时过境迁,Web 应用比以往任何时候都更具交互性。搞定性能可以帮助你极大地改善终端用户的体验。阅读以下的技巧并学以致用,看看哪些可以用来改善延迟,渲染时间以及整体性能吧!更快的 Web 应用优化 Web 应用是一项费劲的工作。Web 应用不仅处于客户端和服务器端的两部分组件当中,通常来说也是由多种多样的技术栈构建而成:数据库,后端组件(一般也是搭建在不同技术架构之上的),以及前端(HTML + Ja原创 2017-06-17 09:22:26 · 3295 阅读 · 3 评论 -
面向对象的好处
1、易维护采用面向对象思想设计的结构,可读性高,由于继承的存在,即使改变需求,那么维护也只是在局部模块,所以维护起来是非常方便和较低成本的。2、质量高在设计时,可重用现有的,在以前的项目的领域中已被测试过的类使系统满足业务需求并具有较高的质量。3、效率高在软件开发时,根据设计的需要对现实世界的事物进行抽象,产生类。使用这样的方法解决问题,接近于日常生活和自然的思考方式,势必提高原创 2016-10-27 07:13:29 · 3367 阅读 · 0 评论