前言

随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用。

认识插件

想要开发插件，先要认识一个插件是什么样子的。

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

什么是闭包

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内。 – 摘自《JavaScript权威指南》

• 闭包就是能够读取其他函数内部变量的函数。
• 闭包可以简单理解成“定义在一个函数内部的函数“。

• 在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

  Read more »

XSS成因

是通过利用网页开发时留下的漏洞，通过注入恶意指令代码，使用户加载并执行攻击者恶意制造的网页程序

XSS防御过程：

• 编码：通过编码解码保护代码
• 过滤：过滤会破坏我们功能的内容，比如过滤掉用户输入的点击事件，或者iframe(嵌入广告页面) style（可能被用到!important） stript 等节点
• 校正：被破坏，但没有功能影响 只是DOM错乱之类;

通过构建Node服务和建立一个评论功能，实现XSS的攻击和预防，因为通过评论功能是极其容易被攻击，步骤如下

如图是事件流的经过，

事件捕获

事件捕获是从外层元素到目标元素的过程，事件冒泡是从目标元素到外层元素的过程

1
2
3

<div id="wrapper">
    <button id="event">事件处理程序</button>
</div>

XSS 全称(Cross Site Scripting) 跨站脚本攻击， 是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的. 比如获取用户的Cookie，导航到恶意网站,携带木马等。

步骤：

• 新建一个文件夹XSS
• 命令 express -e ./ 初始化一个express项目
• npm i下载需要的库
• 启动服务： 进入XSS，执行命令npm start

• 原理：

  • 在 index.js 文件中加上 xss字段

    1 2 3 4 5 6

    router.get('/', function(req, res, next) { res.render('index', { title: 'Express' , xss: req.query.xss }); });

  • 在 index.ejs 加上如下代码

    1	<%- xss %>

    Read more »

• null是关键字；undefined是Global对象的一个属性
• null是对象(空对象, 没有任何属性和方法)；undefined是undefined类型的值。

1
2

document.writeln(typeof null); //return object
document.writeln(typeof undefined); //return undefined

使用编辑器修改内容，在编辑器一般都有全局搜索功能，如使用正则表达式匹配会快速得多，比如下面例子

例子一： 将http下的jpg地址找出来 并去掉http

1
2
3
4
5
6
7
8
9

http:fdsfds/fdsf.jpg
https:fdsfds/fdsf.jpg
http:fdsfds/fdsf.png
http:fdsfds/fdsf.png
https:fdsfds/fdsf.jpg
http:fdsfds/fdsf.jpg
http:fdsfds/fdsf.png
https:fdsfds/fdsf.png
http:fdsfds/fdsf.png

• 答案

  • http:(.+.jpg) 替换为 $1

MEAN.js 是一套开源的 JavaScript 技术栈的 Web 项目解决方案。包含以下内容：

• 集成 Node.js / Express / MongoDB / Socket.io 的服务器环境
• 使用 AngularJS 的前端开发
• NPM / Bower 包管理
• 最常用的样例代码，包括用户注册登录、基本增删改查、页面路由等，以及服务端的权限控制
• 自动化工具（Gulp），包括代码打包、热部署以及发布环境等
• 按功能模块划分的深度项目结构，自动扫描项目文件
  Read more »

Angular组件库

文档说明

技术中心前端组-组件系统是采用 AngularJS+Gulp 搭建的项目，该文档主要针对AngularJS如何实现我们的业务代码进行讲解，加深对项目构建的认识，当项目出错时也方便快速定位错误的地方。

Git仓库

• Git

Angular组件库

文档说明

技术中心前端组-组件系统是采用 AngularJS+Gulp 搭建的项目，该文档主要针对Gulp配置文件主要部分进行说明，加深对项目构建的认识，当项目出错时也方便快速定位错误的地方。

Git仓库

• Git