我的学习笔记
在macOS或者Window已经配置了git在git bash窗口的条件下直接执行命令：
//使用淘宝镜像
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
若你的window没有git环境
则依次执行：
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
npm install node-sass
在你的project下创建一个 .npmrc 文件
在文件中添加 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
再执行 npm -g install node-sass
以上安装成功后使用node-sass -v 测试安装是否成功
value：(relative/absolute/fixed/sticky)
relative
相对原位置偏移某些距离，但仍然占据原位置的空间
不脱离文档流(或许?,因为偏移了以后仍然占据原空间)
absolute
寻找父元素的relative，一直向上找青蛙，直到(html/body)
脱离文档流
fixed
将element固定在窗口的某个相对位置，不随着滚动条的位置变化而变化
脱离文档流
优势：代码量少，易学，好懂
劣势：推荐
.clearfix::after{
content: ''; //添加空元素
display: block;//设置成块级元素
clear: both;//清除前面浮动带来的所有效果
}
优势： 代码量更少
劣势：同有违结构和表现的分离，不推荐
优势：代码量更更少了
劣势：内容增多会造成不会自动换行导致内容被隐藏，无法显示要溢出的内容
注意：(这个bug写者并没有实验出来)，但既然已经有人排过雷便少使用此方法罢。
优势：代码量更更更少了…
劣势：冒失雷挺多的，不要使用
优势：代码量… 懂的
劣势：盒模型属性改变，造成的影响可能比带来的好处要大，不推荐
“闭合”浮动无非是两种方法:
- 通过在浮动元素末尾添加一个元素 然后clear:both
- 通过overflow or display:table 闭合浮动
如何理解其中原理 便看我另一篇文章《（Block formatting contexts）BFS是啥子？》
参考资料：
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js"></script>
var APP_ID = 'you APP_ID';
var APP_KEY = 'you APP_KEY';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
ping "kdqicvul.api.lncld.net"
and
/.js
var TestObject = AV.Object.extend('TestObject');var testObject = new TestObject();
testObject.save({
words: 'Hello World!'}).then(function(object) {
alert('LeanCloud Rocks!');})
浏览器安全的基石是”同源政策”（same-origin policy）
同源政策为Netscape公司于1995年引入浏览器。
目前，所有浏览器都实行这个政策
“同源”
A网页设置Cookie，B网页不能打开，除非“同源”
目的
保证Client信息安全，防止被恶意窃取数据。
例如：
用户C访问网站A，用户登陆后又去访问网站B(恶意网站)，若网站B可读取A网站Cookie？
- B网站通过Cookie获取到用户C的信息（若Cookie包含隐私，则会隐私泄露）
- 由于Cookie往往是来保存登陆信息，若用户没有退出登陆，则网站B可以冒充用户：为所欲为。浏览器规定：提交表单不受同源政策限制
综上所述
同源政策是必须的，“同源政策”越严格，用户安全性更高，网站安全性更高。（防止Cookie共享）
限制范围
若非“同源”，则 共有三种行为限制
AJAX请求无法发送
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。下述将如何规避这些限制
Cookie是Server给Browser的一段信息，只有“同源”网页才能共享 但有时同属网页下，会出现一级域名相同二级域名不同的情况？
不同的网页通过设置相同的document.domain来共享Cookie
document.domain = "example.com"
所以现在网页A通过脚本设置一个Cookie
documenet.cookie = "test = lwh"
网页B就可以读取到这个Cookie
var allCookie = document.cookie
这种方法只适用于Cookie以及iframe窗口，LocalStorage以及IndexDB无法通过这种方法，规避“同源政策”，就需要使用PostMessage API
另外：Server在设置Cookie时，指定Cookie的所属域名为y一级域名，例如，.example.com
Set-Cookie:key=value;domain=.example.com;path = /
此后下属，二/三级域名不用做任何设置都可以读取这个Cookie
两个网页不同源，则无法获取到对方DOM
例子：
iframe 以及 window.open 打开的窗口都无法与父窗口通信
强行访问则会报错
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
未捕获，DOM异常：阻止了一个frame访问跨源frame
无论子访问父or父访问子的DOM 都会报错
三种方法解决跨域访问的通信问题
1. 片段识别符（fragment identifier） 2. window.name 3. 跨文档通信API(Cross-document messaging)
片段识别符（fragment identifier）
URL # 号后面部分例如：
http://example.com/x.html#fragment的fragment就是偏度识别符，改变片段识别符，页面不会重新刷新父窗口可以把信息写入子窗口的片段识别符
var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;
子窗口通过 监听 hashchange 事件得到通知
window.onhashchange = checkMessage;
function checkMessage() {
var message = window.location.hash;
// ...
}
同时，子窗口也可以改变父窗口的片段标识
parent.location.href= target + "#" + hash;
window.name
Browser Window 有 window.name 属性
window.name 特点：无论是否同源只要在同一个窗口中，前一个网页设置了这个属性，后一个网页可以读取它
父窗口首先打开一子窗口，载入一不同源网页，该网页将信息写入window.name属性
window.name = data;
接着，子窗口跳回一个与主窗口同域的网址
location = ‘http://parent.url.com/xxx.html';
然后，主窗口就可以读取子窗口的window.name了
var data = document.getElementById('myFrame').contentWindow.name;
> 优点:window.name 容量很大，可以放置非常长的字符串，缺点是必须监听window.name属性变化影响网页性能
上面两种办法属于破解，这种办法是HTML5为了解决这个问题，引入的一个新API:跨文档通信API(Cross-Document Message )
> 这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。举例来说，父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法就可以了。
var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');
> postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
>子窗口向父窗口发送消息的写法类似。
window.opener.postMessage('Nice to see you', 'http://aaa.com');
> 父窗口和子窗口都可以通过message事件，监听对方的消息。
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
> message事件的事件对象event，提供以下三个属性。
* event.source：发送消息的窗口
* event.origin: 消息发向的网址
* event.data: 消息内容
> event.origin属性可以过滤不是发给本窗口的消息。
window.addEventListener('message', receiveMessage);function receiveMessage(event) {
if (event.origin !== 'http://aaa.com') return;
if (event.data === 'Hello World') {
event.source.postMessage('Hello', event.origin);
} else {
console.log(event.data);
}}
LocalStorage
通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。下面是一个例子，主窗口写入iframe子窗口的localStorage。
window.onmessage = function(e) {
if (e.origin !== ‘http://bbb.com') {
return;
}
var payload = JSON.parse(e.data);
localStorage.setItem(payload.key, JSON.stringify(payload.data));};
上面代码中，子窗口将父窗口发来的消息，写入自己的LocalStorage。
同源政策规定，AJAX只能请求同源网址，否则报错
除了架设服务器代理(Browser request 同源Server，再由后者request 外部服务)，有三种办法规避这个限制
- JSONP
JSONP是Server于Client跨源通信的常用方法
特点：简单适用，老式Browser全部支持，服务器改动较小
它的基本思想是，网页通过添加一个
Ｓｔａｔｕｓ－ｃｏｄｅ为服务器的返回值，是用３个数字来表示，第一个数字是作为状态码的分类，后两位数字只做类别再次细分不做大类分别
1XX:信息(Informational)
请求已经收到，请求过程正在继续
100 Continue
Client 应当继续等待请求，这个是Server端的临时状态，用于通知服务端
101 Switching Protocols
请求者已要求服务器切换协议，服务器已确认并准备切换。
2XX:成功(Success)
请求成功，被服务器理解并允许访问
200 OK
服务器已成功处理了请求，表示服务器提供了被请求的网页。
201 Create
请求成功并且创建了新的资源
202 Accepted
Server已接受请求，但尚未处理，也可能请求的是Server有意拒绝的服务，导致请求失败。
204 No Content
请求到了 但服务器没有返回内容
3XX:重定向(Readirecion)
必须进一步的采取行动操作才能完成请求
表示请求后但资源暂未被修改
4XX:客户端错误(Client Error)
请求失败，语法错误或某些操作无法完成
400 Bad Request
请求过程中，语法格式错误(域验证错误，缺少数据等
401 Unauthorized
没有被授权访问，需要用户身份验证，与403 Forbidden类似，但特别适用于可能进行身份验证但已失败或尚未提供的情况。响应必须包含WWW-Authenticate头字段，其中包含适用于所请求资源的讯息
403 Forbidden
服务器理解请求(请求合法)，但拒绝。与401不同的是这与授权验证无关，若不希望将此页面信息交给用户，则可以使用404status code
* 404 Not Found
> 服务器没有找到Requests-URI匹配的任何内容，不确定是永久性或是暂时性，服务器可以通过一些配置告知客户端旧资源是不可见且无重定向地址，则我们可以使用410(Gone)状态码
>
> 服务器若不希望确切说明请求被拒绝原因时或没有其他相应适用的时候常用此状态码
服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
5XX:服务器错误(Server Error)
服务器并未能完成一个明显(合法)的请求
服务器内部错误） 服务器遇到错误，无法完成请求。
ECMScript规范给所有函数都定义了call和apply两个方法，他们的应用广泛，作用一样，只是参数列表传参形式不同
call()
指定一个this,并给出一个或多个参数来调用一个函数(function)
与apply（）方法类似，但call()接受的是一个参数列表，而apply()接受的是一个包含多个参数的数组
//apply的用法
var obj = {
name : 'linxin'
}
function func(firstName, lastName){
console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B
* obj作为函数上下文的对象函数func中 this指向这个对象，在默认情况下this指向的为全局对象
//call的用法
var obj = {
name: 'linxin'
}
function func(firstName, lastName) {
console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D'); // C linxin D
var obj = {
name: 'linxin'
}
function func() {
console.log(this.name);
}
func.call(obj);
等同于
function func() {
console.log(obj.name);
}
> 我们知道了call第一个参数为函数上下文的对象，这里将obj传递给了func，此时函数里的this便指向了obj
借用别的对象的方法
var Person1 = function () {
this.name = 'linxin';
}
var Person2 = function () {
this.getname = function () {
console.log(this.name);
}
Person1.call(this);
}
var person = new Person2();
person.getname(); // linxin
在实例化的person使用getname() 获取到了Person1的name.
我们注意到Person2中将当前上下文的this传递到了Person1中，所以此时Person1的this指向的是Person2的this，于是Person1中，this.name = ‘linxin’ 等同于 Person2中 name = ‘linxin’，所以等同于Person2能继承Person1中的所有属性以及方法，等于Person2继承了Person1
调用函数(call()和apply()都会让函数立即执行，所以可做为调用函数的方法)
function func() {
console.log(‘linxin’);
}
func.call(); // linxin
bind()为ECMScript5中扩展的新方法，所以一些老版本的浏览器(IE低版本)无法兼容，它和call类似，接收的参数与call()相同，第一个为函数上下文，第二个是参数列表，可以接受多个参数
bind发返回值是函数
var obj = {
name: 'linxin'
}
function func() {
console.log(this.name);
}
var func1 = func.bind(obj);
func1(); // linxin
bind方法不会立刻执行，其中，它会返回一个改变过上下文this的函数，而原函数不会改变，原函数的this依然指向window
参数的使用
function func(a, b, c) {
console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');
func('A', 'B', 'C'); // A B C
func1('A', 'B', 'C'); // linxin A B
func1('B', 'C'); // linxin B C
func.call(null, 'linxin'); // linxin undefined undefined
其中返回过后的函数会以bind参数为基础，后面调用这个bind返回的函数会将参数往后排
if (!Function.prototype.bind) {//若没有bind函数
Function.prototype.bind = function () {//在在function的原型中添加一个bind方法
var self = this, // 保存原函数
context = [].shift.call(arguments), // 保存需要绑定的this上下文
args = [].slice.call(arguments); // 剩余的参数转为数组
return function () { // 返回一个新函数
self.apply(context,[].concat.call(args, [].slice.call(arguments)));
}
}
}
变量的作用域无非两种
使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
使用let声明的变量，其作用域为该语句所在的函数代码块内，不存在变量提升的现象
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值
而JavaScript的语法中，函数内部可以直接读取全局变量
另一方面，函数外部自然无法读取函数内部的局部变量
- 需要注意的是，函数内部声明变量的时候，一定要使用var命令，如果不用的话，你实际上是声明了一个全局变量
function f1(){
n=999;
}
f1();
alert(n); // 999
由于项目需求，我们可能需要得到函数内的局部变量，但是在正常情况下这是做不到的。所以只能通过变通的方法实现。
在函数的内部再定义一个函数
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
上面是一个标准的JavaScript特有的 “链式作用域” 结构chain scope） ，子对象会一级一级的向父级对象寻找所有的变量
既然f2可以读取到f1的变量，辣么，只要把f2作为返回值，我们不久可以再外部读取它的内部变量的吗？
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
- f2 就是闭包
- 闭包：能读取其他函数内部(局部)变量的函数
- JavaScript中，只有函数内部的子函数能读取到局部变量，所以可以把闭包理解为：定义在函数内部的函数
- 闭包是函数内部以及外部链接的桥梁
- 可以读取函数内部的变量
- 让这些变量的值始终保持在内存中。
function f1(){
var n=999;
nAdd=function(){
n+=1
}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 10000
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
调用你的是WHO？
历史遗留问题宽度在没设计之前为980px,所以我们需要给手机上的页面重新定义一下。
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimum-scale=1.0">
不同的媒体设备，或者不同的页面size或样式时对应不同的页面样式 两种方式使用。
1. style中直接定义
<style>
@media(max-width:800px){background: red;}
</style>
2.link时定义
<link type="text/css" href="./style.css" media="(max-width: 500px)" />
一般通过scss px 转换成 css 的rem 更加方便
Q： 为什么不使用百分比
A: 因为百分比无法硬链接宽高 pass
Q: em?
A: no em是适用于当前元素的font-size若没有才继承爸爸的font-size，
Q:rem?
A: yes rem 是适用于html的font-size，继承html
Q:一个rem是多少？
一个字的长度 or 一个 M 的长度..
Q:HTML font-size?
A: 它的默认font-size = 16px,chrome可以定义最小网页显示字的大小。
//js
var pageWidth = window.innerWidth
document.write('<style>html{font-size: ' + pageWidth + 'px}</style>')
//scss
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度。
.child{
width: px(320);
height: px(160);
font-size: 1.2em;
}
- jQuery 是一个JavaScript库
- jQuery 能很大程度上简化JavaScript程序
- jQuery 的学习非常简单
jQuery的目的就是让你在你的网站更容易的使用JavaScript
需要学习到的前置知识：
jQuery到底是什么？
jQuery是一个轻量级的库，“write less, do more”,Javascript library
jQuery的任务是通过大量的常见Javascript代码来完成 ，封装成方法后，你可以通过一行代码来使用
jQuery还简化了很多来自Javascript的东西，比如AJAX的调用和DOM的操作
AJAX = (ansyc JavaScript and XML)
jQuery库包含了下列的一下特征
1 | 此外，jQuery的plugins 几乎能完成所有任务 |
为什么使用jQuery？
有很多其他的Javascript框架，但jQuery似乎是最流行的，也是最可扩展的，许多大公司都在使用jQuery
比如：
tips: jQuery在所有主要浏览器的运行完全相同
有两个版本的jQuery可以下载
这两个版本都能在jQuery.com上下载到
jQuery是一个单独的JavaScript文件，所以我们要使用