在实际的业务中，经常有跨组件共享数据的需求，Vuex就是设计用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件的应用更高效。
引入Vuex之后统一对共享数据进行管理存放，在各个页面中可以利用commit方法提交mutation对共享数据进行修改。
123456789101112131415161718192021222324252627// store/index.jsexport default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- }})// Component.vueexport default { computed: { count() { return this.$store.state.count; ...
这是一个系列笔记，来自《Web前端黑客技术揭秘》这本书，属于进阶内容，可以进一步提高Web开发的能力。
Web安全的关键点数据和指令
SQL注入攻击
selct username,email,desc from users where id=1
攻击者提交：
union select password,1,1 from users
最终SQL查询语句：
selct username,email,desc from users where id=1 union select password,1,1 from users
组成的SQL语句合法，通过一个经典的union查询，此时注入的指令内容就会被当做合法指令执行。这样的攻击会导致users表中的password泄露。
XSS跨站脚本攻击
eval函数能够动态执行url返回的特定信息，比如eval(location.hash.substr(1))即是截取#后的callback内容，提供给eval进行动态执行。
如果攻击者对#后的url中的#后的内容进行改造，就可以截取到访问者的cookies会话信息，其中可能包含访问者的账号、密 ...
基本选择器 Basics
*选择所有元素
.class选择class，如：$('.mybox')
element选择element，如：$('p')
#id选择id，如：$('#box')
selector1,selectorN可以同时选择多个元素，如：$('div, p.box, #phone')
层级选择器 Hierarchy
parent > child选择指定元素下的指定子元素，如：$('ul.tonav > li')
ancestor descendant选择一个元素里所有的后代元素，如：$('form input')
prev + next选择所有指定元素后紧跟着的元素，如：$('label + input')
prev ~ siblings选择与指定元素之后有相同父级的同级选择器，如：$('#prev ~ div')
基本过滤器 Basic Filters
:animated选择动画进行中的所有元素。如：$('div: ...
前端优化浏览器发送HTTP请求，服务器收到请求全文后，返回HTTP响应，在浏览器接收之后结束这个过程。浏览器和服务器只有一次互动的机会，浏览器主动发起，而服务器被动地根据收到的请求内容返回结果。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程。
前端优化的途径
页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；
代码级别的优化，例如JavaScript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等。
页面级优化1. 减少HTTP请求数减少HTTP请求数的主要途径1、从设计实现层面简化页面
保持页面简洁、减少资源的使用是最直接的。能使用CSS替代效果就尽量少使用图片。
2、合理设置HTTP缓存
恰当地缓存设置可以大大减少HTTP请求。被缓存资源的请求服务器是304响应，只有Header没有body，没有节省带宽。对于多个页面都可能使用到的代码，尽量拆分到同一个文件中。如果是嵌入页面换来的是增大了页面的体积，而且无法利用浏览器缓存。
3、资源合并和压缩
如果可以，尽可能将外部的脚本、样式进行 ...
前端插件库DataTables官网：https://www.datatables.net/
DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。
LazyLoad官网：Lazy Load延伸：Vanilla JavaScript Lazy Load Plugin
Lazy Load帮助高度较长的网页进行延迟载入图片，尚未浏览到该部分时，不会载入视角外的图片，提高效率。
lightSlider官网：JQuery lightSliderGithub：sachinchoolur/lightslider
JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片，附有缩图导览。另外还有相本功能、垂直跑马灯，应用层面广泛。
alertify.js官网：https://fabien-d.github.io/alertify.js/Github：alertify.js
alertify.js是为了美化通知信息而生的JavaScript框架。
pickadate.js ...
JS原型链1234567891011function Person() {}Person.prototype.name = "abc";Person.prototype.sayName = function () { console.log(this.name);};let person = new Person();person.__proto__ = Person.prototype;String.__proto__ = Function.prototype;String.constructor = Function;
原型继承12345678910function Parent() { this.name = "Parent"; this.sex = "male";}function Child() { this.name = "Child";}Child.prototype = new Parent();
构 ...
最近在做一个消息定时器，需要在离线环境中使用，通过表单写入事项存储到本地，渲染在表格中。尝试过使用Node.js进行文件读写操作，受到UI框架的限制；同时测试了localStorage存储，也达不到想要的效果。最后直接使用WebSql和indexDB来完成。以下是一个DEMO，实际效果正在测试中…
123456789// html<button id="btn-create">创建user数据表</button><button id="btn-insert">插入数据</button><button id="btn-query">查询数据</button><button id="btn-update">修改数据</button><button id="btn-delete">删除数据</button><button id="btn-drop&qu ...
HTTP响应常见状态码
状态码
描述
100-199
成功接收请求, 要求客户端继续提交下一次请求才能完成整个处理过程
200-299
成功接收请求并已完成整个处理过程，常用200
300-399
为完成请求, 需进一步细化需求: 例如: 请求的资源已经移动一个新地址，常用302(重定向)，307 和304(拿缓存)
400-499
客户端的请求有错误, 包含语法错误或者不能正确执行。 常用404(请求的资源在web服务器中没有)，403(服务器拒绝访问, 权限不够)
500-599
服务器端出现错误
200
表示一切正常, 返回的是正常请求结果
302/307
临时重定向，指出请求的文档已被临时移动到别处, 此文档的新的url在location响应头中给出
304
未修改，表示客户端缓存的版本是最新的, 客户端应该继续使用它
403
禁止，服务器理解客户端请求，但拒绝处理它，通常用于服务器上文件或目录的权限设置所致
404
找不到，服务器上不存在客户端所请求的资源
500
服务器内部错误，服务器端的cgi，asp，jsp等程序发生 ...
QuasarQuasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。
以下内容来自官网Quasar Framework，概括了Quasar的主要特点。
Quasar是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：
响应式网站
PWA
通过Apache Cordova构建移动App
多平台桌面应用程序（使用Electron）
选择Quasar的5个理由
内建了Material及IOS两种主题
组件均内建RWD快速响应
多样的基础UI组件库
自带了Vuex、VueRouter、Vuei18n（多国语系）
强大的部署工具
安装指南首先安装Node.js和vue-cli，具体安装方法查看官网资料。
然后安装Quasar，npm install -g quasar-cli。
最后搭建项目：quasar init <folder name>
取代main.js的quasar.config.js设置文件：
引用Quas ...
