- 博客(219)
- 收藏
- 关注
RSS订阅原创 2023前端总结
当数组发生增删时， 默认需要把发生改动的项目全部进行重绘 --- 浪费资源；当添加唯一标识之后， 一旦发生 增删操作之后，重绘之前会检测新绘制的元素 和 已有的元素 是否存在相同的 key ， 相同则复用 --- 不浪费。1、 key的作用主要是为了高效的更新虛拟DOM，其原理是vue在patch（补丁）过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。2、 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug。
2023-06-29 11:57:21
87
原创 2021年高级前端进阶之路
1.两边固定，中间自适应布局 2.js判断字符串中出现次数最多的字符 3.Vue.set的用法及场景 4.Vue自定义指令的钩子函数及使用场景 4.1 钩子函数：bind,inserted,update,componentUpdated,unbind） 4.2 函数参数：el,binding,vnode,oldVnode 4.3 使用场景：按钮级别的权限控制 5.Vue页面渲染过程 （ 5.1 加载文件执行顺序：1.打包配置位置;2.index.htm...
2021-10-15 17:28:14
953
原创 【高级篇】javascript静态页面传值的三种方法 【url方法，取值方便，可跨域; cookie方法，同源访问; window.open方法，指向父窗口】
这篇文章介绍了javascript静态页面传值的三种方法及优缺点，有需要的朋友可以参考一下一：JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm复制代码代码如下:function Post(){//单个值 Read.htm?username=baobao;//多全值 R
2016-08-06 13:02:30
1197
原创 HTML5 Web Workers 运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。【类似多线程并行处理】
HTML5 Web Workersweb worker 是运行在后台的 JavaScript，不会影响页面的性能。什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内
2016-08-06 12:45:26
332
原创 js 数组去重三种方法总结
第一种是比较常规的方法思路：1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比3.若结果数组中没有该元素，则存到结果数组中复制代码代码如下:Array.prototype.unique1 = function(){ var res = [this[0]]; for(var i = 1;
2016-08-05 19:00:48
209
原创 如何给字符加千分符【例如：65，541，694，158】
给字符加千分号 var str = '2359844564654'; function test3(str) { var iNum = str.length%3; //余数 var prev = ''; var arr = []; var iNow = 0; var tmp = ''; if(iNum !=0) { prev = str.substr
2016-08-01 00:53:54
597
原创 如何获取下拉框选中项的内容？
如何获取下拉框选中项的内容？ 如何获取下拉框选中项的内容？ .red{color:red;} *地 区： -请选择地区- 北京 上海 天津 广州 var Obj = document.getElementById("AreaId"); Area_Value = Obj.options[Obj.selected
2016-07-28 17:10:35
1049
原创 如何把一个字符串里的所有单词的第一个字符变大写？
如何把一个字符串里的所有单词的第一个字母变大写？ function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' ')
2016-07-28 16:23:14
327
原创 JavaScript中函数式编程的体现－－map()函数和reduce()函数【arr.map(pow);】都使用回调函数
最近在学JavaScript，中间看到map和reduce方法，觉得挺有意思的，边学边写下这篇博客。这两个函数都在某种程度上体现了函数式编程的思想，即将函数作为传入另一个函数的参数。map()方法的调用者一般是个数组，参数是一个函数，称为callback，返回值是一个由原数组中每个元素执行给定callback函数的返回值组成的新数组。也就是说，当你用map()方法时，是将组
2016-07-28 14:07:39
324
原创 编写代码，让f1继承f2的所有成员 【function f1(){ this.a1 = 1; this.b1 = 2; } function f2(){ this.a2 = 3; 】
编写代码，让f1继承f2的所有成员function f1(){this.a1 = 1;this.b1 = 2;}function f2(){this.a2 = 3;this.b2 = 4;} 编写代码，让f1继承f2的所有成员 function f1(){ this.a1 = 1; this.b1 = 2; } fu
2016-07-28 13:01:49
236
原创 以json的形式表示以下数据库表格内容 【id name city -------------------------- 1 Tom London 2 】
请将如下数据库表的记录用json表示出来id name city--------------------------1 Tom London2 John Newyork3 Alice Paris 以json的形式表示数据表格 1的名字是： v
2016-07-28 11:43:23
687
原创 以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）var str='a b c 20 d ef g 123';
以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）var str='a b c 20 d ef g 123'; 以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符） var str='a b c 20 d ef g 123'; document.write(str
2016-07-28 10:30:36
1328
原创 在以下数组的第二个元素后插入元素3 var ar = [1,2,4,5,6];
在以下数组的第二个元素后插入元素3 var ar = [1,2,4,5,6]; 在如下数组第二个元素后插入一个元素3 var ar = [1,2,4,5,6]; ar.splice(2,0,3); alert(JSON.stringify(ar)); 输出结果：
2016-07-28 10:07:02
661
原创 根据每个元素的i属性，由小到大排列如下数组ar=[{i:5,v:1},{i:5,v:4},{i:2,v:1},{i:1,v:3},{i:3,v:2},{i:6,v:1},{i:4,v:1}];
根据每个元素的i属性，由小到大排列如下数组ar=[{i:5,v:1},{i:5,v:4},{i:2,v:1},{i:1,v:3},{i:3,v:2},{i:6,v:1},{i:4,v:1}]; 根据每个元素的i属性，由小到大排列如下数组 var ar=[{i:5,v:1},{i:5,v:4},{i:2,v:1},{i:1,v:3},{i:3,v:2},{i:6,v:1
2016-07-28 09:58:36
432
原创 hasLayout引发的CSS Bug表 及处理办法【zoom:1】
文章一 ：解决IE兼容问题是比较头疼的问题，无论你是新入门的菜鸟还是久经考验的职业行家，兼容问题，特别是IE，IE6会让你非常头疼。很多时候，div CSS在IE下的解析十分奇怪，一个比较经典的bug就是设置border的时候，有时候border会断开，刷新页面或者滚动滚动条的时候，断掉的部分又会连接起来。这些问题的根源很多时候来源于IE的一个特有属性：hasLayout。ha
2016-07-27 17:59:01
594
原创 前端拾遗
一、js继承问题//有关于原型继承的代码如下:function Person(name) { this.name = name;}Person.prototype = { getName : function() { return this.name; }}function Student(name, id) { Pe
2016-07-27 11:34:22
1363
原创 写一个方法，求一个字符串的字节长度
求一个字符串的字节长度 new function(s) { if(!arguments.length||!s) return null; if(""==s) return 0; var l = 0; for(var i = 0;i<s.length;i++){ if(s.charCodeAt(i)>255) l+=2; else l++; } a
2016-07-27 10:32:14
779
原创 node.js安装配置【下载】
Node.js 安装配置本章节我们将向大家介绍在window和Linux上安装Node.js的方法。本安装教程以Node.js v4.4.3 LTS(长期支持版本)版本为例。Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。你可以根据不同平台系统选择你需要的Node.js安装包。Node.js 历史
2016-07-26 16:36:53
125
原创 node.js简介 是一个基于Chrome JavaScript 运行时建立的一个平台。
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。谁适合阅读本教程？如果你是一个前端程序员，你不懂得像PH
2016-07-26 16:35:17
3036
原创 css3多媒体查询及实例
CSS3 多媒体查询CSS2 多媒体类型@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：
2016-07-26 15:39:55
540
原创 css3 弹性盒子 Flex Box 完整攻略
CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。浏览器支持表格中的数字表示支持
2016-07-25 16:29:15
486
原创 css3 统一框大小 box-sizing:border-box; 【在同一元素的width和height中包含内边距和边框】
CSS3 框大小#div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: content-box;
2016-07-22 11:56:08
1034
原创 css3分页paginationg【各种分页效果】
CSS 分页实例本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。简单分页如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。以下实例演示了如何使用 HTML 和 CSS 来创建分页：CSS 实例ul.pagination { display: inline-block; padding: 0;
2016-07-22 09:42:54
896
原创 CSS 按钮 各种按钮效果大荟萃【过渡变色效果：transition-duration 属性来设置 "hover" 效果的速度；按钮动画效果，transition加上after伪类】
CSS 按钮本章节我们为大家介绍使用 CSS 来制作按钮。基本按钮样式默认按钮 CSS 按钮CSS 实例.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px;
2016-07-22 09:32:43
1166
原创 css3图片【缩略图效果：设置border和padding；响应式图片：width:100%;height:auto；卡片式图片:设置文字的各种绝对定位；滤镜效果；响应式图片相册@media；模态窗】
CSS 图片本章节将为大家介绍如何使用 CSS 来布局图片。圆角图片实例圆角图片:img { border-radius: 8px;}尝试一下 »实例椭圆形图片:img { border-radius: 50%;}尝试一下 »缩略图我们使用 border
2016-07-21 17:40:02
597
原创 CSS3 用户界面【resize，指定是否允许用户调整大小；box-sizing,指定什么方式适应某个区域大小；outline-offset，指定对轮廓偏移和超出边缘位置设定轮廓】
CSS3 用户界面CSS3 用户界面在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。在本章中，您将了解以下的用户界面属性：resizebox-sizingoutline-offset浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz-
2016-07-21 17:06:36
1851
原创 CSS3 多列【column-count :3 分3列；column-gap:40px 列间距； column-rule: 1px solid lightblue;指定列边框样式】
CSS3 多列CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编
2016-07-21 16:52:21
859
原创 css3 动画【永久动画 运动 变色 过渡】兼容处理
CSS3 animation-iteration-count 属性实例播放三次动画：animation-iteration-count:3;-webkit-animation-iteration-count:3; /*Safari and Chrome*/尝试一下 »浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。
2016-07-21 16:35:39
1374
原创 css3 过渡【3600度的自由旋转，同时变大，变色】
CSS3 过渡CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：用鼠标移过下面的元素：CSS3Transition浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前
2016-07-21 16:17:48
1629
原创 CSS3 2D 转换【旋转transform:rotate（30deg）; 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】
CSS3 2D 转换CSS3 转换CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。它是如何工作？变换的效果，让某个元素改变形状，大小和位置。您可以转换您使用2D或3D元素。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的
2016-07-21 10:28:58
2303
原创 CSS3 字体【@font-size使用全攻略-配合font squirrel】
篇1：CSS3 字体CSS3 @font-face 规则以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。
2016-07-21 10:02:11
1530
原创 CSS3 文本效果 小清新风来 【卡片效果：box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);】
CSS3 文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性：text-shadowbox-shadowtext-overflowword-wrapword-break浏览器支持属性 text-shadow4.010.0
2016-07-20 17:42:15
4339
原创 css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变（Gradients）CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐
2016-07-20 17:29:21
3087
原创 css多背景图设置， 【background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 】
CSS3 背景CSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性：background-imagebackground-sizebackground-originbackground-clip您还将学习如何使用多重背景图像。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在
2016-07-20 13:42:27
3264
原创 css3各种你不知道的圆角大杂烩【border-radius: 15px 50px:】【文章内图像看不到效果，直接看代码】
CSS3 圆角CSS3 圆角使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。CSS3 圆角制作器浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。属性
2016-07-20 09:47:55
211
原创 CSS3 边框 【border-radius:设置圆角；boder-image:设置边框图片；box-shadow:设置阴影效果】
CSS3 边框CSS3 边框用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-imageCSS3 圆角在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。在CSS
2016-07-20 09:35:48
1389
转载 看懂此文，不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
抽空学习了下javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。 (一)事件绑定的几种方式javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。
2016-07-18 14:26:26
201
原创 JavaScript-面向对象-系统函数-内部类-Math-Date-String-Array-Boolean-Number
内部类 - Math - Date - String - Array - Boolean - Number系统函数1. 内部类 1) 什么是内部类 JavaScript中本身就提供一些 可以直接使用的类, 这种由JS本身事先定义好的类就是内部类 2) 主要的内部类 ① Array
2016-07-18 14:05:22
1739
原创 如何让旧浏览器支持HTML5新标签 IE6兼容html5标签【不用if判断就搞定了哦！】
开发永远和理论不相同，一旦考虑IE低端浏览器，所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说，是有利于网站SEO的，那么如果在高端浏览器中使用了新元素，应当如何让低端浏览器兼容呢？如何让旧浏览器支持HTML5新增标签HTML5出现也不短了，很多网站的页面都进行了改版，为了降低代码量（不需要起太多的类名），提升加载速度，提高标签的语义性，因此，在网页中大量
2016-07-12 17:07:22
293
原创 各大著名公司移动端页面 - 导航的实现【学习点干货】
伴随着科技的发展，出现了各种型号的手机，导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说，移动端的实现方法没有一个统一的标准，大家各自采用自己的实现方法，所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏给大家分享之前，先说几句话。本文章主要给大家分享不同公司对移动端的实现采用了不同的方法。每一种方法各有各的好处，我们不能说哪一种方法好，哪一种方法不好。另外，这边
2016-07-12 16:53:10
1808
七.React原理剖析 React核心api
2022-09-03
六. React实战 1.掌握企业级应⽤用框架 - umi 2.掌握数据流⽅方案 - dva
2022-09-03
五.React全家桶2 1. router使用2. 整合redux，完成路路由守卫逻辑
2022-09-03
三. React组件化2 1.使用antd 2.设计并实现表单控件
2022-09-03
二.React 掌握组件化开发中多种实现技术 高阶组件 - HOC Hooks（>=16.8）
2022-09-03
一.React入门 create-react-app使用
2022-09-03
React 原理剖析 React核心api 虚拟dom diff算法 patch过程
2022-09-03
React 1.掌握企业级应用框架 - umi 2.掌握数据流方案 - dva 3.掌握⽣生成器器函数 - generator
2022-09-03
React全家桶2 react-router 安装 基本使⽤用 动态路路由 嵌套 404⻚页⾯面 路路由守卫 与HashRout
2022-09-03
React组件化2 1.掌握第三方组件正确使用方式 2.能设计并实现自己的组件 3.了了解常见组件优化技术
2022-09-03
掌握组件化开发中多种实现技术 1. 了解组件化概念，能设计并实现⾃⼰需要的组件 2. 掌握使⽤跨层级通信-Context（新A
2022-09-03
React入门 1. create-react-app使⽤ 2. 掌握组件使⽤ 3. 掌握JSX语法 4. 掌握setSta
2022-09-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人