-
制作按钮水波纹效果
制作按钮水波纹效果对于水波纹按钮大家都不陌生，它其实是手机原生自带的一个效果，但是对于web端是没有此效果的，接下来我们就来探讨如何去模拟一个这样的效果。我们来看效果图要完成以上效果首先我们的思路是通过点击外层触发点击事件，收集点击次数然后创建与点击次数相同的水波纹动画组件。然后每当水波纹组件动画执行完之后去销毁当前这个水波纹组件。第一步我们先去制作这个水波分动画组件// wave.vue<template> <transition name="wave" @...…
-
数据响应
ProxyProxy是 ES6 中新增的功能，它可以用来定义对象中的操作。let p = new Proxy(target,handler)target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。接下来我们通过 Proxy来实现一个数据响应式。let onWatch = (object, setBind, getLogger) => { let handler = { // 目标对象 target /...…
-
JS 基础知识点
typeof vs instanceoftypeof 对于原始类型来说，除了null都可以显示正确的类型typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'```javascripttypeof [] // 'object'typeof {} // 'object'typeof console.l...…
-
手写一个Promise
首先我们先去了解一下Promise/A+规范.Promise 相关术语 解决(fulfill): 指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后来的 promise 实现多以 resolve 来指代之。 拒绝(reject)：指一个 promise 失败时进行的一系列操作。 终值(eventual value)：所谓终值，指的是 promise 被解决时传递给解决回调的值，由于 promise 有一次性的特征...…
-
js属性兼容
getElementsByClassName兼容(只支持单个className查找) /* * node {节点名称} * * classname {需要查找的class名称} */ function getElementsByClassName(node,classname) { if (node.getElementsByClassName) { // 使用现有方法 return node.getEle...…
-
Vue内部运行机制 读书笔记
内部流程图初始化及挂载在 new Vue()之后。Vue调用 _init()函数进行初始化， 它会初始化 initLifecycle 初始化生命周期钩子 、 initEvents 初始化事件方法 、 initState 初始化状态 、 initRender 初始化渲染 。 其中 initEvents 初始化事件方法之后 会调用 回调生命周期钩子 beforeCreate 和 initState 之后还会调用 回调生命周期钩子 created 。其中最重要的是通过 Object.def...…
-
Vue源码学习-基于2.1.7-主线
Vue源码主线Vue构造函数位于src/core/instance/index.js文件中instance是存放Vue构造函数设计相关代码的目录。寻找过程如下：src/core/instance/index.js文件说明：import { initMixin } from './init' // 初始化相关代码import { stateMixin } from './state' // 状态相关代码import { renderMixin } from './render' // 渲染相...…
-
一些基础知识
获取元素的最终background-color// 作用是将连字符类的css属性值，转换成驼峰写法。function camelize (str) { return str.replace(/-(\w)/g, function (strMatch, newStr) { return newStr.toUpperCase(); });}// 获取特定元素的计算样式function getStyle (ele, property) { if (!ele || !property) ...…
-
一些网络知识
HTTP代理原理及实现HTTP代理有两种形式，分别简单介绍如下：第一种是RFC描述的普通代理。这种代理扮演的是[中间人]的角色,对于链接到它的客户端来说，它是服务端；而对于链接到服务端来说，它是客户端，它负责两端来回传送HTTP报文。 客户端 —–> 服务端(此时的RFC就是服务端) (此时的RFC就是客户端)客户端 <—– 服务端第二种是TCP(通过web代理服务器用隧道方式传输基于TCP的协议)描述的隧道代理。它通过HTTP协议正文部分(Body)完成通讯，以HTTP的方...…
-
如何编写一个无限滚动高性能的组件
简介本篇文章解析了vue-virtual-collection组件是如何巧妙运用了“块渲染”的思想去渲染需要的数据。可以参考下图：该图片完美的解析了“块渲染的思想” , 让我们来分析一下上图。为了高效计算视图中显示那些块,我们可以先定义一个 div 为 X * X , 所有与这个div有重叠的Cell(块)都会在这个块记录下来，然后把这个Cell(块)保存到一个Map(相当与一个字典)中,那么当滚动发生时我们就可以从这个Map(相当与一个字典)中找到当前需要渲染出来的块,就不用再去遍历所有...…
-
关于Vue中nextTick异步调用video&audio的方法失效解决方案
问题的本质nextTick JS的运行机制：JS执行是单线程的,它是基于事件循环的对于事件循环的理解大致分为以下几个步骤： 所有同步任务都在主线程上执行,形成一个执行栈。 主线程以外,还存在一个“任务队列”。只要异步任务有了运行结果,就在“任务队列”之中放置一个事件。 一旦”执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看看里面有哪些事件对应的那些异步任务,结束等待,进入执行栈,开始执行。 主线程不断重复上面的第三步。主线程的执行过程就是一个tick,而所有的异步结...…
-
Weex. 2.x+版本最新打包发布apk教程
最近在研究weex这东西发现这东西贼多坑跟着官网的demo一步步走居然跑不起来，当时真的惊Σ( ° △ °|||)︴了！我不断吐槽啊里这文档是给他内部员工看的吧~~~真不是一般人能看懂~然后经过不断的探索查看的 安卓的SDK安装终于明白了怎么让他跑起来了。废话不多少先开始教程吧。~ 还有一件事，不相信的小伙伴可以跟着官网demo一步步去跑。先安装weex-toolkit 一定要npm安装，不要用cnpm 以为有一些包cnpm是安装不了的 npm install -g weex-too...…
-
JS模块化CommonJS、AMD、CMD、UMD简介
CommonJSNodejs的模块系统就采用CommonJS模式。CommonJS标准规定，一个单独的文件就是一个模块，模块内将需要对外暴露的变量放到exports对象里，可以是任意对象，函数，数组等，未放到exports对象里的都是私有的。用require方法加载模块，即读取模块文件获得exports对象。{ id: '...', exports: { ... }, loaded: true}id是模块名，exports是该模块导出的接口，loaded表示模块是否加载完毕。以后需要...…
-
JS原型链
什么是闭包（closure），为什么要用它？ 闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方法就是在一个函数内创建另一个函数,用过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域。 闭包的特征： 1.函数内再嵌套函数 2.内部函数可以引用外层的函数和变量 3.参数和变量不会被垃圾回收机制回收 例子如下：for (var i = 0; i < 5; i++) { (function(i) { setTimeout(f...…
-
一些JS方法
二分搜索二分搜索法,也称折半搜索，是一种在有序数组中查找特定元素的搜索算法。有序的二分查找，返回-1或存在的数组下标。不使用递归实现function binarySearch (target, arr) { var start = 0; var end = arr.length - 1; while (start <= end) { var mid = parseInt(start + (end - start) / 2); // 获取中间值取整 ...…
-
JS经典算法
前言在传统的计算机算法和数据结构领域，大多数专业教材和书籍的默认语言都是Java或者C/C+ +，对于一个前端来说，尤其是笔试面试的时候，算法方面考的其实不难（十大排序算法或是和十大排序算法同等难度的），但就是之前没用javascript实现过或是没仔细看过相关算法的原理，导致写起来浪费很多时间。所以撸一撸袖子决定自己查资料自己总结一篇博客等用到了直接看自己的博客就OK了，正所谓靠天靠地靠大牛不如靠自己(ˉ(∞)ˉ)。正文排序算法说明(1) 排序的定义：对一序列对象根据某个关键字进行排序。...…
-
Python暴力破解zip
在这个压缩包泛滥的时代,加密的压缩包更是数不剩数,然而当人们下载下来时发现压缩包被加密了,瞬间感到绝望。 人们想进办法去查看加密压缩包里面的东西,最后都是无功而返。 本文将带领大家如何用python暴力破解zip密码。正文目前我们已知的破解zip的方式只有“Known plaintext attack”和“暴力破解”。 “Known plaintext attack”的最大缺点是有比较大的局限性。“暴力破解”需要密码字典去破解,遇到复杂度教高的密码时破解时间变得非常长。配置环境安装pyth...…
