javascript
Geronimo邈
Don't be evil
展开
-
ES6函数式编程笔记-1
好书 ( 强推掌握ES6 的一些基本即可试读本书由浅入深 层层递进书中代码仓库一些概念及代码一等公民当一门 允许函数作为任何其他数据使用时合理代码必要的注释见名知意函数不应依赖全局变量若并发执行 结果难以预料闭包函数作用域自身内声明变量全局变量访问对外部函数变量访问高阶函数Higher-Order Function( HOC )...原创 2019-12-21 21:43:56 · 151 阅读 · 0 评论 -
js 原型 与 原型链
title: js 原型 与 原型链time: 2019-11-26author: wsmmail: 1030057982@qq.comgithub: https://github.com/Geronimomiao/advance基础每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包...原创 2019-11-29 16:49:36 · 139 阅读 · 0 评论 -
js 事件机制
title: js 事件机制time: 2019-11-6author: wsmmail: 1030057982@qq.com监听事件var EventUtil ={ addHandler: function(element, type, handler){ //w3c if(element.addEventListener){ ...原创 2019-11-07 10:34:39 · 115 阅读 · 0 评论 -
做一个酷网站(2)
成品成品源码接上篇博客 相信你根据 Demo 的源代码 已经可以制作一个简单的动态网站了核心思想同时动态修改 style 标签 和 页面上 某个元素的内容产生一种网站在动态展示的效果知识点ES6 箭头函数使用setInterval(fn, n)substring(n, m)document.querySelector()dom 元素 innerHTML 修改...原创 2019-10-30 21:28:26 · 181 阅读 · 0 评论 -
做一个酷网站(1)
成品成品源码前置知识( 先了解这 3 个函数的基本用法setInterval(fn, n)substring(n, m)document.querySelector()核心让 css 代码 和 dom 节点的内容 同时被渲染可以理解 为一行一行 的展示 css 代码对页面的影响Demo源码...原创 2019-10-23 20:08:08 · 233 阅读 · 0 评论 -
重学前端--浏览器部分(一)
大概过程浏览器首先使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面把请求回来的 HTML 代码经过解析,构建成 DOM 树计算 DOM 树上的 CSS 属性最后根据 CSS 属性对元素逐个进行渲染,得到内存中的位图一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度合成之后,再绘制到界面上从 HTTP 请求回来,就产生了流式的数据,后续的 DOM 树构建、C...原创 2019-08-13 12:05:10 · 108 阅读 · 0 评论 -
javascript 基础( 二 )
什么是提升?什么是暂时性死区?var、let 及 const 区别函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部var 存在提升,我们能在声明之前使用。let、const 因为暂时性死区的原因,不能在声明前使用var 在全局作用域下声明变量会导致变量挂载在 window 上,其他两者不会let 和 const 作用基本一致,但是后者声明的变量...原创 2019-08-21 16:36:07 · 98 阅读 · 0 评论 -
XSS XSRF 介绍与防范
XSSDefinition存储型 XSS反射型 XSSDOM 型 XSSDOM 型 XSS 跟前两种 XSS 的区别:DOM 型 XSS 攻击中,取出和执行恶意代码由浏览器端完成,属于前端 JavaScript 自身的安全漏洞,而其他两种 XSS 都属于服务端的安全漏洞。Demo攻击者发现 http://m.exmail.qq.com/cgi-bin/login?uin=aa...原创 2019-08-15 11:59:24 · 716 阅读 · 0 评论 -
js短路,||、&&、!!短路运算符的使用
正如标题所言,js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了,下面有个不错的示例,在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true.||,先计算第一个运算数,如果可以被转换成true,则返回左边这个表达式的值,否则计算第二个运算数。即使||运算符的运算数不是布尔值,任...转载 2019-08-06 08:38:10 · 253 阅读 · 0 评论 -
js 函数 -- 节流 防抖 分时 惰性加载
节流函数由来在某些场景下,函数可能被非常频繁地调用,而造成大的性能问题window.onresizemousemove 等等原理当函数被频繁调用 需要我们按时间段忽略掉一些请求coding// 实现一function throttle(fn, interval = 300) { let canRun = true; return function () {...原创 2019-07-28 09:39:30 · 153 阅读 · 0 评论 -
Event Loop
Whatevent loop是一个执行模型,在不同的地方有不同的实现。浏览器和NodeJS基于不同的技术实现了各自的Event LoopHow宏队列,macrotask,也叫tasks。 一些异步任务的回调会依次进入macro task queue,等待后续被调用宏队列,macrotask,也叫tasks。 一些异步任务的回调会依次进入macro task queue,等待后续被调用...原创 2019-08-22 13:55:46 · 76 阅读 · 0 评论 -
设计模式(补充)
设计原则单一职责原则一个对象(方法)只做一件事情最少知识原则对客户屏蔽子系统的复杂性 只暴露必要的接口 API 对外界访问开发-封闭原则软件实体(类 模块 函数)等应该是可扩展的 但是不可修改当需要改变一个程序 或者给这个程序增加新功能的时候 可以使用增加代码的方式 但不允许修改程序的源代码代码重构提炼函数避免出现超大函数独立出来的函数有助于代码的...原创 2019-08-28 16:12:18 · 73 阅读 · 0 评论 -
在微信小程序使用阿里矢量图标
在微信小程序使用阿里矢量图标首先 选图标 并将代码下载至本地https://transfonter.org/ ( 去该网站 将下载 .ttf 文件 转成 base64 )建 xxx.wxss 文件在 app.wxss 引入...原创 2019-08-29 08:02:06 · 294 阅读 · 0 评论 -
this.data 与 this.setData({})
this.setData 对界面进行刷新this.data 仅仅是对数据进行更新原创 2019-09-04 10:43:17 · 245 阅读 · 0 评论 -
js this 指向
JS 函数调用 4 种模式Function Invocation Pattern无论在哪 直接调用函数名 this 指向 windows箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 thisfunction printThis() { console.log(this) let print = function () { console.log(this) }...转载 2019-09-25 10:51:41 · 90 阅读 · 0 评论 -
js 垃圾回收
JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是时时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这...转载 2019-09-25 22:20:36 · 102 阅读 · 0 评论 -
设计模式---再学习
理解使用前人 总结好的经验 技巧有助于写出健壮的 可维护的代码核心封装变化原则开放-封闭原则软件实体(类 对象 函数) 可以拓展 不可以修改构造器模式function User(name , age, career) { this.name = name this.age = age this.career = career }c...原创 2019-09-29 08:25:15 · 86 阅读 · 0 评论 -
浏览器 URL 输入 到页面展示 发生了什么
序老生长谈的问题一个普通的问题 却能大致看出一个人的基本水准过程域名解析-TCP分包-IP寻路-握手-滑动窗口传输-持久化连接-挥手-解析-构建dom树与cssom-构建渲染树-回流-重绘-渲染...原创 2019-10-02 11:25:36 · 98 阅读 · 0 评论 -
闭包 && 高阶函数
闭包变量作用域函数可以用来创造作用域 就像一块半透明的玻璃 函数里面可以看到外面的变量 而外面看不到里面的变量在函数中搜索一个变量 如果函数内部没有声明这个变量 那么此次搜索过程会伴随代码的执行环境创建的作用域链往外层逐层搜索 一直搜索到全局对象为止变量生存周期全局变量生存周期是永久的 而函数中声明 var 变量 随函数调用的结束 便会被销毁闭包局部变量所在环境能被外...原创 2019-07-27 13:08:10 · 128 阅读 · 0 评论 -
js 精度丢失问题
引子原因二进制模拟十进制进行计算时 的精度问题解决方案// 转为整数function add(num1, num2) { const num1Digits = (num1.toString().split('.')[1] || '').length; const num2Digits = (num2.toString().split('.')[1] || '').length;...转载 2019-07-31 10:22:54 · 133 阅读 · 0 评论 -
BScroll 使用(Vue)
下载npm install better-scroll --save引包import BScroll from ‘better-scroll’使用重点:固定最外层容器高度外层容器的第一个子元素高度 要超过外层容器高度官方文档...原创 2019-03-13 11:07:48 · 11518 阅读 · 0 评论 -
Vue 实用知识点
返回上级页面this.$router.go(-1)Vue 项目子路由 不继承父元素路由* Vue 给组件绑定的事件为什么无法触发在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符Vue 事件监听*异步操作解决方法async await在组件内 应用 Vuex 中的属性import { mapState } ...原创 2019-03-13 11:10:18 · 159 阅读 · 0 评论 -
浏览器渲染页面过程
浏览器渲染页面从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上DNS 查询TCP 连接HTTP 请求服务器响应客户端渲染DNS 查询我们在浏览器输入网址,其实就是要向服务器请求我们想要的页面内容,所有浏览器首先要确认的是域名所对应的服务器在哪里。将域名解析成对应的服务器IP地址这项工作,是由DNS服务器来完成的。客户端收到你输入的域名地址后,它首先...原创 2019-04-27 18:14:53 · 151 阅读 · 0 评论 -
Vue (事件监听 Vuex调用 vue-router 动画特效)
vue-router返回上级页面this.$router.go(-1)Vue 项目子路由 不继承父元素路由Vue 给组件绑定的事件为什么无法触发在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符vue-router 传参方法推荐链接缓存部分页面 <keep-alive> <route...原创 2019-04-25 13:38:15 · 332 阅读 · 0 评论 -
JavaScript 的作用域
本文转自https://juejin.im/post/5aa1eb056fb9a028b77a66fd 学了好久的 Javascript 惭愧仍然没有总结完全作用域,今天老夫就来总结一番:涉及内容:全局作用域函数作用域块级作用域词法作用域动态作用域 动态作用域跟 this 引用机制相关全局作用域:作用域,是指变量的生命周期(一个变量在哪些范围内保持一定值)。全局变量...转载 2019-05-16 23:04:24 · 88 阅读 · 0 评论 -
babel 使用
Babel作用babel 是一个广泛使用的 es6 转码器,可以将 es6 转为 es5 从而从现有环境中执行配置文件 .babelrc设置转码规则和插件{ "preset": [ ], "plugins": [ ]}ES2015转码规则$ npm install --save-dev babel-preset-es2015react转码规则$ npm install -...原创 2019-06-07 19:26:28 · 108 阅读 · 0 评论 -
yarn 安装及基本命令使用
简介yarn是facebook发布的一种包管理工具会缓存它下载的每个包, 无需重复下载;能并行化操作以最大资源利用率使用格式详尽而又简洁的 lockfile文件 和确定性算法来安装依赖,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上安装包被执行前校验其完整性安装npm install -g yarn使用// 初始化yarn init // 添加包y...原创 2019-06-07 19:50:05 · 13189 阅读 · 0 评论 -
Cookie 携带问题
Cookie 携带问题fetch在默认情况下, 不管是同域还是跨域ajax请求都不会带上cookie, 只有当设置了 credentials 时才会带上该cookie, 服务端需要设置响应头 Access-Control-Allow-Credentials: true, 否则浏览器会因为安全限制而报错, 拿不到响应fetch 请求携带cookiefetch(url, { ...转载 2019-06-14 15:22:36 · 2375 阅读 · 0 评论 -
http 报文
http的请求报文请求行 请求头部 空行 请求体http的响应报文响应行 响应头 空行 响应体补充未与服务端正确通信。该文件是从缓存中获取的并未进行通信,所以详细标头并不会显示。强缓存 from disk cache 或者 from memory cache ,都不会正确的显示请求头。size 4种情况from disk cache表示此资源是取自磁盘,不...原创 2019-06-14 16:50:42 · 102 阅读 · 0 评论 -
前端优化小技巧
DNS 预读取X-DNS-Prefetch-Control: on X-DNS-Prefetch-Control: offX-DNS-Prefetch-Control 头控制着浏览器的 DNS 预读取功能。 DNS 预读取是一项使浏览器主动去执行域名解析的功能,其范围包括文档的所有链接,无论是图片的,CSS 的,还是 JavaScript 等其他用户能够点击的 URL// 打开和关闭...原创 2019-06-14 19:29:19 · 124 阅读 · 0 评论 -
javascript 基础( 一 )
数组操作push pop shift unshift splice 在原数组基础上修改concat slice filter 返回一个新数组filter 过滤操作,筛选符合条件的所有元素,若为true则返回组成新数组map 映射操作,对原数组每个元素进行处理,并回传新的数组reduce 归并操作,总共两个参数,第一个是函数,可以理解为累加器,遍历数组累加回传的返回值,第二个是初始数值。如...原创 2019-08-19 22:34:57 · 106 阅读 · 0 评论 -
js this 指向 call apply bind
箭头函数没有自己的this 所以bind 方法无效 内部this都指向外部的this函数体内 this 对象 就是定义时所在对象 而不是使用时所在对象(function() { return [(() => this.x).bind({x: 'inner'})()];}).call({x: 'outer'}) // ['outer']...原创 2019-06-24 10:24:27 · 109 阅读 · 0 评论 -
socket.io 学习
客户端import socket from 'socket.io-client';const chat = socket('ws://127.0.0.1:3000');chat.on('news', function (data) { console.log(data); chat.emit('my other event', { my: 'data' })...原创 2019-07-03 17:34:29 · 121 阅读 · 0 评论 -
async await promise解决异步问题
传统回调fetch('https://api.github.com/users').then(res => res.json()).then(json => { console.log(json) fetch('https://api.github.com/users/Geronimomiao').then(res => res.json()).then(json2 =&g...原创 2019-07-05 14:14:23 · 432 阅读 · 0 评论 -
js 正则表达式
原始(Primitive)类型booleannullundefinednumberstringsymbol首先原始类型存储的都是值,是没有函数可以调用的对象(Object)类型JS 中,除了原始类型那么其他的都是对象类型了对象类型和原始类型不同的是,原始类型存储的是值,对象类型存储的是地址(指针)...原创 2019-07-06 10:18:20 · 75 阅读 · 0 评论 -
koa 学习笔记
koa 是什么Koa 是一个新的web 框架,由Express 幕后的原班人马打造, 致力于成为web 应用和API 开发领域中的一个更小、更富有表现力、更健壮的基石洋葱模型const Koa = require('koa') // 类名一般要大写const app = new Koa() // 实例化/** node 进程 如果没有重启的话 做得修改是没有用的* */app....原创 2019-07-21 19:16:15 · 761 阅读 · 0 评论 -
设计模式(javascript)
设计原则找出应用中可能需要变化之处,把他们独立出来,不要和那些不需要变化的代码混在一起针对接口编程 而不是针对实现编程原创 2019-08-03 09:17:01 · 90 阅读 · 0 评论 -
vue 项目初始化
yarn安装 package.json 中所有依赖yarn/yarn install添加一个依赖yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]更新一个依赖yarn upgrade [package]yarn upgrade [package]@[version]yarn...原创 2019-03-06 08:51:11 · 139 阅读 · 0 评论