- 博客(80)
- 收藏
- 关注
RSS订阅原创 如何用console.log输出pornhub图标(误)
下午写了一下shell脚本, 突然想到chrome的devtool是不是也支持字体颜色, 本着上下求索和学以致用的精神,试了一下确实可以
2021-09-04 11:50:59
1382
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
233
原创 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
原创 链式调用
问题上次被问到链式调用怎么实现, 而且需要中间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
157
原创 哪些场景不适合箭头函数
由于箭头函数的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
569
原创 Vue.set()
现象我们知道, 下面两种操作, 不会触发视图更新:根据索引修改数组某项给对象新增属性const vm = new Vue({ data: { arr: [1, 2], obj: { a: 3 } }});vm.arr[0] = 3; // 这种操作页面不会重新渲染vm.obj.b = 3; // 这种操作页面不会重新渲染数组和对象set之后区别区别...
2019-08-08 17:14:12
214
原创 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
371
转载 webpack相关
webpack3和webpack4的区别mode/–mode参数新增了mode/–mode参数来表示是开发还是生产（development/production）production 侧重于打包后的文件大小，development侧重于goujiansud移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）移除了...
2019-08-06 22:17:52
83
转载 Bundle VS Chunk VS Module
首先对于“模块”(module)的概念相信大家都没有异议，它指的就是我们在编码过程中有意识的封装和组织起来的代码片段。狭义上我们首先联想到的是碎片化的 React 组件，或者是 CommonJS 模块又或者是 ES6 模块，但是对 Webpack 和 Loader 而言，广义上的模块还包括样式和图片，甚至说是不同类型的文件而“包”(bundle) 就是把相关代码都打包进入的单个文件。如果你...
2019-08-05 22:19:01
833
转载 this的指向
this的绑定规则有哪些？默认绑定隐式绑定显式绑定 / 硬绑定new绑定默认绑定在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。如下， 严格模式下this为undefined function sayHi(){ console.log('Hello,', this.name); } var name = 'gg'; sayHi(); //gg隐式...
2019-08-05 18:19:18
101
原创 EventEmitter简单实现
Vue里面用过eventBus作为通信，方式，实现方式是用Vue函数的$on/$emit方法。这种方式可以叫做发布订阅模式简单实现一下 class Event { constructor() { // 创建一个事件对象 this.events = Object.create(null); // events: { // hehe: ...
2019-08-05 17:57:12
2166
1
原创 git常用操作总结
// 撤回修改到最近一次add或最近一次commit状态, // 例如已经add到暂存区, 然后再修改, 会回到最近的add的状态; // 例如已经commit提交了, 然后再修改, 会回到最近的commit的状态; // 即撤销修改 git checkout -- filename // 将修改从暂存区撤回到工作区, 即已经add了, 需要回到未add的状态 // 不加参数...
2019-07-28 13:34:07
88
原创 不可扩展对象、密封对象、冻结对象
不可扩展对象 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
148
原创 CSRF和XSS
CSRFCSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。简单点说，CSRF 就是利用用户的登录态发起...
2019-07-27 09:37:52
105
原创 ft/fl面试/笔试题
fustu左固定两百, 右自适应, 至少三种方案, 优缺点递归斐波那契数列, 尾递归优化checkbox表单以及, 参数请求方式{}[]括号匹配 O(n)两个有序数组, 一个是另一个子集, 不能用数组api说说项目架构在项目组担任什么角色缓存有什么类型fuslin9. 跨域10. 无序数组中位数, 要求时间复杂O(logn)11. csrf和xss具体例子和详细过程1...
2019-07-27 09:34:48
251
原创 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
原创 梳理几个简单的设计模式
大致分为三类创建型行为型结构型创建型工厂模式暴露出一个工厂方法，实际上建造什么样的实例对象（也就是new 哪一个构造函数）我们不用关心单例模式保证一个类仅有一个实例。结构型适配器模式是指将一个接口转换成自己希望的另外一个接口。比如获取到后端传来的数据，但这个数据不是我们想要的格式, 这个时候就可以用适配器方法来转换一下装饰器模式是指在不改变原对象的基础上，通过对...
2019-07-26 16:00:40
90
原创 图片下载/预览简单实现 , 以及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
原创 千分位逗号分隔
toLocaleString() 123456489656456..toLocaleString('en-US') // 带小数,但是toString, toLocaleString只能保留两位 123456489656456.45764655.toLocaleString() // "123,456,489,656,456.45"正则 // 带有小数的还没想到 12345...
2019-07-25 20:17:13
350
原创 cookie查看和操作
问题之前面试的时候问到，cookie有哪些属性， 怎么删除一个cookie， 答的吞吞吐吐， 整理一下cookie查看以github为例：cookie的字段namecookie的名字，一个域名下绑定的cookie，name不能相同，相同的name的值会被覆盖掉（但是name 相同，只要 cookie 的 domain ，path ， secure 有一项不同，就是不同的 cookie...
2019-07-22 13:08:17
4774
原创 面试-尾调用优化
场景今天去面试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
原创 二分查找
二分查找 // 非递归算法 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
原创 严格模式
变量必须声明后再使用函数的参数不能有同名属性，否则报错不能使用with语句不能对只读属性赋值，否则报错不能使用前缀 0 表示八进制数，否则报错不能删除不可删除的属性，否则报错eval不会在它的外层作用域引入变量eval和arguments不能被重新赋值arguments不会自动反映函数参数的变化不能使用arguments.callee不能使用arguments.caller禁...
2019-07-16 19:39:40
76
原创 new操作符过程，发生了什么
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：创建一个空的简单JavaScript对象（即{}）； var obj = {};设置原型链，将obj的__proto__成员指向了构造函数的prototype obj.__proto__ = xx.prototype;将步骤1新创建的对象作为this的上下文 ；...
2019-07-15 23:49:03
1138
原创 空对象判断
转换成字符串? 不严谨, 值为undefined的属性会丢失 var data = {a:undefined}; alert(JSON.stringify(data) === "{}");
2019-07-15 09:27:48
74
原创 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
3080
原创 一个简单的微信小程序-赛博朋克2077倒计时-以及简单的云开发
AppID申请到一个小程序后, 会对应一个AppID基本目录结构- cloudfunctions 云函数目录- miniprogram 开发目录- README.md 描述项目- project.config.json 项目配置cloudfunctions结构如图, 每一个云函数会新建一个目录, index.js为入口, login / openapi 是自带的, 可以获取Ap...
2019-07-14 19:09:05
1031
转载 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
从浏览器地址栏输入url到显示页面的步骤从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)在浏览器地址栏输入URL浏览器查看缓存 ，如果请求资源在缓存中并且新鲜，跳转到转码步骤如果资源未缓存，发起新请求如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：HT...
2019-07-14 10:00:37
1092
原创 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
82
原创 对象深拷贝/数组扁平化总结
深拷贝递归 const deepClone = (obj) => { let res = Array.isArray(obj) ? [] : {} if (obj && typeof obj === "object") { for (let key in obj) { if (obj.hasOwnProp...
2019-07-14 09:15:33
220
原创 vue项目架构
- public - libs - index.html - src => - api --> 请求所需接口 - asset --> 静态资源文件 - config --> 常量, 公用配置 - lang --> 前端静态多语言文件 - router -->路由分模块, index入口 - services -> 公用方法 ...
2019-07-13 16:46:46
904
原创 数组去重
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
93
原创 判断NaN
// isNaN() 会发生转换, 不严谨, 凡是无法转换成数字的都能成立 isNaN(NaN) // true isNaN('hehe') // true // Number.isNaN() es6 将 isNaN 移植到了 Number 上 Number.isNaN(NaN) // true Number.isNaN('hehe') // false // 还有一种方...
2019-07-11 13:14:55
2969
转载 async / await 为什么叫异步
外异内同看看下面这段代码 async function task () { for (let val of [0, 1, 2, 3]) { let address = ['https://mp.csdn.net','https://mp.csdn.net/mdeditor','https://baidu.com','https://mp.csdn.net/mdeditor']...
2019-07-10 17:32:17
436
转载 http2 多路复用
HTTP2采用二进制格式传输，取代了HTTP1.x的文本格式，二进制格式解析更高效。多路复用代替了HTTP1.x的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。在HTTP1.x中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接都限制。同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。单个连接上可以并行交错的请...
2019-07-10 12:18:58
770
原创 ES6注意点
let && const拥有块级作用域不可重复声明暂时性死区 (作用域内声明前, 不可用, 报错)未声明前, typeof也是直接报错, 但typeof一个为定义的变量不会报错, 输出undefined (typeof不再安全)const，声明必须赋值 (并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动)let、const、class声明的全...
2019-07-10 10:14:53
210
原创 sleep实现
function sleep(interval) { return new Promise(resolve => { setTimeout(resolve, interval); })}// 用法async function one2FiveInAsync() { for(let i = 1; i <= 5; i++) { console.log(i...
2019-07-10 10:11:09
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人