JavaScript基础

类型转换

1

    console.log('A'.charCodeAt())

内置对象

  • Array (concat,fill,find,join,indexOf,pop,slice ,shift,sort,splice,resuce)
  • Function( apply,bind,call)
  • JSON
  • Map
  • Math (abs,ceil,floor,pow,round)
  • Number
  • Object
  • RegExp
  • Set
  • String (chatAt ,concat,indexOf,lastIndexOf,search,slice,split,substring,toLowerCase,trim)

JavaScript客户端

  • 在客户端，全局变量都在 window 对象里面

JQuery 的实现

  • 实现 $对象的构造方法
  • class ${ function $() }
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

class $ {
  constructor(arg) {
      const elements = document.querySelectorAll(arg);
  }
 
 click(fn){
 
    for (let i = 0; i < this.length; i++) {
      this[i].onclick = () => {
        fn(); // '回调'
      }
    }
 
 }

前端组件化

页面 -> 区块 -> 组件 -> 基础 UI 组件

  • 基础 UI 组件：将常用的逻辑、功能统一封装起来。例如：Table、Input
  • 业务组件：基于【基础 UI 组件】，将功能或者需求类似的有机体封装成一个业务组件，对外暴露接口来实现灵活的可定制性，这样就可以在不同的页面中复用同样的逻辑和功能。例如：基于 Table 和 Input 实现的可输入表格
  • 区块：有些页面会展示同样的区块，这时候可以基于【基础 UI 组件】和【业务组件】再进行一次分装，成为一个独立的区块以便直接复用。例如：基于 Table 和 Input 实现的可输入表格以及其他内容构成的区块

组件库划分：

  1. 通用型组件：按钮 Button、图标 Icon
  2. 布局型组件：布局 Grid、布局 Layout
  3. 导航型组件：面包屑 Breadcrumb、下拉菜单 Dropdown、菜单 Menu
  4. 数据录入型组件：表单 Form、开关 Switch、文件上传 Upload
  5. 数据展示型组件：头像 Avator、表格 Table、列表 List
  6. 反馈型组件：进度条 Process、抽屉 Drawer、对话框 Modal
  7. 其他业务类型

箭头函数

ES6 标准新增了一种新的函数：Arrow Function(箭头函数)。
为什么叫箭头函数？

1

x => x * x;

因为它的定义用的就是一个箭头。上面代码相当于：

1
2
3

function(x) {
  return x * x;
}

什么时候不能使用箭头函数呢？

  1. 定义对象方法
  2. 定义原型方法
  3. 定义构造函数
  4. 定义事件回调函数

跨域

同源策略

「同源策略」是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

如果你违背了同源策略并且没有做跨域优化的话，当你调用接口的时候，会看到如下报错提示：

1
2
3

XMLHttpRequest cannot load http://www.???.com/. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access.
  • 协议：http://
  • 域名：www.baidu.com
  • 端口：:80
  • 请求路径：/myfile.html
  • 请求参数：?name=jsliang
  • 锚点：#chapter-one

只有当：

  • protocol（协议）、domain（域名）、port（端口）三者一致，才是同源。

注意 http 可以省略端口 80，而 https 可以省略端口 443。

跨域限制

跨域只存在于浏览器端，浏览器为 web 提供访问入口，正是这样的开放形态，所以我们需要对他有所限制

可以在 http 返回头 添加 X-Frame-Options: SAMEORIGIN 防止被别人添加至 iframe。

解决跨域的方法

  1. CORS

  2. Node 正向代理

  3. Nginx 反向代理

  4. JSONP

  5. WebSocket

  6. ……

  7. 设置 Node 的 res.setHeader('Access-Control-Allow-Origin', '*');