LearningRecord
LearningRecord copied to clipboard
Rashomon511
学习资料汇总、阅读记录，持续学习,每天进步一点点.🏫🏫
- css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 - style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS - slint-loader：通过 SLint 检查 JavaScript 代码 - babel-loader：把 ES6 转换成 ES5 - file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 - url-loader：和 file-loader...
### gulp、grunt gulp和grunt强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 PS：简单说就一个Task Runner ### webpack webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。 PS：webpack is a module bundle ### 相同功能 - 文件合并与压缩（css） - 文件合并与压缩（js） - sass/less预编译 - 启动server - 版本控制 ### 两者区别 虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。 gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。 webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。...
可以在devServer里面设置 ```javascript devServer: { contentBase: './dist', // 起一个在dist文件夹下的服务器 open: true, // 自动打开浏览器并访问服务器地址 proxy: { // 跨域代理 '/api': 'http: //localhost:3000' // 如果使用/api,会被转发（代理）到该地址 }, port: 8080, hot: true, // 开启HMR功能 hotOnly: true...
##### webpack概念 > 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，将项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件 组成： - 入口(entry) 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始 - 输出(output) output 属性告诉 webpack 在哪里输出它所创建的 bundles ，以及如何命名这些文件，默认值为 ./dist - loader loader 让 webpack 能够去处理那些非...
```javascript const data = [ { id: 1, name: '222', children: [{ id: 2, name: '34', children: [{ id: 112, name: '334', }, { id: 112, name: '354', } ]...
一、babel-polyfill 由于babel默认只转换新的JavaScript语法，但对于一些新的API是不进行转化的（比如内建的Promise、WeakMap，静态方法如Array.from或者Object.assign），那么为了能够转化这些东西，我们就需要使用babel-polyfill这个插件 由于babel-polyfill是个运行时垫片，所以需要声明在dependencies而非devDependencies里 二、babel-plugin-transform-runtime 由于使用babel-polyfill，会产生以下问题： 1）babel-polyfill会将需要转化的API进行直接转化，这就导致用到这些API的地方会存在大量的重复代码 2）babel-polyfill是直接在全局作用域里进行垫片，所以会污染全局作用域 所以，babel同时提供了babel-plugin-transform-runtime这一插件，它的好处在于： 1）需要用到的垫片，会使用引用的方式引入，而不是直接替换，避免了垫片代码的重复 2）由于使用引用的方式引入，所以不会直接污染全局作用域。这就对于库和工具的开发带来了好处 但是babel-plugin-transform-runtime仍然不能单独作用。因为有一些静态方法，如"foobar".includes("foo")仍然需要引入babel-polyfill才能使用
> 同源策略 同源协议指的是页面若域名，端口，协议都相同，便具有相同的源。 目的是为了保证用户信息的安全，防止恶意的网站窃取数据。 解决这种同源策略的方法便成为跨域。 > JSONP JSONP是JSON with Padding的略称。允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。 > 原理 利用script标签的src属性调用资源不跨域的特性，向服务端请求同时传一个callback回调方法名作为参数，服务端接受函数名生成返回json格式资源的代码。 > 实现 ```javascript // 获取到跨域资源后的回调 var handleFn = function(data){ console.log(data) // JSONP跨域成功返回的资源 }; var url...
 ```javascript function makeIterator(array){ var nextIndex = 0; return { next: function(){ return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {done: true}; } }; } // 使用 next...
1.指定 async 属性 指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。 为此，建议异步脚本不要在加载期间修改 DOM。 执行顺序：让脚本在加载完可用时立即执行,异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之 后执行。 ```javascript Example HTML Page ``` 2.defer属性 执行顺序：在dom加载完毕后执行，defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后 ```javascript window.onload = function() { console.log("window.onload"); } console.log("normal"); ```...
中间人攻击，即所谓的Man-in-the-middle attack(MITM)，顾名思义，就是攻击者插入到原本直接通信的双方，让双方以为还在直接跟对方通讯，但实际上双方的通信对方已变成了中间人，信息已经是被中间人获取或篡改 1.SSL证书欺骗攻击 此类攻击较为简单常见。首先通过ARP欺骗、DNS劫持甚至网关劫持等等，将客户端的访问重定向到攻击者的机器，让客户端机器与攻击者机器建立HTTPS连接（使用伪造证书），而攻击者机器再跟服务端连接。这样用户在客户端看到的是相同域名的网站，但浏览器会提示证书不可信，用户不点击继续浏览就能避免被劫持的。所以这是最简单的攻击方式，也是最容易识别的攻击方式。  钓鱼类攻击，App直接调用系统API创建的HTTPS连接（NSURLConnection）一般不会受到影响，只使用默认的系统校验，只要系统之前没有信任相关的伪造证书，校验就直接失败，不会SSL握手成功；但如果是使用WebView浏览网页，需要在UIWebView中加入较强的授权校验，禁止用户在校验失败的情况下继续访问。 2.SSL剥离攻击（SSLStrip） SSL剥离，即将HTTPS连接降级到HTTP连接。假如客户端直接访问HTTPS的URL，攻击者是没办法直接进行降级的，因为HTTPS与HTTP虽然都是TCP连接，但HTTPS在传输HTTP数据之前，需要在进行了SSL握手，并协商传输密钥用来后续的加密传输；假如客户端与攻击者进行SSL握手，而攻击者无法提供可信任的证书来让客户端验证通过进行连接，所以客户端的系统会判断为SSL握手失败，断开连接。 该攻击方式主要是利用用户并不会每次都直接在浏览器上输入https://xxx.xxx.com来访问网站，或者有些网站并非全网HTTPS，而是只在需要进行敏感数据传输时才使用HTTPS的漏洞。中间人攻击者在劫持了客户端与服务端的HTTP会话后，将HTTP页面里面所有的https://超链接都换成http://，用户在点击相应的链接时，是使用HTTP协议来进行访问；这样，就算服务器对相应的URL只支持HTTPS链接，但中间人一样可以和服务建立HTTPS连接之后，将数据使用HTTP协议转发给客户端，实现会话劫持。 这种攻击手段更让人难以提防，因为它使用HTTP，不会让浏览器出现HTTPS证书不可信的警告，而且用户很少会去看浏览器上的URL是https://还是http://。特别是App的WebView中，应用一般会把URL隐藏掉，用户根本无法直接查看到URL出现异常。  该种攻击方式同样无法劫持App内的HTTPS连接会话，因为App中传入请求的URL参数是固定带有https://的；但在WebView中打开网页同样需要注意，在非全网HTTPS的网站，建议对WebView中打开的URL做检查，检查应该使用https://的URL是否被篡改为http://；也建议服务端在配置HTTPS服务时，加上“HTTP Strict Transport Security”配置项。 ### 防范HTTPS中间人攻击 - 不要随意连入公共场合内的WiFi，或者使用未知代理服务器 - 不要安装不可信或突然出现的描述文件，信任伪造的证书；（如某12306，在正规渠道下载系统以及浏览器） - App内部需对服务器证书进行单独的对比校验，确认证书不是伪造的； - 查看证书是否过期 - 服务器证书上的域名是否和服务器的实际域名相匹配 - 校验证书链 -...