每一个领域都有些不知道该放哪的零碎的点，这里开辟一个新的地方，作为前端杂乱知识的汇总。
SPA(Single Page Application)单页应用（没有SEO,首屏时间比较长，因为一进去要把所有的js之类的东西都加载完，使用过程中比较流畅）
Common js是node js的库遵守的,export import是es2015的东西,AMD(Asynchronous Module Definition)在common js的基础上加了一个带回调的require(用于浏览器)
Index
html Related
html标签中可以添加data-XXX标签用于把数据和ui块绑定。
p tag 里面能够放一个小的Strong tag
<p>You Know <strong>No</strong> Mystery</p>
亲测，这些tag不分大小的，不是说div就一定是最外面的parent
<p>
new css PlayGround
<div>哈哈</div>
</p>
Vanilla javaScript Related
Ajax(Asynchronous javaScript & xml)，从命名上来看就是异步的
json(JavaScript Object notation),摆明着就是给js用的
In JavaScript these two are equivalent:
object.Property
object[“Property”];
对于POST请求，如果Request中明确设置了:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
后台会认为这是一个提交表单的请求，body就应该设置为’’
What is the difference between form data and request payload?
网页表单提交数据中包含+号的时候，加号直接变成空格
java这边URLDecoder去decode一个未编码的带加号的string的时候，“+”直接变成了空格。而encode的时候，空格被编码成了+号，+号变成了%2b。
常规的表单提交content-type有两种：application/x-www-form-urlencoded和multipart/form-data,如果表单提交时不设置任何类型，默认以第一种方式提交数据；第二种属于带附件的表单提交，当表单中有附件时，必须设置表单的enctype为multipart/form-data.
例如 JQuery的 Ajax，Content-Type 默认值为application/x-www-form-urlencoded;charset=utf-8。
Content-Type:application/x-www-form-urlencoded; charset=UTF-8这句话其实就是告诉ajax，在post的时候去把data用utf-8编码一遍（把“+”变成了”%2b”）。所以，如果默认写一个程序去post一个未经编码的带加号的string的话，服务器这边接收到的string中,”+”就变成了空格（因为后台是会用UrlDecoder去decode的，从源码来看，碰到了“+”直接换成了空格)
url中带”+”号的问题陈年老坑之 URL Encoding
在正常的编码解码流程中，编码的时候先把加号替换为 %2B，然后把空格替换为加号；解码的时候先把加号替换为空格，再把 %2B 替换为加号，天衣无缝。
假如我在一个经过编码的 URI 中直接添加加号，然后直接被拿去解码，加号就会妥妥的被替换成空格了。
我就碰到过那种后台传下来的url中包含’+’，然后用URLDecoder去decode一遍（这时候加号已经被替换成空格了），再去用正则match的时候，发现根本匹配不上这个url.
那么如何判断一个string是否被encode过？
由此想到url中出现汉字的情况，因为网络传输只能是0101这种，那么就可以用utf-8将汉字的unicode形式传输出去，后台再去根据商定好的encode format去解码。（所以java的URLDecoder的decode方法接受两个参数，一个是裸的文本,http本来就是text based，这没办法，第二个是encoding）。只要两端商定了同一种编码格式，那就能正常的通信。
Ajax中文乱码
前端传参出现汉字的情况有两种，一种是汉字出现在URL中的一部分，另一种是汉字出现在GET请求的queryParameters里面。其实想想也对，http请求是一行一行写text的,第一行是path，后面才是queryParameters
ajax发送请求Web编码总结如果不指定CharSet,似乎会看页面编码,就是这个
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
这里面还涉及到一个用get和post请求那个比较合适的问题，GET请求浏览器会帮忙encode，但是，有的浏览器(IE)是用系统自带编码格式（windows中文版本上是GB2312)去encode的，如果使用POST,开发者可以自定义数据编码格式（自己调用encodeURIComponent把所有的data都utf-8加密一遍）
跨域是一个比较大的知识点
about:1 Failed to load http://api.douban.com/v2/movie/top250: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
查了好久，原因是CORS(Control of Shared Resources)，通过ajax发起另一个domain(port)资源的请求默认是不安全的。主要是在js里面代码请求另一个网站(只要不满足host和port完全相同就不是同一个网站)，默认是被禁止的。chrome里面查看network的话，发现这条request确实发出去了，request header里面多了一个
Origin:http://localhost:8080
显然这不是axios设置的，在看到这条header后，如果’/movie/top250’这个资源文件没有设置’Access-Control-Allow-Origin: http://localhost:8080'的话，浏览器就算拿到了服务器的回复也不会允许被开发者获取。这是CORS做出的策略，也是前端开发常提到的跨域问题。
解决方法：
1.和服务器商量好CORS
2.使用jsonp(跨域请求并不限制带src属性的tag，比如script img这些)
3.使用iframe跨域
CORS还是比较重要的东西，详解，据说会发两次请求,且只支持GET请求。
cors的概念
search “原生javaScript跨域”、’jsonp跨域请求豆瓣250’
jsonp跨域获取豆瓣250接口
豆瓣能支持jsonp是因为豆瓣服务器响应了
http://api.douban.com/v2/movie/top250?callback=anything这个query,这个anything是我们自己网页里面script里面定义的方法，豆瓣会返回一个: anything({json})的数据回来，直接调用anything方法
json[JavaScript Object Notation]
MDN上的corz
将网页设置为允许 XMLHttpRequest 跨域访问
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Origin" content="http://www.1688hot.com:80">
跨域的方法有很多，iframe是一种，iframe是在一个网页中展示另一个url页面资源的方式
<iframe id="video" width="420" height="315" src="https://www.baidu.com" frameborder="0" allowfullscreen></iframe>
然后在localhost起一个服务器预览，就能在页面中正常展示百度首页。
Flask里面给response添加Header的方式是:
response.headers[‘Access-Control-Allow-Origin’] = ‘http://localhost:8080‘
在8080端口的web页面发起请求就能成功
Webpack 相关
安装
yarn add webpack //官网不推荐global安装
// 初始化项目
npm init -y
// 使用
webpack app.js bundle.js –watch // 将app.js编译成bundle.js， 实时监控文件变化。 Html文件中就可以引用bundle.js.
build的话，就是把bundle.js minify的话 webpack app.js bundle.js -p ,其实就是帮忙把所有的空格删掉了
a.js
let resources = 'this is some external resources'; // let 能用是因为node 支持es6这个特性
module.exports = resources; //如果不是用于浏览器的项目的话，node本身就支持require，只是浏览器不支持require
app.js
alert(require('./a.js'));
可以为webpack提供config文件
webpack.config.js
module.exports = {
entry: './src/js/app.js', // 提供了一个entry,app.js又引用了其他的Js，最终追根溯源，会把所有的自定义和第三方框架全部打到一个bundle.js里面
outpath: {
path: __dirname+'/dist',
filename: 'bundle.js'
},
module: {
loaders: {
{ test: /\.css$/, //这个test的意思就是说这是个正则，webpack你自己拿去试，正斜杠表示当前目录下，反斜杠表示转义字符，就是后面那个点就把它当成"."好了
loader: 'style-loader!css-loader'} // 前面那个正则意思是针对所有的css文件，后面是需要安装的loader名称。 这个loader的顺序是从右往左的！
}
}
}
有了config文件，只需要输入webpack，就能自动根据config文件编译。
在package.json文件中，添加script: “build”: “webpack” ， npm run build ，会自动根据configuration文件编译生成可用于生产环境的编译后文件。
webpack-dev-server(提供一个development server，因为之前只是走的file system)
安装
yarn add webpack-dev-server
package.json中添加script :
start: webpack-dev-server –entry ./src/js/app.js –out-filename .dist/bundle.js
npm run start
babel-loader(前提是安装了babel)
安装参考官方文档
babel就是把es6语法的js文件编译成es5文件的，单独使用的语法大概这样。 webpack的loader成百上千，babel-loader只是其中的一种
npm run babel – index.js -o bundle.js -w
安装好babel-loader之后，在webpack.config.js中添加loader(loaders本来就是一个数组)
loaders {
{ test: /\.js$/,
loader: 'babel-loader',
exculde: /node_modules/, //排除所有node_modules下面的文件
query: {preset: ['es2015']}} //这个正则的意思是所有js后缀的文件
}
Third Party Library
Vue Related
handlebars,ejs,jade
模板（和python那边的jinja模板一个意思）
less,sass,stylus(css预处理器)
jQuery Related
jQuery是一个Dom Manipulate Library
Twitter BootStrap
css Related
工具
vsCode插件推荐
- Auto Close tag
- Beautify
- HTML CSS supported
- Live Server
- Prettier
- Vetur
- Vue2 Snippets
- Bracket Pair Colorizer
VSCode快捷键(其实可以自己配置的，vs的设置文件就是一个很大的json)
vs code 调整锁进的命令叫做reindent
网站
cssmatic,一个可以用拖拽的方式生成css代码的神奇的网站
不仅仅是font,还有很好的icon
[TBS]腾讯浏览服务(Tencent Browsing Service, TBS)。网上很多人喷的微信浏览器慢就是这个
一个html里面有两个id一样的元素没问题
awesome css UI Design,Video link here
Library
Babel是一个可以把ES6代码打包成ES5代码的插件，毕竟要兼容老的浏览器。
ua-parser-js是一个很好用的检测ua的library。
Backbone是一个mvc框架
handlebars
- [X]如何使用js显示一个Dialog
- [X]Express js
- [ ] css3 属性大全
handlebars渲染template的过程就是把写在模板里面的大括号包着的变量换成String。所以，在hbs文件里内嵌的js是没有办法轻易拿到data的。这跟flask很像。
这里顺便提到iffe的概念Immediately-invoked_function_expression
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script id="test-template" type="text/x-handlebars-template">
<label>Label here</label>
{{textField dataAttribs='{"text":"Hello", "class":"input"}'}}
</script>
Handlebars.registerHelper('textField', function(options) {
var dom = '<input type="text">', attribs;
attribs = JSON.parse(options.hash.dataAttribs);
console.log(attribs.text + " -- " + attribs.class);
return new Handlebars.SafeString(dom);
});
$(function() {
var markup = $('#test-template').html();
var template = Handlebars.compile(markup);
$('body').append(template());
});
来看看xss一般的手段
<img src="#" onerror="alert(/xss/)" />
防范XSS攻击的手段中提到了，对于用户的输入，需要有条件的进行转换
比如说
< 变成 <
> 变成 >
& 变成 变成"
就像这样
private static String htmlEncode(char c) {
switch(c) {
case '&':
return "&";
case '<':
return "<";
case '>':
return ">";
case '"':
return """;
case ' ':
return " ";
default:
return c + "";
}
}
经过编码转换之后
<script>window.location.href=”http://www.baidu.com”;</script> ## 就变成了
<script>window.location.href="http://www.baidu.com"</script>
python flask里面类似的函数叫做escape.
cms(content management system)参考
在不会自己搭服务的情况下只好拿一些免费的api凑合了
posts
cnodejs