- 博客(132)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Flex
传统的网页布局基于盒装模型，使用display，position，float属性来达成各种布局。 对于一些特殊的布局使用这些来实现不是很方便，比如垂直居中。 Flex应运而生，它可以简便、完整、响应式地实现各种页面布局。 Chrome 21，FF22，IE 10，Safari 6.1及以上的浏览器都支持Flex。 Flex布局将成为未来布局的首选方案。基本概念任何一个容器都可以指定为Flex
2017-03-05 16:51:48
1513
原创 Sort of sort
排序算法定义对一序列对象根据某个关键字进行排序评判标准稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面； 不稳定：如果a原本在b的前面，而a=b，排序之后a可能会出现在b的后面；内排序：所有排序操作都在内存中完成； 外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行；时间复杂度：一个算法执行所耗费的时间；空间复杂度：运行完一个程序所需内存的大小
2016-10-27 21:48:37
1937
原创 React基础
HTML模板React主要是两个库： react.js是核心库 react-dom.js 是提供与 DOM 相关的功能 还有一个Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，JSX是可以将HTML直接写在JS里的语言，这一步通常不在浏览器端进行，而是通过babel配合React的babel插件预先转码好。$ babel src --out-dir b
2016-10-22 18:47:09
1993
原创 ES6学习18（二进制数组）
二进制数组（ArrayBuffer对象、TypedArray视图和DataView视图）是JavaScript操作二进制数据的一个接口。 这个接口的原始设计目的，与WebGL项目有关。所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。文本格式传递一个32位整数，两端的JavaSc
2016-10-21 13:36:21
1665
1
原创 ES6学习17（SIMD）
概述SIMD（发音/sim-dee/）是“Single Instruction/Multiple Data”的缩写，意为“单指令，多数据”。它是JavaScript操作CPU对应指令的接口，你可以看做这是一种不同的运算执行模式。与它相对的是SISD（“Single Instruction/Single Data”），即“单指令，单数据”。var a = [1, 2, 3, 4];var b = [
2016-10-20 15:35:52
583
原创 ES6学习16（编程风格）
块级作用域let取代varES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。'use strict';if (true) { let x = 'hello x'; var y = 'hello y'}for (let i = 0; i < 10; i++) { console.log(i);}cons
2016-10-20 13:57:58
412
原创 ES6学习15（异步操作和Async函数）
异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。 ES6诞生以前，异步编程的方法，大概有下面四种。回调函数事件监听发布/订阅Promise 对象ES6将JavaScript异步编程带入了一个全新的阶段，ES7的Async函数更是提出了异步编程的终极解决方案。基本概念所谓”异步”，简
2016-10-19 21:34:01
4455
原创 ES6学习14（模块）
历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。 ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖
2016-10-18 23:21:35
555
原创 ES6学习13（修饰器）
类的修饰修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持。修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。function testable(target) { target.isTestable = true;}@testableclass MyTestable
2016-10-18 11:50:36
447
原创 ES6学习12（Class）
Class基本语法概述ES5的传统方法：function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);ES6中：//定义类clas
2016-10-17 17:07:54
367
原创 ES6学习11（Promise）
Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 Promise对象有以下两个特点：对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。一旦状态改变
2016-10-15 22:36:21
1104
原创 ES6学习10（Generator）
简介Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。 形式上，Generator函数是一个普通函数，但是有两个特征function关键字与函数名之间有一个星号函数体内部使用yield语句，定义不同的内部状态我们先来看一个例子：function* helloWorldGenerator() { for (var i = 5;
2016-10-14 22:48:46
787
原创 ES6学习9（Iterator&for...of）
IteratorJavaScript原有的表示“集合”的数据结构： Array、Object、Map、Set 用户还可以组合他们，定义自己的数据结构。这样就需要一种统一的接口机制，来处理所有不同的数据结构。 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的
2016-10-13 23:02:04
319
原创 ES6学习8（Set&Map）
Setvar s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。// 初始化var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
2016-10-13 16:06:45
340
原创 ES6学习6（Symbol）
ES5的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin模式），新方法的名字就有可能与现有方法产生冲突。ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型。对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbol类型。凡是属性名属于S
2016-10-11 23:28:11
633
原创 ES6学习5（对象的拓展）
属性的简洁表示法ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。var foo = 'bar';var baz = {foo};baz // {foo: "bar"}// 等同于var baz = {foo: foo};function f(x, y) { return {x, y};}// 等同于function f(x, y)
2016-10-10 21:57:17
691
原创 ES6学习4（函数的拓展）
函数参数的默认值基本用法在ES6之前，不能直接为函数的参数指定默认值，于是只能使用变通的方法。在函数内部手动检测参数是否有值，不过这样的方法有时并不保险。 ES6允许直接写上默认值。function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'C
2016-10-09 15:34:52
899
原创 Node——玩转进程
Node基于V8引擎构建，与浏览器类似，我们的JS将会运行在单个进程的单个线程上，他带来的好处是：程序状态是单一的，没有锁和线程同步问题，没有上下文切换CPU使用率高。但是还是有别的问题：CPU的多核无法利用，单线程上有异常并没有被捕获的情况下，服务器就无法继续提供服务了。多进程架构Node提供了child_process模块，这个模块可以做到打开新的进程来执行任务。最理想的状态应该是
2016-08-24 14:00:57
2742
原创 Node——构建Web应用
基础功能之前我们通过http模块创建了一个简单的服务器，但是对于一个网络应用来说肯定是远远不够的，在聚义的业务中我们至少有如下要求：请求方法的判断URL的路径解析URL中查询字符串的解析Cookie的解析Basic认证表单数据的解析任意格式的上传处理Session管理一切的开始都是这个函数：var server = http.createServer(func
2016-08-21 22:11:34
3423
1
原创 Node——Buffer
对于传统的前端开发者，我们不需要处理网络协议，数据库，图片数据，接收上传文件等。但是在Node中这是很基本的场景。这里用到的大部分都是二进制数据，这是原有JS无法处理的。于是Buffer对象就出现了。Buffer结构Buffer是一个像Array的对象，主要用于字节操作。其性能部分用C++实现，非性能部分由JS实现。 在前面一节中我们知道Buffer所占的内存不是通过V8分配的。
2016-08-09 16:11:40
380
原创 Node——内存控制
JS在浏览器中运行的时候并不存在太大的内存问题，我们通常也不刻意的去优化他们，但是当运行在服务器端的时候，运行时间长，这种问题就不得不考虑了。V8的垃圾回收机制与内存限制V8的内存限制在64位下只能使用1.4GB，在32位下0.7GB。即便你的物理内存有32GB，单个Node进程也只能使用这些内存。如果你要将一个2G的文件读到内存里解析，good luck。 V8之所以要限制内存
2016-08-05 17:18:59
4671
原创 Node——异步编程
函数式编程函数式编程是异步编程的基础，在JS中，将函数作为参数，返回值，都是可以的。这为我们使用回调函数打下了很好的基础。var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b) { return a - b; }); // [ 1, 5, 10, 25, 40, 100 ] var isTyp
2016-08-04 14:24:24
438
原创 Node——异步I/O
单线程编程会因阻塞I/O导致硬件资源得不到更优的使用。多线程编程也因为编程中的死锁、状态同步等问题让开发人员头痛。Node在两者之间给出了它的解决方案：利用单线程，远离多线程死锁、状态同步等问题；利用异步I/O，让单线程远离阻塞，以好使用CPU。 异步IO的实现在Node中，JS是在单线程中执行的没错，但是内部完成IO工作的另有线程池，使用一个主进程和多个IO线程来模拟异步IO。 当主线程发起IO
2016-07-20 17:06:06
813
原创 JS模块化
完全不封装时最开始的js是很简单的，它并不承担很复杂的功能，于是所有的变量和函数都写在全局作用域中（Global）。这样一开始没有什么问题，但是当JS的代码越来越多，后来慢慢出现插件或多个JS文件时就有问题了，变量和函数的名称很容易冲突。function foo(){ //...}function bar(){ //...}利用JS对象模拟命名空间利用
2016-07-20 13:39:03
480
原创 CSS Secret——Structure & Layout
根据内容指定宽度假如我们有如下结构：figure> img src="img/adamcatlace.jpg" /> figcaption> The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer. figcaption>fi
2016-07-06 16:10:35
548
原创 CSS Secret——Typography
连字符的使用在排版良好的书和杂志中，文字都是两端对齐的。但是在CSS中我们很少这么用，因为书里有连字符来解决长单词会带来的一行中空白过多的情形，而CSS没有。 在CSS Text Level 3中，有这么一个新的值，叫hyphens，可选none，manual和auto。#hyphens{ width:200px; text-align: justify; -webkit-hyphen
2016-07-03 17:58:07
742
原创 CSS Secret——Visual Effect
各种特殊的阴影阴影有5个值： box-shadow: 0 5px 4px -4px black; 浏览器创建阴影的大概过程是这样的： 先创建一个和原有元素大小相同的块，颜色由最后一个值指定。 接下来由前两个值指定左偏移和上偏移。 第三个值来给定模糊的大小，你给了4，就意味着在现在块的边界向外向里分别模糊4。 第四个值用来在现有的块的基础上调整块的大小，给-4相当于在4个方向上都缩小
2016-07-02 16:50:49
368
原创 CSS Secret——Shapes
灵活的椭圆这里要注意，border-radius是个简写，它可以拆成4个部分，8个值。border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius可以简写到一个里面，规则和padding什么的一样。border-radius: 50% / 50p
2016-06-30 15:04:50
605
原创 CSS Secret——Backgrounds & Borders
透明边框如果我们想要一个白色背景和半透明白的边框我们该怎么办呢~ 如果你对边框和背景的关系不太了解：border: 10px solid hsla(0,0%,100%,.5); background: white;这样你是看不到透明边框的，因为背景本身是会铺到边框里的。 使用background-clip: padding-box;可以使背景只铺到内边距。border:
2016-06-25 20:56:03
445
原创 CSS Secret——Coding Tips
编写灵活的CSS灵活性我们先来看一段代码：.noReusableButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray;
2016-06-23 23:26:57
404
1
原创 CSS Secret——CSS的浏览器兼容
使用前缀background: rgb(255, 128, 0); background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); backgr
2016-06-23 15:14:13
554
原创 CSS学习9（表布局）
表格式化我们先来看看组装表的基本方法，并了解表中的元素相互之间有什么关系。这称为表格式化。表的视觉编排CSS对于表元素和内部表元素有很分明的界限。在CSS中，内部表元素生成矩形框，这些框有内容，内边距和边框，但是没有外边距。因此，不能通过指定外边距来定义单元格之间的间隔。如果试图对单元格、行或任何其他内部表元素应用外边距，CSS兼容浏览器只会将其忽略（只有总标题例外）。 使用display的不同值
2016-06-19 20:57:39
558
原创 CSS学习8（浮动和定位）
浮动CSS允许浮动任何元素。浮动元素首先，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。一个元素浮动时，其他内容会“环绕”该元素。 浮动元素的外边距不会与其他元素的外边距合并。浮动的详细内幕包含块，浮动元素的包含块是其最近的块级祖先元素。 浮动元素会生成一个块级框，不论元素本身是什么。它会像块级元素一样摆放和表现。对浮动元素声明 display:
2016-06-18 14:08:58
8063
原创 CSS学习7（颜色和背景）
背景图片指定背景图像的同时可以再指定一个背景色。这往往是个好主意。在图片没加载出来或图片有透明度时。 允许向任何元素应用背景图像，可以是块级元素也可以是行内元素。
2016-06-15 15:06:27
458
原创 CSS学习6（元素框）
基本元素框所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，因此，每个框影响着其他元素框的位置和大小。默认地，一个可以显示的文档由多个矩形框组成，这些矩形框分布开，从而不会相互重叠（一般情况下）。另外，根据某些限制，这些框要尽可能地少占空间，同时还要保证相互之间有足够的空间，以便清楚地看出哪些内容属于哪个元素。 外边距使用百分数
2016-06-14 22:55:39
683
原创 CSS学习5（视觉表现模型）
基本框CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。各元 素框中心有一个内容区(content area)。这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，是因为它们的宽 度可以设置为0，实际上这就从元素框去除了这些项。 可以用多种属性设置各外边距、边框和内边距，如margin-left或border-bottom。内容的背景(例如某种颜色或平铺图像)
2016-06-13 22:40:42
9505
原创 ES6学习3（各种类型的拓展）
字符串的拓展字符的Unicode表示法ES5中，Unicode必须是\uxxxx形式的，少与4位不行，多于四位必须拆成两个4位的来表示。在ES6中，将一个码点值放在大括号中可以自动解析。与双字节表示等价。console.log("\uD842\uDFB7");// "��"console.log("\u20BB7");//乱码console.log("\u{20BB7}");//正常解析con
2016-06-12 09:18:31
1055
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人