Rynes

发表于 更新于 分类于

hash 模式

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。

示例：新建一个 hash.html 文件，内容为：

1
2
3
4
5
6
7
8
9
10
11
<a href="#/a">A 页面</a>
<a href="#/b">B 页面</a>

<div id="app"></div>
<script>
  function render() {
    app.innerHTML = window.location.hash;
  }
  window.addEventListener("hashchange", render);
  render();
</script>

在上面的例子中，我们利用 a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。

阅读全文 »

发表于 更新于 分类于

MVC 框架

MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

MVC 被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中

MVC框架模式图

MVC 编程模式

MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：

阅读全文 »

发表于 更新于 分类于

官网直达

Set

基本用法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

阅读全文 »

发表于 更新于 分类于

SPA（ single-page application ）仅在 Web ⻚⾯初始化时加载相应的 HTML、JavaScript 和 CSS。⼀旦⻚⾯加载完成，SPA 不会因为⽤户的操作⽽进⾏⻚⾯的重新加载或跳转；取⽽代之的是利⽤路由机制实现 HTML 内容的变换，UI 与⽤户的交互，避免⻚⾯的重新加载。

优点：

  1. ⽤户体验好、快，内容的改变不需要重新加载整个⻚⾯，避免了不必要的跳转和重复渲染；
  2. SPA 相对对服务器压⼒⼩；
  3. 前后端职责分离，架构清晰，前端进⾏交互逻辑，后端负责数据处理。

缺点：

  1. ⾸屏（初次）加载慢：为实现单⻚ Web 应⽤功能及显示效果，需要在加载⻚⾯的时候将 JavaScript、CSS 统⼀加载，部分⻚⾯按需加载；
  2. 不利于 SEO：由于所有的内容都在⼀个⻚⾯中动态替换显示，所以在 SEO 上其有着天然的弱势。
阅读全文 »

发表于 更新于 分类于

维基百科上说道：柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

柯里化的实用性

参数复用

【通用函数】解决了兼容性问题，但同时也会再来，使用的不便利性，不同的应用场景往，要传递很多参数，以达到解决特定问题的目的。有时候应用中，同一种规则可能会反复使用，这就可能会造成代码的重复性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
  return reg.test(txt);
}

check(/\d+/g, "test"); //false
check(/[a-z]+/g, "test"); //true

// Currying后
function curryingCheck(reg) {
  return function (txt) {
    return reg.test(txt);
  };
}

var hasNumber = curryingCheck(/\d+/g);
var hasLetter = curryingCheck(/[a-z]+/g);

hasNumber("test1"); // true
hasNumber("testtest"); // false
hasLetter("21212"); // false
阅读全文 »

发表于 更新于 分类于

XSS(Cross-site Script)

原理

恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。

可能造成以下影响

  • 利用虚假输入表单骗取用户个人信息
  • 利用脚本窃取用户的 Cookie 值，被害者在不知情的情况下，帮助攻击者发送恶意请求
  • 显示伪造的文章或图片
阅读全文 »

发表于 更新于 分类于
HTTPRequestMethod说明
GET请求指定的页面信息，并返回实体主体。
HEAD类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头
POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被 包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
PUT从客户端向服务器传送的数据取代指定的文档的内容。
DELETE请求服务器删除指定的页面。
CONNECTHTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS允许客户端查看服务器的性能。
TRACE回显服务器收到的请求，主要用于测试或诊断。
PATCH实体中包含一个表，表中说明与该 URI 所表示的原内容的区别。
MOVE请求服务器将指定的页面移至另一个网络地址。
COPY请求服务器将指定的页面拷贝至另一个网络地址。
LINK请求服务器建立链接关系。
UNLINK断开链接关系。
WRAPPED允许客户端发送经过封装的请求。
LOCK允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时 对 其进行编辑。
MKCOL允许用户创建资源
Extension-mothed在不改动协议的前提下，可增加另外的方法。

发表于 更新于 分类于

在进行窗口的 resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用 debounce（防抖）和 throttle（节流）的方式来减少调用频率，同时又不影响实际效果

函数防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时
如下，持续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function debounce(fn, wait) {
  var timeout = null;
  return function () {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  };
}
// 处理函数
function handle() {
  console.log(Math.random());
}

// 滚动事件
window.addEventListener("scroll", debounce(handle, 1000));

函数节流

阅读全文 »

发表于 更新于 分类于

eval()的作用

把字符串参数解析成 JS 代码并运行，并返回执行的结果； 例如：

1
2
eval("2+3"); //执行加运算，并返回运算值。
eval("varage=10"); //声明一个 age 变量

eval 的作用域在它所有的范围内容有效

示例 1：

阅读全文 »