- 博客(316)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 浅谈JavaScript设计模式
创建型模式 ：该模式处理的是用于创建对象的各种机制工厂方法抽象工厂建造者原型单例结构型模式：考虑的是对象的组成以及对象彼此之间的关系适配器桥接组合装饰器外观享元代理行为型模式：关注的是对象之间的依赖关系以及通信解释器模板方法责任链命令迭代器中介者备忘录观察者状态策略访问者模块模式var basic = {&nbs...
2019-04-23 23:07:33
408
转载 iframe跨域通信的通用解决方案
此方案已有新版本, 请查看《iframe跨域通信的通用解决方案-第二弹!（终极解决方案）》。本文章可做技术学习供继续交流。一、背景在这个Web页面越来越丰富的时代，页面通过iframe嵌入其他的页面也越来越常见。但由于浏览器同源策略的限制，不同域之间属性和操作是无法直接交互的，所以在这个时候，开发者多多少少需要一些方案来突破这些限制。跨域问题涉及的地方也很多，如文档之间的消...
2018-11-01 11:22:38
6334
转载 释放webpack tree-shaking潜力之webpack-deep-scope-analysis-plugin
在上周末广州举办的 feday 中, webpack 的核心开发者 Sean 在介绍 webpack 插件系统原理时, 隆重介绍了一个中国学生于 Google 夏令营, 在导师 Tobias 带领下写的一个 webpack 插件, https://github.com/vincentdchan/webpack-deep-scope-analysis-plugin , 这个插件能够大大提高 webp...
2018-09-04 16:11:38
1591
原创 transition与animation的区别
相同点：(1)指定要监听的CSS属性的变化(2)设置定时函数改变的一个属性值变换到另一个属性值的速率(3)指定一个时间来控制动画或过渡会花多长时间(4)程序式描述动画和过渡的事件(5)CSS属性变化可视化不同点：主要体现在触发方式，循环方式，如何定义复杂的动画，跟JS的搭配使用(1)触发方式transition只作为一种反应过渡到一个CSS属性已经改变了。一个常见的场景是你使用:hover伪类来改...
2018-03-10 21:22:41
5059
转载 vscode的常见使用介绍
主命令框F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内，可以输入任何命令，例如：按一下 Backspace 会进入到 Ctrl+P 模式在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式在 Ctrl+P 窗口下还可以:直接输入文件名，跳转到文件? 列出当前可执行的动作! 显示 Errors或 Warnings，也可以 Ctrl+Shift+M: 跳转...
2018-03-04 01:46:26
5073
1
原创 canvas详解
1. canvas是HTML5的核心技术，其厉害之处：（1）绘制图形（2）绘制图表（3）动画效果（4）游戏开发2. canvas与svghtml5有两个主要的2d图形技术：canvas和svg。事实上canvas与svg是完全不同的技术，canvas与svg的关系，就像“美术与几何”的关系一样，区别：（1）canvas是使用javascript动态生成的，svg则是使用xml静态描述的（2）c...
2018-02-25 20:30:37
889
原创 js中apply、call和bind的区别
1.相同点（1）都可以用来改变函数的this的指向（2）使用时第一个参数都是this所指向的对象，并且都可以后续参数传参2.区别（1）call跟apply只是参数传参的方式不一样，call以多个参数形式传入，而apply则以数组的形式传入（2）bind传参的方式可以跟call一样，由于bind返回的是一个函数，因此我们也可以在调用的时候在进行传参下面看两个例子：
2018-01-04 15:38:32
438
转载 ES6的Promise详解
ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？
2017-10-21 17:31:25
986
转载 JS的document.execCommand()
document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数])其中：sCommand为指令参数（如下例中的”2D-Position”），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的”false”即表示不显示对话框），动态参数一般为一可
2017-10-21 16:34:54
529
转载 微信小程序使用Socket
首先，一个小程序同时只能有一个WebSocket连接，如果当前已经存在一个WebSocket连接，会关闭当前连接，并重新建立一个连接。其次，如果使用了appID，协议必须是 wss://... 最近团队用小程序做行情，在连接socket的时候，发现在还没有进行subscribe的情况下，就直接进行了广播，并且自动关闭了socket连接，时间紧迫，抓耳挠腮，遂引用了socke
2017-09-15 10:47:16
5993
原创 如何让一个行内元素（如一张图片）在div中居中
（1）第一种：用vertical-aligndiv class="method1"> span class="tiptop">span> img class="test" src="img/Dota2.jpg" alt="dota2">div>style>.method1{ text-align:center;}/*vertical-align:middle 是依赖
2017-09-15 00:02:48
23667
转载 Node.js的模块导出exports 和 module.exports 的区别
关于exports和module.exports的关系可以总结为：module.exports 初始值为一个空对象 {}，所以 exports 初始值也是 {}exports 是指向的 module.exports 的引用require() 返回的是 module.exports 而不是 exports每一个Node.js执行文件，都自动创建一个module对象，同时，module
2017-08-26 17:34:35
519
转载 使用Fiddler进行iOS APP的HTTP/HTTPS抓包
Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP/HTTPS请求。Fiddler能捕获iOS设备发出的请求，比如IPhone, IPad, MacBook. 等等苹果的设备。 同理，也可以截获Andriod，Windows Phone的等设备发出的HTTP/HTTPS。最关键的是，对ios应用抓包时直接在Windows PC上进行，不需要非
2017-08-11 13:58:45
1150
转载 Flex 布局教程：实例篇
上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看
2017-07-24 17:56:37
726
转载 Flex 布局教程：语法篇
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这
2017-07-24 17:54:49
342
转载 一种不常见的跨域方式--使用CSS3特性做跨域
CSST (CSS Text Transformation)通过CSS3的content获取内容。利用js动态创建一个link插入到文档中, 请求css文件.利用 computedStyle = window.getComputedStyle 获取指定元素的style 对象利用 computedStyle .content 获取内容服务端可以返回的 css 文件内容：
2017-07-24 15:07:25
1013
原创 构建工具fis3的使用
（1）release发布命令fis3 release -d 任意目录fis3 release -h 获取更多参数fis3 server start启动内置服务器fis3 server -h 获取更多参数fis3 server open打开内置服务器目录，不指定发布地址则默认发布到内置服务器中
2017-07-24 15:01:08
820
转载 Semantic-Versioning 语义化版本控制
一个标准的版本号必须是X.Y.Z的形式，X是主版本，Y是副版本，Z是补丁版本。.X: 代表发生了不兼容的API改变Y: 代表向后兼容的功能性变化Z: 代表向后兼容bug fixes即：版本格式：主版本号.次版本号.修订号，版本号递增规则如下：主版本号：当你做了不兼容的 API 修改，次版本号：当你做了向下兼容的功能性新增，修订号：当你
2017-07-24 14:55:35
521
转载 http入门与挖坑
一、简介1、http是用于从万维网服务器传输超文本到本地浏览器的传送协议，基于TCP/IP2、http默认端口号是803、http是无连接：含义是限制每次传输只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接，这样可以节省传输时间4、http是媒体独立的：意味着只要客户端和服务端知道如何处理数据内容，任何类型的数据都可以通过http发送5、http是
2017-07-06 13:55:27
518
转载 Base.js 库 实现 JS 的对象化编程
最近在研究JS的面向对象编程。由于JS使用Function的概念来代替Class，往往使用这种方式来定义一个对象： function JSClass() { //成员变量 this.m_Text = 'division element'; this.m_Element = document.createElement('DIV
2017-06-27 00:50:48
3740
转载 JS的十大经典算法排序
十大经典算法排序总结对比一张图概括：名词解释：n: 数据规模k:“桶”的个数In-place: 占用常数内存，不占用额外内存Out-place: 占用额外内存稳定性：排序后2个相等键值的顺序和排序之前它们的顺序相同冒泡排序（Bubble Sort）冒泡排序须知：作为最简单的排序算法之一，冒泡排序给我的感觉就像Aband
2017-05-26 10:48:57
2456
转载 ReactJS学习笔记七：表单
表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。 React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。约束性和非约束性组件表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。约束性组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的
2017-05-15 18:21:33
415
转载 ReactJS学习笔记六：感想 - 为什么说Virtual DOM 是React的精髓所在
Virtual DOM 毫无疑问是 React 的精髓。可能很多人包括我看完官方文档之后对Virtual DOM的理解就是：它通过JS对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义：抽象。V
2017-05-15 18:19:54
322
转载 ReactJS读书笔记五:DOM操作
一 获取DOM元素react可以允许我们通过 ref 来定位一个组件。具体的做法是：先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。然后就可以通过 this.refs.city 来访问这个组件。但是请注意，这里拿到的只是虚拟DOM，而不是真实的DOM。只有在render方法执行之后，并且react已经完成了D
2017-05-15 18:18:38
339
转载 ReactJS读书笔记四：mixins
前面说过，react使用组合而不是继承来处理父子组件。那么显然无法通过继承父类来实现公共功能，所以react提供了mixin的机制。一 mixin是什么mixin，可以非常简单的理解，他就是把 一个 mixin 对象上的方法都混合到了另一个组件上，和 $.extend 方法做的事情类似。不过，react对mixin做了一些特殊处理。在mixin中
2017-05-15 18:17:31
356
转载 ReactJS读书笔记三：组件的组合和通信
一 组合而不是继承React组件是无法继承的，即不存在 React.extend 之类的方法可以定义一个子类。React推崇通过组合的方式来组织大规模的应用。所以所谓父子组件，就和DOM中的父子元素一样，他们是有从属关系，但没有继承关系。比如：[javascript] view plain copyvar Team
2017-05-15 18:16:49
395
转载 ReactJS读书笔记二：组件生命周期
React 组件就是一个状态机，它接受两个输入参数： this.props 和 this.state，返回一个虚拟DOM。React组件的生命周期分几个阶段，每个阶段会有若干个回调函数可以响应不同的时刻。组件生命周期一 创建类React组件是有 类 和 实例的区别的，通过 React.createClass 创建的是类，比如：
2017-05-15 18:15:35
300
转载 ReactJS读书笔记一：深入理解JSX
这个系列是读《React 引领未来的用户界面开发框架》的笔记。JSX语法是react的一大亮点。之前很不喜欢在js中写模板，因为js字符串换行很麻烦，所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的，特别是当你的网站是前后端分离的时候，如果改一下模板还要找后端的开发，非常浪费时间。JSX的出现比较完美解决了JS中写模板的问题。简单的说就是 JS 和
2017-05-15 18:14:10
324
转载 TCP Nagle算法详解
转: http://bbs.chinaunix.NET/thread-3767363-1-1.html在网络拥塞控制领域，我们知道有一个非常有名的算法叫做Nagle算法（Nagle algorithm），这是使用它的发明人John Nagle的名字来命名的，John Nagle在1984年首次用这个算法来尝试解决福特汽车公司的网络拥塞问题（RFC 896），该问题的具体描述是：如果
2017-04-27 16:04:52
804
转载 ISO-OSI的七层协议经典架构
OSI(Open System interconnection)开放系统互连参考模型 ISO(International Standards Organization)国际标准化组织第一层：物理层 机械性能：接口的型状，尺寸的大小，引脚的数目和排列方式等。电气性能：接口规定信号的电压、电流、阻抗、波形、速率及平衡特性等。 工程规范：接口引脚的意义、特
2017-04-27 16:04:07
1660
转载 TCP/IP详解学习笔记(13)-TCP坚持定时器，TCP保活定时器
TCP一共有四个主要的定时器，前面已经讲到了一个－－超时定时器－－是TCP里面最复杂的一个，另外的三个是：坚持定时器保活定时器2MSL定时器其中坚持定时器用于防止通告窗口为0以后双方互相等待死锁的情况；而保活定时器则用于处理半开放连接1.坚持定时器坚持定时器的原理是简单的，当TCP服务器收到了客户端的0滑动窗口报文的时候，就启动一个定时器来计时，并在定时器溢出的时候向向客户端查
2017-04-27 16:03:18
339
转载 TCP/IP详解学习笔记(12)-TCP的超时与重传
超时重传是TCP协议保证数据可靠性的另一个重要机制，其原理是在发送某一个数据以后就开启一个计时器，在一定时间内如果没有得到发送的数据报的ACK报文，那么就重新发送数据，直到发送成功为止。1.超时超时时间的计算是超时的核心部分，TCP要求这个算法能大致估计出当前的网络状况，虽然这确实很困难。要求精确的原因有两个：(1)定时长久会造成网络利用率不高。(2)定时太短会造成多次重传，使得网络阻塞。
2017-04-27 16:02:44
317
转载 TCP/IP详解学习笔记(11)-TCP交互数据流，成块数据流
目前建立在TCP协议上的网络协议特别多，有telnet，ssh，有ftp，有http等等。这些协议又可以根据数据吞吐量来大致分成两大类：(1)交互数据类型，例如telnet，ssh，这种类型的协议在大多数情况下只是做小流量的数据交换，比如说按一下键盘，回显一些文字等等。(2)数据成块类型，例如ftp，这种类型的协议要求TCP能尽量的运载数据，把数据的吞吐量做到最大，并尽可能的提高效率。针对这两种情
2017-04-27 16:01:50
364
转载 TCP/IP详解学习笔记(10)-TCP连接的建立与中止
TCP是一个面向连接的协议，所以在连接双方发送数据之前，都需要首先建立一条连接。这和前面讲到的协议完全不同。前面讲的所有协议都只是发送数据而已，大多数都不关心发送的数据是不是送到，UDP尤其明显，从编程的角度来说，UDP编程也要简单的多----UDP都不用考虑数据分片。书中用telnet登陆退出来解释TCP协议连接的建立和中止的过程，可以看到，TCP连接的建立可以简单的称为三次握手，而连接的中
2017-04-27 16:00:59
447
转载 TCP/IP详解学习笔记(9)-TCP协议概述
终于看到了TCP协议，这是TCP/IP详解里面最重要也是最精彩的部分，要花大力气来读。前面的TFTP和BOOTP都是一些简单的协议，就不写笔记了，写起来也没啥东西。TCP和UDP处在同一层---运输层，但是TCP和UDP最不同的地方是，TCP提供了一种可靠的数据传输服务，TCP是面向连接的，也就是说，利用TCP通信的两台主机首先要经历一个“拨打电话”的过程，等到通信准备结束才开始传输数据，最后
2017-04-27 16:00:18
298
转载 TCP/IP详解学习笔记(7)-广播和多播，IGMP协议
1.单播，多播，广播的介绍1.1.单播(unicast)单播是说，对特定的主机进行数据传送。例如给某一个主机发送IP数据包。这时候，数据链路层给出的数据头里面是非常具体的目的地址，对于以太网来 说，就是网卡的MAC地址（不是FF-FF-FF-FF-FF-FF这样的地址）。现在的具有路由功能的主机应该可以将单播数据定向转发，而目的主机的网 络接口则可以过滤掉和自己MAC地址不一致的数据。
2017-04-27 15:58:47
313
转载 TCP/IP详解学习笔记(6)-UDP协议
1.UDP简要介绍UDP是传输层协议，和TCP协议处于一个分层中，但是与TCP协议不同，UDP协议并不提供超时重传，出错重传等功能，也就是说其是不可靠的协议。2.UDP协议头2.1.UDP端口号由于很多软件需要用到UDP协议，所以UDP协议必须通过某个标志用以区分不同的程序所需要的数据包。端口号的功能就在于此，例如某一个UDP程序A在系统中注册了3000端口，那么，以后从外面传
2017-04-27 15:57:59
280
转载 TCP/IP详解学习笔记(5)-IP选路，动态选路，和一些细节
1.静态IP选路1.1.一个简单的路由表选路是IP层最重要的一个功能之一。前面的部分已经简单的讲过路由器是通过何种规则来根据IP数据包的IP地址来选择路由。这里就不重复了。首先来看看一个简单的系统路由表。Destination Gateway Genmask Flags Metric Ref Use Iface192.168.1
2017-04-27 15:57:28
245
转载 TCP/IP详解学习笔记(4)-ICMP协议，ping和Traceroute
1.IMCP协议介绍前面讲到了，IP协议并不是一个可靠的协议，它不保证数据被送达，那么，自然的，保证数据送达的工作应该由其他的模块来完成。其中一个重要的模块就是ICMP(网络控制报文)协议。当传送IP数据包发生错误－－比如主机不可达，路由不可达等等，ICMP协议将会把错误信息封包，然后传送回给主机。给主机一个处理错误的机会，这 也就是为什么说建立在IP层以上的协议是可能做到安全的原因。IC
2017-04-27 15:56:50
428
转载 TCP/IP详解学习笔记(3)-IP协议，ARP协议，RARP协议
把这三个协议放到一起学习是因为这三个协议处于同一层，ARP协议用来找到目标主机的Ethernet网卡Mac地址，IP则承载要发送的消息。数据链路层可以从ARP得到数据的传送信息，而从IP得到要传输的数据信息。1.IP协议IP协议是TCP/IP协议的核心，所有的TCP，UDP，IMCP，IGCP的数据都以IP数据格式传输。要注意的是，IP不是可靠的协议，这是说，IP协议没有提供一种数据未传达
2017-04-27 15:56:11
336
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人