- 博客(27)
- 收藏
- 关注
RSS订阅原创 数据结构Set和WeakSet
数据结构Set和WeakSet 定义: Set是ES6提供的一种新的数据结构。它类似于数组，但是成员的值都是唯一的，没有重复的值。 属性 Set.prototype.constructor：构造函数，默认就是Set函数。 Set.prototype.size：返回Set实例的成员总数。 let set = new Set() console.dir(set.constructor); //ƒ Set() console.log(set.size); // 0 set.add(1)
2020-09-01 19:02:09
239
原创 Node.js包管理工具npm的基本使用
npm的基本概念 npm 是node的包管理工具 它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。 来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。 作用：通过npm来快速安装开发中使用的包 npm不需要安装，只要安装了node，就自带了npm npm基本使用 初...
2020-09-01 18:11:07
461
原创 link和@import引入CSS文件 的区别
link 和@import 的区别 @import是CSS2.1之后发布的,CSS2.1,之前的使用不了,link没有限制 @import需要等页面html结构加载完毕后,才会引入CSS样式,link是同时引入 @import只能引入CSS文件,link可以引入除了CSS的其他文件 @improt引入的CSS不能通过JS操作样式,link引入可以 ...
2019-10-28 13:57:02
450
原创 JavaScript中递归函数及递归深拷贝
递归函数 递归函数: 函数内部直接或者间接的调用自己 递归的要求： 自己调用自己（直接或者间接） 要有结束条件（出口） //错误示范 function fn() { console.log(123); fn();//内部再次调用函数,无限循环,没有结束条件,无限输出123 } fn(); //调用fn函数 //正确示范 var count = 0; // 统计fn函数的调...
2019-10-25 16:24:13
335
原创 JavaScript之String对象
String对象 字符串可以类似于看做是一个数组（不是真的数组——》伪数组） // 底层会默认转换成 String对象,这里是为了演示 var str = new String('abcdefg'); console.log( str ); 如下图所示: 控制台输出的是一个对象,有下标,有length属性,由此可以把字符串看做是一个数组（不是真的数组——》伪数组） 字符串的遍历 var...
2019-10-23 18:19:26
227
原创 JavaScript之Date对象
Date对象 JS提供了一个Date构造函数,通过new Date() 可以获取到一个Date对象 创建一个日期对象 //不传参,获取一个当前时间的对象 var now = new Date();//Wed Oct 23 2019 16:05:34 GMT+0800 (中国标准时间) //(格式固定)指定具体的时间对象，后面的时分秒可以省略 var date = new Date("2019...
2019-10-23 16:44:23
246
原创 bootstrap框架的基本使用
bootstrap框架 Bootstrap ，来自 Twitter，是目前很受欢迎的前端框架,主要应用于响应式开发。 特点： 组件简洁大方、代码规范精简、界面自定义性强。 Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。 版本： 2.x.x 停止维护 ...
2019-10-23 15:12:36
4917
2
转载 CSS3 Grid 网格布局教程-转载自阮一峰
一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目...
2019-10-22 10:10:14
1784
原创 响应式布局的基本介绍及原理
响应式布局的介绍 响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（pc、手机、平板） 什么是响应式布局 早期： 同一个页面需要开发不同设备的版本，公司开发成本较高 pc端需要开发写一套页面，专门给pc端看 移动端再开发一套页面，专门给移动端看 响应式布局： 同一个页面只需要开发一套网页，...
2019-10-19 10:56:00
3199
原创 移动端rem布局基本介绍及原理
rem布局 em和rem的认识 在布局中，除了px之外，还有两个常见的单位，em和rem em： 相对于当前元素的字体大小→ 1em = 当前标签的font-size rem： 相对于根元素（html）的字体大小→ 1rem = html标签的font-size 浏览器默认的font-size的大小为16px rem布局的效果： 屏幕越大，标签就越大 屏幕越小，标签就越小 rem布局的...
2019-10-19 10:22:28
5730
原创 移动端开发视口的概念及作用
移动开发的现状 移动端屏幕尺寸更小 移动端和pc端开发本质上一样的，都是用HTML/CSS/JavaScript的技术。 问题： 移动端开发与传统的pc端开发有什么区别？ 浏览器不同（兼容性区别） pc端：浏览器种类很多，需要添加不同的私有前缀 谷歌浏览器 苹果浏览器、 UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、搜狗浏览器、猎豹浏览器… 移动端：浏览...
2019-10-18 21:20:41
1134
原创 用LESS函数写CSS样式简单上手教程
LESS 在写css的时候，可以直接写一个.css文件，但是实际开发中也会使用less的方法写css。 less的写法比css的写法功能更加强大。 Less简介 Less 是一门 CSS 预处理语言，它扩展了 CSS 的写法，增加了变量、函数等特性。 注意点： 在less中，完全兼容css的语法，所以可以直接在less文件中写css没问题 浏览器不认识less文件，需要需要使用less中的样式，...
2019-10-18 18:19:28
5252
1
原创 ES5数组五个迭代方法
ES5迭代方法 ES5主要新增了5个迭代方法 forEach() var arr = [11, 22, 33, 44]; //形参可以传三个(有需要则传,不需要则不传) //v: 数组中每一项 //i: 数组中每一项的下标 //arr1: 数组本身 arr.forEach(function (v, i, arr1) { // 遍历数组每一项,输出4个结果 console.log(v);...
2019-10-18 08:28:08
687
原创 分析call,apply,bind作用
call,apply,bind是Function.prototype原型上的方法 任何函数都可以访问call,apply,bind方法(原因:任何函数的原型链上都有Function.prototype原型) bind,apply,call的区别 ...
2019-10-17 08:25:37
870
3
原创 JQuery源码整体架构分析
JQuery源码整体架构分析 本文分析的jq版本为1.7.0 //首先把jquery架构内部代码全部删除 (function () { })() //很明显可以看出这是个函数的自调用 函数自调用的好处:形成沙箱模式,防止全局变量污染问题 //我们都知道在使用jquey功能的时候可以用$ 和 jQuery作为标识符,那他们是哪里来的? (function (window, undef...
2019-10-16 09:04:56
357
原创 JavaScript之Math对象
Math对象 Math对象中封装很多与数学相关的属性和方法。 Math对象没有构造函数Math()，无需创建它，通过把 Math 作为对象使用可以直接调用其所有属性和方法。 圆周率 // 圆周率 π Math.PI console.log( Math.PI );//3.141592653589793 最大值/最小值(重要) //最大值：Math.max() //最小值：Math....
2019-10-15 08:27:25
342
转载 BFC 神奇背后的原理
BFC神奇背后的原理 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。 一、BFC是什么？ 在解释 BFC 是什么...
2019-10-14 15:54:27
489
原创 移动端流式布局(百分比布局)
流式布局 布局特征: 高度写死，宽度自适应。并不是百分百还原设计图 比如：设计图是针对320px屏幕设计的，那么只有在320设备的屏幕中，才是完美的效果，其他情况都会拉伸 小图片、小图标、文字大小一般写死 大图片一般宽度自适应，高度等比例缩放(例如:轮播图) 经典的流式布局： 左侧固定，右侧自适应 方法有很多种,简单例举3种。 //html结构如下: <div c...
2019-10-13 12:37:30
2690
6
原创 函数的四种调用模式=>分析this指向
函数的四种调用模式 注意:在函数声明的时候是无法确定this的指向,只有当函数调用的时候才能确定下来！ 在函数中this的指向是灵活的,要想知道this的指向需要分析两点: 1.看this是属于哪个函数的 2.看函数是何种调用模式 根据函数内部this的指向不同，可以将函数的调用模式分成4种 函数调用模式 构造函数调用模式 方法调用模式 上下文调用模式（借用方法模式） 函数：当一个函数不是一个...
2019-10-12 21:46:52
509
原创 JavaScipt中三种常用的继承方法
JS中的继承:一个对象可以使用另一个对象的成员(属性和方法) 目的:方便代码的复用 继承的三种方式 1.原型链继承 2.借用构造函数继承 3.组合继承 原型链继承的写法 1.往原型对象身上逐一添加属性和方法 //创建一个构造函数Person,并且身上并没有任何属性和方法 function Person() {} //给构造函数的原型上添加了属性sayHi方法 Person.prototype.c...
2019-10-12 16:59:45
998
3
原创 清除浮动的四种方式
方法一: 定高法 强行给父元素添加一个高度 弊端:后期不好维护 方法二: 额外标签法 在浮动元素最后面添加一个块级元素 给这个块级元素添加一个clear:both就可以解决这个问题 弊端:每一次清除浮动都需要添加一个额外标签 <div class="father"> <div class="son"></div> <div style=...
2019-10-11 09:33:42
396
原创 ES3、ES5、ES6数组常用的方法
Array对象 js中内置了一个Array构造函数,可以创建数组对象,本文主要介绍数ES3、ES5、ES6数组中一些常用的方法。 join(字符串分隔符) // 语法：arr.join(分隔符) var arr = ['刘备','张飞','关羽']; // 不传参数，默认每一项之间以 逗号 进行拼接 var str = arr.join(); //刘备,张飞,关羽 //按 - 进行拼接 va...
2019-10-10 14:54:35
897
原创 jsonp原理及实现步骤
JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。 原理：服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。 什么是同源和跨域? 同源:域名、端口、协议全都相同就是同源 跨域:不同源则为跨域 出于安全考虑浏览器会对跨域做出一些限制,主要限制如下: 1.不能共享cookie(存储数...
2019-10-10 09:45:00
1039
1
原创 JS垃圾回收机制
内存的生命周期 1.分配内存(在js中自动分配) 2.使用内存(读写操作) 3.释放内存(在js中自动释放) 垃圾回收机制 所谓垃圾回收机制就是找到那些不用的值,释放其占用的内存空间,垃圾回收器每隔一段时间就会执行一次释放操作。 在局部作用域中，当函数执行完毕的时候，局部变量也就没有存在的必要了，因此垃圾回收器很容易做出判断并回收。 但是全局变量什么时候需要自动释放内存空间则很难判断，因此在开发中...
2019-10-10 08:57:55
729
1
原创 jquery入口函数和原生js入口函数的区别
jquery入口函数 写法一; $(document).ready(function(){ 功能代码 }) 写法二(简写); $(function(){ 功能代码 }) 原生js入口函数 window.οnlοad=function(){ 功能代码 } 首先说一下写jquery入口函数有什么好处 1.文档加载完成后执行该函数,能确保获取到元素。 2.可以形成沙箱模式,防止全局变量污染问题。 原生j...
2019-10-09 19:40:20
535
原创 flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式 主要介绍下弹性布局的常用的一些属性 当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。 主轴:默认水平向右(类似于X轴) 侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴) 主轴方向（flex-direction) 弹性盒子的主轴方向默认水平向右,但是可以通过flex-...
2019-10-09 17:29:36
3655
原创 外边距的BUG及解决方式
1.相邻块元素垂直外边距的合并 当上下相邻的两个元素相遇的时候,上面元素的有margin-bottom,下面的元素有margin-top时,两者之间的间距并不是上下边距之和,而是取两者之间的较大者,这种现象称之为外边距的塌陷。 如下图所示解决方法:避免就好! 2.嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并， 合...
2019-10-09 15:24:28
802
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人