前端知识点
Judy1623
前端是个非常具有挑战的工作,只要自己心有所爱,就会成为那个最好的自己!
展开
-
ES6箭头函数
function add(a,b){ //'user strict' if(a == 0){ throw new Error('this is error'); } return a+b}console.log(add(1,4)); //5利用箭头函数//利用箭头函数var add = (a,b=2) => a+b ;console.lo...原创 2018-07-02 10:33:24 · 172 阅读 · 0 评论 -
ES6的模块化管理
ES6的exportexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口1.1 export// export/index.jsconst a = "123";const fn = () => window.location.href;export { fn };// show/index.jsconst ex = require("./export/...翻译 2019-07-22 09:14:37 · 503 阅读 · 0 评论 -
javascript 设计模式(9) —— 装饰者模式
装饰者函数 :可以把行为依照职责分成粒度更细的函数,随后通过装饰把它们合并到一起,这有助于我们编写一个松耦合和高复用性的系统。应用1 :数据统计上报比如页面中有一个登录 button,点击这个 button 会弹出登录浮层,与此同时要进行数据上报,来统计有多少用户点击了这个登录 button: Function.prototype.after = function( afterfn ){...翻译 2019-07-25 10:41:43 · 122 阅读 · 0 评论 -
toString()和toLocalString()有什么区别
首先这两个函数都是将数字转化成字符串一、将 数字 转化成 字符串toString - 将数字转化成字符串,使用指定的基数; toLocalString -把数字转换为字符串,使用本地数字格式顺序;toLocaleString()会让数字三位三位一分隔var a = 1234;console.log(a.toString()) //'1234'console.log(a.toLo...翻译 2019-07-30 11:07:12 · 1551 阅读 · 0 评论 -
[ Array ] - 数组去重
题目:如传入的数组元素为[123, "meili", "123", "mogu", 123],则输出:[123, "meili", "123", "mogu"] 如传入的数组元素为[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"],则输出:[123, [1, 2, 3], [1, "2", 3], "meili"] 如传入的数组元素为[123...翻译 2019-07-30 17:37:39 · 441 阅读 · 0 评论 -
HTML双飞翼
关于html双飞翼布局,前今天看到,之前知道但是不明白是双飞翼,今天总结一下!<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS B...翻译 2019-07-22 10:03:24 · 851 阅读 · 0 评论 -
关于BFC的理解(补充知识点)
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。浮动元素:float 除 none 以外的值。 绝对定位元素:position (absolute、fixed)。 display 为 inline-block、table-cells、flex。 over...转载 2019-07-24 09:57:51 · 158 阅读 · 0 评论 -
字符串:字符串和数字之间的显式转换
字符串和数字之间的显式转换1.String(..) 和 Number(..)var a = 42;var b = String( a );var c = "3.14";var d = Number( c );b; // "42"d; // 3.142. toString() 和 +var a = 42;var b = a.toString();var c = ...原创 2019-07-30 10:06:26 · 519 阅读 · 0 评论 -
《你不知道的JavaScript中卷》知识点笔记
知识点笔记一、类型用typeof返回的是类型的字符串值typeof undefined === "undefined"typeof true === "boolean"; // truetypeof 42 === "number"; // truetypeof "42" === "string"; // truetypeof { life: 42 } === "object"; ...原创 2019-07-31 17:20:59 · 164 阅读 · 0 评论 -
javascript 设计模式(7) —— 模板方法模式
模板方法模式 :在一个方法中定义一个算法的骨架,而将一些步骤的实现延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中某些步骤的具体实现。翻译 2019-07-23 09:16:29 · 138 阅读 · 0 评论 -
vue+element-UI 导出表格遇到的问题
需求: Vue+element UI table下的根据搜索条件导出当前所有数据准备工作: 1、安装依赖:npminstall--savexlsxfile-saver 2、在放置需要导出功能的组件中引入 import FileSaverfrom'file-saver' import XLSXfrom'xlsx' 3、HTML中的设置...转载 2019-07-23 09:21:54 · 2601 阅读 · 5 评论 -
防抖与节流
一、防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算时间思路:每次触发事件时都取消之前的延时调用方法。函数防抖 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次//防抖 每次都取消之前的延时//防抖 每次都取消之前的延时function debounce(fn,delay){ let tim...翻译 2019-08-06 11:23:47 · 96 阅读 · 0 评论 -
[ Object ] 混入mixin
显式混入function mixin(souceObj,targetObj){ for(var key in souceObj){ if(!(key in targetObj)){ targetObj[key] = souceObj[key] } } return targetObj ;}var a = { age : '18', skill:...原创 2019-08-05 12:00:44 · 125 阅读 · 0 评论 -
[ String ] 检测字符串中字母、数字的出现次数
字符串中某个字母或数字的出现次数使用indexOf检测某个字符初始位置参数1:被查找的元素参数2:开始查找的位置 如果小于0查找整个字符串(等价于传入了 0)思路:不断增加 indexOf()方法开始查找的位置,遍历了一个长字符串。在循环之外,首先找到了"e"在字符串中的初始位置;而进入循环后,则每次都给 indexOf()传递上一次的位置加 1。function stringNu...原创 2019-08-07 17:01:18 · 663 阅读 · 0 评论 -
【 记录 】函数的一些简洁用法
函数的方法最大优点就是解耦了请求发送者和 N 个接收者之间的复杂关系思路 :1.验证是否为Judy ,不是 报错2.如果是打印出judy,并做相应的操作/*** @description test {Function} 验证名字是不是“judy”* @param {String} name 名字* @param {Function} callback 返回执行函数*/fun...原创 2019-08-19 14:11:58 · 90 阅读 · 0 评论 -
客户端检测
检测 Web 客户端的手段很多,而且各有利弊。但最重要的还是要知道,不到万不得已,就不要使用客户端检测。只要能找到更通用的方法,就应该优先采用更通用的方法。一言以蔽之,先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案。原创 2019-08-12 14:09:53 · 177 阅读 · 0 评论 -
Javascript 设计模式(6) ——组合模式
组合模式就是用小的子对象来构建更大的对象,这些小的子对象也许是由更小的‘‘孙对象’构成的。marcoCommand 被称为组合对象,closeDoorCommand、openPcCommand、openQQCommand 都是叶对象。例如 :目前的万能遥控器,包含了关门、开电脑、登录 QQ 这 3 个命令。现在我们需要一个“超级万能遥控器”,可以控制家里所有的电器,这个遥控器拥有以...翻译 2019-07-19 09:08:39 · 177 阅读 · 0 评论 -
javascript 设计模式(1) —— 单例模式
单例模式是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。例如:用户点击按钮的时候才显示弹框让我们一步步优化,实现更好的单例模式第一种:点击一次创建一个新对象缺点 : 失去了单例的效果,当我们每次点击的时候都会创建一个新的div<html> <body> <button id="loginBtn">登录</button>...翻译 2019-07-17 09:12:46 · 136 阅读 · 0 评论 -
简单理解一下闭包
什么是闭包?function a(){ var n = 0; function b(){ n++; console.log(n) } b(); b();}a(); //控制台输出1,在输出2再来一段代码:function a(){ var n =0; console.log(this) ;//指代a这个对象...翻译 2018-07-03 11:15:53 · 594 阅读 · 0 评论 -
判断是否为手机端页面/pc端的方法
判断是否为手机端:思路:手机端跳转到一个页面,电脑端显示另外一个页面if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "https://www.baidu.com/";} else { window.location.href = "http...原创 2018-06-28 13:22:54 · 525 阅读 · 0 评论 -
ES6 Set结构
这节学习Set数据结构,注意这里不是数据类型,而是数据结构。它是ES6中新的东西,并且很有用处。Set的数据结构是以数组的形式构建的。set的声明:new Set 有去重的功能12let setArr = new Set(['wayne','judy','web','judy']);console.log(setArr);//Set {"wayne", "judy", "web"}Set和Arra...翻译 2018-07-04 10:20:28 · 94 阅读 · 0 评论 -
请求到的json数据处理
模拟后台请求道的数据 var result =[ {'shop':'s001'}, {'shop2':'s002'} ]例如:是在页面上显示s001代表上海门店,s002代表官洲门店,前端怎么处理这些数据呢?//先把店铺代表的只用对象的形式列出来var dianpu = { 's001':'上海店铺', 's002':'广州店铺'}fun...原创 2018-07-12 14:01:46 · 662 阅读 · 0 评论 -
ajax请求成功,失败处理!
请求失败处理function requesFail(xhr){ var status = xhr.status; if (status) { showNotify("error", "网络错误", "发生网络错误,错误码为:" + xhr.status); } else { showNotify("error", "网络错误", "未知网络错误, 请确保设备处在联网状态.转载 2018-07-13 11:23:20 · 30710 阅读 · 1 评论 -
对于数字的处理,逢三位数转逗号 || 数字转千分位
数字逢三转逗号方法一:function changeTree(num) { var num = (num || 0).toString(); var result = ''; while (num.length > 3) { result = ',' + num.slice(-3) + result; ...原创 2018-07-13 13:56:58 · 655 阅读 · 0 评论 -
十个程序员必备的网站
程序员的工作和日常生活非常的枯燥,这里给大家推荐一些程序员经常使用的网站,也是我经常上的一些网站,尤其是前三个网站感觉用起来非常的舒服。我大致把这些网站分为三类,使用工具类,设计分享类,资讯交流类,业界良心类。希望能对大家有所帮助。 1,Github代码托管(https://github.com/) 作为开源代码库以及版本控制系统,Github拥有140多万开发者用户。随着越来越多的应...转载 2018-08-07 10:38:49 · 452 阅读 · 1 评论 -
css几种垂直居中的方式(面试常考题1)
水平垂直居中(一)定位和需要定位的元素的margin减去宽高的一半 <style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; ba...转载 2018-11-22 09:49:17 · 1205 阅读 · 0 评论 -
ES6 Promise(1)
1. Promise的含义1.对象的状态不受外界影响- 三种状态: - pending (进行中) - fulfilled (已成功) -rejected (已失败)2.一旦状态改变,就不会在变,任何时候都可以得到这个结果。- 两种可能 - pending -> fulfilled - pending -> rejected 只要两种情况发生,状态就凝固了,不...原创 2018-12-18 16:56:48 · 108 阅读 · 0 评论 -
ES6 Number的处理
数字判断和转换数字验证 Number.isFinite(xx)let a= 232;console.log(Number.isFinite(a));//trueconsole.log(Number.isFinite('hello'));//falseconsole.log(Number.isFinite(NaN));//falseconsole.log(Number.isFinit...原创 2019-01-09 17:19:25 · 421 阅读 · 0 评论 -
javascript 设计模式(2) —— 策略模式
实现功能:使用Javascript 中的策略模式来实现 根据每一位员工的年底业绩考核,来核算年终奖的需求。第一种(不推荐)1.我们先用我们熟悉的js代码来实现这个功能var calculateBonus = function(salary,perLevel){ if( perLevel === 'S'){ return salary * 4 ; }...翻译 2019-07-10 11:01:48 · 139 阅读 · 0 评论 -
Javascript 设计模式(4) —— 发布订阅模式
发布—订阅模式可以用一个全局的 Event 对象来实现,订阅者不需要了解消息来自哪个发布者,发布者也不知道消息会推送给哪些订阅者,Event 作为一个类似“中介者”的角色,把订阅者和发布者联系起来。发布订阅模式var Event = (function(){ var clientList = {}, listen, trigger, remove; list...翻译 2019-07-15 13:39:10 · 131 阅读 · 0 评论 -
Javascript 设计模式(5-1) —— 命令模式
命令模式:命令模式的由来,其实是回调(callback)函数的一个面向对象的替代品。功能:点击按钮执行刷新功能流程:设置安装命令的接口 - 点击按钮的执行的具体行为 (比如:刷新-增加子菜单) - 把命令封装在命令类中 - 执行命令...翻译 2019-07-16 09:07:34 · 118 阅读 · 0 评论 -
关于缓存的一些真相:Cookie && localStorage && Session Storage 缓存相关
Cookie && localStorage && Session Storage 这三个分别的意思为:关于前端存储的问题我们难免会遇到 token 存储、 代码缓存、 图片存储等等。 以及可能存在的 一系列的问题;现在,我们就专门从 浏览器存储 入手,来真正的了解 缓存 存在的 场景,以及在日常开发中,我们需要 缓存的地方,以及使用缓存会给我们带来哪些优...翻译 2019-07-18 14:16:37 · 314 阅读 · 0 评论 -
Javascript 设计模式(5-2) —— 宏命令
宏命令是一组命令的集合,通过执行宏命令的方式,可以一次执行一批命令。下面我们看看如何逐步创建一个宏命令。首先,我们依然要创建好各种 Command:第一步 :定义好各种命令var closeDoorCommand = { execute: function(){ console.log( '关门' ); } };var openQQComm...翻译 2019-07-16 14:22:44 · 823 阅读 · 0 评论 -
【 函数柯里化 】
函数柯里化概念 - 调用另一个函数并为它,参数1:传入柯里化的函数 参数2:其他参数,要传入的值功能 - 参数复用 延迟执行案例:curry 创建柯里化的通用公式第一种:基本的柯里化函数function curry (fn) { // curry第一个参数=>柯里化函数 ,其他参数 => 要传入的值 var args = Array.prototype.slice...原创 2019-09-06 15:52:46 · 165 阅读 · 0 评论