来啊 跨域啊

又双叒叕是写在最前

所在的开发小组名叫”首页组”，但我觉得可以叫”块块组”。

一方面因为我们组的需求迭代速度真的是超级快，手头这个版本还没做完，下下版的prd就发来了。另一个原因是因为我们的最终任务就是呈现公司电视上的首页，而首页说粗暴点就是一个一个的块块，大块块套小块块。

但由于公司业务的越来越丰富，首页从原来最简单的呈现影视资源，到现在涉及到各大业务线。上面的大块块是影视，下面的大块块是教育，中间的大块块里的第n个小块块是商城，运营宝宝们想放什么放什么。

因此我们组的开发涉及到各业务线的对接，经常看到别家的产品跑去找我们家的产品，要求把他们的业务加到我们的下版需求里。有次听到我们的产品回应，你的这个需求只能排到以后了，我们下版需求早就排满了-0-

以上其实都是废话，但是我就是想写哈哈哈。
好啦好啦，重点就是我们怎么对接呢，跨域啊~

JSONP

原理

众所周知，浏览器存在同源策略机制，但Web页面上调用js文件时则不受是否跨域的影响。因此产生一种解决方案——web客户端通过调用脚本的方式，来调用跨域服务器上动态生成的js格式文件，服务器把客户端需要的数据装入进去。客户端调用成功后，只需要自己需求进行处理和展现了。

于是形成了一种JSONP这种传输协议，其要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

原生实现

1
2
3
4
5
6
7
8
9
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}

ajax实现

实现方式

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
     type: "get",
     url: "我是url",
     dataType: "JSONP",
     JSONP: "callback",//传递给请求处理程序或页面的，用以获得JSONP回调函数名的参数名(一般默认为:callback)
     JSONPCallback:"JSONPCb",//自定义的JSONP回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
     success: function(data){
         // 大胆处理你的返回数据吧
     },
     error: function(){
         alert('fail');
     }
 });

注意点

url

url后需要加上?callback=?指定回调函数。

timeout

JSONP不支持超时设置，若遇到这种情况可以让后台进行处理。

async

JSONP不支持同步操作，因此设定async: false无效。

多个JSONP

这是我初次开发时，纠结了很久的一个问题。当时使用JSONP，经常出现找不到对应回调函数的错误。网上很多错误说明都和callback传参有关，并不适用于我的情况。

先是发现我当时的同一页面调用了两个JSONP请求，而出错的总是后一个，因此考虑到应该是两个请求同时调用相关。当时想到的第一个方案是把设置async: false，意图使用同步操作避免同时调用的问题。后来调试的时候发现请求依然是异步执行，查找了jQuery文档才发现不支持同步操作，因此有了上一个注意点。

之后发现我这两个请求用了同样的JSONPCallback,尝试了区分成不同的变量，成功解决了这个问题。

后来瞄了下jQuery的这块的源码。

1
2
3
4
5
6
7
// If previous value didn't exist - remove it
if ( overwritten === undefined ) {
    jQuery( window ).removeProp( callbackName );
// Otherwise restore preexisting value
} else {
    window[ callbackName ] = overwritten;
    }

原来每次JSONP请求，都先在window上挂一个callbackName，返回后会移除callbackName。于是处理第一个返回时就把window[callbackName]移除了，后续的返回都无法处理了。

源码大法万岁！！！

CORS(跨域资源共享)

两种请求

CORS请求分为简单请求和非简单请求两类。简单请求是指同时满足以下两个条件的请求——

  1. 请求方法是HEAD/GET/POST之一；
  2. HTTP的头信息不超出Accept/Accept-Language/Content-Language/Last-Event-ID/Content-Type(只限于application/x-www-form-urlencoded、multipart/form-data、text/plain这三个值)。
    不同时满足的即为分简单请求。

实现

简单请求只需要服务端设置Access-Control-Allow-Origin。

带cookie的请求，前后端都需要设置。
前端设置withCredentials为true。
后端设置Access-Control-Allow-Credentials、Access-Control-Allow-Origin以及cookie。

CORS vs JSONP

优缺点比较

  1. JSONP对浏览器的支持较好，IE10以下不支持CORS；
  2. JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。
  3. JSONP的错误处理机制并不完善，我们没办法进行错误处理；而CORS可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于排查。
  4. JSONP只会发一次请求；而对于复杂请求，CORS会发两次请求。

信息爆炸 懂点性能

组件加载

延迟加载组件

利用JS的onload事件区分可以延迟加载的组件。

预加载组件

利用浏览器的空闲时间来请求你将来会用到的组件。

  • 无条件预加载：一旦onload触发，立即获取另外的组件。
  • 有条件预加载：基于用户动作，你推测用户下一步会去哪里并加载相应组件。
  • 预期的预加载：在旧网页预加载新网页的部分组件，那么切换到新网页时就不会是没有任何缓存了。

http/2

http/1.x的缺陷

  1. HTTP/1.x 客户端需要使用多个连接才能实现并发和缩短延迟；
  2. HTTP/1.x 不会压缩请求和响应标头，从而导致不必要的网络流量；
  3. HTTP/1.x 不支持有效的资源优先级，致使底层 TCP 连接的利用率低下。

http/2的改进

  1. HTTP/2 支持在同一连接上进行多个并发交换；
  2. HTTP/2 通过支持标头字段压缩；
  3. HTTP/2 允许为请求设置优先级，让更重要的请求更快速地完成;
  4. HTTP/2 通过使用二进制消息分帧对消息进行更高效的处理。

对前端的影响

HTTP/2 针对多个请求进行了优化，因此之前我们在前端中所做的关于减少HTTP请求的最佳实践都不再适用，如合并JS、CSS文件（Concatenation），多个图片或图标合并（Spriting）,将较小的JS或CSS文件内嵌到HTML中（Inlining），合并HTML文件（Vulcanize），根据某网站的测试结果显示，在使用HTTP/2后，合并为一个大文件的加载时间反而会比不合并更长。

WebSocket

http的缺陷

http协议有一个缺陷，通信只能由客户端发起。因此只能使用”轮询”的方式，效率很低，非常浪费资源。
而WebSocket支持全双工通信。

websocket-1

参考

我的组件化开发小心得

写在最前

近期为团队进行组件化开发，期间遇到了不少问题，初期经常是加班踩坑的状态。特开此文，谈(tu)谈(cao)一下组件化开发一路的小(ge)心(zhong)得(keng)。
PS：本篇文章仅仅写自己的一些小感受啦，我会开其他文谈具体的开发过程的~

技术选型

选型过程中考虑了很多方面的事情。最重要的是我们实际的业务需求，主要是针对后台管理系统。其次是学习成本，由于初期的组件化开发和业务开发任务同步进行，且只有我一个人（一段很心酸的岁月T^T），当然是尽量避免学习曲线陡峭的框架。对于ui框架的选择，结合了我们平台现有的交互、展现形式。过程中，也参考了很多的现有方案。

最后选择了基于Vue.js和Elementui的框架组合，较好地满足了我们”适于后台、贴合业务、容易入门”的需求。

穿好胶鞋 时刻准备踩坑

这部分可以承接上部分的技术选型，因为即使使用了合适的框架，但后续的坑还是要踩的。这一点在我使用Elementui的时候表现得尤为明显。比如，开发过程中所需要的某项特性恰好是Elementui不提供甚至屏蔽的，而框架又是已经封装好的一个整体，这个时候就可能需要通过各种方法绕开这些问题。每次遇到这种问题时，经常需要花费很多时间，看源码、搜谷歌、最后施展奇技淫巧搞定- -

当然，过程中还会遇到形形色色的问题，最大建议就是保持好心态。特别是像我这样的初上手新人，遇到问题就耐心的去理清自己的思路，寻求解决方案。建议大家多看github上的issue，上面有很多大神的讨论研究，经常会有惊喜~

组件化思想很重要

做一只会沟通的技术仔

关键对话

解决关键对话的原则

  • 明确自己的对话目的
  • 在对话过程中始终注意维护安全感

如何确定目标

  • 从自己做起
    控制自己的行为，冷静思考。

  • 关注自己的真正目的
    我想为自己、他人和人际关系做些什么？

如何保证安全

注意观察

当对方与你没有达成共同目的或得到互相尊重，对话会出现危机。

暂停对话

吃颗药冷静一下- -

应对措施

  • 自己陷入沉默或暴力的情况下
    回顾自己的行为方式，寻找背后的事实
    改变主观臆测

  • 对方陷入沉默或暴力的情况下
    在必要时向对方道歉
    利用对比法消除对方的误解（说明你不希望如何/希望如何）
    提出共同目的

如何陈述自己的观点

采用综合陈述法

  • 分享事实经过
  • 说出你的想法
  • 征询对方观点
  • 做出试探表述
  • 鼓励做出尝试

如何帮助对方走出沉默或暴力状态

  • 询问观点
    表明你很有兴趣了解对方的看法。

  • 确认感受
    通过表示高度理解对方的感受增强安全感，可通过重新描述他们的表达，来表明自己理解其观点。

  • 主动引导
    如果对方还是退缩迟疑，可对他们的想法或感受做出最符合情况的猜测。

当与对方观点相差甚远时，不要简单地认为对方是错误的，而应当把你们的看法进行比较。

将沟通转化为行动和结果

  • 学会决策
    命令式，顾问式，投票式，共识式

  • 明确执行细节
    明确说明行动人、行动目标和截止时间等要素
    设定检查时间，记录任务细节
    督促行动人员负责

多学知识多读书[2017]

今年在人文社科方面有了新突破（托优势计划的福- -），尤其对心理类书籍开始感兴趣。另外最近也开始阅读技术书籍，希望自己能在今年形成一套比较系统的技术知识体系。

文学(8)

《摆渡人》
《皮囊》
《阿弥陀佛么么哒》
《年少荒唐》
《罗曼蒂克消亡史》
《活着》
《过于喧嚣的孤独》
《动物园》

我是工科女(5)

《JSON必知必会》
《JavaScript启示录》
《JavaScript语言精粹》
《在线》
《模仿的技术》

补点人文社科小知识(13)

《未来简史》

《人间词话》
《写给大家的西方美术史》

《2015年度300问：心理》
《欲望的演进》
《一本正经又怪诞的行为心理学》

《关键对话：如何高效能沟通》
《谈话的力量》

《一本小小的蓝色逻辑书》
《策略思维》
《麦肯锡问题分析与解决技巧》

《遇见未知的自己》
《做事的常识》

《24堂财富课》

(双向)绑定你，没道理

实现方式

实现双向绑定大致有以下几种方式

  • 脏值检查
    通过脏值检测的方式比对数据是否有变更，来决定是否更新视图.

  • 发布者-订阅者模式
    使用自定义属性对DOM元素指明绑定对象，所有绑定的D元素和对象会”订阅”一个发布者。如果对象或者元素被侦测到发生了变化，将代理事件到发布者-订阅者模式，会将变化传播给绑定的对象和元素上。

  • 数据劫持
    劫持各个属性的getter/setter，在数据变动时触发相应的监听回调。

主流框架中，Angular.js的双向绑定采用的是脏值检查方式，Vue.js则使用了发布者-订阅者模式 + 数据劫持的方式。

vue的双向绑定

原理

实现原理如下图（这张图真是太棒啦~~~）

bind-1

数据监听器Observer对数据对象的属性进行监听，指令解析器Compile对元素节点的指令进行扫描和解析，根据指令模板替换，以及绑定相应的更新函数。
Watcher为订阅者，是连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

实现逻辑

检测数据

在Observer中使用Object.defineProperty方法定义data上的数据，实现数据劫持。
在这个过程中，需要为每个属性节点建立一个发布者，这个发布者是针对对应的属性节点以及其后代属性的。

编译模板

首先通过通过document.createDocumentFragment方法创建文档碎片来获取模板。
之后遍历每个dom节点，使用正则匹配判断出节点中需要编译的文本，将其跟data上的数据进行匹配，并创建一个订阅者将其加入到相应的发布者中。

发布-订阅

Watcher订阅者自身有一个update()方法，待属性变动接收到通知时，能调用自身的update()方法，并触发Compile中绑定的回调。

参考

JavaScript设计模式

工厂模式

工厂模式解决了创建多个相似对象的问题，但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

1
2
3
4
5
6
7
8
9
10
11
12
function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o; 
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

构造函数模式

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。

1
2
3
4
5
6
7
8
9
10
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

但构造函数的主要问题是，每个方法都要在每个实例上重新创建一遍。因此

1
alert(person1.sayName == person2.sayName);  //false

可通过把函数定义转移到构造函数外部来解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}
function sayName(){
    alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

可是新问题又来了：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。

原型模式

1
2
3
4
5
6
7
8
9
10
11
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName();   //"Nicholas"
var person2 = new Person();

更简单的语法——

1
2
3
4
5
6
7
8
9
10
function Person(){
}
Person.prototype = {
    constructor: Person, // 重要
    name : "Nicholas", 7 age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

原型模式的最大问题是由其共享的本性所导致的，当有引用属性时，改变一个对象的这个属性也会改变其他对象的这个属性。
因此可以组合使用构造函数模式与原型模式（下一节）。

构造函数+原型模式

构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。
这也是最广泛、认同度最高的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person(name, age, job){
    this.name = name; 3 this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor : Person,
    sayName : function(){
        alert(this.name);
    }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); // "Shelby,Count,Van"
alert(person2.friends); // "Shelby,Count"
alert(person1.friends === person2.friends); // false
alert(person1.sayName === person2.sayName); // true

动态原型模式

动态原型模式把所有信息都封装在了构造函数中，而通过在构造函数中初始化原型(仅在必要的情况下)。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age, job){
    //属性
    this.name = name; 
    this.age = age; 
    this.job = job;
    //方法
    if (typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name);
        }; 
    }
}

寄生构造函数模式

这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。
除了使用 new 操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句，可以重写调用构造函数时返回的值。

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o; 
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();  //"Nicholas"

稳妥构造函数模式

稳妥构造函数遵循与寄生构造函数类似的模式，但有两点不同：一是新创建对象的实例方法不引用 this，二是不使用 new 操作符调用构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name, age, job){
    // 创建要返回的对象
    var o = new Object();
    // 可以在这里定义私有变量和函数
    // 添加方法
    o.sayName = function(){
        alert(name);
    };
    //返回对象
    return o; 
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName();  //"Nicholas"

华山论个剑

之前进行项目选型的时候，对比了一下当前流行框架(AngularJS/React/Vue)的一些特点，在这里简单总结一下。

因为个人最后选择了 Vue，所以就让Vue先生做一回主角，和其他两位来个华山论剑~

React vs Vue

相同点

  • 使用 Virtual DOM（Vue2 使用）
  • 提供了响应式和组件化的视图组件
  • 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

性能

在 React 中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。
如要避免不必要的子组件的重渲染，则需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法来优化性能。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。
这个特点使得开发者无需考虑优化。

HTML

在 React 中，所有的组件的渲染功能都依靠 JSX，这使得开发人员可以使用纯 JavaScript 功能来构建你的视图页面，并且开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板更为先进(比如，linting、类型检查、编辑器的自动完成)。

Vue 也提供了渲染函数，并支持JSX，但整体思想还是拥抱经典的 Web 技术。
它使用模板，一方面贴近了习惯 HTML 的开发者，也方便了已有应用向 Vue 的迁移。

功能支持

Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。
React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。
但相对的，React 的生态系统相比 Vue 更加繁荣。

学习曲线

React 学习曲线陡峭，在学习之前，需要知道 JSX 和 ES2015。
相比之下，Vue 更易学习。

原生渲染

React —— React Native
Vue —— Weex/NativeScript

AngularJS(Angular 1)

性能

AngularJS 使用脏值检查实现双向绑定，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环 (digest cycle) 可能要运行多次。AngularJS 用户常常要使用深奥的技术，以解决脏检查循环的问题。
Vue 使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

复杂性

Vue.js 完胜 AngularJS。

数据绑定

AngularJS 使用双向绑定。
Vue 在不同组件间强制使用单向数据流，更为清晰易懂。

Angular(Angular 2)

Angular 和 Vue 的最大区别应该是在于TypeScript。因此在中小型规模的项目中，用 Vue 可能是更好的选择（因为此时引入 TS 可能并不会带来太多明显的优势）。
不过TypeScript是趋势，Vue 也已经正朝这个方向努力~

参考

Get some TRICKs

记录一些平时get到的小技能

网站神器

草料

进行移动端开发的时候，可以把地址通过草料转成二维码，通过手机扫码进行移动端测试。

REGEXPER

用于正则表达式可视化，一步理清正则。

caniuse

这个样式我能不能这么写？不知道兼容性怎么样？直接去caniuse上看一眼吧。

记性不好，笔头来凑-HTML+CSS篇

HTML

Doctype为何物

Doctype声明位于位于HTML文档中的第一行，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD(文档类型定义)，因为 HTML 4.01 基于 SGML(标准通用标记语言)。
HTML5 不基于 SGML，所以不需要引用 DTD。

XHTML vs HTML

HTML是一种基本的WEB网页设计语言，而XHTML是一个基于XML的置标语言。
最主要的不同：

  1. XHTML 元素必须被正确地嵌套；
  2. XHTML 元素必须被关闭；
  3. 标签名必须用小写字母；
  4. XHTML 文档必须拥有根元素。

script标签

defer属性

defer属性会将script脚本延迟到整个页面都解析完毕后再运行，相当于高速浏览器立即下载，但延迟执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发 前执行，因此最好只包含一个延迟脚本。

meta标签

移动端最标准的meta设置。

1
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

HTML5

video vs audio

新增的元素，用于实现视频和音频功能。
这里想额外补充的是其实现原理实际基于Shadow DOM()。「Shadow DOM」会让DOM element subtree包含于document的呈现内容，但是却不会在main document DOM tree里。

另外还有一个相关的 source 标签，可为媒介元素（比如

拖放draggable

原生使用draggable属性，搭配ondragstart、ondragover、ondrop事件完成拖放。其中ondragover需使用preventDefault()阻止元素的默认处理方式，传递数据使用dataTransfer。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var draggable = {
    // 初始化
    init: function () {
        var me = this;
        me.dragTarget = document.querySelector('.drag-target');
        // 为拖拽源监听dragstart,设置关联数据
        me.dragTarget.addEventListener('dragstart', me.onDragStart, false);
        // 取消元素dragover默认行为,使其可拖放
        me.dragTarget.addEventListener('dragover', me.onDragOver, false);
        // 鼠标释放,在拖放目标上接收数据并处理
        me.dragTarget.addEventListener('drop', me.onDrop, false);
    },
    onDragStart: function (e) {
        var target = e.target;
        e.dataTransfer.setData('from', $(target).index()); // 设置关联数据
    },
    onDragOver: function (e) {
        e.preventDefault(); // 阻止元素的默认处理方式
    },
    onDrop: function (e) {
        var target = e.target;
        var fromIndex = e.dataTransfer.getData('from'); // 接收数据
    }
};

插件实现个人推荐Sortable.js（vue版本使用vue-draggable）。

画布 vs SVG

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

Web存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage:没有时间限制的数据存储
  • sessionStorage:针对一个session的数据存储
    之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
    Web存储可用于自动保存、页面间的数据传递等功能。

    Tip
    1.IE6/7不支持Web存储，可通过UserData实现本地存储
    2.页面间的数据传递还可通过cookie、web Worker实现

CSS

选择器啊选择器

nth-child vs nth-of-type

1
2
3
4
5
<ul>
    <p>zero</p> 
    <li>one</li> <!-- ul li:nth-child(2) -->
    <li>two</li> <!-- ul li:nth-of-type(2) -->
</ul>

浮动这个磨人的小妖精

特性

浮动的特性可以概括为包裹与破坏。
包裹可称为BFC（块级格式化上下文）。

css-1

清除浮动

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
    content: '';
    /* 下面三行也可使用display:table进行替换 */
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Tip: .clearfix只应用在包含浮动子元素的父级元素上。

文字的那些事

文字溢出隐藏并显示省略号

单行文本

1
2
3
4
5
.oneline {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
}

多行文本

1
2
3
4
5
6
7
8
multiline {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

文字大小

em与rem

em是一个相对单位，参照物是父元素的font-size，若父元素没有设置font-size，会一直向上寻找。浏览器有一个默认设置：1em = 16px。
rem与em的区别在于，其参照物是html的font-size。

选中文字

通过::selection来设置光标选中的文字

1
2
3
4
::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

CSS盒子模型

标准模型下，总元素的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距。
在怪异模式下，width属性是内容、内边距和边框的宽度的总和。
可通过设定box-sizing: border-box;来实现后者，更符合我们对盒子的直觉认知。
比如要一个元素的宽度严格是其父元素的某个百分比，但是又要给其周边留出点空白，这样就很方便：

1
2
3
box-sizing: border-box; 
width: xx%; 
padding: yyem;

边界重叠

CSS的margin上下布局会出现边界塌陷或者说边界重叠（这里特别说明，水平布局是不会出现这个问题的T-T）。

垂直布局

垂直之间塌陷的原则是以两方最大的外边距为准，可直接针对一个来外边距来解决这个问题。

父子嵌套

这是出现比较多的情况，有以下几种解决方案。

  1. 给父元素指定一个边框，因为外层有border的话，父子就不是紧贴在一起的了，不会造成塌陷；
  2. 给父元素加溢出处理overflow: hidden；
  3. 给父元素加padding。

FLEX布局

概念

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

应用场景

网格布局

根据缩放值实现网格布局，通常采用元素class与样式的对应实现。

1
2
3
4
5
<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

1
2
3
4
5
6
7
.Grid {
  display: flex;
}
.Grid-cell {
  flex-shrink: <number>; /* 不同class采用不同缩放值 实现灵活布局 */
}

固定底栏

1
2
3
4
5
<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>
1
2
3
4
5
6
7
8
9
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}

垂直居中

具体可见”垂直居中”部分。

get些常用小招

让我用border框住你

工作里经常会下面遇到这样的样式，特别是在导航之类的地方。即第一个元素没有左边框，之后的元素有左边框。

css-2

这种情况可以通过CSS中的相邻兄弟选择器进行实现。
1
2
3
ul li + li {
    border-left: 1px solid #999;
}

上面的方式也可以用于解决相邻元素边框重叠导致像素变粗的问题，但却可能产生另一种问题，即当相邻的两个元素高度不一致的时候，会出现断线的现象(下图)。

css-3

这个时候可以使用一种方式解决这个问题。
1
2
3
4
ul li {
    margin-right: -1px;
    border: 1px solid #999
}

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.detail-wrapper {
    width: 100%;
    min-height: 100%;
}
.detail-main {
    margin-top: 64px;
    padding-bottom: 64px;
}
.detail-close {
    position: relative;
    margin: -64px auto 0 auto;
    clear: both;
}
</style>
<div class="detail">
  <div class="detail-wrapper clearfix">
    <div class="detail-main"></div>
  </div>
  <div class="detail-close">
    <i class="icon-close"></i>
  </div>
</div>

垂直居中

不定宽高的水平垂直居中

transform
1
2
3
4
5
6
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

父元素需要设置成relative，若元素本身的宽高确定，可采用负margin的方式(margin-left和margin-top设置为宽高的一半)

flex
1
2
3
4
5
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

css3新属性

table-cell
1
2
3
4
5
.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

喜欢音乐 看书 旅行<br>偶尔玩设计<br>以及 只爱写JS的程序媛一枚