001
CSS
盒模式
把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。
盒模式分类
两种盒模型分别说一下：
W3C标准盒模型
W3C标准盒模型中的width和height指的是content部分，而padding border不计入width和height的实际计量范围
IE盒模型
IE盒模型的width和height指的是content+border+padding共同组成的部分
代码：
用box-sizing属性来改变盒模型的类型：
box-sizing :content-box(默认值，W3C模型)
box-sizing :border-box（IE盒模型）
平时偏向用border-box，比较好用，可以计算元素在布局中真实所占的空间
rem的实现原理
div中img标签左右上下居中
JS
this的理解
数组
对象[{name:'xx'，value:1}，{name:''yy,value:2}]
求value值相加的和
map求出单个value，累加
reduce累加
按照value进行排序
map拿到value，排好序
在逐个去匹配对象
回答错误：
member列表，有id和role属性，按照role角色排序：
let members = [
{id: 1, role: 3},
{id: 2, role: 1},
{id: 3, role: 1},
{id: 4, role: 4}
]
members = members.sort((a, b) => a.role- b.role)
跨域
根据同源策略，当协议+域名+端口号三者有一个不同的时候，服务器返回的数据将会被浏览器拦截。
1 现在项目vue用的解决方法：
在开发环境下:
(由于 Vue 渲染服务和接口代理服务都是 webpack-dev-server，所以页面与代理接口之间不再跨域，无须设置 Headers 跨域信息了。)
利用 node + webpack + webpack-dev-server 代理接口跨域。
npm run build
=============== 以上为npm run dev跨域的解决方法 ===============
我们要打包上线：就用npm run build会打包成dist文件
但发到线上，就得用nginx解决跨域。
首先，下载nginx
https://blog.csdn.net/biaoge0310/article/details/78900538
入门命令：
在ngix文件目录下执行以下命令
start nginx 开启ngix
nginx -s quit 退出
nginx -s reload 重启
nginx -t 检查配置文件是否成功
然后：进入nginx/conf目录下的，找到nginx.conf文件
启动ngix服务器： start nginx
完美！！！！打包后也解决了。。
=============== 以上为npm run build 跨域的解决方法 ===============
不过，nginx，只是简单配置，涉及到的负载均衡，资源配置其他问题，那得更深入学习了！
2 后端CROS
3 JSONP
模块化
CMD
AMD
CommonJS
运行时加载：CommonJS模块就是对象；即在输入时先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为‘运行时加载’
编译时加载：ES6模块不是对象，而是通过export命令显示指定输出代码，import时采用静态命令形式。即在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”
模块化就是将独立的功能代码封装成一个独立的文件，其他模块需要使用，进行引用。
模块化有利于代码的拆分和架构上的解耦。
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解，以之处理。
模块化是一个将复杂系统分解为代码结构更合理，可维护性更高的模块方式。
可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。
对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的软件系统，也可以将管理、开发、维护变得“有理可循”
还有对于模块化的一些专业定义为:模块化是软件系统的属性，这个系统被分解为一组高内聚，低耦合的模块。
那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以直接加载别人写好的模块，进行使用即可。
首先，既然是模块化设计，那么作为一个模块化系统所必须的能力：
1.定义封装的模块
2.定义新模块对其他模块的依赖
3.可对其他模块的引入支持
JavaScript中出现了一些非传统模块开发方式的规范CommonJS的模块规范、
AMD(Asynchronous Module Definition异步模块规范)、CMD(Common Module Definition同步模块规范)等。
CommonJS是服务端模块的规范，Node.js采用了这个规范。
根据CommonJS规范，一个单独的文件就是一个模块。
加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。
//foobar.js
//私有变量
var test=123;
//公有方法
function foobar(){
this.foo=function(){
//do someing
}
this.bar=function(){
//do someing
}
//exports对象上的方法和变量是共有的
var foobar=new foobar();
export.foobar=foobar;
}
//require方法默认读取js文件，所以可以省略js后缀
var test=require('./foobar').foobar;
test.bar();
CommonJS加载模块是同步的，所以只有加载完成才能执行后面的操作。
想Node.js主要用于服务器的编程，加载的模块文件一般都已经存在硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。
但如果是浏览器环境，要从服务器加载模块，这时就必须采用异步模块，所以就有了AMD CMD解决方案。
AMD和RequireJS
AMD是Asynchromous Module Definitioin的缩写，意思就是"异步模块定义"。
AMD设计出一个简洁的模块API：
define(id?,dependencies?,factory);
第一个参数id为字符串类型，表示了模块标识，为可选参数。
若不存在，模块标识应该默认定义为在加载器中被请求脚本的表示。
如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
第二个参数，dependencies，是一个当前模块依赖的，已被模块定义的模块标识数组字面量。
第三个参数，factory，是一个需要进行实例化的函数或者一个对象。
通过参数的排列组合，这个简单的API可以从容应对各种各样的应用场景，如下所述.
具名模块
define('alpha',["require","exports"，"beta"],function(require,exports,beta){
exports.verb=function(){
return beta.verb();
//or :
return require("beta").verb()
}
})
定义有依赖的模块
第三个参数需要进行实例化的函数
define(['alpha'],function(alpha){
return {
verb:function(){
return alpha.verb()+1
}
}
})
定义无依赖的模块
第三个参数需要进行实例化的函数或者对象
define({
add:function(x,y){
return x+y ;
}
})
定义数据对象模块
第三个参数需要进行实例化的函数或者对象
define({
users:[],
member：[]
})
包装模块
define(function(require,exports,module){
var a=require('a'),b=require('b');
exports.action=function(){};
})
不考虑多了一层函数外，格式和Node.js是一样的:
使用require获取依赖模块，使用exports导出API。
除了define外，AMD还保留了一个关键字。require作为规范保留的全局标识符，
可以实现为module loader，也可以不实现。
模块加载
require([module],callback)
AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块，所有模块加载完成之后回调函数。
其中：
[module]：是一个数组，里面的成员就是要加载的模块；
callback：是模块加载完成之后的回调函数。
例如：加载一个math模块，然后调用方法 math.add(2, 3);
require(['math'], function(math) {
math.add(2, 3);
});
RequireJS
RequireJS是一个前端的模块化管理的工具库，遵循AMD规范，它的作者是AMD的创始人。所以说RequireJS是对AMD规范的阐述一点也不为过。
RequireJS的基本思想为：通过一个函数来将所有需要的或者所所依赖的模块实现装载进来，然后返回一个新的函数（模块），我们所有关于新模块的业务代码都在这个函数内部操作，其内部也可以无限制的使用已经加载进来的依赖模块。
<script data-main='scripts/main' src='scripts/require.js'></script>
那么scripts下的main.js则是指定的主代码脚本文件，所有的依赖模块代码文件豆浆从改文件开始异步加载进入执行。
define用于定义模块，RequireJS要求每个模块均放在独立的文件之中。
按照是否有依赖其他模块的情况分为独立模块和非独立模块。
独立模块，不依赖其他模块。直接定义：
define({
method1: function(){},
method2: function(){}
});
也等价于
define(function() {
return {
method1: function(){},
method2: function(){}
}
});
非独立模块，对其他模块有依赖
define(['module1','module2'],function(m1,m2){
})
或者等价于
define(function(require){
var m1=require('module1'),m2=require('modules2')
})
简单看了一下RequireJS的实现方式，其 require 实现只不过是提取 require 之后的模块名，将其放入依赖关系之中。
require方法调用模块
在require进行调用模块时，其参数与define类似。
require(['foo', 'bar'], function(foo, bar) {
foo.func();
bar.func();
} );
在加载 foo 与 bar 两个模块之后执行回调函数实现具体过程。
当然还可以如之前的例子中的，在define定义模块内部进行require调用模块
define(function(require) {
var m1 = require( 'module1' ),
m2 = require( 'module2' );
...
});
define和require这两个定义模块、调用模块的方法合称为AMD模式。
定义模块清晰，不会污染全局变量，清楚的显示依赖关系。
AMD模式可以用于浏览器环境并且允许非同步加载模块，
也可以按需动态加载模块。
AMD对于依赖是提前执行，不过Require从2.0开始，也改成恶意延迟执行。
AMD推崇依赖前置。
CMD和SeaJS
CMD是SeaJS在推广过程中对模块定义的规范化产出。
对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不通过）。
CMD推崇依赖就近，AMD推崇依赖前置。
//AMD
define(['./a','./b'], function (a, b) {
//依赖一开始就写好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依赖可以就近书写
var a = require('./a');
a.test();
...
//软依赖
if (status) {
var b = requie('./b');
b.test();
}
});
虽然 AMD也支持CMD写法，但依赖前置是官方文档的默认模块定义写法。
AMD的API默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require，提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。
UMD
UMD是AMD和CommonJS的糅合
AMD模块以浏览器第一的原则发展，异步加载模块。
CommonJS模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。
这迫使人们又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。
UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。
在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
(function (window, factory) {
if (typeof exports === 'object') {
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
define(factory);
} else {
window.eventUtil = factory();
}
})(this, function () {
// module ...
});
ES6 Modules
ES Modules是JavaScript官方的标准化模块系统。
1，它因为是标准，未来很多浏览器会支持，可以很方便的在浏览器中使用。(浏览器默认加载不能省略js)
2.它同时兼容在node环境下运行。
3.模块的导入导出，通过import和export来确定。可以和Commonjs模块混合使用。
4.ES modules输出的是值的引用，输出接口动态绑定，而CommonJS输出的是值得拷贝。
5，ES Module模块编译时执行，而CommonJS模块总是在运行时加载
