![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
整理
飞驰的地铁
这个作者很懒,什么都没留下…
展开
-
如何用console.log输出pornhub图标(误)
下午写了一下shell脚本, 突然想到chrome的devtool是不是也支持字体颜色, 本着上下求索和学以致用的精神,试了一下确实可以原创 2021-09-04 11:50:59 · 1371 阅读 · 2 评论 -
console方法整理
顺便整理一下console的 方法console.log最常用的就是console.log了, 其实这个方法支持css, 如下, 很花哨console.log('%chello %s %s %c%s', 'color:green;font-family:Hanzipen TC', 'River','Z', 'background-color: #ff6600;color:#fff','How...原创 2019-11-29 22:01:16 · 228 阅读 · 0 评论 -
EventEmitter简单实现
Vue里面用过eventBus作为通信,方式,实现方式是用Vue函数的$on/$emit方法。这种方式可以叫做发布订阅模式简单实现一下 class Event { constructor() { // 创建一个事件对象 this.events = Object.create(null); // events: { // hehe: ...原创 2019-08-05 17:57:12 · 2165 阅读 · 1 评论 -
图片下载/预览简单实现 , 以及FileReader转换文件的方法
思路, 通过canvas将图片画在画布上, 再使用toDataURL转换为base64格式, 通过a标签下载// 新建canvas对象, 取到2d画布var canvas = document.getElementsByTagName('canvas')[0]var ctx = canvas.getContext('2d')// 新建图片var Img = new Image()...原创 2019-07-26 11:01:21 · 968 阅读 · 0 评论 -
面试-尾调用优化
场景今天去面试futu, 被问到一题 -> 参数为数字, 输出斐波那契数列对应结果, 实现了一下 function fibonacci(n) { if (n == 1 || n == 2) return 1; return arguments.callee(n - 1) + arguments.callee(n - 2); } 然后面试官问:...原创 2019-07-20 22:04:20 · 106 阅读 · 0 评论 -
二分查找
二分查找 // 非递归算法 function binary_search(arr, key) { var low = 0, high = arr.length - 1; while(low <= high){ var mid = parseInt((high +...原创 2019-07-16 21:14:38 · 107 阅读 · 0 评论 -
严格模式
变量必须声明后再使用函数的参数不能有同名属性,否则报错不能使用with语句不能对只读属性赋值,否则报错不能使用前缀 0 表示八进制数,否则报错不能删除不可删除的属性,否则报错eval不会在它的外层作用域引入变量eval和arguments不能被重新赋值arguments不会自动反映函数参数的变化不能使用arguments.callee不能使用arguments.caller禁...原创 2019-07-16 19:39:40 · 75 阅读 · 0 评论 -
数组去重
Array.filter() + indexOffunction distinct(arr) { return arr.filter((item, index)=> { return arr.indexOf(item) === index })}双重 for 循环function distinct(arr) { let len = arr....原创 2019-07-11 17:18:49 · 91 阅读 · 0 评论 -
webpack和gulp
两者都用过, 来说说感受使用上来说, gulp更关注于事务性, 流程性, task, pipe任务一个接着一个, 需要手动去, 任务也可以合并成一个任务, Gulp更像是流水线,我们可以通过给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程。w...原创 2019-07-05 15:35:14 · 625 阅读 · 0 评论 -
Object中获取属性/值相关方法
前提先定义一个对象 let obj = {a: 1} obj.__proto__.name = 22 obj[Symbol()] = 33 Object.defineProperty(obj, 'cc', { enumerable: false })for…in -> 遍历对象属性, 拿到可枚举的和原型上的属性, 不能拿到Symbol for(key in obj...原创 2019-07-15 09:17:10 · 3078 阅读 · 0 评论 -
拉取github代码shell脚本
每次拉github上一个新的仓库都要敲一遍, 写了一个脚本, 方便操作https://github.com/Border-Line/get-code原创 2019-06-30 14:48:33 · 3302 阅读 · 2 评论 -
webpack配置 / 常用插件
webpack.config.js// 将相对路径转换为绝对路径的包const path = require('path');module.exports = { mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in o...原创 2019-07-27 09:25:18 · 116 阅读 · 0 评论 -
ft/fl面试/笔试题
fustu左固定两百, 右自适应, 至少三种方案, 优缺点递归斐波那契数列, 尾递归优化checkbox表单以及, 参数请求方式{}[]括号匹配 O(n)两个有序数组, 一个是另一个子集, 不能用数组api说说项目架构在项目组担任什么角色缓存有什么类型fuslin9. 跨域10. 无序数组中位数, 要求时间复杂O(logn)11. csrf和xss具体例子和详细过程1...原创 2019-07-27 09:34:48 · 249 阅读 · 0 评论 -
不可扩展对象、密封对象、冻结对象
不可扩展对象 Object.preventExtensions不可添加新属性 let obj = {a:1,b:2} Object.preventExtensions(obj) obj.c = 1 obj // {a:1,b:2} // Object.isExtensible检测是否可扩展 console.log(Object.isExtensible(obj)); // fa...原创 2019-07-27 14:49:21 · 146 阅读 · 0 评论 -
js参数传递方式 - 值传递
今天遇到一题笔试题, 虽然做对了,记录一下下面的代码输出是什么var obj = {a:1,b:2}var type = "hehe"var arr = [1,2,3]function change(type, obj, arr){ type = 'fff' obj = {c:1} arr.push(4)}change(type, obj, arr)console.log(t...原创 2019-08-12 21:24:42 · 191 阅读 · 0 评论 -
链式调用
问题上次被问到链式调用怎么实现, 而且需要中间seelp停顿n秒,再继续往下执行;链式调用思路是返回this, seelp的思路是利用js单线程while阻塞; (利用for等也是一样的)简单示例let chain = { log(...args){ console.log(args.toString()) return this }, // 单位 ms sleep(de...原创 2019-08-11 21:04:56 · 155 阅读 · 0 评论 -
哪些场景不适合箭头函数
由于箭头函数的this在定义时确定, 所以有一些地方不能用箭头函数不能定义对象上的方法 let obj = { a: 1, func: () => { console.log(this.a) } } var a = 0 obj.func() // 0不能定义动态上下文的回调函数 const btn = document.getElementById(...原创 2019-08-08 17:33:38 · 567 阅读 · 0 评论 -
Promise的注意点, 以及相关题目
promise.alllet a = new Promise(resolve=>{setTimeout(()=>{resolve(111)},3000)})let b = new Promise(resolve=>{setTimeout(()=>{resolve(222)},1000)})let c = new Promise(resolve=>{setTi...原创 2019-08-08 13:26:58 · 368 阅读 · 0 评论 -
git常用操作总结
// 撤回修改到最近一次add或最近一次commit状态, // 例如已经add到暂存区, 然后再修改, 会回到最近的add的状态; // 例如已经commit提交了, 然后再修改, 会回到最近的commit的状态; // 即撤销修改 git checkout -- filename // 将修改从暂存区撤回到工作区, 即已经add了, 需要回到未add的状态 // 不加参数...原创 2019-07-28 13:34:07 · 88 阅读 · 0 评论 -
Bundle VS Chunk VS Module
首先对于“模块”(module)的概念相信大家都没有异议,它指的就是我们在编码过程中有意识的封装和组织起来的代码片段。狭义上我们首先联想到的是碎片化的 React 组件,或者是 CommonJS 模块又或者是 ES6 模块,但是对 Webpack 和 Loader 而言,广义上的模块还包括样式和图片,甚至说是不同类型的文件而“包”(bundle) 就是把相关代码都打包进入的单个文件。如果你...转载 2019-08-05 22:19:01 · 831 阅读 · 0 评论 -
this的指向
this的绑定规则有哪些?默认绑定隐式绑定显式绑定 / 硬绑定new绑定默认绑定在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。如下, 严格模式下this为undefined function sayHi(){ console.log('Hello,', this.name); } var name = 'gg'; sayHi(); //gg隐式...转载 2019-08-05 18:19:18 · 100 阅读 · 0 评论 -
angular 1.x 项目总结
当年第一个项目使用angular 1.46做的,在这里记录一下, 免得忘了结构- common - appConfig // 处理自定义路由格式 - stateConfig // 与SEP平台对接, 中间件控制器 -> 前端路由 - menuConfig.js // 菜单配置 - config - quality-analysis - config....原创 2019-06-30 14:31:51 · 525 阅读 · 0 评论 -
记一下location
记一下window.locationwindow.location.href 返回当前页面的 href (URL)window.location.hostname 返回 web 主机的域名window.location.pathname 返回当前页面的路径或文件名window.location.protocol 返回使用的 web 协议(http: 或 https:)window.lo...原创 2019-07-05 12:18:50 · 227 阅读 · 0 评论 -
DOM常用操作
查找节点// 返回拥有指定id的第一个对象的引用document.getElementById('id属性值');//返回拥有指定class的对象集合document/element.getElementsByClassName('class属性值');//返回拥有指定标签名的对象集合document/element.getElementsByTagName('标签名');//...原创 2019-07-05 10:14:42 · 122 阅读 · 0 评论 -
js继承的几种方式
原型链继承// 父类function Person() { this.arr = [1, 2]}// 子类function Student(){}// 继承Student.prototype = new Person()缺点转载 2019-07-01 17:37:43 · 141 阅读 · 0 评论 -
new操作符过程,发生了什么
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作:创建一个空的简单JavaScript对象(即{}); var obj = {};设置原型链,将obj的__proto__成员指向了构造函数的prototype obj.__proto__ = xx.prototype;将步骤1新创建的对象作为this的上下文 ;...原创 2019-07-15 23:49:03 · 1134 阅读 · 0 评论 -
看Vue源码前的准备工作
最近很慌, 想看源码, 先把简单的相关概念理一理Object.defineProperty首先, 概念 :Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。没啥好说的, 直接上例子// 定义一个对象const obj = { firstName: 'D', lastName: 'Z'}// ...原创 2019-05-30 01:04:56 · 272 阅读 · 0 评论 -
EventLoop事件循环以及for循环中的let和var
起因先看一个例子for(var i = 0; i < 10; i++){ setTimeout(function(){ console.log(i); },100);}网上文章说 , 会输出10个10, 因为执行setTimeout中的内容的时候, for循环已经执行完了但是我当时就是想不通 , 比如我改成for(var i = 0; i <...原创 2019-06-01 18:52:14 · 363 阅读 · 0 评论 -
原型与原型链
本来写到一半的, 太懒了, 下面这篇文章写的很详细了JavaScript深入之从原型到原型链其中有几个点说得很好prototype函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 person1 和 person2 的原型。原型那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候...转载 2019-05-26 16:37:00 · 80 阅读 · 0 评论 -
javascript 一些循环方法
遍历数组有很多方法, 最简单的便是for循环, 另外还有forEach、map、filter、some、every、reduce等 ;每种方法面向的场景是不一样的, 先讲一下使用, 性能嘛, 最后再看forfor循环是最基础的一种循环方式// 一般把长度先缓存, 避免重复获取, 无需多言const arr = [1,2,3,4,5]const len = arr.length;...原创 2019-05-26 12:08:12 · 325 阅读 · 0 评论 -
instanceof 原理和简单实现
1. 是什么在 MDN 上是这样描述 instanceof 的:instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象原型链中的任何位置2. 实现这里已经描述的很清楚了, 怎么实现呢思路:首先 instanceof 左侧必须是对象, 才能找到它的原型链instanceof 右侧必须是函数, 函数才会prototype属性迭代 , 左侧对象的原型...原创 2019-05-19 18:06:47 · 1298 阅读 · 0 评论 -
对CommonJS,AMD,CMD规范以及script标签异步加载的理解
1.牢骚CommonJS, AMD, CMD , 其实很早就接触过了。当时, 网上的文章看得眼花缭乱, 只依稀记得几个模糊的概念。什么依赖前置 , 什么按需加载。一头雾水。现在再回过头来看看概念 , 网上部分文章用词模棱两可。给我们这些菜鸡, 带来了理解的偏差和困惑。记得第一个项目还用了requireJS 。时过境迁,现在入门前端 , 都是直接上webpack了 。但...原创 2019-05-19 15:23:28 · 1530 阅读 · 2 评论 -
Javascript中创建对象的几种方式
最近看网上各种文章, 头异常的大, 于是稍微整理了一下单纯地创建对象, 使用Object构造函数, 或者字面量表示都 ok, 但是, 会产生大量重复代码这时, 群众想出了工厂模式工厂模式 function createPerson(name, job){ // 创建一个Object var o = new Object() o.name = name o.job = ...原创 2019-05-18 23:53:16 · 393 阅读 · 0 评论 -
ES6中的Symbol
原文SymbolSymbol是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID let s = Symbol()需要注意,不需要 new 关键字调用Symbol()函数时传入一个可选的字符串参数,相当于给你创建的Symbol实例一个描述信息: let s = Symbol('description')每个Symbol实例都是唯一的。当比较两个Symbol实例的时候...转载 2019-07-02 15:27:36 · 143 阅读 · 0 评论 -
Vue源码整理, 数据代理和响应式
最近看了一下Vue相关的东西 ,整理一下流程:1. 数据代理 -> Object.defineProperty() let vm = new Vue({ data:{ a:0 } }) // 为什么能通过 vm.a 访问到 data 中的 a ? // 因为会通过 Object.defineProperty 设置了数据代理 Obje...原创 2019-07-03 09:56:32 · 136 阅读 · 0 评论 -
客户端缓存
强缓存与强缓存主要相关的header字段有expires和cache-control:max-age=number。并且如果cache-control与expires同时存在的话,cache-control的优先级高于expiresexpires:这是http1.0时的规范,它的值为一个绝对时间的GMT格式的时间字符串,如Tue May 14 2019 00:00:10 GMT,如果获取时间在...原创 2019-07-09 23:15:39 · 514 阅读 · 0 评论 -
一个简单的微信小程序-赛博朋克2077倒计时-以及简单的云开发
AppID申请到一个小程序后, 会对应一个AppID基本目录结构- cloudfunctions 云函数目录- miniprogram 开发目录- README.md 描述项目- project.config.json 项目配置cloudfunctions结构如图, 每一个云函数会新建一个目录, index.js为入口, login / openapi 是自带的, 可以获取Ap...原创 2019-07-14 19:09:05 · 1021 阅读 · 0 评论 -
模拟apply/call/bind
call先看callcall() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。两点:call 改变了 this 的指向执行了实现思路, 举个例子: var foo = { value: 1 }; function bar() { console.log(this.value); } bar.call(f...原创 2019-07-04 19:34:23 · 107 阅读 · 0 评论 -
从ECMA规范的角度理解this的指向
1. 概念准备ECMAScript 的类型分为语言类型和规范类型。语言类型: Undefined, Null, Boolean, String, Number, 和 Object。规范类型: Reference, List, Completion, Property Descriptor, Property Identifier, Lexical Environment, 和 Environ...原创 2019-07-04 17:20:04 · 196 阅读 · 0 评论 -
CSS水平居中+垂直居中
水平居中行内元素, 父级是块级, 设置 text-align: center;块级元素, 宽度确定, margin: 0 auto;块级元素, 宽度不确定, display: inline-block 或 display: inline 其转换成行内块级, 再套用 1块级元素, 使用 绝对定位 position:absolute, left:50%, 然后 margin-left: -宽...原创 2019-07-14 09:22:54 · 81 阅读 · 0 评论