- 博客(31)
- 收藏
- 关注
转载 浅析Promise用法
链接:https://www.jianshu.com/p/78c10239f852关键词:Promise,resolve,reject,Prepending,Resolve,Reject,then,catch,all,race所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Pr
2018-01-30 16:17:59 239
原创 jQuery系列(四) -- 事件
鼠标事件.click() ==> 单击事件.dblclick() ==> 双击事件.mousedown() ==> 鼠标按键按下时触发.mouseup() ==> 鼠标按键释放时触发.mousemove() ==> 鼠标指针在元素内移动时触发.mouseover() ==> 当鼠标指针进入元素内触发(冒泡)
2018-01-30 13:53:45 183
原创 jQuery系列(三) -- DOM
创建元素与属性JavaScript:创建元素:document.createElement()设置属性:setAttribute()添加文本:innerHTML()加入文档:append()jQuery:创建元素节点:$( 'html结构' )创建文本节点:$( 'text node' )创建属性节点:$( '<div id="text" class
2018-01-30 13:52:37 184
原创 jQuery系列(二) -- 样式
概述jQuery 函数包装的对象是类数组对象,对象里面包含了 DOM 对象的信息,并封装了很多操作方法,可以和访问数组一样的方法来访问。jQuery 对象 和 DOM 对象联系可是使用 $ 符号将 DOM 对象封装成 jQuery 对象 $( div )可是使用 div = $div[ 0 ] 或者 div = $div.get( 0 ) 将 jQu
2018-01-30 13:51:32 155
原创 jQuery系列(一) -- touch jQuery
封装函数尽管 DOM 提供了 API ,可是当我们使用 DOM API 的时候却不尽人意,它提供的功能实在是有限,并且有些方法还没有,所以我们先来封装两个函数。第一个函数作用是获取一个元素节点的所有兄弟,第二个函数作用是可以对一个节点添加或者删除 class 。获取一个元素节点的所有兄弟当调用 getSiblings 函数的时候只需要传入一个元素节点即可。
2018-01-30 13:50:18 467
原创 CSS 最佳实践 + 套路(十) -- 混合篇
概述本文章主要就是将之前几篇文章中没有提到的,但是个人认为比较重要的 CSS 的最佳实践和套路居中水平居中:内联元素:父元素加 text-align:center;块级元素(固定宽度):margin: 0 auto;元素不是上述两种情况:1. 将元素变成内联元素 ` display: inline-block; ` + ` text-align:cent
2018-01-30 13:48:05 266
原创 CSS 最佳实践 + 套路(九) -- Bootstrap
概述Bootstrap 是一个用于前端开发的开源工具包,Bootstrap 可以适配所有设备,主要就是采用了媒体查询功能,当我们知道它是怎么实现的了,那么它也就不那么神秘了。当我们在使用 Bootstrap 时,主要需要掌握的就是栅格布局,剩下的就是复制粘贴了。英文官网中文官网准备工作开始使用 Bootstrap 之前我们需要引入 Bootstrap
2018-01-30 13:45:53 260
原创 CSS 最佳实践 + 套路(八) -- BFC
概述BFC(Block Formatting Context)块级格式化上下文。我并不知道 BFC 是什么,但是只要写出样式,我就知道这是不是 BFC。BFC 没有明确的定义,只有特征或功能。形成 BFC 条件浮动(float: left | right)绝对定位元素(position: absolute)非块盒的块容器(displa
2018-01-30 13:44:04 174
原创 CSS最佳实践+套路(七) - 布局
概述在我们平时布局的时候,一般都是选择浮动布局和Flex布局。如果项目需要支持IE8,那么推荐选择浮动布局,如果不需要支持IE8,那么尽量选择Flex布局,当我们不需要支持IE8的时候,那么我们就能使用很多高级的语法,例如:计算值()原则写不要死width状语从句:height尽量选择flex,calc如果是IE,那么上述两点全部推翻,能写死就写死浮布局
2018-01-30 13:42:50 289
原创 CSS 最佳实践 + 套路(六) -- flex
概述CSS 弹性盒子(Flexible box 或 Flexbox)是一种用于在页面上布置元素的布局模式,它的目的是允许容器可以让其子项目(子元素)能够改变宽度、高度、顺序等等,以最佳的方式填充空间(父元素)弹性盒布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用的显示空间最佳的填充能力特点与方向无关实现空间的自动分配,自动对齐适用于简单的线性布局
2018-01-30 13:41:39 174
原创 CSS 最佳实践 + 套路(五) -- icon
概述icon 有很多做法,主要的做法有img 标签background-image 属性CSS Spritesfontsvg纯 CSS 实现在这些方法中,目前最值得推荐的就是 svg 方法,其他的大家可以了解一下。img 标签1此种方法可以自适应宽高,只需要给 img 一个 width 属性或者一个 h
2018-01-29 11:35:48 203
原创 Function 浅析
概述函数是一个可以执行代码的对象。每个函数都是 Function 类型的实例,并且都与其他引用类型一样具有属性和方法。每个 Function 的实例的 __proto__ 都指向了 Function.prototype(原型),函数原型(Function.prototype)的 __proto__ 指向了 Object.prototype(对象的原型)定义函
2018-01-28 11:16:47 266
原创 MVC 思想
概述MVC 是一种思想,它会让我们写代码时更加简洁、高效、模块化,了解这种方法对于前端程序员来说是很有必要的。首先说明下 MVC 代表的含义:M ==> Model ==> 模型V ==> View ==> 视图C ==> Controller ==> 控制器MVC 各自作用MVC 主要是按功能划分模块view:js 代码所操纵的视图(HTML),负责显
2018-01-28 11:16:32 291
原创 基本包装类型
概述ECMAScript 提供了 3 个特殊的引用类型:Boolean() Number() String() ,以便于操作基本类型值。创建当创建基本包装类型时,相对应的变量会有 proto 的属性,此属性是基本包装类型指向 Object 类型的 prototype 。Boolean()APIvalueof() ==> 返回基本类型值 t
2018-01-28 11:15:58 186
原创 常用的正则表达式总结
一、校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$二、校验中文字符串仅能是中文。^[\\u4e00-\\u9fa5]{0,}$三、由数字、26个英文字母或下划线组成的字符串^\\w+$四、校验E-Mail 地址
2018-01-28 11:15:17 182
原创 HTTP系列 - Node.js
HTTP系列 - Node.jsvar http = require('http') var fs = require('fs') var url = require('url') var port = process.argv[2]
2018-01-28 11:15:00 251
原创 HTTP系列 -- JSONP
概述数据库是用来长久储存数据的。发送请求form 表单提交缺点:刷新页面 + 用户后退 + 用户刷新 = 数据变动form + iframe 提交form 表单提交到 iframe 中,页面不会刷新。缺点:用户刷新页面 ==> 数据变动JS动态创建 img 标签1234let img = document.createElemen
2018-01-28 11:14:45 234
原创 HTTP系列 -- AJAX 进阶
AJAX 设置响应 和 获取请求AJAX 设置请求 header第一部分:request.open( 'POST', 'http://www.baidu.com/search' )第二部分:request.setRequestHeader( hander, value )12request.setRequestHeader( 'C
2018-01-28 11:14:33 142
原创 HTTP系列 -- AJAX 基础
概述AJAX(Async JavaScript And XML):异步 JavaScript 和XML,远程编程脚本,使 JavaScript 能够在 Web 服务器上运行的程序通信,它是一种无需重新加载整个网页的情况之下能够更新部分网页的技术。条件使用 XMLHttpRequest 发请求服务器返回 XML / JSON 格式的字符串JS 解析 XML / JSON,
2018-01-28 11:14:20 217
原创 fetch浅谈
引入fetch相关依赖import 'whatwg-fetch' import 'es6-promise'export function getData() { // '/api/1' 获取字符串 var result = fetch('/api/1', { credentials: 'include', headers: {
2018-01-28 11:14:01 994
原创 箭头函数中的this
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this一针见血式总结:普通函数中的this:1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj2.在默认情况(非严格模式
2018-01-28 11:13:42 570
原创 JavaScript 对象浅析
全局对象 global(特例:window)window 的重要属性:分类:ECMAScript 规定的paeseInt()parseFloat()基本包装类型:Boolean() Number() String()Number()String()Boolean()Objec
2018-01-27 16:46:50 152
原创 JavaScript DOM API
概述DOM(Document Object Model)文档对象模型,指的是 XML 文档,需要说明的是,HTML 是 XML 的衍生品,如果要操作 HTML 可以使用关于 XML 的文档 DOM。JS 中的对象继承自 Object ,页面中的对象继承自 Node 函数。Model 将页面中的 Document(html、head、body)和内存中的 Obje
2018-01-27 16:44:41 432
原创 JavaScript事件处理程序
事件事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流事件流描述的是从页面中接收事件的顺序IE的事件流是事件冒泡流,DOM的事件流是事件捕获流事件冒泡事件的开始是由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)如果你点击div,那么在div上接收到click事件,之后传播到
2018-01-27 16:42:27 146
原创 JavaScript实现继承方式
1. newStudent.prototype = new Person();得到一个 Person 实例,并且这个实例指向构造器的 prototype 属性和调用了构造函数,因为调用的构造函数,而 Student 只是一个类,并没有实例化,只为了继承,调用构造函数创建一个实例,参数的问题就不容易解决。例如:当 Person() 中有一个 name 属性时,而 Student
2018-01-27 16:39:47 145
原创 HTTP系列 -- 请求与响应
概述Server(服务器):服务器作为硬件来说,通常是指那些具有较高计算能力,能够提供给多个用户使用的计算机Client(客户端):是指与服务器相对应,为客户提供本地服务的程序浏览器 + 服务器 + HTTP 三者关系浏览器负责发起请求服务器在80端口接收请求服务器负责返回内容(响应)浏览器负责下载响应内容HTTP 的作用就是指导浏览器和
2018-01-27 16:31:48 214
原创 HTTP系列 -- 基础知识
脚本JavaScript 是一门动态类型、面向对象的脚本语言bash 脚本12345678910111213141516171819202122232425262728293031323334mkdir ~/localcd ~/localtouch demo.txtstart demo.txt //内容如下: //mkdir demo
2018-01-27 16:27:30 192
原创 CSS 最佳实践 + 套路(四) -- 移动端适配
概述手机上显示网页是将整个网页缩小,模拟页面宽度 980px ,可以使用 document.documentElement.clientWidth 来获取到页面宽度为 980px。在移动端加上 标签才是自适应,否则就是 980px ,即网页整体缩小。meta 标签1说明:width=device-widt
2018-01-27 16:24:32 298
原创 CSS 最佳实践 + 套路(三) -- 堆叠上下文
条件文档中的层叠上下文由满足以下任意一个条件的元素形成:根元素(HTML)z-index 不为 auto 的 absolute/relative一个 z-index 值不为 auto 的 flex 项目,即父元素 display: flex/inline-flexopacity 属性值小于 1 的元素transform 属性不为 none 的元素mix-blend-mode 属性值
2018-01-27 16:17:12 375
原创 CSS 最佳实践 + 套路(二) -- height width
文档流文档内元素的流动方向内联元素 ==> 从左向右依次流动,若 width 不足,则换行块级元素 ==> 从上到下依次流动,每个块级元素独占一行脱离文档流将会影响其祖先元素(块级元素)的 height脱离文档流的三种方式:position: fixed 相对于窗口定位position: absolute 相对于定位包含框定位(position:
2018-01-27 16:13:49 320
原创 CSS 最佳实践 + 套路(一) -- 概述
CSS 最佳实践 + 套路(一) -- 概述资源Google: 关键词 MDNCSS TricksGoogle: 阮一峰 css张鑫旭的 240 多篇 CSS 博客Codrops 炫酷 CSS 效果CSS揭秘CSS 2.1 中文 specMagic of CSS 免费在线书引入CSS内联样式 ==> style属性 ==> style= 'color: red;
2018-01-27 15:58:01 233 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人