青松008-CSDN博客

原创前端工具之 souce map

1、简介一个最简单的优化网站方法就是合并、压缩 JS 和 CSS 文件。但是如果需要在这些压缩后的文件中进行调试，这个时候实际运行的代码不同于开发代码， debug 会变得很困难，这就是 Source Map 想要解决的问题。2、什么是 Source MapSource Map 提供了一个映射压缩文件到原文件初始位置的方法。这就意味着，使用浏览器或者其他软件可以轻松调试文件，即使...

2018-04-01 22:51:07 895

原创 ES6 之 Decorator

1、简介许多面向对象的语言都有修饰器（Decorator）函数，用来修改类的行为。目前，有一个提案将这项功能，引入了 ECMAScript。// @testable 就是一个修饰器，修改了 MyTestableClass 这个类的行为，为它加上了静态属性 isTestable@testableclass MyTestableClass { // ...}function t...

2018-04-01 18:23:54 591

原创 Node 之事件循环机制

1、简介我们都知道 JavaScript 是单线程运行，异步操作特别重要。只要用到引擎之外的功能，就需要跟外部交互，从而形成异步操作。Node 的异步语法比浏览器更复杂，因为它可以跟内核对话，不得不搞了一个专门的库 libuv 做这件事。这个库负责各种回调函数的执行时间，毕竟异步任务最后还是要回到主线程，一个个排队执行，这就是事件循环。2、定时器为了协调异步任务，Node ...

2018-03-25 19:37:19 3967 1

原创 ES6 之 Set&Map

1、简介ES6 引入了新的数据结构 Set、WeakSet、Map 以及 WeakMap。2、SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。// Set 本身是一个构造函数，用来生成 Set 数据结构const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.ad...

2018-03-24 23:56:43 173

原创 ES6 之 Symbol

1、简介ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入 Symbol 的原因。ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它...

2018-03-22 18:12:19 188

原创 ES6 之 class 继承

1、简介Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。// 通过 extends 关键字继承了 Point 类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个 Point 类class Point {}class ColorPoint extends Point {}// co...

2018-03-12 17:05:50 2543

原创 ES6 之 class

1、简介JavaScript 语言中，生成实例对象的传统方法是通过构造函数。这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板，通过 class 关键字可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都...

2018-03-12 11:15:47 211

原创 ES6 之 Generator 异步应用

1、简介异步编程对 JavaScript 语言太重要。Javascript 语言的执行环境是 “单线程” 的，如果没有异步编程，根本没法用，非卡死不可。现在主要介绍 Generator 函数如何完成异步操作。// 异步编程：回调函数fs.readFile('/etc/passwd', 'utf-8', function (err, data) { if (err) throw e...

2018-03-09 10:21:25 905

原创 ES6 之 async

1、简介ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。const fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { ...

2018-03-08 16:13:33 154

原创 ES6 之 Generator

1、简介Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator 函数有多种理解角度，首先可以理解成 Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generato...

2018-03-08 09:14:19 170

原创 ES6 之 Iterator

1、简介JavaScript 有四种表示 “集合” 数据集合：Array、Object、Map 以及 Set，用户可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map 的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制，它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator...

2018-03-06 17:41:10 149

原创 ES6 之 module 加载

1、简介介绍浏览器和 Node 之中加载 ES6 模块，以及实际开发中经常遇到的一些问题（比如循环加载）。2、浏览器加载HTML 网页中，浏览器通过 <script> 标签加载 JavaScript 脚本。默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到 <script> 标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部...

2018-03-04 14:25:13 482

原创 ES6 之 module

1、简介历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和...

2018-03-01 22:38:46 123

原创 ES6 之对象拓展

1、简介ES6 扩展了对象。2、属性的简洁表示法ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。// 属性简写const foo = 'bar';const baz = {foo};baz // {foo: "bar"}const baz = {foo: foo}; // 等同于// 方法简写const o = { method(

2018-02-01 14:03:08 398

原创 ES6 之数组拓展

1、简介ES6 扩展了数组。2、扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [, , ]// 主要用于函数调用funct

2018-01-31 09:56:22 1286

原创 ES6 之函数拓展

1、简介ES6 扩展了函数。2、函数参数的默认值ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello China//

2018-01-29 19:56:45 148

原创 ES6 之数值拓展

1、简介ES6 扩展了数值。2、Number.isFinite(), Number.isNaN()ES6 在 Number 对象上，新提供了 Number.isFinite() 和 Number.isNaN() 两个方法。 Number.isFinite() 用来检查一个数值是否为有限的（finite），即不是 Infinity。注意，如果参数类型不是数值，Number.isFi

2018-01-29 13:58:30 194

原创 ES6 之字符串拓展

1、简介ES6 扩展了字符串对象。2、codePointAt()JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符）， JavaScript 会认为它们是两个字符。ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点；对于那些两

2018-01-28 14:58:08 326

原创 ES6 之解构赋值

1、简介ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。2、数组的解构赋值可以从数组中提取值，按照对应位置，对变量赋值。本质上等号两边的模式相同，左边的变量就会被赋予对应的值。let [a, b, c] = [1, 2, 3];a // 1b // 2c // 3let [foo, [[bar], baz

2018-01-27 11:09:39 133

原创 ES6 之 let&const

1、简介ES6 添加 let 和 const 两种声明变量的命令，现在简单介绍下。2、let用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效：{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1再比如循环中的使用：使用 ES5 的 var

2018-01-25 12:04:01 112

1、什么是promise异步编程传统做法是使用回调函数，而 promise 提供了一种更加合理、更加强大的解决方案，避免出现地狱回调。在前面的文章介绍 zepto 源码时有讲到 promise 实现方案，而现在 ES6 将其写进了语言标准，原生提供了 promise 对象。2、promise 实例2.1、promise resolve/rejectES6 规定，promise 对象是一个构造函数，用

2018-01-03 11:00:21 141

原创 bootstrap之scrollspy

一、前言这节介绍下scrollspy(滚动侦测)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: scrollspy.js v3.3.7(滚动侦测) * http://getbootstrap.com/javascript/#scrolls

2017-11-13 17:33:50 626

原创 bootstrap之affix

一、前言这节介绍下affix(自动定位浮标)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: affix.js v3.3.7(自动定位浮标) * http://getbootstrap.com/javascript/#affix * =

2017-11-13 16:21:42 2393

原创 bootstrap之collapse

一、前言这节介绍下collapse(手风琴)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: collapse.js v3.3.7(折叠/手风琴) * http://getbootstrap.com/javascript/#collapse

2017-11-13 14:44:47 665

原创 boostrap之tab

一、前言这节介绍下tab(选项卡)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: tab.js v3.3.7(选项卡) * http://getbootstrap.com/javascript/#tabs * ============

2017-11-13 13:56:43 430

原创 bootstrap之media&close&well样式

一、前言现在开始介绍bootstrap的多媒体(media)、关闭图标(close)和凹陷容器(well) 样式。二、源码1、media.less1.1、media.less源码 .media { // Proper spacing between instances of .media margin-top: 15px; &:first-child { margin-to

2017-11-11 23:20:00 563

原创 bootstrap之jumbotron&thumbnail&progressBar样式

一、前言现在开始介绍bootstrap的超大屏幕(jumbotron)、缩略图(thumbnail)和徽章(badge) 样式。二、源码1、jumbotron.less1.1、jumbotron.less源码 // // Jumbotron // -------------------------------------------------- .jumbotron { padding

2017-11-11 22:56:09 581

原创 bootstrap之pager&listGroup&badge样式

一、前言现在开始介绍bootstrap的翻页(pager)、列表组(list-group)和徽章(badge) 样式。二、源码1、pager.less1.1、pager.less源码 // // Pager pagination(翻页分页导航) // -------------------------------------------------- .pager { padding-l

2017-11-11 22:11:55 439

原创 bootstrap之breadcrumb&panel样式

一、前言现在开始介绍bootstrap的面包屑导航(breadcrumb)和面板(panel) 样式。二、源码1、breadcrumbs.less1.1、breadcrumbs.less源码 // // Breadcrumbs(面包屑式导航) // -------------------------------------------------- .breadcrumb { paddi

2017-11-11 20:45:28 2305

原创 bootstrap之navbar样式

一、前言现在开始介绍bootstrap的导航条(navbar)样式。二、源码1、navbar.less1.1、navbar.less源码 // // Navbars // -------------------------------------------------- // Wrapper and base class(基础导航条) // // Provide a static navb

2017-11-10 17:07:47 11863

原创 bootstrap之navs&pagination样式

一、前言现在开始介绍bootstrap的 navs(导航) 和 pagination(分页)，包括 navs.less、pagination.less。二、源码1、navs.less1.1、navs.less源码 // // Navs(导航) // -------------------------------------------------- // Base class(基础样式) /

2017-11-09 15:14:04 4843

原创 bootstrap之input-group&label样式

一、前言现在开始介绍bootstrap的输入框组(input-group)和标签(label) 样式。二、源码1、input-groups.less1.1、input-groups.less源码 // // Input groups // -------------------------------------------------- // Base styles // ---------

2017-11-07 23:55:56 8044

原创 bootstrap之form样式

一、前言现在开始介绍bootstrap的表单(forms)样式。二、源码1、forms.less1.1、forms.less源码 // // Forms(表单) // -------------------------------------------------- // Normalize non-controls(定制非表单控件) // // Restyle and baseline

2017-11-06 23:47:17 6715

原创 bootstrap之scaffolding&tables样式

一、前言现在开始介绍bootstrap的 scaffolding(脚手架) 和 tables(表格)，包括 scaffolding.less、tables.less。二、源码1、scaffolding.less1.1、scaffolding.less源码 // // Scaffolding(脚手架) // ---------------------------------------------

2017-11-06 14:39:13 553

原创 bootstrap之code&grid样式

一、前言现在开始介绍bootstrap的 code(代码) 和 grid(栅格)，包括 code.less、grid.less。二、源码1、code.less1.1、code.less源码 // // Code (inline and block) 代码 // -------------------------------------------------...

2017-11-06 13:51:48 455

原创 bootstrap之bootstrap&type样式

2017-11-05 16:27:08 2270

原创 bootstrap之carousel

一、前言这节介绍下carousel(轮播)模块的源码实现。二、源码1、carousel.less // // Carousel(图片轮播) // -------------------------------------------------- // Wrapper for the slide container and indicators(轮播图容器) .carousel { po

2017-11-05 15:18:03 2985

原创 bootstrap之modal

一、前言这节介绍下modal(模态弹窗)模块的源码实现。二、源码1、modals.less // // Modals(静态弹出框) // -------------------------------------------------- // .modal-open - body class for killing the scroll // .modal -

2017-10-31 23:20:51 424

原创 bootstrap之popover

一、前言这节介绍下popover(弹出框)模块的源码实现。二、源码1、popovers.less // // Popovers(弹出框) // -------------------------------------------------- .popover { position: absolute; top: 0; left: 0; z-index: @zinde

2017-10-30 23:22:25 571

原创 bootstrap之tooltip

一、前言这节介绍下tooltip(提示框)模块的源码实现。二、源码1、tooltip.less // // Tooltips(提示框) // -------------------------------------------------- // Base class(基础样式) .tooltip { position: absolute; z-index: @zindex-to

2017-10-30 20:11:12 2147

空空如也

空空如也