浅谈JavaScript设计模式 创建型模式 :该模式处理的是用于创建对象的各种机制工厂方法抽象工厂建造者原型单例结构型模式:考虑的是对象的组成以及对象彼此之间的关系适配器桥接组合装饰器外观享元代理行为型模式:关注的是对象之间的依赖关系以及通信解释器模板方法责任链命令迭代器中介者备忘录观察者状态策略访问者模块模式var basic = {&nbs...
iframe跨域通信的通用解决方案 此方案已有新版本, 请查看《iframe跨域通信的通用解决方案-第二弹!(终极解决方案)》。本文章可做技术学习供继续交流。一、背景在这个Web页面越来越丰富的时代,页面通过iframe嵌入其他的页面也越来越常见。但由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的,所以在这个时候,开发者多多少少需要一些方案来突破这些限制。跨域问题涉及的地方也很多,如文档之间的消...
释放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...
transition与animation的区别 相同点:(1)指定要监听的CSS属性的变化(2)设置定时函数改变的一个属性值变换到另一个属性值的速率(3)指定一个时间来控制动画或过渡会花多长时间(4)程序式描述动画和过渡的事件(5)CSS属性变化可视化不同点:主要体现在触发方式,循环方式,如何定义复杂的动画,跟JS的搭配使用(1)触发方式transition只作为一种反应过渡到一个CSS属性已经改变了。一个常见的场景是你使用:hover伪类来改...
vscode的常见使用介绍 主命令框F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:按一下 Backspace 会进入到 Ctrl+P 模式在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式在 Ctrl+P 窗口下还可以:直接输入文件名,跳转到文件? 列出当前可执行的动作! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M: 跳转...
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...
js中apply、call和bind的区别 1.相同点(1)都可以用来改变函数的this的指向(2)使用时第一个参数都是this所指向的对象,并且都可以后续参数传参2.区别(1)call跟apply只是参数传参的方式不一样,call以多个参数形式传入,而apply则以数组的形式传入(2)bind传参的方式可以跟call一样,由于bind返回的是一个函数,因此我们也可以在调用的时候在进行传参下面看两个例子:
ES6的Promise详解 ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?
JS的document.execCommand() document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数])其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可
微信小程序使用Socket 首先,一个小程序同时只能有一个WebSocket连接,如果当前已经存在一个WebSocket连接,会关闭当前连接,并重新建立一个连接。其次,如果使用了appID,协议必须是 wss://... 最近团队用小程序做行情,在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接,时间紧迫,抓耳挠腮,遂引用了socke
如何让一个行内元素(如一张图片)在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 是依赖
Node.js的模块导出exports 和 module.exports 的区别 关于exports和module.exports的关系可以总结为:module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {}exports 是指向的 module.exports 的引用require() 返回的是 module.exports 而不是 exports每一个Node.js执行文件,都自动创建一个module对象,同时,module
使用Fiddler进行iOS APP的HTTP/HTTPS抓包 Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP/HTTPS请求。Fiddler能捕获iOS设备发出的请求,比如IPhone, IPad, MacBook. 等等苹果的设备。 同理,也可以截获Andriod,Windows Phone的等设备发出的HTTP/HTTPS。最关键的是,对ios应用抓包时直接在Windows PC上进行,不需要非
Flex 布局教程:实例篇 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这
一种不常见的跨域方式--使用CSS3特性做跨域 CSST (CSS Text Transformation)通过CSS3的content获取内容。利用js动态创建一个link插入到文档中, 请求css文件.利用 computedStyle = window.getComputedStyle 获取指定元素的style 对象利用 computedStyle .content 获取内容服务端可以返回的 css 文件内容:
构建工具fis3的使用 (1)release发布命令fis3 release -d 任意目录fis3 release -h 获取更多参数fis3 server start启动内置服务器fis3 server -h 获取更多参数fis3 server open打开内置服务器目录,不指定发布地址则默认发布到内置服务器中
Semantic-Versioning 语义化版本控制 一个标准的版本号必须是X.Y.Z的形式,X是主版本,Y是副版本,Z是补丁版本。.X: 代表发生了不兼容的API改变Y: 代表向后兼容的功能性变化Z: 代表向后兼容bug fixes即:版本格式:主版本号.次版本号.修订号,版本号递增规则如下:主版本号:当你做了不兼容的 API 修改,次版本号:当你做了向下兼容的功能性新增,修订号:当你
http入门与挖坑 一、简介1、http是用于从万维网服务器传输超文本到本地浏览器的传送协议,基于TCP/IP2、http默认端口号是803、http是无连接:含义是限制每次传输只处理一个请求,服务器处理完客户的请求,并收到客户的应答后,即断开连接,这样可以节省传输时间4、http是媒体独立的:意味着只要客户端和服务端知道如何处理数据内容,任何类型的数据都可以通过http发送5、http是
Base.js 库 实现 JS 的对象化编程 最近在研究JS的面向对象编程。由于JS使用Function的概念来代替Class,往往使用这种方式来定义一个对象: function JSClass() { //成员变量 this.m_Text = 'division element'; this.m_Element = document.createElement('DIV