老九的程序进阶之路

第六期

公众号同步

你对Web Components 了解有多少

Web Components是一个Web组件标准，它是针对浏览器底层的，不依赖其他框架；

跟现在vue、react等相比，不需要webpack编译；

通过浏览器提供的Api就可以封装成类似vue、react等组件化的自定义标签。

它通过三项主要技术组成：

  1. Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。

  2. Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

  3. HTML templates（HTML模板）： <template>和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

Web Components通过CustomElementRegistry.define()来定义elements，目前有两种elements，独立的element与继承自基本的HTML element。

customElements.define('custom-element',
  class MyCustomElement extends HTMLElement {
    constructor() {
      super();
      //创建<p stype='color:red'></p>
      const pElem = document.createElement('p');
      pElem.textContent = this.textContent;
      pElem.style.color = 'red';
      //加入根节点
      const shadowRoot = this.attachShadow({mode: 'closed'});
      shadowRoot.appendChild(pElem);
    }
    //生命周期
    connectedCallback() {
      //当 custom element首次被插入文档DOM时，被调用。
      console.log('Custom square element added to page.');
    }
    disconnectedCallback() {
      //当 custom element从文档DOM中删除时，被调用。
      console.log('Custom square element removed from page.');
    }
    adoptedCallback() {
      //当 custom element被移动到新的文档时，被调用。
      console.log('Custom square element moved to new page.');
    }
    attributeChangedCallback(name, oldValue, newValue) {
      //当 custom element增加、删除、修改自身属性时，被调用。
      console.log('Custom square element attributes changed.');
    }
  }
)

css如何设置变量

之前阮一峰大神写过这么一篇文章，详细介绍可以去其博客查看CSS变量教程。

变量的声明： 声明变量的时候，变量名前面要加两根连词线（--）。CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

var() 函数：

函数用于读取变量。第二个参数为默认值。

body{

  --foo: #7F583F;
  --bar: #F7EFD2;
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

}

.foo{

  color: var(--foo，#7F583F);
  text-decoration-color: var(--bar);
}

js也可以操作变量：

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

前端路由的实现原理

前端路由，顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。

前端路由有两种方式实现:

  1. HashChange
    HTML页面中通过锚点定位原理可进行无刷新跳转，触发后url地址中会多出# + 'XXX'的部分，同时在全局的window对象上触发hashChange事件，这样在页面锚点哈希改变为某个预设值的时候，通过代码触发对应的页面DOM改变，就可以实现基本的路由了,基于锚点哈希的路由比较直观，也是一般前端路由插件中最常用的方式。

  2. HTML5 HistoryAPI
    HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。
    在HTML5中，window.history对象得到了扩展，新增的API包括：

    • history.pushState(data[,title][,url]);//向历史记录中追加一条记录

    • history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。

    • history.state;//是一个属性，可以得到当前页的state信息。

    • window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。

Proxy 与 Object.defineProperty 对比

Proxy在ES6规范中被正式发布，Proxy可以理解成在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

  1. Proxy可以直接监听对象而非属性

  2. Proxy直接可以劫持整个对象,并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty。

  3. Proxy可以直接监听数组的变化

  4. Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。

  5. Proxy的兼容性不是太好，不兼容IE，且无法通过polyfill提供兼容。

fetch和ajax的区别

Ajax的本质是使用XMLHttpRequest对象来请求数据； fetch 是全局量 window 的一个方法，它返回一个promise；

  1. 从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反，它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。
  2. 默认情况下, fetch在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头)。我们可以在配置里加上 credentials 的 same-origin 选项；对于CORS请求，使用include值允许将凭据发送到其他域。

← 第七期 →