Web前端
文章平均质量分 86
刻刻帝丶
这个作者很懒,什么都没留下…
展开
-
React Hook + TypeScript + styled-component 建站
技术选型Vue 与 React 的对比组件化Vue 的组件化是将 UI 结构(template)、UI 样式(style)、数据与业务逻辑(script)都放在一个 .vue 的文件中,运行前 .vue 文件会被编译成真正的组件;React 的组件化是直接通过 JS 代码的形式实现组件模板引擎Vue的视图模板使用类 HTML 的写法加上属性与指令,多数情况下要比 React 的 JSX 写法清晰且开发效率高,但是在复杂场景下,Vue 的写法有时会比 React 写起来更麻烦数据监听Vue原创 2021-06-08 13:53:51 · 1112 阅读 · 1 评论 -
JavaScript条件语句的性能问题
条件语句和循环一样,条件语句同样会改变运行流 JavaScript的条件语句分为两种if-elseswitchif-else是我们最常用的了 不过if-else语句与switch语句很多情况都能够互相替换if(foo){ ...}else{ ...}switch(foo){ case true: ... default:原创 2016-11-06 21:03:27 · 1580 阅读 · 0 评论 -
JavaScript日期对象常用方法及应用
感觉我这个标题也的很大 其实日期对象并不常用,应用好像也不多 但是我们需要了解一些基本的用法日期对象Date日期对象是js原生的构造函数 不像数组、对象什么的,它没有对应的常量形式 创建一个日期对象很简单var date = new Date();Date()可以带参数,指定日期和时间 不带参数就是使用当前的日期和时间Date()主要是用来获取当前的时间戳(距离1970年1月1日的毫秒数)原创 2016-11-06 19:10:22 · 1859 阅读 · 0 评论 -
JavaScript的提升行为及原理分析
对于刚刚学习JavaScript的同学,可能它的一些行为让你刚到疑惑 和你在学校学过的C/C++差很多 比如说这样的情况a = 1;var a;console.log(a);// 1有些同学可能会认为应该是undefined才对,var a好像给a重新赋值了 再如这样的情况console.log(a);// undefinedvar a = 1;a还没声明就打印,应该是报错才对啊,或者参原创 2016-11-05 20:53:10 · 1166 阅读 · 0 评论 -
原生JavaScript与jQuery(绝对、相对定位)实现拖拽效果
今天给大家谈谈这个拖拽功能的实现 一是想复习一下这个小知识,二是看到网上都是absolute绝对定位实现的,感觉有一定局限性 所以自己写了一下用relative相对定位来实现的拖拽效果原生js绝对定位实现拖拽首先我们来思考一下拖拽功能用到的事件 拖拽无非是鼠标按下点击物体(DOM节点) 鼠标移动,物体移动 鼠标抬起,物体停止拖拽 所以这里我们需要绑定三个事件 mousedown、mou原创 2016-11-03 21:54:58 · 7371 阅读 · 0 评论 -
JavaScript中的七种值类型与typeof运算符
打算从基础开始复习JavaScript, 顺便分享总结一下自己学过的知识内置类型JavaScript中有七种内置类型,包括六种基本类型和一种引用类型基本类型number(数字)string(字符串)boolean(布尔值)undefined(未定义)null(空值)symbol(符号)【ES6规范新增】引用类型object(对象)其中基本类型是保存在栈内存中的简单数据段,在内存中有原创 2016-11-02 22:56:10 · 1573 阅读 · 0 评论 -
JavaScript判断变量是否为数组的方法
数组是编程语言中最基本而且重要的数据结构 在我们JavaScript中,数组是特殊的对象 有时候我们就会遇到判断数组的问题 今天我给大家整理一下哪些方法能够判断一个变量是否是数组instanceofvar arr = [1,2,3];console.log(arr instanceof Array);//trueinstanceof运算符会检测arr是否继承自Array.prototype原创 2016-10-30 15:41:02 · 1907 阅读 · 0 评论 -
主流浏览器内核及JS引擎
给大家科普一下主流浏览器 学习web前端,浏览器和编辑器是我们的好朋友 所以有必要了解浏览器的一些小知识 比如:什么是主流浏览器主流浏览器主流浏览器是有一定市场份额且有自己独立研发内核的浏览器 这其中我们大家常见的有: IE/Edge,Chrome,Safari,Opera,Firefox 嗯今天是2016.10.29 我给大家看看今天的浏览器市场份额数据统计 Net Market原创 2016-10-29 16:38:00 · 4247 阅读 · 0 评论 -
JavaScript深层克隆对象
今天做题看到了深层克隆对象,并且要求在原型链上编程 于是心血来潮索性来复习一下这个知识点克隆对象,这名词看着高大上,其实也没什么,便是拷贝一个长的一模一样的对象 也许有初学的小伙伴在想,那还不简单么,so easyvar obj1 = {name: 'payen'};var obj2 = obj1;这可并不是克隆对象,obj1和obj2根本就是同一个对象, 他俩指向同一个内存地址空间,拿到了原创 2016-10-26 22:37:57 · 3658 阅读 · 5 评论 -
JavaScript中的原型继承
JavaScript语言是面向对象的语言, 但是它是基于原型的面向对象语言 这和C++等一些语言不同, 它实际上并没有”类”, 不能实例化”类”原型编程的基本原则:所有的数据都是对象得到一个对象,并不是通过实例化类,而是找到一个对象作为原型并继承它对象会记住它的原型如果对象无法响应某个请求,它会把这个请求委托给自己的原型下面就来我们就来看看JavaScript是怎样以这样的规则构建对象的原创 2016-10-25 19:05:39 · 1235 阅读 · 0 评论 -
JavaScript循环语句的性能问题[旧]
在大部分编程语言中, 循环语句消耗了大部分时间而循环语句又是十分重要的编程模式在JavaScript中, 有四种循环类型for循环, while循环, do-while循环, for-in循环前三种循环在其他语言也很常见for-in循环每次迭代同时会搜索实例或时原型属性, 所以它每次迭代会产生更多开销for-in循环最终只有其他三种类型速度的1/7所以,原创 2016-10-22 18:26:27 · 1661 阅读 · 0 评论 -
JavaScript队列、优先队列与循环队列
队列是一种遵从先进先出(FIFO)原则的有序集合 队列在尾部添加新元素,从顶部移除元素队列的理解队列在我们生活中最常见的场景就是排队了 队列这个名字也已经很通俗易懂了和栈很像,这不过队列是先入先出的数据结构 队列的前面是队头 队列的后面是队尾 出队从队头出 入队从队尾入队列的创建和栈类似,这里我就不就不啰嗦了 同样需要实现一些功能 这里我类比生活中的排队上厕所向队列中添加元素原创 2016-11-10 21:49:31 · 3396 阅读 · 1 评论 -
JavaScript栈的实现
栈是一种遵从先进后出(LIFO)原则的有序集合。 新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端就叫栈底。 在栈里,新元素都靠近栈顶,旧元素都接近栈底昨天因为有点事没有更新,今天打算给大家讲讲JavaScript实现的数据结构 以前学C/C++的时候,感觉算法还是比较重要的,但是前端好像涉及的不多 其实作为程序员,了解一些基本算法应该是必须的栈的理解栈这种数据结构其实很好原创 2016-10-29 15:22:34 · 2027 阅读 · 0 评论 -
JavaScript内部属性[[Scope]]与作用域链及其性能问题
学习JavaScript已经很长时间了 今天打算回忆一下作用域的知识 作用域这个知识很基础并且非常重要 下面我就总结一下JavaScript中的作用域以及作用域链的相关知识作用域作用域是什么? 作用域是变量能够引用、函数能够生效的区域 它限制了你对内存空间上值的获取和修改 所有的语言都存在作用域 我们可以理解作用域为js引擎根据名称查找变量的一套规则 理解了作用域,我们才能去理解闭包原创 2016-11-08 20:09:33 · 10192 阅读 · 9 评论 -
JavaScript类型检查与内部属性[[Class]]
所有对象都包含有一个内部属性[[Class]] 我们不能直接访问这个属性,但是我们可以通过一种方法访问 这种方法就是Object.prototype.toString.call(...) 这也是比较靠谱的检查类型的方法(instanceof、constructor等等不靠谱)比如说我们检测一个数组Object.prototype.toString.call([1,2,3]);控制台打印"[ob原创 2016-11-08 10:57:08 · 3054 阅读 · 0 评论 -
JavaScript欺骗词法的eval、with与catch及其性能问题
正常来说,执行期上下文的作用域链是不会改变的 所以很多同学都认为JavaScript中只有词法作用域(静态作用域,作用域由书写代码时函数声明位置决定) 但其实有几种机制是可以欺骗词法的 它们是with()、eval()还有try-catch语句的catch语句 其中with和eval我们不应该去使用(会产生很多问题) 欺骗词法的意思就是欺骗词法作用域 也就是说,在运行时修改作用域链 这原创 2016-11-09 21:04:03 · 2686 阅读 · 1 评论 -
JavaScript循环语句的性能问题
在大部分编程语言中, 循环语句消耗了大部分时间 而循环语句又是十分重要的编程模式在JavaScript中, 有四种循环类型for循环while循环do-while循环for-in循环前三种循环在其他语言也很常见 for-in循环每次迭代同时会搜索实例或原型属性, 所以它每次迭代会产生更多开销 for-in循环最终只有其他三种类型速度的1/7 所以, 除非我们明确需要迭代一个属原创 2016-10-25 23:01:14 · 3039 阅读 · 2 评论 -
理清JS中的词法、静态、动态、函数、块作用域
额刚刚写了好多,结果被我误操作覆盖掉了,我的心血 ╥﹏╥… 没关系重新写一遍,也提醒同样在这个平台写博客并且像我一样使用markdown语言码字的同学 “保存线上到草稿”是一个好习惯,嗯嗯 今天双十一,感觉该剁手了。。很多同学在学习JavaScript的时候,可能会听说“各种各样”的作用域 什么词法作用域、静态作用域、动态作用域、函数作用域、块作用域 傻傻分不清楚 下面我就给大家理清一下原创 2016-11-11 18:52:08 · 2853 阅读 · 0 评论 -
JavaScript匿名、具名函数与立即执行函数IIFE详解
JavaScript中的函数作用域的存在就是为了把变量和函数“隐藏”起来 符合我们的最小特权原则 同时它的另一个好处是可以避免同名标识符的冲突 今天主要来谈谈这个立即执行函数 在此之前的复习一下匿名函数与具名函数匿名函数与具名函数无论是匿名还是具名,都是针对函数表达式来说的 函数声明那就必须得有名字了,否则会报错的function foo(){ //函数声明 //...} 这原创 2016-11-12 11:49:49 · 4908 阅读 · 2 评论 -
CSS3多重背景及背景图片裁剪、定位和尺寸
CSS3之前我们可以对背景添加一张图片 CSS3允许我们在一个元素上添加多个图片多重背景图片<div class="demo"></div>.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}多重背景可以把多个图片资源添加原创 2016-11-15 22:57:50 · 19165 阅读 · 2 评论 -
CSS3字体与文本效果
CSS3允许我们使用自定义字体 也多了一些不错的文本效果自定义字体使用自定义字体需要使用@font-face规则 当然首先你要有自定义文字文件<p class="demo">Payen S.Tsung</p>@font-face { font-family: myDIYfont; /*自定义字体名*/ src: url('Ginga.ttf'); /*字体文件*/}.demo原创 2016-11-15 20:48:12 · 1424 阅读 · 0 评论 -
CSS3圆角、盒阴影与边框图片
今天开始整理CSS3的知识 其实应该是昨晚写的,不过好像是急性肠胃炎了,痛的一晚上没睡着,蓝瘦香菇 还好今天打点滴睡一觉就好了,看来这吃东西还是注意点好,被我的胃肠报复了 CSS没什么难的,不过看的同时自己要在浏览器上试一试,试一遍就记住了 光看不做白看CSS3各个浏览器是存在兼容问题的 不同浏览器有不同前缀的私有属性,表示属性或规则还没有成为标准 换句话说,官方还没公布标准的时候,各个原创 2016-11-14 17:14:00 · 2891 阅读 · 0 评论 -
服务器返回的14种常见HTTP状态码
当我们从客户端向服务器发送请求时 服务器向我们返回状态码 状态码就是告诉我们服务器响应的状态 通过它,我们就可以知道当前请求是成功了还是出现了什么问题 状态码是由3位数字和原因短语组成的(比如最常见的:200 OK) 其中第一位数字表示响应类别,响应类别从1到5分为五种 add:其实我查阅资料发现还有一个6打头的一个 600 Unparseable Response Headers原创 2016-11-13 11:01:58 · 53804 阅读 · 7 评论 -
浅析JavaScript设计模式——代理模式
代理模式 为一个对象提供一个代用品或占位符,以便控制对它的访问好久没有写设计模式的文章了 今天要写的代理模式可能内容要多一些 代理模式非常有用,代理模式也分为很多很多种,我只谈一些常见并且简单的 思想其实都是一样的 代理这个词我们并不陌生,在生活中例子也很多,比如,经纪人… 当我们不方便直接访问一个对象或者访问对象不满足我们需求的时候 我们可以把这个对象的控制权交给一个代理对象,原创 2016-11-17 20:33:54 · 2560 阅读 · 0 评论 -
jQuery框架常用的性能优化
jQuery作为一个JavaScript非常优秀的库 是我们在学习前端过程中必学的 虽然它的流行程度已经没有那么巅峰了 但是学习了它对我们学习理解其他框架来说很有帮助 今天第一次写jQuery的相关文章,就先把这个性能问题拿出来 因为大家把时间都用在jQuery语法上了,对这个框架的性能优化不是很了解 下面我来给大家总结一下jQuery常用的性能优化选择器的使用jQuery原创 2016-11-02 13:05:06 · 1583 阅读 · 0 评论 -
CSS3选择器介绍及用法总结
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注: ele代表element元素 attr代表attribute属性,val代表value属性值 :xxx都属于伪类选择器,::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器 选择器 类型 示例 说明 .class 类选择器 .demo原创 2016-11-16 18:10:56 · 7038 阅读 · 0 评论 -
浅析JavaScript设计模式——迭代器模式
迭代器模式 提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示迭代器模式不像我们上次讲的代理模式 它十分简单,简单到我们可能都不认为它是一种设计模式 因为我们现在使用的语言基本上内部都实现了自己的迭代器 迭代器可以抽取内部的逻辑,我们不需要知道对象内部长什么样 就可以按顺序访问它内部的元素自定义迭代器ES5中给我们的数组扩展了很多原型方法、 其中就有一个好原创 2016-11-18 14:19:48 · 1490 阅读 · 0 评论 -
JavaScript中容易忽视的高效操作——位操作
很多JavaScript的书都很少提到位操作 包括一些字典型的都讲的很少 因为它真的是几乎用不到 第一次接触位运算的时候,还是在学习C语言的时候 位操作是计算机底层的操作,所以它的运算速度非常快位操作JavaScript中数字都是64位格式存储的 我们在位操作的时候,数字被转换为32位数字, 于是位运算就是直接操作这32位数 虽然需要转换,但是位运算仍然要更加迅速 顶级原型中的toS原创 2016-11-18 19:58:23 · 1536 阅读 · 0 评论 -
浅析JavaScript设计模式——策略模式
策略模式 定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换在我们的生活中,想要达到一种目的可以有不同的方法 所谓“条条大路通罗马” 在我们的程序中,想要实现一种目的的方法也可能不同 所以就引入了我们的策略模式举一个原创 2016-11-09 13:54:51 · 1222 阅读 · 0 评论 -
浅析JavaScript设计模式——单例模式
单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点举一个通俗的例子,在页面中点击登录按钮,弹出了一个登录浮窗,这个登录浮窗是唯一的,无论我们单击多少次,浮窗只会创建一次其实我们可能无意中都会使用过单例模式,我们的做法往往都是使用一个变量来标志当前是否已经为某个类创建了对象, 如果true,那么下一次再想获得这个类的实例时,直接返回之前创建过的对象单例模式的核心是确保只有一个实例原创 2016-10-26 13:38:29 · 3195 阅读 · 0 评论 -
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概原创 2016-12-10 19:59:23 · 12889 阅读 · 5 评论 -
CCS3盒模型与盒模型属性box-sizing
这两天写的都是小知识点 因为确实有点忙 虽然很简单,但是本着全面总结的原则,还是要说一下 今天我来说一下这个CSS中的盒模型 以及CSS3中可以改变盒模型的属性盒模型盒模型是计算元素尺寸的模型规则 在我们CSS中盒模型分为两种W3C标准盒模型正常情况下我们用的都是这个标准的盒模型 标准盒模型中元素尺寸使用如下计算方式 元素实际宽度 = width + padding(左右内边距大小)原创 2016-11-21 22:42:03 · 2868 阅读 · 0 评论 -
CSS3元素过渡属性transition
过渡动画是动画的基础 在学习动画属性之前 我们需要先了解过渡属性transition过渡transition先来看一个小例子<div class="demo"></div>.demo { width: 100px; height: 100px; background-color: royalblue;}.demo:hover { width: 200px;}原创 2016-11-23 16:59:27 · 4214 阅读 · 0 评论 -
CSS3动画animation相关属性与关键帧规则keyframes
我昨天写三维正方体的时候,就用到了动画的语法 今天就来系统复习一下 过渡transition有着它的局限性 虽然简单,但是它只能在两个状态之间改变 并且它需要事件的驱动才能够进行 不能够自己运动 所以为了解决这样的问题 我们需要animation动画动画若想实现动画效果 仅仅有animation属性是不够的 我们还需要@keyframes规则 先来看一个例子div class="原创 2016-11-23 20:53:54 · 7061 阅读 · 0 评论 -
CSS3景深、三维变换属性及旋转三维立方体的实现
上周简单写了一下2D变换 今天来写写3D变换 三维立体效果我觉得是CSS3中最有意思的地方 不得不佩服那些开发者大神们 让我们能够通过几行CSS代码就能得到酷炫的视觉体验浏览器坐标系在讲正式语法之前,首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方原创 2016-11-23 13:42:02 · 14791 阅读 · 0 评论 -
CSS3元素2D平面变换属性transform
CSS3的形状变换允许我们对元素拉伸、缩放等等 这篇我主要谈下一2D平面变换 属性transform可以进行变换 transform就是变形的意思 并且它主要通过函数来使用,有以下函数translate() 平移变换ratate() 旋转变换scale() 缩放变换skew() 倾斜变换matrix() 矩阵变换transform-origin则时定义变换的中心平移变换trans原创 2016-11-19 16:51:17 · 1610 阅读 · 0 评论 -
CSS3多列布局columns相关属性
CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字太长的话,我们可能会没有读下去的欲望像这样<div class="demo">......</div>.demo { width: 600px; height: 200px; b原创 2016-11-20 23:10:38 · 3733 阅读 · 0 评论 -
响应式布局:CSS3媒体查询Media Queries
利用我们的CSS3实现响应式布局 仅仅有弹性盒还不够 CSS3还扩展了media属性,增加了一个模块功能 Media Queries媒体查询功能媒体查询引入随着移动端的快速普及 越来越多的用户使用智能机、平板电脑等浏览页面 所有考虑到用户的需求 我们要保证用户在各种设备上浏览页面都有不错的体验 这样我们就需要媒体查询 它允许我们为不同的设备或者不同条件的设备设置不同的样式 不过如果原创 2016-11-24 21:21:40 · 1661 阅读 · 0 评论 -
响应式布局:CSS3弹性盒flex布局模型
页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display、position、float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间 即使我们的容器元素尺寸改变 它内部的元素也可以调整它的尺寸来适应空间 若想让一个元素变成弹性盒 很原创 2016-11-24 13:23:10 · 4208 阅读 · 0 评论 -
浏览器重绘与重排的性能优化
了解了浏览器渲染原理之后 我们知道了浏览器听过渲染树计算布局后,就开始绘制页面元素 但是渲染树并不是一成不变的,在我们的脚本当中 它是可能改变的重绘与重排当DOM变化影响了元素的几何属性(宽、高改变等等) 浏览器此时需要重新计算元素几何属性 并且页面中其他元素的几何属性可能会受影响 这样渲染树就发生了改变,也就是重新构造RenderTree渲染树 这个过程叫做重排(reflow)如果D原创 2016-11-25 21:54:30 · 6282 阅读 · 2 评论