- 博客(238)
- 收藏
- 关注
RSS订阅原创 使用BEM命名规范来组织CSS代码
使用BEM命名规范来组织CSS代码BEM是Block（块）Element（元素）Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）如何使用BEM一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（E...
2019-06-17 18:35:08
182
原创 JS 跨域问题常见的五种解决方式
JS 跨域问题常见的五种解决方式一、什么是跨域？要理解跨域问题，就先理解好概念。跨域问题是由于javascript语言安全限制中的同源策略造成的.简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.URL 说明 是否允许通信http:...
2019-06-17 18:34:00
3204
原创 CSS布局 -- 圣杯布局 & 双飞翼布局
CSS布局 -- 圣杯布局 & 双飞翼布局按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。但在这里实现起来还是有一些区别的【圣杯布局】在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。<!DOCTYPE html><html>...
2019-06-17 18:30:59
175
原创 如何去写一个jquery插件
如何去写一个jquery插件前些日子，因为项目的需求，自己定制了一款jquery弹窗，这得益于自己之前接触的项目让我对于面向对象编程有了深刻的理解。在jquery的基础上拓展一款弹窗插件：jquery源码中可知，jQuery.fn便是jquery的命名空间。jQuery.fn = jQuery.prototype = { constructor: jQuery, ini...
2019-06-17 18:29:39
217
原创 弹窗查看内容时 内容滚动区域设置为body区
弹窗查看内容时 内容滚动区域设置为body区看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动什么意思呢？看个图片，一般正常弹窗是有宽高限制的，如果内容过长则直接在弹窗中进行滚动点我预览将滚动位置放到整个body中，让弹窗中内容自适应高度这么做的好处自然很明显，body区域有更大的可视区域，来看...
2019-06-17 18:28:22
379
原创 图片横向等高瀑布流，每行占满，限制行数 的实现
图片横向等高瀑布流，每行占满，限制行数 的实现图片的横向瀑布流，其实简单地按顺序排列就可以了但要实现每行中各图片都等高（各行不一定等高，但每行里面等高），且每行都占满，就需要用到flex的特性了控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度，需要按比例来动态计算另外，如要限制图片展示的行数，则只需判断好每行总高度与容器总高度的关系即可这里就来实现...
2019-06-17 18:27:10
758
原创 记一次vue长列表的内存性能分析和优化
记一次vue长列表的内存性能分析和优化好久没写东西，博客又长草了，这段时间身心放松了好久，都没什么主题可以写了上周接到一个需求，优化vue的一个长列表页面，忙活了很久也到尾声了，内存使用和卡顿都做了一点点优化，还算有点收获写的有点啰嗦，可以看一下我是怎么进行这个优化的，也许有点帮助呢这个长列表页面，其实是一个实时日志上报的页面，随着页面打开时间的增加，日志数量也会增多，常规的页面...
2019-06-17 18:25:42
1051
原创 HTML5的Websocket
HTML5的Websocket* 先请来TA的邻居：*http：无状态、基于tcp请求/响应模式的应用层协议 （A:哎呀，上次你请我吃饭了么? B:我想想, 上次请你吃了么）tcp：面向连接、保证高可靠性(数据无丢失、数据无失序、数据无错误、数据无重复到达)传输层协议。（看啊，大阅兵，如此规整有秩序）为什么要引入Websocket：RFC开篇介绍：本协议的目的是为了解决基于浏览...
2019-06-16 17:51:42
254
原创 Vue响应式原理源码浅析
Vue响应式原理源码浅析先大概说下Vue响应式实现的原理。Vue的响应式原理是通过“观察者/订阅者”模式实现的。首先，Vue会给data及data下的数组、对象循环调用Object.defineProperty方法来设置getter和setter，以此来拦截data的赋值和取值。也就是说，当我们赋值（如：this.property='string'）时，会调用Ob...
2019-06-16 17:50:38
163
原创 weex里native主动发送事件到JS的方案实现
weex里native主动发送事件到JS的方案实现现在有很多页面需要在返回的时候刷新，比如从购物车跳转到详情页加购，再到购物车，这时候应该刷新页面；如果从订单列表页点击付款跳转后进行支付后，返回的时候刷新数据。viewappear 和 viewdisappear事件首先想到的是weex已经提供的绑定到根元素的viewappear 和 viewdisappear事件。使用方法是绑定到根元...
2019-06-16 17:49:14
457
原创 JavaScript 中的对象拷贝
JavaScript 中的对象拷贝对象是 JavaScript 的基本块。对象是属性的集合，属性是键值对。JavaScript 中的几乎所有对象都是位于原型链顶部Object的实例。介绍如你所知，赋值运算符不会创建一个对象的副本，它只分配一个引用，我们来看下面的代码：let obj = { a: 1, b: 2,};let copy = obj;obj.a = 5...
2019-06-16 17:47:39
196
原创 JavaScript武器库
JavaScript武器库前言作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到npm，以提高开发效率。这里，笔者已经封装并发布了自己的武器库outi...
2019-06-16 17:42:59
228
原创 原生js的常用方法
原生js的常用方法以下是个人总结，也有一些是copy大神的，现在放到一起，方便以后查阅（有不对的地方，还望大家能够提出，我会尽快加以改正）。一、!!强制转boolean根据真值，假值 判断，返回true，false假值： 0 “” null undefined false NaN例如：var nu=null;var nul="";var str="abcd";co...
2019-06-16 17:41:54
2417
原创 深入了解 JavaScript 中的 for 循环
深入了解 JavaScript 中的 for 循环在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是：下面我们就来看看这 4 种 for 循环。简单 for 循环下面先来看看大家最常见的一种写法：const arr = [1, 2, 3]; for(let ...
2019-06-16 17:40:46
135
原创 20 个 CSS 高级技巧汇总
20 个 CSS 高级技巧汇总使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate { filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: gr...
2019-06-16 17:39:28
108
原创 css实现图片背景填充的正六边形
css实现图片背景填充的正六边形边形的实现原理其实就是通过旋转三个重叠的矩形得到的，如下图所示：这里为了得到一个正的六边形，两个矩形旋转的角度必须为-60deg和60deg，以及矩形高宽比必须是Math.sqrt(3) : 1， 原谅我不会打根号3(:3」∠)。那么首先我们得创建三个重叠的矩形：<div class="hexagon"> ...
2019-06-16 17:38:22
1401
1
原创 如何在CSS中使用遮罩mask
如何在CSS中使用遮罩maskmask是指通过在特定点遮盖或者剪裁改变元素的外观。CSS遮罩--如何在CSS中使用遮罩_CSS3, masking 教程_w3cplusCSS3 Filter的十种特效太棒了！mask 轻松构建炫酷CSS探照特效！mask-imagemask-image通过读取透明度对html元素进行遮罩，黑色代表透明，白色代表不透明，...
2019-06-16 17:37:17
576
原创 团队协作中的 Github flow 工作流程
团队协作中的 Github flow 工作流程作为一名开发人员 Git 常用命令每天都在使用，大家肯定信手拈来，但是在团队协作中 Git 的使用姿势和个人开发还是有很多不一样的地方，对于技术团队，期望大家使用规范的 Git 操作流程，规范的 Commit Message，规范的代码风格。这样才能提高团队开发相率和项目的可维护性。今天主要为大家介绍一套基于 Github flow 的 Gi...
2019-06-15 18:44:33
1434
原创 学几招 vscode 技巧
学几招 vscode 技巧俗话说「磨刀不误砍柴工」，对于开发者来说，一款优秀的 IDE 或者 text editor 能有效提升工作效率。Visual Studio Code（下文中简称 vscode）因其强大的功能，较快的运行速度以及众多的扩展，在开发者中相当流行。本文就来介绍 vscode 的一些技巧，希望能给大家一些启发。作者本人使用的 Mac 版的 vscode，一些快捷键...
2019-06-15 18:42:53
726
原创 再谈前端虚拟列表的实现
再谈前端虚拟列表的实现书接上文，在之前的聊聊前端开发中的长列表中，笔者对「可视区域渲染」的列表进行了介绍，并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List，在本文中会使用「虚拟列表」来指代。在本文中，笔者会把上篇文章中的简化例子一步步强化成一个相对通用、性能优异的虚拟列表组件，旨在讲清楚虚拟列表的实现思路。阅读本文不需要阅读上一篇文章，但代码是使用 Vu...
2019-06-15 18:41:30
1501
原创 自动化生成 H5 骨架页面
自动化生成 H5 骨架页面骨架页面（Skeleton Page）指的是当你打开一个移动端 web 页面，在页面解析和数据加载之前，首先给用户展示页面的大概样式。在骨架页面中，图片、文字、图标都将通过灰色矩形块或圆形块来展示，在真实页面展示之前，用户能够感知到即将加载页面的基本 CSS 样式和页面布局。饿了么移动 web 端骨架页面如题图所示。本篇文章将给读者阐述一种自动化生成上图骨架...
2019-06-15 18:40:14
3846
原创 前端工程师为什么要学习编译原理？
前端工程师为什么要学习编译原理？前言普遍的观点认为，前端就是打好 HTML、CSS、JS 三大基础，深刻理解语义化标签，了解 N 种不同的布局方式，掌握语言的语法、特性、内置 API。再学习一些主流的前端框架，使用社区成熟的脚手架，即可快速搭建一个前端项目。胜任前端工作非常容易。再往深处学习，你会发现前端这个领域，总是有学不完的框架、工具、库，不断有新的轮子出现。技术推陈出新，版本快...
2019-06-15 18:38:59
1211
原创 九种跨域方式实现原理（完整版）
九种跨域方式实现原理（完整版）前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github 博客，纸上得来终觉浅，建议大家动手敲敲代码。一、什么是跨域？1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所...
2019-06-15 18:36:47
171
原创 Vue源码阅读连载之响应式设计
Vue源码阅读连载之响应式设计书接上回，谈到Vue是在Vue.prototype._init里调用了initState初始化了响应式的组成，看一下initState的源码export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) i...
2019-06-15 11:08:57
242
原创 介绍一个有趣的Web框架——Zero
介绍一个有趣的Web框架——Zero名字就看着很有趣。所谓Zero的意思是零配置、零烦恼，就是说直接写业务代码即可，其他的事情都交给Zero来搞定。它的官网地址是Zero Server。Hello World依照惯例，总是先看Hello World。npm install -g zero这个框架需要全局安装。新建一个文件夹，然后在里面新建一个time.js文件，输入...
2019-06-15 11:07:39
686
原创 Vue 全家桶学习笔记 —— Vue Router 的进阶使用
Vue 全家桶学习笔记 —— Vue Router 的进阶使用本篇文章是对 Vue Router 官方文档的总结，已经看过的小伙伴可以忽略，没看过的小伙伴可以看看哟，能省掉你看官方文档的时间。先贴上上一篇文章的地址Vue 全家桶学习笔记 —— Vue Router 的基础使用上一篇说完基础使用，本篇就来总结下进阶的使用方式导航钩子导航钩子的用处是为了方便我们在路由正在改变...
2019-06-15 11:04:17
306
原创 Vue 全家桶学习笔记 —— Vue Router 的基础使用
Vue 全家桶学习笔记 —— Vue Router 的基础使用想要使用 Vue 来制作一个单页面应用，那么久不得不使用两个 Vue 官方提供的两个工具（当然你也可以不使用）——一个是页面路由工具 Vue Router，另一个是状态管理工具 Vuex。本篇文章先来说说 Vue Router 的基础使用基础使用与配置在引入 vue.js 和 vue-router.js 后，首先创建一...
2019-06-15 11:02:33
249
原创 聊聊Vue.js的template编译
聊聊Vue.js的template编译因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/learnVue在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/lea...
2019-05-31 18:44:47
512
原创 使用 CSS Houdini 绘制平滑圆角
使用 CSS Houdini 绘制平滑圆角原文链接：http://iamvdo.me/en/blog/smooth-corners-with-css-houdini已得到原文作者Vincent De Oliveira许可最近，我在推特分享了一篇关于人机交互界面的视错觉的文章。我向来喜欢视错觉，但这篇文章传达了一个新观点：与几何上的正圆比起来，一个微调过的圆形有可能给人以更加圆的...
2019-05-31 18:43:26
1323
1
原创 GraphQL 初探—面向未来 API 及其生态圈
GraphQL 初探—面向未来 API 及其生态圈什么是GraphQL？第一次看到这个名词未免让人联想到数据库查询语言 SQL 。但本质上，这是两个完全不同的东西， GraphQL 在官方文档里的定义如下：GraphQL is a query language for your API, and a server-side runtime for executing querie...
2019-05-31 18:42:11
364
原创 想象一双结实而富有弹性的大腿：理解 Flexbox 布局
想象一双结实而富有弹性的大腿：理解 Flexbox 布局说明本站不支持 CodePen 的脚本插入，可以到我的博客阅读直接显示示例代码的版本。Flexbox 让人困惑有很多谈及 Flexbox 的文章，但依然有不少前端对此感到困惑。一方面，flex 相关的 CSS 属性繁多，影响到的具体效果也包含多个方面；另一方面，CSS 可以使用Shorthand properties...
2019-05-31 18:41:05
295
原创 从Vue.js源码看异步更新DOM策略及nextTick
从Vue.js源码看异步更新DOM策略及nextTick因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/learnVue。在学习过程中，为Vue加上了中文的注释https://github.com/answershuto...
2019-05-31 18:39:36
172
原创 JavaScript 中的继承：ES3、ES5 和 ES6
JavaScript 中的继承：ES3、ES5 和 ES6选择一种继承方式JavaScript 是一门动态语言，动态意味着高灵活性，而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式，可以分成下面四类：Mixin 模式，即属性混入，从一个或多个对象中复制属性到新的对象中 方法借用模式，即通过 call 或 apply 实现方法的重用 原型模式，使用 O...
2019-05-31 18:38:21
311
原创 你可能不知道的 css 内容块
你可能不知道的 css 内容块position我们都知道元素都拥有 position 这个 css 属性，先来看看他的基本定义和可用值。定义position 决定了元素位置是如何被渲染的可用值static: 默认值，元素在文档流中依次渲染absolute: 元素位置相对于其最近的非 static 的父元素fixed: 元素位置相对于浏览器窗口relativ...
2019-05-31 18:37:15
124
原创 Javascript中的求值策略
Javascript中的求值策略介绍最近看到一个关于JS函数参数传值策略的讨论。很多人会认为JS的Object类型作为函数参数是按引用传递，而基础类型是按值传递，他们也提出了自己的佐证，而且网上搜索很多文章好像也这么说。但是这样的说发是不是正确的呢？让我们来探讨一下JS里面的求值策略。维基百科搜索Evaluate-Strategy你可以看到求值策略其实是编程语言里面的一个常用术语...
2019-05-31 18:36:02
135
原创 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。关于这道题目的吐槽暂且不提（这是一道被提到无数次的题，得到不少人的赞同，也被很多人反感），本文的目的是如何借助这道题...
2019-05-31 18:30:43
231
原创 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。----------超长文+多图预警，需要花费不少时间。----------如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。---...
2019-05-31 18:28:37
327
1
原创 使用 HeadlessChrome 来测试 WebRTC 应用
使用 HeadlessChrome 来测试 WebRTC 应用最近正在做 WebRTC 相关的开发，在配置 ci 测试时发现传统的测试方案都不太合适。WebRTC 的很多 API 是jsdom无法模拟的，于是想到了 headlessChrome 这个方案。这里主要记录下配置 headlessChrome 自动化测试的步骤和一些踩到的坑。GoogleChrome/puppeteer...
2019-05-30 18:27:51
779
原创 如何让 node 也支持从 url 加载一个 module？
如何让 node 也支持从 url 加载一个 module？使 node 也支持从 url 加载一个 modulezhangzhao.name最近两天 ry 大神的 deno 火了一把。作为 node 项目的发起人，现在又基于 go 重新写了一个类似 node 的项目命名为 deno，引发了大家的强烈关注。在 deno 项目 readme 的开始就列举出了这个项目的优势和需要解...
2019-05-30 18:26:51
257
原创 浅析当下的 Node.js CommonJS 模块系统
浅析当下的 Node.js CommonJS 模块系统在 ES2015 标准之前，JavaScript 语言没有原生的组织代码的方式。Node.js 用 CommonJS 模块规范填补了这个空白。我想通过这篇文章和大家分享一下当下的 CommonJS 模块系统的一些机制和细节。在写这篇文章的时阅读代码 Node.js 版本是 v10.0.0全文共由三个部分组成：什么是模块系统...
2019-05-30 18:25:49
434
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人