- 博客(14)
- 收藏
- 关注
原创 如何使JavaScript更高效
传统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能。然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大。随着越来越多的应用采用 Web 技术开发,脚本性能的提升就变得越来越重要。 桌面应用程序通常是用编译器将源代码转换为最终的二进制。编译器在生成最终的应用程序时,可以花费时间,尽可能地对性能进行优化。Web 应用程序就不能这么奢侈了。因为它们需要在多种浏...
2018-09-02 14:39:22 157
原创 总结 | 移动端 CSS 常用小结
Meta 标签 1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允...
2018-09-01 12:42:31 426
原创 HTML5 进阶系列:拖放 API 实现拖放排序
前言HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 ...
2018-09-01 12:40:31 171
原创 CSS | object-fit: 炒鸡方便的图片居中方法
今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法。不过今天要说一个新的方案:object-fit ,嗯,这个才是真的方便的方案啊。 object-fit 只能用于『可替换元素』(replaced element) 。所谓可替换元素,是指元素的内容和表现不是由CSS控制的,独立渲染的外部元素,比如: img、 object、 video 和 表单元素,如text...
2018-08-31 17:03:09 1185
原创 实用 | 读源码,学JavaScript
Javascript于1995年由网景公司的Brendan Eich发明。 最初发明的目的是作为一个简单的网站脚本语言,来作为复杂网站应用java的补充。但由于它与网页结合度很高并且由浏览器内置支持, 所以javascript变得比java在前端更为流行了。 不过 JavaScript 可不仅仅只用于浏览器: Node.js,一个基于Google Chrome V8引擎的独立运行时环境,也越来越...
2018-08-31 16:48:28 144
原创 避免这些常见的JavaScript错误
在今天,JavaScript是最流行的编程语言之一,如果你希望钻研JavaScript,这里有几个需要避免的问题1.使用==而不是===在刚开始学习JavaScript时,这是初学者最容易犯的错误。==会将类型转换,而===却不会。 // ==的例子 1 == "1" // true "/t" == 0 // true "34" ...
2018-08-31 16:45:16 144
原创 Ohm:用两百行 JavaScript 创造你自己的编程语言
解析器是一种超级有用的软件库。从概念上简单的说,它们的实现很有挑战性,并且在计算机科学中经常被认为是黑魔法。在这个系列的博文中,我会向你们展示为什么你不需要成为哈利波特就能够精通解析器这种魔法。但是为了以防万一带上你的魔杖吧!我们将探索一种叫做 Ohm 的新的开源库,它使得搭建解析器很简单并且易于重用。在这个系列里,我们使用 Ohm 去识别数字,构建一个计算器等等。在这个系列的最后你将已经用不...
2018-08-30 10:24:51 171
原创 HTML5之canvas
Canvas API在网页上使用cnavas元素时,会创建一块矩形区域,默认大小是300*150px坐标从左上角开始的,x轴沿着水平方向向右延伸,y轴垂直方向向下延伸检测浏览器对canvas的支持情况:<!DOCTYPE html><html><head> <metacharset="UTF-8"> <tit...
2018-08-28 16:55:46 193
转载 实用 | JavaScript 常用方法总结
1.手机类型判断var BrowserInfo = {userAgent: navigator.userAgent.toLowerCase()isAndroid: Boolean(navigator.userAgent.match(/android/ig)),isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),isIpa...
2018-08-26 10:30:31 279 1
原创 浅谈JavaScript中的接口
一、什么是接口接口是面向对象JavaScript程序员的工具箱中最有用的工具之一。在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概念的重要性可见一斑。但问题在于,在JavaScript的世界中,没有内置的创建或实现接口的方法,也没有可以判断一个对象是否实现了与另一个对象相同的一套方法,这使得对象之间很难互换使用,好在Jav...
2018-08-25 08:51:31 429
原创 JavaScript This 的六道坎
鉴于this风骚的运作方式,对this的理解是永不过时的话题,本人就试图通过将其大写六块来盯住这个磨人的妖精。首先this is all about contextthis说白了就是找大佬,找当前拥有上下文(context)的对象(context object)。大佬可以分为六层,层数越高权利越大,this只会认最大的。第一层:世界尽头权利最小的大佬是作为备胎...
2018-08-24 11:47:33 123
原创 这五个HTML5特性你绝不可忽视
特性一:正则表达式相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下: <input type="email" pattern="[^ @]*@[^@]*" value="">运行如下:如...
2018-08-23 11:40:17 431
原创 HTML5之Canvas
Canvas API在网页上使用canvas元素时,会创建一块矩形区域,默认大小是300*150px坐标从左上角开始,x轴沿着水平方向向右延伸,y轴垂直方向向下延伸检测浏览器对canvas的支持情况:<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> &l...
2018-08-22 16:57:45 146
原创 5种你未必知道的JavaScript和css交互的方法
用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通用一个元素的style属性获取他的css样式值,但能获取伪元素(pseudo-element)的属性值吗?可以的。使用JavaScript也可以访问页面中的伪元素。 var color = window.getComputedStyle( document.querySelector('....
2018-08-21 16:23:21 152
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人