- 博客(28)
- 收藏
- 关注
RSS订阅原创 数组去重方法总结
1）ES5常用：利用for嵌套for，然后splice去重function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { //第一个等同于第二个，splice方法删除第二个 arr.spl
2022-05-03 12:53:59
151
原创 js中的数据类型及类型转换
一. 数据类型js中的数据类型：5种基础类型：Undefined，Null，Boolean，Number，String1种复合类型：Object（对象包括数组，函数等）二. 常见的判断js数据类型的方法有如下几种1.最常见的判断方法：typeof其中typeof返回的类型都是字符串形式，需注意!!!!! alert(typeof 123) ------------------>"number"2.已知对象类型: instanceof注意：instanceof...
2022-01-29 16:11:16
4049
原创 事件类型详解
事件事件是用来实现js和html之间交互的，可以用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（js）与页面的外观（html和css）的松散耦合。事件最早是在IE3和Netscape Navigator2中出现的，当时是作为分担服务器运算负载的一种手段。一、事件流事件流描述的是从页面中接收事件的顺序。IE的事件...
2019-09-20 11:24:41
847
原创 面试问题集合
一、版本控制codeReview 用过哪些工具？怎么处理的？ git 操作用过哪些？rebase?merge rebase?怎么处理冲突？如何合并两个hash的内容？怎么查看当初拉分支的状态？二、常规知识跨域用过哪些？jsonp有啥缺点？ jsopn的具体实现原理？手写code。错误怎么处理？后台需要怎么配置 XSS攻击？恶意攻击哪些？ 数组的sort排序有啥问题？如何把一个有序...
2019-09-20 11:23:48
93
原创 react组件库
React组件库目标自动化或半自动化开发 通过配置文件，命令问题 生成可直接用的页面容器。 需要：脚手架工具、配置文件、模版业务页面的编写； 自建的UI库、组件库 能够导出sketch library，实现前端与设计之间的协作。 需要：通过Material-Design重新编写一套UI库，现有的antD需要逐步替换；任务拆解第一阶段： 过程：工具类 & UI库 -...
2019-09-20 11:23:00
470
原创 常见前端攻击方式
现在前端肯定也需要知道安全问题，作为网站开发者，要保证基础的三点：保密性 数据内容不能泄漏，加密是常用方法 完整性 数据内容不能被篡改，特别是现在oAuth盛行的年代，协议要求sign签名，就是保证双方数据完整。一旦信息被改会发生什么不言而喻 可用性 网站服务是可用的常见前端攻击方式DDos攻击，Dos攻击，SQL注入，XSS，CSRF等，D|Dos攻击是通过http协议本身特...
2019-09-20 10:36:46
827
原创 vue简单介绍let和生命周期
vue渐进式开源框架，学习成本很低，功能自由组合；不兼容IE9以下，对象更新有点不舒服。使用所有的框架学习都从使用开始，不得不说vue的使用非常简单，脚手架方式或页面引入方式模版、样式和脚本的分离让初级或从切图转过来的同学非常容易上手。理解通过object.define()方式进行双向数据绑定（劫持和事件广播）因其双向绑定的特性，所以生命周期相对简单，线性的。从bef...
2019-09-20 10:29:26
360
原创 页面响应式设计
1.响应式布局一个网站能够兼容多个终端(指不同分辨率，不同 Dpi 的显示设备)，而不是为每一个终端做一个特定的版本，这样的网站布局方式即称为响应式布局。响应式布局结合多种布局方式，从而确保一个页面能够适应不同终端的显示。常见的动态布局方式：（1）自适应布局是指当视口分辨率改变时，页面的元素位置会自动调整以适应视口的布局方式。（2）流式布局是指当视口分辨率改变时，页面元素的宽度...
2019-09-20 10:25:21
2850
原创 响应式布局
响应式布局前言前几年 H5 崛起的时候，很多网页设计师都觉得，网页设计以后就应该支持全平台，那些老的定宽规格都应该被淘汰。但是，宽度自适应模式和响应式设计不是完全相等的。响应式设计，是在多种平台下可以良好显示和运行的一种框架，在不同的宽度下回展现出不同的排版和样式。是让主内容区域可以随画布的拉伸而做调整，让整个浏览器的画布区域被最大化利用，展示更多的文字信息或图像，带来更好的浏览体验（设...
2019-09-20 10:19:36
380
原创 redux入门总结
为什么要使用redux？为何出现？大型复杂应用（大部分可能不需要） 组件间的通讯，数据状态共享 全局状态改变 修改另一组件状态 数据状态可预测redux的历史redux的前身flux 函数式编程redux的概念和介绍如果你不知道是否需要 Redux，那就是不需要它。 store 保存所有共享数据的容器，全局唯一 通过createStore创建 st...
2019-09-20 10:15:02
145
原创 从打开浏览器输入网址，到页面显示出来经历了什么?
前端的基础知识看似很少：HTML，CSS，JS，实则不然，随着这些年前端工程化，自动化盛行还有大量优秀框架的产生，让没太更新知识的人捉襟见肘这个博客把我自己的经验结合其他优秀前端分享的知识做一个整理和沉淀。从打开浏览器输入网址，到页面显示出来，拢共分几步？答：5步（粗略）第一步：解析DNS输入域名后对域名进行逐级查找，从运营商到国家级域名服务器再到美国根节点，不管是域名还是IP，都可...
2019-09-18 17:32:55
1078
原创 伪类和伪元素区别
伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。下面我们再从定义上感受一下。1.伪类css2中给的定义 css伪类用于某些选择器添加特殊的效果css3中给的定义：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器...
2019-08-19 22:50:47
1095
原创 箭头函数与普通函数的区别
箭头函数let fun = () => { console.log('lalalala');}普通函数function fun() { console.log('lalla');}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ...
2019-08-10 12:06:35
286
原创 左右按钮，切换小图页面
<div class="jjd_com-div"> <div class="pics-frame"> <div class="frame-li"> <img src="img/jjd_ban_img1.jpg" /> <...
2019-07-31 11:11:22
600
转载 js读取解析JSON数据
SON(JavaScriptObject Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。前后端分离开发后，前端一定会经历后端传过来一堆json字符串，然后前端如何解析，展示页面的问题。 本文主要...
2019-07-26 10:48:57
932
转载 图片和文字对齐的方法
文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。方法一、设置各对象的vertical-align属性，属性说明：baseline－将支持valign特性的对象的内容与基线对齐sub－垂直对齐文本的下标super－垂直对齐文本的上标top－将支持valign特性的对象的内容与对象顶端对齐text-top－将支...
2019-06-17 16:23:47
22571
1
转载 JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解
这里是javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;window.innerHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeig...
2019-01-10 18:17:37
788
原创 是否改变原数组的常用方法归纳
改变原数组的：shift：将第一个元素删除并且返回删除元素，空即为undefinedunshift：向数组开头添加元素，并返回新的长度pop：删除最后一个并返回删除的元素push：向数组末尾添加元素，并返回新的长度reverse：颠倒数组顺序sort：对数组排序splice:splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回、...
2018-11-16 20:10:29
268
转载 前端工程师必备的几个实用网站
一、配色类网站http://colorhunt.co这个网站给我们提供了很多的配色方案，我们直接使用就OK了。使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。https://webgradients.com/180种渐变方案供你选择，还可以直接复制CSS样式应用到网页中https://color.adobe.com/z...
2018-09-16 20:52:35
240
原创 前端常用代码段
1、获取设备类型var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.index...
2018-09-16 20:51:50
302
转载 Object.keys方法之详解
在实际开发中，我们有时需要知道对象的所有属性，原生js给我们提供了一个很好的方法：Object.keys()，该方法返回一个数组传入对象，返回属性名var obj = {'a':'123','b':'345'};console.log(Object.keys(obj)); //['a','b']var obj1 = { 100: "a", 2: "b", 7: "c"};console....
2018-06-14 16:12:53
312
转载 css工作中常用的效果总结
1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。html {filter: grayscale(100%);//IE浏览器-webkit-filter: grayscale(100%);//谷歌浏览器-moz-filter: grayscale(100%);//火狐-ms-filter: grayscal
2017-12-01 15:37:15
887
转载 前端构建大法 Gulp 系列 (一)：为什么需要前端构建
我们都知道使用IDE编写后端程序时，我们都需要Build, 对.NET来说，我们一般需要使用Visual Studio来确保我们的项目编译通过，而且项目编译通过是对所有程序员的基本要求。但是，由于很多后端程序员对前端的很多东西不了解，导致在做WEB项目时出现了一些问题。JavaScript和CSS的版本问题我们都知道 JavaScript和CSS属于静态文件，如果地址不变，
2017-11-28 10:33:37
192
原创 web前端开发中的各种居中
一，水平居中方法① ：行内元素 （父元素）text-align，（子元素）inline-block.parent{text-align: center;} .child{display: inline-block;} 总结：优点：兼容性好，支持低版本浏览器缺点：需要同时在父元素和子元素上设置适用场景：子元素数量少（或只有一个），并且需要兼...
2017-11-20 19:21:45
16868
转载 JavaScript 中的 this 机制
1、this是啥？ 简言之，this是JavaScript语言中定义的众多关键字之一，它的特殊在于它自动定义于每一个函数域内，但是this到底指啥东西却让很多人张二摸不着头脑。这里我们留个小悬念，希望看完这篇文章了你能回答出来this到底指什么？2、this有啥用？那么既然this这么难以理解，那么为什么还要用它呢？我们
2017-11-20 13:52:50
189
翻译 H5项目常见问题汇总及解决方案
超实用的CSS样式//去掉webkit的滚动条element::-webkit-scrollbar{ display: none;}//其他参数::-webkit-scrollba //滚动条整体部分::-webkit-scrollbar-thumb //滚动条内的小方块::-webkit-scrollbar-track //滚动条轨道::-webkit
2017-05-11 17:54:30
577
翻译 Flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。例如： box{display:flex; display:-webkit-flex; } 或者这么写 p{ display:inline-flex;}注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
2017-03-24 15:29:49
180
原创 怎么认识json对象和json字符串，以及相互转换
json 字符串：var str1= '{ "name" : "独爱江山" , "age" : 15 }' ;json 对象var str2= { "name" : "冰心林" , "age" : 21 };可以这么理解：json对象是直接可以使用jQuery操作的格式json字符串仅仅只是一个字符串，一个整体，不截取的话没办法取出其中存储的数据，不能直接使用；
2017-02-23 17:39:13
247
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人