浅析Promise用法 链接:https://www.jianshu.com/p/78c10239f852关键词:Promise,resolve,reject,Prepending,Resolve,Reject,then,catch,all,race所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Pr
jQuery系列(四) -- 事件 鼠标事件.click() ==> 单击事件.dblclick() ==> 双击事件.mousedown() ==> 鼠标按键按下时触发.mouseup() ==> 鼠标按键释放时触发.mousemove() ==> 鼠标指针在元素内移动时触发.mouseover() ==> 当鼠标指针进入元素内触发(冒泡)
jQuery系列(三) -- DOM 创建元素与属性JavaScript:创建元素:document.createElement()设置属性:setAttribute()添加文本:innerHTML()加入文档:append()jQuery:创建元素节点:$( 'html结构' )创建文本节点:$( 'text node' )创建属性节点:$( ' jQuery系列(二) -- 样式 概述jQuery 函数包装的对象是类数组对象,对象里面包含了 DOM 对象的信息,并封装了很多操作方法,可以和访问数组一样的方法来访问。jQuery 对象 和 DOM 对象联系可是使用 $ 符号将 DOM 对象封装成 jQuery 对象 $( div )可是使用 div = $div[ 0 ] 或者 div = $div.get( 0 ) 将 jQu jQuery系列(一) -- touch jQuery 封装函数尽管 DOM 提供了 API ,可是当我们使用 DOM API 的时候却不尽人意,它提供的功能实在是有限,并且有些方法还没有,所以我们先来封装两个函数。第一个函数作用是获取一个元素节点的所有兄弟,第二个函数作用是可以对一个节点添加或者删除 class 。获取一个元素节点的所有兄弟当调用 getSiblings 函数的时候只需要传入一个元素节点即可。 CSS 最佳实践 + 套路(十) -- 混合篇 概述本文章主要就是将之前几篇文章中没有提到的,但是个人认为比较重要的 CSS 的最佳实践和套路居中水平居中:内联元素:父元素加 text-align:center;块级元素(固定宽度):margin: 0 auto;元素不是上述两种情况:1. 将元素变成内联元素 ` display: inline-block; ` + ` text-align:cent CSS 最佳实践 + 套路(九) -- Bootstrap 概述Bootstrap 是一个用于前端开发的开源工具包,Bootstrap 可以适配所有设备,主要就是采用了媒体查询功能,当我们知道它是怎么实现的了,那么它也就不那么神秘了。当我们在使用 Bootstrap 时,主要需要掌握的就是栅格布局,剩下的就是复制粘贴了。英文官网中文官网准备工作开始使用 Bootstrap 之前我们需要引入 Bootstrap CSS 最佳实践 + 套路(八) -- BFC 概述BFC(Block Formatting Context)块级格式化上下文。我并不知道 BFC 是什么,但是只要写出样式,我就知道这是不是 BFC。BFC 没有明确的定义,只有特征或功能。形成 BFC 条件浮动(float: left | right)绝对定位元素(position: absolute)非块盒的块容器(displa CSS最佳实践+套路(七) - 布局 概述在我们平时布局的时候,一般都是选择浮动布局和Flex布局。如果项目需要支持IE8,那么推荐选择浮动布局,如果不需要支持IE8,那么尽量选择Flex布局,当我们不需要支持IE8的时候,那么我们就能使用很多高级的语法,例如:计算值()原则写不要死width状语从句:height尽量选择flex,calc如果是IE,那么上述两点全部推翻,能写死就写死浮布局 CSS 最佳实践 + 套路(六) -- flex 概述CSS 弹性盒子(Flexible box 或 Flexbox)是一种用于在页面上布置元素的布局模式,它的目的是允许容器可以让其子项目(子元素)能够改变宽度、高度、顺序等等,以最佳的方式填充空间(父元素)弹性盒布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用的显示空间最佳的填充能力特点与方向无关实现空间的自动分配,自动对齐适用于简单的线性布局 CSS 最佳实践 + 套路(五) -- icon 概述icon 有很多做法,主要的做法有img 标签background-image 属性CSS Spritesfontsvg纯 CSS 实现在这些方法中,目前最值得推荐的就是 svg 方法,其他的大家可以了解一下。img 标签1此种方法可以自适应宽高,只需要给 img 一个 width 属性或者一个 h Function 浅析 概述函数是一个可以执行代码的对象。每个函数都是 Function 类型的实例,并且都与其他引用类型一样具有属性和方法。每个 Function 的实例的 __proto__ 都指向了 Function.prototype(原型),函数原型(Function.prototype)的 __proto__ 指向了 Object.prototype(对象的原型)定义函 MVC 思想 概述MVC 是一种思想,它会让我们写代码时更加简洁、高效、模块化,了解这种方法对于前端程序员来说是很有必要的。首先说明下 MVC 代表的含义:M ==> Model ==> 模型V ==> View ==> 视图C ==> Controller ==> 控制器MVC 各自作用MVC 主要是按功能划分模块view:js 代码所操纵的视图(HTML),负责显 基本包装类型 概述ECMAScript 提供了 3 个特殊的引用类型:Boolean() Number() String() ,以便于操作基本类型值。创建当创建基本包装类型时,相对应的变量会有 proto 的属性,此属性是基本包装类型指向 Object 类型的 prototype 。Boolean()APIvalueof() ==> 返回基本类型值 t 常用的正则表达式总结 一、校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$二、校验中文字符串仅能是中文。^[\\u4e00-\\u9fa5]{0,}$三、由数字、26个英文字母或下划线组成的字符串^\\w+$四、校验E-Mail 地址 HTTP系列 - Node.js HTTP系列 - Node.jsvar http = require('http') var fs = require('fs') var url = require('url') var port = process.argv[2] HTTP系列 -- JSONP 概述数据库是用来长久储存数据的。发送请求form 表单提交缺点:刷新页面 + 用户后退 + 用户刷新 = 数据变动form + iframe 提交form 表单提交到 iframe 中,页面不会刷新。缺点:用户刷新页面 ==> 数据变动JS动态创建 img 标签1234let img = document.createElemen HTTP系列 -- AJAX 进阶 AJAX 设置响应 和 获取请求AJAX 设置请求 header第一部分:request.open( 'POST', 'http://www.baidu.com/search' )第二部分:request.setRequestHeader( hander, value )12request.setRequestHeader( 'C HTTP系列 -- AJAX 基础 概述AJAX(Async JavaScript And XML):异步 JavaScript 和XML,远程编程脚本,使 JavaScript 能够在 Web 服务器上运行的程序通信,它是一种无需重新加载整个网页的情况之下能够更新部分网页的技术。条件使用 XMLHttpRequest 发请求服务器返回 XML / JSON 格式的字符串JS 解析 XML / JSON, fetch浅谈 引入fetch相关依赖import 'whatwg-fetch' import 'es6-promise'export function getData() { // '/api/1' 获取字符串 var result = fetch('/api/1', { credentials: 'include', headers: {
jQuery系列(二) -- 样式 概述jQuery 函数包装的对象是类数组对象,对象里面包含了 DOM 对象的信息,并封装了很多操作方法,可以和访问数组一样的方法来访问。jQuery 对象 和 DOM 对象联系可是使用 $ 符号将 DOM 对象封装成 jQuery 对象 $( div )可是使用 div = $div[ 0 ] 或者 div = $div.get( 0 ) 将 jQu
jQuery系列(一) -- touch jQuery 封装函数尽管 DOM 提供了 API ,可是当我们使用 DOM API 的时候却不尽人意,它提供的功能实在是有限,并且有些方法还没有,所以我们先来封装两个函数。第一个函数作用是获取一个元素节点的所有兄弟,第二个函数作用是可以对一个节点添加或者删除 class 。获取一个元素节点的所有兄弟当调用 getSiblings 函数的时候只需要传入一个元素节点即可。
CSS 最佳实践 + 套路(十) -- 混合篇 概述本文章主要就是将之前几篇文章中没有提到的,但是个人认为比较重要的 CSS 的最佳实践和套路居中水平居中:内联元素:父元素加 text-align:center;块级元素(固定宽度):margin: 0 auto;元素不是上述两种情况:1. 将元素变成内联元素 ` display: inline-block; ` + ` text-align:cent
CSS 最佳实践 + 套路(九) -- Bootstrap 概述Bootstrap 是一个用于前端开发的开源工具包,Bootstrap 可以适配所有设备,主要就是采用了媒体查询功能,当我们知道它是怎么实现的了,那么它也就不那么神秘了。当我们在使用 Bootstrap 时,主要需要掌握的就是栅格布局,剩下的就是复制粘贴了。英文官网中文官网准备工作开始使用 Bootstrap 之前我们需要引入 Bootstrap
CSS 最佳实践 + 套路(八) -- BFC 概述BFC(Block Formatting Context)块级格式化上下文。我并不知道 BFC 是什么,但是只要写出样式,我就知道这是不是 BFC。BFC 没有明确的定义,只有特征或功能。形成 BFC 条件浮动(float: left | right)绝对定位元素(position: absolute)非块盒的块容器(displa
CSS最佳实践+套路(七) - 布局 概述在我们平时布局的时候,一般都是选择浮动布局和Flex布局。如果项目需要支持IE8,那么推荐选择浮动布局,如果不需要支持IE8,那么尽量选择Flex布局,当我们不需要支持IE8的时候,那么我们就能使用很多高级的语法,例如:计算值()原则写不要死width状语从句:height尽量选择flex,calc如果是IE,那么上述两点全部推翻,能写死就写死浮布局
CSS 最佳实践 + 套路(六) -- flex 概述CSS 弹性盒子(Flexible box 或 Flexbox)是一种用于在页面上布置元素的布局模式,它的目的是允许容器可以让其子项目(子元素)能够改变宽度、高度、顺序等等,以最佳的方式填充空间(父元素)弹性盒布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用的显示空间最佳的填充能力特点与方向无关实现空间的自动分配,自动对齐适用于简单的线性布局
CSS 最佳实践 + 套路(五) -- icon 概述icon 有很多做法,主要的做法有img 标签background-image 属性CSS Spritesfontsvg纯 CSS 实现在这些方法中,目前最值得推荐的就是 svg 方法,其他的大家可以了解一下。img 标签1此种方法可以自适应宽高,只需要给 img 一个 width 属性或者一个 h
Function 浅析 概述函数是一个可以执行代码的对象。每个函数都是 Function 类型的实例,并且都与其他引用类型一样具有属性和方法。每个 Function 的实例的 __proto__ 都指向了 Function.prototype(原型),函数原型(Function.prototype)的 __proto__ 指向了 Object.prototype(对象的原型)定义函
MVC 思想 概述MVC 是一种思想,它会让我们写代码时更加简洁、高效、模块化,了解这种方法对于前端程序员来说是很有必要的。首先说明下 MVC 代表的含义:M ==> Model ==> 模型V ==> View ==> 视图C ==> Controller ==> 控制器MVC 各自作用MVC 主要是按功能划分模块view:js 代码所操纵的视图(HTML),负责显
基本包装类型 概述ECMAScript 提供了 3 个特殊的引用类型:Boolean() Number() String() ,以便于操作基本类型值。创建当创建基本包装类型时,相对应的变量会有 proto 的属性,此属性是基本包装类型指向 Object 类型的 prototype 。Boolean()APIvalueof() ==> 返回基本类型值 t
常用的正则表达式总结 一、校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$二、校验中文字符串仅能是中文。^[\\u4e00-\\u9fa5]{0,}$三、由数字、26个英文字母或下划线组成的字符串^\\w+$四、校验E-Mail 地址
HTTP系列 - Node.js HTTP系列 - Node.jsvar http = require('http') var fs = require('fs') var url = require('url') var port = process.argv[2]
HTTP系列 -- JSONP 概述数据库是用来长久储存数据的。发送请求form 表单提交缺点:刷新页面 + 用户后退 + 用户刷新 = 数据变动form + iframe 提交form 表单提交到 iframe 中,页面不会刷新。缺点:用户刷新页面 ==> 数据变动JS动态创建 img 标签1234let img = document.createElemen
HTTP系列 -- AJAX 进阶 AJAX 设置响应 和 获取请求AJAX 设置请求 header第一部分:request.open( 'POST', 'http://www.baidu.com/search' )第二部分:request.setRequestHeader( hander, value )12request.setRequestHeader( 'C
HTTP系列 -- AJAX 基础 概述AJAX(Async JavaScript And XML):异步 JavaScript 和XML,远程编程脚本,使 JavaScript 能够在 Web 服务器上运行的程序通信,它是一种无需重新加载整个网页的情况之下能够更新部分网页的技术。条件使用 XMLHttpRequest 发请求服务器返回 XML / JSON 格式的字符串JS 解析 XML / JSON,
fetch浅谈 引入fetch相关依赖import 'whatwg-fetch' import 'es6-promise'export function getData() { // '/api/1' 获取字符串 var result = fetch('/api/1', { credentials: 'include', headers: {