
★Web前端
哆来咪er
这个作者很懒,什么都没留下…
展开
-
H5之元素与标签结构
主要梳理一下新增和删去的标签及相关属性,以及深入了解h5的全局属性。待续......原创 2018-01-31 01:35:02 · 563 阅读 · 0 评论 -
执行环境及作用域
js中有个最为重要的概念–执行环境。执行环境定义了变量或函数有权访问的其他数据,决定论它们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中(虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它)。全局执行环境是最外围的一个执行环境。在Web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的原创 2017-07-31 22:38:13 · 378 阅读 · 0 评论 -
typeof和instanceof在js中的应用
检测一个变量是不是基本数据类型的最佳工具是typeof操作符。typeof操作符可详细检测出基本数据类型(undefined、null、string、number、boolean),对于引用类型,它只能检测出函数(Function),不能检测出数组和对象。特殊:typeof null //object null是一个空指针 var a = "coco"; var b =原创 2017-07-31 19:07:15 · 340 阅读 · 0 评论 -
JS之传递参数
JS中的参数传递是一个容易让人困惑的地方。JS中所有函数的参数都是按值传递的。即把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。–访问变量有按值和按引用两种方式,而参数只能按值传递。向参数传递基本类型的值时,被传递的值会被复制给一个局部变量;向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变量。看一个例子:function addTen(num){原创 2017-07-30 10:51:23 · 608 阅读 · 0 评论 -
ES6的块级作用域--读书笔记
let实际上为 JS 新增了块级作用域。让我们来看段代码:function f1() { let n = 6; if (true) { let n = 10; } console.log(n); // 6}f1();f1函数有两个代码块,都声明了变量n,运行后输出6。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值原创 2017-06-26 15:21:13 · 603 阅读 · 0 评论 -
ES6之const 命令--读书笔记
const声明一个只读的常量。一旦声明,常量的值就不能改变。const PI = 666;console.log(PI); //666若试图想要改变PI常量的值,如下const PI = 666;console.log(PI);PI=6; //TypeError: Assignment to constant variable.const声明的变量不得改变值,这意味着,const一旦声明原创 2017-06-26 18:22:44 · 741 阅读 · 0 评论 -
ES6之变量的解构赋值--读书笔记
1.变量的解构赋值ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;let c = 3;现在ES6允许这样:let [a, b, c] = [1, 2, 3];–>可以从数组中提取值,按照对应位置,对变量赋值。实质上,这种写法属于“模式匹配”,只要等号两边的模式相同原创 2017-06-27 18:44:17 · 392 阅读 · 0 评论 -
ES6新特性之let命令--读书笔记
let命令,用于声明变量。其用法类似于var,但所声明的变量只在let命令所在的代码块内有效。我们可写一段代码:{ let a = 1; var b = 2; console.log(a);}console.log(b);输出:1 2若我们在代码块的外部输入console.log(a);则会报错–ReferenceError:a is not defined,报出引用错误原创 2017-06-25 20:04:21 · 723 阅读 · 0 评论 -
ES6之块级作用域与函数声明--读书笔记
函数能不能在块级作用域之中声明?ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。// 情况一if (true) { function f() {}}// 情况二try { function f() {}} catch(e) { // ...}上面两种函数声明,据 ES5 的规定都是非法的。但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支原创 2017-06-26 17:02:52 · 1612 阅读 · 0 评论 -
JS基本类型与引用类型知多少
1、JavaScript值类型和引用类型有哪些(1)值类型(基本类型):数值、布尔值、null、undefined。 (2)引用类型:对象、数组、函数。 2、如何理解值类型和引用类型之前看到一个比喻,觉得非常贴切,想要和大家分享一下:用“连锁店”和“连锁店钥匙”来理解。(1)值类型:变量的交换等于在一个新的地方按照连锁店的规范标准(统一店面理解为相同的变量内容)新开一个分店,这样新开的店与其它旧店互原创 2017-06-29 18:07:18 · 546 阅读 · 0 评论 -
如何让sublime text3支持Vue语法高亮显示
1、下载文件链接:GitHub - vuejs/vue-syntax-highlight: Sublime Text syntax highlighting for single-file Vue components或https://github.com/vuejs/vue-syntax-highlight 解开压缩包vue-syntax-highlight-ma原创 2017-05-31 02:07:15 · 5240 阅读 · 0 评论 -
如何在sublime中使用sass
下面我给大家介绍一下,如何使用sublime插件实现对scss文件的编译的吧。首先,你想要使用sass的话,就必须依赖于ruby环境。所以,你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器,因为他真得加载不出来。下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘)转载 2017-05-31 01:20:24 · 1092 阅读 · 0 评论 -
CSS3新增选择器
1. CSS1定义的选择器选择器类型说明E类型选择器选择指定类型的元素E#idID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略。E.class类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略。转载 2017-05-09 21:57:07 · 449 阅读 · 0 评论 -
js之Array类型
1、检测数组2、转换方法3、栈方法4、队列方法5、重排序方法6、操作方法7、位置方法8、迭代方法9、归并方法待续原创 2017-08-01 00:16:41 · 419 阅读 · 0 评论 -
web移动端meta标签小结
1、移动网站要加的html5相关meta和标签a、<!-- 强制让文档与设备的宽度保持1:1 --><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">网页宽度默认等于屏幕宽度(width=device-wid原创 2017-09-24 18:09:24 · 394 阅读 · 0 评论 -
日历组件的编写--html/css/js
我们经常看到的旅游类的网站都会看到日期和时间,如订购火车票、机票等。想要通过原生的html/css/js来完成一个组件的开发。1、用html和css编写静态UI2、用js获取日历的数据并完成渲染3、事件绑定处理前端组件的基本构成和编写模式待续……原创 2017-08-30 23:59:07 · 1210 阅读 · 0 评论 -
移动web开发适配秘籍之rem
移动web开发中我们一定会遇到要处理适配的问题,这里选择rem这一方案。待续...原创 2018-01-31 01:38:04 · 714 阅读 · 0 评论 -
浅谈js中的浅拷贝和深拷贝
对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。深复制实现代码如下(可以从两个方法进行解决):1、通过递归解析解决 var china = {原创 2017-12-01 13:10:59 · 1835 阅读 · 0 评论 -
vue中的事件
vue事件的简写:我们有时会看到这样的写法:@dragstart=’drag()’,这是vue中事件的简写。它的完整写法是:v-on:dragstart=’drag()’,但这往往给人感觉太长了,习惯用简写形式。vue的事件对象:vue中也会有事件对象 , 这样@dragstart=’drag(event)′,在函数中传event)',在函数中传evevt ,函数中接收一下,事件对象就有了。原创 2017-11-30 15:44:56 · 5695 阅读 · 0 评论 -
如何在vue中实现拖拽功能
HTML5 drag & drop 拖拽与拖放想要实现该功能,先了解一下H5中的drag和drop这2个概念。原创 2017-11-30 14:44:33 · 11196 阅读 · 0 评论 -
sublime使用过程中的一些常用配置
sublime里可以不用监听node_module目录,否则,软件多了,会非常卡。如何设置sublime不去索引node_module目录呢? "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "node_modules"]原创 2017-11-29 09:21:49 · 524 阅读 · 0 评论 -
js正则表达式
很多时候,我们对正则表达式的印象都是难学难记,学了又忘,忘了又学,但总觉得记不住。什么是正则表达式?正则表达式(Regular Expression)使用单个字符来描述、匹配一系列符合某个句法规则的字符串。使用正则表达式的目的–替换工作。自己先定义一种规则,然后到字符串中去匹配一下符合这个规则的子字符串。为了更好地理解正则表达式,我们可借助可视化工具,在线地址为:Regexper:http://re原创 2017-11-11 19:52:49 · 658 阅读 · 0 评论 -
CSS盒模型详解
CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了。很多博客里讲得也很模糊不清,于是,我在这里重新整理一下。可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3C标准盒模型。IE盒模型和W3C标准盒模型的区别是什么?1. W3C 标准盒模型:属性width,height只包含内原创 2017-10-25 00:51:48 · 609 阅读 · 0 评论 -
前端性能优化之http请求的过程
在前端面试中,经常会被问到“一个页面从输入URL到页面加载显示完成,这个过程都发生了什么”,这是前端的经典面试题之一。这个过程涉及的东西很多,区分度很高。大致分为这几个过程:1.DNS解析2.TCP连接3.发送HTTP请求4.服务器处理请求并返回HTTP报文5.浏览器解析渲染页面6.连接结束简要回答:浏览器据请求的URL交给DNS域名解析,找到对应的IP地址,向服务端发起请求;服务器交给后台处理完成原创 2017-10-28 17:17:35 · 1214 阅读 · 0 评论 -
es6语法-字符串扩展
字符串新增特性Unicode表示法、遍历接口、模板字符串、新增方法(10种)。1、Unicode表示法{ console.log('a','\u0061');} 输出:a a当unicode的编码大于0xFFFF(码值大于2个字节编码)时,会如何?{ console.log('s','\u20BB7');} 输出:s ₻7很明显没有按一个字符来处理。因为该值已超过了0xF原创 2017-10-09 20:04:54 · 502 阅读 · 0 评论 -
es6语法-解构赋值
左边一种结构、右边一种结构,左右进行一一对应赋值。 左右都是数组☞数组解构赋值; 左右都是对象☞对象解构赋值; …… 解构赋值的分类:数组解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值。数组解构赋值{ let a,b; [a,b] = [1,2]; console.log(a,b);} 输出结果:1 2数组解构赋值的默认值原创 2017-10-09 15:12:00 · 322 阅读 · 0 评论 -
前端性能优化之视频优化方法
待续。。。。。。原创 2017-08-31 20:00:23 · 3419 阅读 · 5 评论 -
前端性能优化之图片优化方法
待续。。。。。原创 2017-08-31 19:59:52 · 563 阅读 · 0 评论 -
如何判断脚本加载完成
在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onre转载 2017-05-15 01:49:55 · 660 阅读 · 0 评论 -
js继承的几种实现方式
记录自浪曦风中叶老师的JavaScript课堂 js继承有5种实现方式: 1、继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } }转载 2017-05-15 01:46:26 · 647 阅读 · 0 评论 -
“按需加载”的应用
按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。加载的文件,可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。按需解析HTML按需解析HTML,就是页面一开始不解析HTM转载 2017-05-15 01:41:10 · 2557 阅读 · 0 评论 -
导航条菜单的制作
导航菜单是网站制作中不可缺少的部分,有水平方向的、垂直方向或用CSS样式的圆角导航条。这里主要归纳一下导航条制作中的常用属性(通常用无序列表构建菜单):.{margin:0; padding:0;} 全局基本样式清除display:block 转换为块级标签display:inline 转换为内联标签display:inline-block 转换为内联块级标签原创 2016-10-31 23:43:39 · 502 阅读 · 0 评论 -
CSS3结构性伪类选择器
在CSS3中,结构性伪类选择器,包含伪类选择器和伪元素选择器,在伪元素选择器中包含first-line、first-letter、before、after。first-line:第1行文字使用样式;first-letter:文字的首字母(第1个字母)使用样式;before:某个元素之前插入一些内容;after:某个元素之后插入一些内容。注:before与af原创 2016-10-28 01:46:48 · 947 阅读 · 0 评论 -
CSS3背景与边框相关样式
在CSS3中,新增了一些与背景相关的属性:background-clip与background-origin,它们都有3个可选值,分别为:border、padding、content--有着不同的效果,这2个属性表示的是元素背景与元素边框、补白(padding)和内容区域间的某种关系。background-clip属性中:border-box:背景将充满整个内容区域,包含边框,原创 2016-10-27 01:23:16 · 772 阅读 · 0 评论 -
Html基础
1、HTML标题HTML 标题(Heading)是通过 - 标签来定义的。(数字越大文字越小,反之亦然)2、HTML段落HTML 段落是通过标签 来定义的.3、HTML链接HTML 链接是通过标签 来定义的.a href="http://www.baidu.com">百度链接-->在 href 属性中指定链接的地址。点击原创 2016-08-10 23:53:23 · 347 阅读 · 0 评论 -
Html元素及属性
1、HTML 元素语法HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容(empty content)空元素在开始标签中进行关闭(以开始标签的结束而结束)大多数 HTML 元素可拥有属性2、HTML元素可嵌套3、HTML 空元素没有内容的 HTML 元素被称为原创 2016-08-11 00:14:09 · 458 阅读 · 0 评论 -
Html标题和段落
1、HTML 标题在 HTML 文档中,标题很重要。标题(Heading)是通过 - 标签进行定义的. 定义最大的标题。 定义最小的标题。-->浏览器会自动地在标题的前后添加空行。请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。原创 2016-08-11 01:16:56 · 1205 阅读 · 0 评论 -
HTML 文本格式化
1、HTML 格式化标签HTML 使用标签 与对输出的文本进行格式, 如:粗体 or 斜体这些HTML标签被称为格式化标签(请查看完整标签参考手册)。通常标签 替换加粗标签 来使用, 替换 标签使用。然而,这些标签的含义是不同的: 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的,所以要突出显示。现原创 2016-08-11 01:31:43 · 712 阅读 · 0 评论 -
Html 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。1、HTML 超链接(链接)HTML使用标签 来设置超文本链接。在标签 中使用了href属性来描述链接的地址。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移原创 2016-08-11 17:21:24 · 938 阅读 · 0 评论 -
Html头部
HTML head 元素标签描述定义了文档的信息定义了文档的标题定义了页面链接标签的默认链接地址定义了一个文档和外部资源之间的关系定义了HTML文档中的元数据定义了客户端的脚本文件定义了HTML文档的样式原创 2016-08-11 18:42:29 · 436 阅读 · 0 评论