05 2017 档案
摘要：Promise 是什么 Promise是异步编程的一种解决方案。Promise对象表示了异步操作的最终状态（完成或失败）和返回的结果。 其实我们在jQuery的ajax中已经见识了部分Promise的实现，通过Promise，我们能够将回调转换为链式调用，也起到解耦的作用。 怎么用 Promise接
阅读全文
摘要：一、实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1、利用CSS样式实现过渡效果 <transition name="fade"></transition> v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 v-e
阅读全文
摘要：前言 使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位： 代码： 效果图： 是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到
阅读全文
摘要：Vue常用经典开源项目汇总参考-海量 Vue是什么？ Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vu
阅读全文
摘要：最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中，也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了——分页的样式。来张截图： 你在首页的底部也可以看到这样一个分页栏；是不是看上去还不错？下面就来看看这是如何实现的吧~ 第一种方法：利用border 一个
阅读全文
摘要：Vue均使用ES6语法，主要以单文件组件为例，写法上优先使用缩写。 React使用TS语法。 生命周期 Vue React 入口&根实例 Vue const app = new Vue({ /* 选项 */ render: (h) => h(App) // App为根组件 }).$mount('#a
阅读全文
摘要：虽然最近工作中没有怎么用 zepto ，但是据说 zepto 的源码比较简单，而且网上的资料也比较多，所以我就挑了 zepto 下手，希望能为以后阅读其他框架的源码打下基础吧。 源码版本 本文阅读的源码为 zepto1.2.0 阅读zepto之前需要了解 javascript 原型链和闭包的知识，推
阅读全文
摘要：JavaScript性能优化 DOM编程 最近在研读《高性能JavaScript》，在此做些简单记录。示例代码可在此处查看到。 一、DOM 1）DOM和JavaScript 文档对象模型（DOM）是一个独立于语言的，用于操作XML和HTML文档的程序接口（API）。 浏览器通常会把DOM和JavaS
阅读全文
摘要：Flex布局 display: flex; 将对象作为弹性伸缩盒展示，用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素 注意兼容问题： webkit内核浏览器应使用前缀-webkit IE浏览器，可以很好的兼容IE11+版本，对于IE10只有部分可以兼
阅读全文
摘要：引语 在1995年5月，Eich 大神在10天内就写出了第一个脚本语言的版本，JavaScript 的第一个代号是 Mocha，Marc Andreesen 起的这个名字。由于商标问题以及很多产品已经使用了 Live 的前缀，网景市场部将它改名为 LiveScript。在1995年11月底，Navi
阅读全文
摘要：在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。 你在前面看到，在new Vue()的时候，是可以给data直接赋值为一个对象的。这是怎么回事，为什么到了组件这里就不行了。 你要理解，上面这个操作是一个简易操作，实际
阅读全文
摘要：本文只是讨论和实现了动画效果，并未将动画与页面实际下载关联，有朋友们问如何应用，可以使用现成的一些插件比如这个，这个，还有这个。 1.jquery animate方法要应用到一个物体上，对它的某些属性运用动画，比如 1 $('div#example').animate({width:500px},1
阅读全文
摘要：meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 体验demo，解决在主屏幕打开页面后，点击页面链接不会跳转到系统自带的Safar
阅读全文
摘要：作为一个前端开发，一个主要的工作就是来实现设计师设计的UI界面。而在UI界面中，各种各样的形状元素应用则是随处可见，比如三角形： 以前碰到这种形状的时候，会使用各种黑科技的技巧，比如使用CSS中的border属性来模拟实现这类型的三角形就是一种主流的实现方法。 虽然种实现方法看起来很灵巧，但是为来实
阅读全文
摘要：今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果：http://www.hightopo.com/demo/blog_tplink_20170511/index.html 1、TP-LINK面板 我们从TP-LINK的设备面板开始
阅读全文
摘要：箭头函数 1. 简单的定义： 胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，是受到了CoffeeScript 的影响，并且它与CoffeeScript中的=>语法一样，共享this上下
阅读全文
摘要：underscore的源码中，有很多地方用到了 Array.prototype.slice() 方法，但是并没有传参，实际上只是为了返回数组的副本，例如 underscore 中 clone 的方法： 1 // Create a (shallow-cloned) duplicate of an ob
阅读全文
摘要：以 var arr = [1,2,3,1]; 作为测试用例 方法一：双循环 （时间复杂度比较高，性能一般。） A、(1) 输出 newArr 结果： B、(2) 输出 newArr 结果： tip: j = ++ i; 等价于 j = j+1; i = i+1; 整体思路就是 如果是重复元素，则跳过
阅读全文
摘要：在 zepto 源码中，$.fn 对象 有个 ready 函数，其中有这样一句 setTimeout(fn,0); 1 $.fn = { 2 ready: function(callback){ 3 // don't use "interactive" on IE <= 10 (it can fir
阅读全文
摘要：光速 React Vixlet 团队优化性能的经验教训 在过去一年多，我们 Vixlet 的 web 团队已经着手于一个激动人心的项目：将我们的整个 web 应用迁移到 React + Redux 架构。对于整个团队来说，这是不断增长的机遇，而在迁移过程中，我们一路风雨兼程。 因为我们的 web-a
阅读全文
摘要：前言 总括： 包含这三个月来碰到的一些觉得比较好的面试题，三个月没怎么写博客着实有些手痒，哈哈哈。7000余字，不成敬意2333 原文地址：我的前端进阶之路 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） 博主博客地址：Damonare的个人博客 原文地址：我的前端进阶之路 知乎专栏
阅读全文
摘要：1.首先介绍两者的用法： 1.1onXXXX的用法：以onclick为例 第一种： obj.onclick = function(){ //do something.. } 第二种： obj.onclick= fn; function fn (){ //do something... } 第三种：当
阅读全文
摘要：今天我们来讲述css3能够做成动画的最小独立单元,并且讲述如何使用这些独立的单元来构成一个‘高大尚’的组合动画。 这是我在网上找的一个案例，修改后的效果图，虽说不是特别的‘高大尚’，但我认为这也跟高大尚占了一点边了，中间的菜单按钮就是我们在做responsive开发时会用的到的效果，这是一个六边形的
阅读全文
摘要：直接安装git.exegit -- version 查看当前git版本进入要创建库的文件夹 shift+右键 弹出 powerShell 弹出命令窗口 git init 初始化git管理仓库 出现一个.git文件 默认的文件夹是隐藏的 注意电脑系统的文件浏览方式 git add filename.后
阅读全文
摘要：jQuery版本：2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完（内部使用） readyWait:等待多少文件的计数器（内部使用） holdReady():推迟DOM触发 ready():准备DOM触发。 jQuery.ready.promise=function(){}; 监听
阅读全文
摘要：一、开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈，结合V2EX的开放API开发了这个简洁版的V2EX。 在线预览 （为了实现跨域，直接npm run dev部署的，首次加载略慢） API来自官方以及djyde的整理。 项目地址：v2ex-vue 二、项目演示 分类
阅读全文
摘要：阅读目录 • 利用匿名函数自执行实现封装 • 面向对象（OOP）及代码大致结构简述 • 实现拖拽功能函数的详述 • JS面向对象OOP实现拖拽完整代码 阅读目录 • 利用匿名函数自执行实现封装 • 面向对象（OOP）及代码大致结构简述 • 实现拖拽功能函数的详述 • JS面向对象OOP实现拖拽完整代
阅读全文
摘要：概述 Redux-saga在Redux应用中扮演’中间件’的角色，主要用来执行数据流中的异步操作。主要通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作。 基本用法： API 用来监听action，每个action都触发一次，如果其对应是异步操作的话，每次都发起异步请求
阅读全文
摘要：开篇概述 在上篇博客中详解Google Chrome浏览器（理论篇）一文中，主要讲解了Chrome 搜索引擎使用、Chrome安装和基本操作、Chrome 基本架构、多线程等原理性问题，这篇将重点讲解Chro-me实操问题，主要结合“Chrome 主调试面板“,对Chrome,Elements,Co
阅读全文
摘要：近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下： 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想，也就是工程化解决方案。 多余的话不说，本人按照效果图介绍下自己的拙建，强烈希望各位给予建议和指正。 说明： 一
阅读全文
摘要：原文链接：https://css-tricks.com/using-fetch/。 本文介绍了Fetch基本使用方法及zlFetch库的使用 无论用JavaScript发送或获取信息，我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息，能使网页实现异步更新。 几年前，初始化Ajax一般使
阅读全文
摘要：一直都想写一个对话框，正好公司买了一个，就照着外观自己也写一个，每次写都会碰到意想不到的情况，通过解决这些情况，就很好的了解和学习了js知识。 先给出效果图： 这一次主要是碰到了一个问题：极短时间内多次按Enter键触发”发送内容不能为空“的提示，提示也会多次触发渐隐效果，但实际上应该是出发一次，后
阅读全文
摘要：直切主题 今天遇到一个这样的功能： 写一个函数，该函数传递两个参数，第一个参数为返回对象的总数据量，第二个参数为初始化对象的数据。如： 返回的该对象总会有以下属性：overLength（数据容纳量）、size（当前数据条数） 返回的对象应该有以下方法：cache（保存一条数据）、delete（删除一
阅读全文
摘要：vue的第一篇文章，介绍一下简单的nextTick方法的实现原理 简介 vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也
阅读全文
摘要：1、创建元素 动态创建新的DOM元素，是js操作网页对象模型的重要手段之一。 运行效果： 这里写图片描述 解析： 创建新元素通常有2种方法： 1、直接修改父元素的innerHTML元素； 2、使用createElement()来创建，再用appendChild()进行DOM元素的挂接。 第一种方法用
阅读全文
摘要：看vue.js有几天了，之前也零零散散的瞅过，不过一直没有动手去写过demo，这几天后台事比较少，一直在讨论各种需求（其实公司对需求还是比较重视与严谨的，一个项目需求讨论就差不多一周了，这要搁之前，天哪。。。），于是就琢磨着把vue简单的过下，如下所讲只是个人一些理解，不到的地方还望园友指正，涉及到
阅读全文
摘要：一：原型和原型对象： 1.函数的原型prototype：函数才有prototype，prototype是一个对象，指向了当前构造函数的引用地址。 2.函数的原型对象__proto__：所有对象都有__proto__属性， 当用构造函数实例化（new）一个对象时，会将新对象的__proto__属性指向
阅读全文
摘要：什么是JSONP? JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<sc
阅读全文
摘要：原本文章的名字叫做《源码解析》，不过后来想想，还是用“源码学习”来的合适一点，在没有彻底掌握源码中的每一个字母之前，“解析”就有点标题党了。建议在看这篇文章之前，最好打开2.1.7的源码对照着看，这样可能更容易理解。另外本人水平有限，文中有错误或不妥的地方望大家多多指正共同成长。 补充：Vue 2.
阅读全文
摘要：在JavaScript这门语言中，数据类型分为两大类：基本数据类型和复杂数据类型。基本数据类型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而复杂数据类型包括Object，而所有其他引用类型（Array、Date、RegExp、Function
阅读全文
摘要：数组去重的方法 第一种方法 Array.from方法可以将Set结构转为数组 1 2 let items = new Set([1, 2, 3, 4, 5]); let array = Array.from(items); 这就是提供了一种数据去重的方法 1 2 3 4 function uniq(
阅读全文
摘要：目录 vue的多页面 编写每个页面 修改webpack.config.js 开发环境访问页面 build 目录 vue的多页面 编写每个页面 修改webpack.config.js 开发环境访问页面 build 编写每个页面 修改webpack.config.js 开发环境访问页面 build vu
阅读全文
摘要：今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。 个人的css历史： 说说自己的css学习的历史，12年，当时是老师手把手1对1教我div+float的固定布局，所有元素全部用float，做了学生会网站的全部前端页面，因为有段时间学PS比较多
阅读全文
摘要：前面的话 根据闭包的定义，我们知道，无论通过何种手段，只要将内部函数传递到所在的词法作用域以外，它都会持有对原始作用域的引用，无论在何处执行这个函数都会使用闭包。接下来，本文将详细介绍闭包的7种形式 返回值 最常用的一种形式是函数作为返回值被返回 函数赋值 一种变形的形式是将内部函数赋值给一个外部变
阅读全文
摘要：摘录自《CSS核心技术详解》 1.1 CSS中你可能会疑问的几个问题 在CSS中可能会有多个样式表同时影响同一个元素的某个属性，设计这个功能的主要原因有两个，解决模块化和作者、用户、用户代理样式冲突。 模块化 一个页面中的样式可以拆分成多个样式表，代码如下。 但这种方式也会随之产生一个问题，即如果对
阅读全文
摘要：序 本人工作之余的闲暇时间还是很充裕的。在完成经理安排的任务后，基本上都是在自学，主要是阅读各种技术文档、浏览博客、运行别人写的一些前端demo并观赏与赞叹。在ScorpionJay 同学的带领下，我们决定决定做一个react版的音乐播放SPA（Single Page web Application
阅读全文
摘要：市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用
阅读全文
摘要：一、为什么需要模块化？ 代码量骤增 => 分治管理的刚性需求 二、模块化方案需解决什么问题？ 模块化要实现两个东西：模块加载与模块封装。面临的具体问题包括： 1、如何定义模块以确保模块的作用域独立，避免命名冲突？ 2、如何管理模块间的依赖关系，避免重复加载与循环引用？ 3、模块化的代码如何部署，以降
阅读全文
摘要：Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。本文仅探究双向绑定是怎样实现的。先讲涉及的知识点，再用简化得不能再简化的代码实现一个简单的 hello world 示例。 参考文章：https://segmentfault.com/a/1190000006599500 一、
阅读全文
摘要：本文以Windows平台上做测试，以gulp为示例做教程，出自作者白树，转载请声明！ 目录 npm是什么 npm install 安装模块 npm uninstall 卸载模块 npm update 更新模块 npm outdated 检查模块是否已经过时 npm ls 查看安装的模块 npm in
阅读全文
摘要：对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个<script>标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言，这
阅读全文
摘要：说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。
阅读全文
摘要：1. navigator.onLine 2. ajax请求 3. 获取网络资源 1. navigator.onLine 通过navigator.onLine判断当前网络状态： 非常简单，但是并不准确-根据MDN的描述：navigator.onLine只会在机器未连接到局域网或路由器时返回false，
阅读全文
摘要：flex;align-items: center;justify-content: center 此时表示将 id="example" 的元素的鼠标单击事件委托绑定到了 document 元素上，当目标元素（即 id="example" 的元素）触发鼠标单击事件的时候，该事件就会冒泡到 docume
阅读全文
摘要：随着前端异步的发展, XHR 这种耦合方式的书写不利于前端异步的 Promise 回调. 而且,写起来也是很复杂. fetch API 本来是在 SW(ServiceWorkers) 中提出的, 不过, 后面觉得好用, 就把他挂载到 window 对象下. 这样, 在前端的正常通信中, 我们也可以直
阅读全文
摘要：一、理解JavaScript的浮点数 由IEEE754标准制定，JavaScript中所有的数字都是双精度浮点数，即64位编码数字。JavaScript大多数的算术运算符可以进行整数、浮点数或者两者的组合进行计算。但是位运算符比较特殊，JavaScript不会直接把操作数作为浮点数进行运算。需要这些
阅读全文
摘要：前记：离上一篇博客的发布已经过去两个月了，这期间总想写点什么，却怎么都写不出来，一直拖到了现在。现在的感觉，不是像这期间一样，想好好整理一番，写一篇好博客，却写不出来。事实发现，随心就好，较好的博客，需要深入的技术，现在能力还不够，只能把所遇到的问题写出来，整理一下就好。周五了，一天过去了一半，利用
阅读全文
摘要：理解 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 使用组件 创建单文件组件 组件注册
阅读全文
摘要：Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛，从全局组件，到为应用添加一些额外的功能、如路由(Vue Router)，存储在应用程序里的不可变数据(Vuex)。 一般来说，Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有
阅读全文
摘要：ECMAScript3给Function的原型定义了两个方法，他们是Function.prototype.call 和 Function.prototype.apply. 在实际开发中，特别是在一些函数式风格的代码编写中，call和apply方法尤为有用。 call和apply区别 其实他们的作用是
阅读全文
摘要：很开心，最近收获了很多知识，而且发现很多东西，以前理解的都是错的，或者是肤浅的，还以为自己真的就get到了精髓，也很抱歉会影响一些人往错误的道路上走，不过这也告诉了我们，看任何一篇文章都不能盲目的去相信，要实践验证再验证。今天就重新整理一下，我对面向对象的理解，当然也不保证完全正确的，但绝对是在进步
阅读全文
摘要：React是一个UI层面的库，它采用虚拟DOM技术减少Javascript与真正DOM的交互，提升了前端性能；采用单向数据流机制，父组件通过props将数据传递给子组件，这样让数据流向一目了然。一旦组件的props或则state发生改变，组件及其子组件都将重新re-render和vdom-diff，
阅读全文
摘要：阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。 由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScr
阅读全文
摘要：一、对象 1.1 获取属性值的方式 1.2 获取动态生成的属性的值 二、数组 2.1 检测是否为数组 2.2 增加数组长度导致未赋值的位置为undefined 减少数组长度则会裁去多余的值。 2.3 用闭包实现简易迭代器 三、作用域 3.1 函数作用域（局部变量） 不能在函数体外直接访问函数内变量。
阅读全文
摘要：在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优缺点。 CSS Media Queries 通过媒体查询的方式，我们可以通过以下方法来实现根据横竖屏不同的情
阅读全文
摘要：纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。 这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经有了比较全面客观的介绍，并且是中文的。 上图是二月份前端框架排名，React 位居第一，Vue 排名第三。还清晰记得，16 年十月份该 sho
阅读全文
摘要：作者：朱灵子 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。本文初探react的顶层事件代理机制~ 顶级事件代理机制 React采用的是顶层的事件代理机制，能
阅读全文
摘要：究竟该用字体图标、图片图标、还是CSS画一个图标？我也不知道。各有千秋吧。本文将介绍如何用css绘制简单的图形，所有测试在chrome58.0完成，如果你不能得到正确结果请到caniuse查一查看看是不是需要什么前缀。 一、基础 上面代码的效果是这样的 border是如何工作的，你可以从上面的结果自
阅读全文
摘要：vue在官方文档中提到与react的渲染性能对比中，因为其使用了snabbdom而有更优异的性能。 JavaScript 开销直接与求算必要 DOM 操作的机制相关。尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点，但 Vue 的 Virtual Dom 实现（复刻自 sn
阅读全文
摘要：前面曾经写过一篇《H5图片裁剪升级版》，但里面需要借助第三方手势库，这次就不需要使用手势库，全部封装在代码中。 下图是裁剪的展示，下面就做了拖放和裁剪，没有做缩放，在插件中需要用到大量的计算。veImage的源码可以在此处浏览。 一、原理 1）拖动、缩放、裁剪都是借助Canvas实现的。Canvas
阅读全文
摘要：本文首发我的个人博客：前端小密圈，评论交流送1024邀请码，嘿嘿嘿😄。 来自朋友去某信用卡管家的做的一道面试题，用原生JavaScript模拟ES5的bind方法，不准用call和bind方法。 至于结果嘛。。。那个人当然是没写出来，我就自己尝试研究了一番，其实早就写了，一直没有组织好语言发出来。
阅读全文
