沐风的心-CSDN博客

转载用 JavaScript 实现发布/订阅模式

重要申明：感谢原文作者——杠子，想看原文请戳这里！我转载了原文，修改了一些原文行文不通畅之处，并更改附上了自己的代码段，望请勿怪。挂在自己的博客下面一方面是为了收藏好文，方便自己温顾而知新；另一方面也希望更多人看到这文章。PS：原文撰写于 2016-08-11。一、发布/订阅模式简介发布/订阅模式（即观察者模式）：设计该模式背后的主要动力是促进形成松散耦合。在这种模式中，并不是一个对象调用另一个对

2017-10-03 10:35:29 4312 2

原创浮动原理及清浮动笔记

1. 浮动的定义一句话解释：元素浮动后，会脱离文档流，接着会按照指定的方向移动，一直到碰到父级的边界或另外一个元素为止。浮动的代码：folat: left/right/none ，none 表示为不浮动，完全没有浮动的效果。2. 浮动的特性（inline-block的进化版）：使块元素在一行显示；使内嵌支持宽高；不设置宽度时，宽度由内容撑开；脱离文档流（文档流是文档中可显示对象在排列时所占用

2017-09-18 10:33:16 859

转载 Web前端应该从哪些方面来优化网站?

重要申明：感谢原文作者——NOBI，想看原文请戳这里（但我估计他也是从其他地方转载过来的）！我转载了原文，修改了一些原文行文不通畅之处，望请勿怪。挂在自己的博客下面一方面是为了收藏好文，方便自己温顾而知新；另一方面也希望更多人看到这文章。PS：原文撰写于 2015-01-27。前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash 等等各种各样的资源。前端优化是复杂

2017-09-07 11:59:37 847

转载浅谈CSRF攻击方式

重要申明：感谢原文作者——hyddd，想看原文请戳这里！我转载了原文，修改了一些原文行文不通畅之处，望请勿怪。挂在自己的博客下面一方面是为了收藏好文，方便自己温顾而知新；另一方面也希望更多人看到这文章。PS：原文撰写于 2009-04-09 22:44。一、CSRF 是什么？　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click a

2017-09-06 10:20:53 465

原创标签类型转换、样式重置笔记

默认样式重置（css reset）：第一种方法（推荐这种方式虽然不方便，但是稳定性和性能很好，提倡！还需要重置字的颜色，字体等）：body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px; /*font-family:XX字体;*/}ol,ul{ list-style:none;padding:0; margin:0;}a{ text-dec

2017-09-04 21:29:11 482

原创 D3 笔记十：力导向图

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。一、力导向图我们先来了解一下力导向图（Force-Directed Graph）的定义。首先，它是绘图的一种算法。在二维或三维空间里配置节点。节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用。力的大小

2017-08-15 00:10:49 3133

原创利用 vue-cli 构建一个 Vue 项目

一、项目初始构建现在如果要构建一个 Vue 的项目，最方便的方式，莫过于使用官方的 vue-cli 。首先，咱们先来全局安装 vue-cli ，打开命令行工具，输入以下命令：$ npm install -g vue-cli然后，利用 vue-cli 构建一个 Vue 项目：$ vue init <template-name> <project-name># 例如：$ vue init webpac

2017-08-13 23:05:23 3088

原创 D3 笔记九：制作饼图

一、布局函数要制作饼图，得先定义一个布局函数，即：var pie = d3.layout.pie(); // 变量pie就是那个布局函数布局好后，再转换数据成适合于作图的数据，即：var dataset = [ 30 , 10 , 43 , 55 , 13 ];var pieData = pie(dataset); // pieData就是适合做饼图的数据console

2017-08-11 00:03:51 937

原创 D3 笔记八：布局

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。一、布局是什么布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思，而经过我的学习后，感觉 D3 中的布局有“决定原生数据该绘制成哪种可视化图形”的作用。我们先来看看 D3 与其它可视化工具的区别：我们看到 D3

2017-08-08 17:34:48 1995

原创 <meta> 标签详解

一、定义和用法<meta> 元素可记录并提供有关页面的元信息（meta-information），比如针对搜索引擎优化（SEO）、定义页面使用语言、自动刷新并指向新的页面、实现网页转换的动效、控制页面显示窗口、更新频度的描述和关键词。<meta> 标签位于文档的头部 <head> 标签中，innerHTML 中不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值（content）对。

2017-08-08 11:02:34 1046

原创规避使用 vue 的 v-html 指令的方法

一、引言前一阵子在写业务的时候，发现公司的代码里，有个场景是这样的：需要用户定义一些活动规则，然后在左边的手机预览图中，实时显示出这些活动规则。于是，同事用了一个带 v-html 指令的 <textarea> 标签，并且将双向数据绑定之后的变量 str 直接用 v-html="str" 将 str 绑定在 DOM 上，然后用户输入的规则显示在左边的预览图中。二、思考但我们在学 vue 的教程的时候，

2017-08-01 23:51:49 24000

原创 D3 笔记七：交互事件、event、this

交互它指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。用户用于交互的工具一般有三种：鼠标、键盘、触屏。API与常用事件在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：click：鼠标单击某元素时，相当于 mousedown 和 mouseup

2017-07-30 20:13:39 3241

原创 D3 笔记六：Update、Enter、Exit

什么是 Update、Enter、Exit如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。示意图如下所示：如此，便可以

2017-07-30 18:19:20 767 1

原创 D3 笔记五：过渡、transition、duration、ease、delay

动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡（transition）。实现动态的 API D3 提供了 4 个方法用于实现图形的过渡，即从状态 A 变为状态 B。transition()该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等），例如：.attr("fil

2017-07-30 17:12:41 6569

原创 D3 笔记四：分组元素、坐标轴、SVG基本图形

六种基本图形在 SVG 画布的预定义元素里，有六种基本图形：矩形圆形椭圆线段折线多边形另外，还有一种比较特殊，也是功能最强的元素：路径画布中的所有图形，都是由以上七种元素组成。分组元素分组元素 <g>，是 SVG 画布中的元素，意思是 group，顾名思义此元素是将其他元素进行组合的容器。定义坐标轴直接先来看示例代码：var dataset = [ 2.5 , 2.1 ,

2017-07-29 23:18:25 2214

原创 D3 笔记三：线性比例尺、序数比例尺、domain()、range()

如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺（Scale）了。定义域与值域在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。两种比例尺线性比例尺：v

2017-07-29 23:15:40 7585

原创 D3 笔记二：SVG、Canvas、画布、矩形、填充图形

画布是什么前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。SVG 是什么 SVG 指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。除了 IE8 之前的

2017-07-28 20:09:25 4516

原创 D3 笔记一：选择元素、DOM 操作、绑定数据

引入 D3 文件：<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>选择集与链式语法使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。有人会发现，D3 能够连续不断地调用函数，形如：d3.select().selectAll().text()这称为链式语法，和

2017-07-28 20:06:43 2921

原创同源策略与跨域

在浏览器中，有一个很重要的安全性限制，被称为 “Same-Origin Policy”（同源策略）。通过 XHR 实现 Ajax 通信的一个主要限制，就来自与同源策略。即默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作。这时候“同源策略”就显得过于苛刻，于是，就需要进行跨域访问数据了！一、同源策略？同源策略（Sa

2017-07-26 13:16:17 501

原创 15 分钟全方位了解 JS 的继承

许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。由于 ECMAScript 中的函数没有签名，所以在 JS 中无法实现接口继承。ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的。所以，下面所要说的原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承都属于实现继承。最后的最后，我会解释 E

2017-07-20 20:42:18 358

原创运用 JS 中的各种模式创建自定义类型

虽然在 ES6 中，已经出了 class 的语法糖，貌似好像不用了解 ES5 中的这些老东西了，但是越深入学习，你会发现理解这些模式的重要性。在本文中，我会描述 7 种常用的创建自定义类型的模式：工厂模式、构造函数模式、原型模式、组合使用构造函数模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式。分别给出他们的示例代码，并分析他们的利弊，方便读者选择具体的方式来构建自己的自定义类型。1. 工厂模

2017-07-17 20:44:27 1244

原创 hasOwnProperty() 、in 操作符与 for-in 循环

1. hasOwnProperty()使用 hasOwnProperty() 方法可以检测一个属性是存在于对象实例中，还是存在于其原型中。这个方法（不要忘了它是从 Object 继承来的）只在给定属性存在于对象实例中时，才会返回 true 。请看下面的示例代码：function Person(){}Person.prototype.name = "Nicholas";Person.prototy

2017-07-17 16:25:43 1229

原创 CSS相关面试题汇总笔记

<map></map>表示热区。<area/>这是点击链接区域。shape="circle"，说明点击区域是个圆形；coords="圆心点X值,圆心点Y值,圆的半径"，说明圆的位置及大小。shape="rect"，说明点击区域是个矩形；coords="左上角X值,右上角Y值,左下角X值,右下角Y值"，说明矩形的位置及大小。shape="poly"，说明点击区域是个多边形；coords="第一个点

2017-07-10 18:57:18 493

转载 CSS 元素居中对齐大法

重要声明：感谢翻译者——张小伦爱学习，欲看原文请戳这里，我只是个转载者！我增强了模块的区分和修改了一些原文行文不是很通畅的地方，望请勿怪！原文标题：Centering in CSS: A Complete Guide**（强烈建议阅读英文原文）** 原文链接：http://css-tricks.com/centering-css-complete-guide/ 在 CSS

2017-04-16 17:05:49 2458

转载详谈 JavaScript 数组去重 2 ：性能优化篇

重要申明：本文来源于玉伯也叫射雕，想看原文的请戳这里！在此文之上，我对一些明显不妥之处进行了修正。这其中包括例子的不合理，文章的错别字等，还望见谅！一、缘由JavaScript 数组去重经常出现在前端招聘的笔试题里，比如：有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0] ，请用 JavaScript 实现去重函数 unique，

2017-03-31 16:11:11 870

原创事件委托

一、CSS盒模型关于CSS盒模型和兼容的东西，可以狠戳这里！二、事件代理1. 基本用法：element.addEventListener('click', function(event) { // 判断是否是 a 节点 if ( event.target.tagName == 'A' ) { // a 的一些交互操作 }}, false);2. 为什么不用第

2017-03-31 14:38:00 534

转载浅谈Web自适应

感谢原文作者——卖烧烤夫斯基，想看原文请戳这里。我只是个大自然的搬运工！当然，我也添加了两块自己很感兴趣的东西。一、前言随着移动设备的普及，移动 web 在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设...

2017-03-25 20:38:45 620

转载详谈 JavaScript 数组去重 1 ：实现篇

重要申明：感谢原文作者——toobug，与看原文请猛戳这里！我只是个转载者！零、引言JavaScript 的数组去重是一个老生常谈的话题了。随便搜一搜就能找到非常多不同版本的解法。昨天在微博上看到一篇文章，也写数组去重，主要推崇的方法是将利用数组元素当作对象 key 来去重。我在微博转发了“用对象 key 去重不是个好办法…”然后作者问什么才是推荐的方法。细想一下，这样一个看似简单的需求，如果要做到

2017-03-21 22:01:18 374

转载 function与感叹号

重要申明：感谢原文作者的这篇文章，我只是个转载者！不过，我经过了一些错误修改和重新排版，望请勿怪！一、What？！最近有空可以让我静下心来看看各种代码， function 与感叹号的频繁出现，让我回想起2个月前我回杭州最后参加团队会议的时候，@西子剑影抛出的一样的问题：如果在 function 之前加上感叹号 (!) 会怎么样？比如下面的代码：!function(){alert('iifksp')

2017-03-17 21:09:02 339

原创用URL请求页面流程

重要申明：感谢原文作者——Mervyn Zhang，想看原文请戳这里！我只是个转载者！一、引言前端不仅要让用户对网页有完美的体验，让用户尽快体验到完美的网页也是很重要的，这就要前端攻城狮掌握一些计算机原理相关的知识了。这里就来聊一聊从用户输入URL到页面加载完成的过程中都发生了什么事情？二、正文用户输入url之后大致发生了以下几件事：浏览器查找域名的IP地址:这一步包括DNS具体的查找过程，包括：

2017-03-15 20:43:30 8056

转载 CSS动画 vs JS动画：谁更快？

重要申明：感谢翻译者——MZhou，想看翻译原文请戳这里！我只是个转载者！转载过程中有些翻译，我在看了英文原文之后，用了在我看来更为舒服的表达，望请勿怪！这篇文章翻译自 Julian Shapiro 的 CSS vs. JS Animation: Which is Faster?。Julian Shapiro 也是 Velocity.js 的创造者。这是一个非常高效、简单易用的JS动画库。他在Web

2017-03-13 22:15:39 974

转载深入浅出Javascript中apply、call和bind以及它们的妙用

此文为转载的，感谢原文作者——chokcoco（伯乐在线），原谅我做了一些纠正和改动。因为此文确实很优秀，所以我冒着风险转载了过来。如果，有任何觉得我有侵权行为，我立马删除文章！一、引言这篇文章实在是很难下笔，因为网上相关文章不胜枚举。巧合的是前些天看到阮老师的一篇文章的一句话：“对我来说，博客首先是一种知识管理工具，其次才是传播工具。我的技术文章，主要用来整理我还不懂的知识。我只写那些我还没有完全

2017-03-01 20:06:08 518

转载异步编程中的异常处理

此文为转载的，感谢原文作者——syaning!一、引言一般情况下，我们会使用try..catch..来进行异常处理，例如：function sync() { throw new Error('sync error');}try { sync();} catch (err) { console.log('error caught:', err.message);}// e

2017-02-26 19:56:26 3002

原创 ES6语法摘要二

这些内容是我学习《fullstack-react-book》一书，自己翻译整理出来的要点。JSONJSON代表了JavaScript对象标记（JavaScript Object Nation）。JSON能够让我们加载一个JavaScript对象，并且我们能在一个text文件里面进行读写。三元运算符也叫“三目运算符”，语法：condition ? expression1 : expression

2017-01-23 23:26:31 407

原创 React 语法二：forceUpdate()、componentWillUnmount()、onMouseEnter()与onMouseLeave()

这些内容是我学习《fullstack-react-book》一书，自己翻译整理出来的要点。基础语法forceUpdate()语法：component.forceUpdate(callback)！该方法将强迫一个react组件重新渲染。我们还可以将setInterval()函数和forceUpdate()方法进行结合运用，来产生动态且平滑的效果！react内部在调用render()方法时，会使用

2017-01-23 23:24:48 3107

原创 React 基础二：目录结构、命名、创建 react apps 步骤

这些内容是我学习《fullstack-react-book》一书，自己翻译整理出来的要点。目录结构当你浏览一个网站，assets目录存放的是你浏览器下载的，并且用来展示页面的文件。浏览器在解析index.html文件的时候，该文件其内部的<head>标签内的代码具体说明了需要浏览器从服务器下载哪些额外的文件。命名组件如何命名组件完全取决于你的喜好。但是，命名时围绕着语义保持一些一致的规则，将

2017-01-23 23:23:25 3178

原创 ES6语法摘要一

声明const是声明不变变量的一种更好的方式。 const和let并不是函数作用于的，而是块级作用域！这种经典的作用于分离帮我们避免了不可预期的bug。Array.prototype.map()map这个方法接收一个函数作为参数。这个数组中每一个元素都会调用这个函数，并且返回一个这个函数处理后的值，并将这些值依次作为一个新的数组的值。Arrow functions/this使用传统的JS

2017-01-18 22:59:58 354

原创 React 语法一：React.createClass()、ReactDOM.render()、props、state和componentDidMount()

初级语法这些内容是我学习fullstack-react-book一书，自己翻译整理出来的要点。React.createClass()为了创建一个react组件，我们在react中使用React.createClass()方法。 render()对于react组件来说是唯一必要的方法。另外一种定义react组件的方式是使用ES6的继承，具体语法为class ProductList extends

2017-01-18 18:21:38 1413

原创 React 基础一：JSX、Babel、单项数据流和脚手架

JSXreact是用一种假冒的DOM（它表示用来组成网页页面的HTML树）结构来创立app的，react称之为虚拟DOM。JSX语法让我们在使用JavaScript来描述HTML的时候，让代码看起来更加的像原生HTML。但请记住JSX事实上会被编译成JavaScript。在JSX中，我们不能使用class关键字来为一个元素申明样式类，但react允许我们用className这个关键字来为一个元

2017-01-18 17:20:10 771

原创尾递归以及在浏览器中的实现

尾递归以及在浏览器中的实现这是阮一峰大神的《ES6标准入门》一书中写道的，没看过这节的童鞋可以狠戳这里。当时我就很不理解：除了最后一次调用不是尾递归，其余 y 大于 0 的时候，都是尾递归；那么，按照书“尾调用优化”上所说的，尾递归本身已经是“尾调用优化”过了，为什么还没报Uncaught RangeError: Maximum call stack size exceeded(…)——调用栈溢出这

2017-01-15 17:50:47 1036

JS入门教程

空空如也