金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 前端技术发展回顾,插件开发实录

原标题:前端技术发展回顾,插件开发实录

浏览次数:144 时间:2019-10-15

vuejs 初体验— Chrome 插件开发实录

2017/05/16 · JavaScript · Chrome, vuejs

原文出处: janilychen   

2017 前端技术发展回顾

2017/12/20 · 基础技术 · 前端

原文出处: Trey Huffine   译文出处:hijiangtao   

前端领域在 2017 年再次以狂热的节奏向前发展。以下列出过去的一年中最值得关注的一系列事情。 

Webpack 之 treeShaking

2018/08/16 · 基础技术 · webpack

原文出处: easonyq   

在 github 上直接观看 markdown 会把图片转存到缓存中,github 转存后的图片清晰度很有问题,因此如果图片看不清,可以移步知乎上的相同文章

webpack 2.0 开始引入 tree shaking 技术。在介绍技术之前,先介绍几个相关概念:

  • AST 对 JS 代码进行语法分析后得出的语法树 (Abstract Syntax Tree)。AST语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。
  • DCE Dead Code Elimination,在保持代码运行结果不变的前提下,去除无用的代码。这样的好处是:

    • 减少程序体积
    • 减少程序执行时间
    • 便于将来对程序架构进行优化

    而所谓 Dead Code 主要包括:

    • 程序中没有执行的代码 (如不可能进入的分支,return 之后的语句等)
    • 导致 dead variable 的代码(写入变量之后不再读取的代码)

tree shaking 是 DCE 的一种方式,它可以在打包时忽略没有用到的代码。

图片 1

背景

对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用。但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好。

需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢?

作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中碰到一些需要使用到Animate.css中的动画效果时,可以大大的提高我们的开发效率。

插件安装地址,快来安装体验吧!

作为一个程序员,捣鼓些小工具,不但可以学些新技术还可以提高我们的开发效率,何乐而不为呢。

下面就以一个简单的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件的开发体验和效率。

扩展如下图所示:

图片 2

插件主要功能是根据用户选择的对齐方式,实时预览效果和显示对应的CSS代码,方便我们可以直接拷贝代码使用。

图片 3React 16 和 MIT 协议

React 继续在前端领域占据着主导地位,并在 2017 年发布了最受期待的版本之一 – React 16。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的很多其他特性,这次发布使得 React 可以更容易的管理意外的程序故障。

让人意外的是,React 在去年所取得最重要的成就不是它推出的新特性,而是修改了它的开源协议。Facebook 放弃了导致很多公司远离 React 的 BSD 协议,转而采用用户用好的MIT 协议。除此外,Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。

核心团队和主要贡献者包括 Dominic Gannaway,Dan Abramov,Sophie Alpert,SebastianMarkbåge,Paul O’Shannessy,Andrew Clark,Cheng Lou,Clement Hoang,Probably Flarnie,Brian Vaughn。

React v16.0 – React Blog

机制简述

tree shaking 是 rollup 作者首先提出的。这里有一个比喻:

如果把代码打包比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌,最后直接作出蛋糕。

因此,相比于 排除不使用的代码,tree shaking 其实是 找出使用的代码

基于 ES6 的静态引用,tree shaking 通过扫描所有 ES6 的 export,找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种,在后续压缩时进行区别处理。因为就如比喻所说,在放入烤箱(压缩混淆)前先剔除蛋壳(无使用的 import),只放入有用的蛋白蛋黄(有使用的 import)

Chrome插件开发基本知识

在应用商店中下载下来的插件基本上都是以.crx为文件后缀,该文件其实就是一个压缩包,包括插件所需要的html、css、javascript、图片资源等等文件。

开发一个插件就跟我们平时做web开发流程没多大的区别,就是先搭好基本的页面,然后使用js来写交互逻辑等功能。

比如我这个插件的目录文件如下:

图片 4

Progressive Web Apps

我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力,而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验,以及以前仅可用于移动的功能,例如推送通知。 PWA 的基础是一个 manifest.json 文件和对 service workers 的利用。

Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)

使用方法

首先源码必须遵循 ES6 的模块规范 (import & export),如果是 CommonJS 规范 (require) 则无法使用。

根据webpack官网的提示,webpack2 支持 tree-shaking,需要修改配置文件,指定babel处理js文件时不要将ES6模块转成CommonJS模块,具体做法就是:

在.babelrc设置babel-preset-es2015的modules为fasle,表示不对ES6模块进行处理。

JavaScript

// .babelrc { "presets": [ ["es2015", {"modules": false}] ] }

1
2
3
4
5
6
// .babelrc
{
    "presets": [
        ["es2015", {"modules": false}]
    ]
}

经过测试,webpack 3 和 4 不增加这个 .babelrc 文件也可以正常 tree shaking

manifest.json文件

文件中需要注意一下的mainfest.json这个文件,这个json文件的作用是提供插件的各种信息,例如插件能够做的事情,以及插件的文件配置等等信息。下面是一个清单文件的示例:

{ "manifest_version": 2, "name": "One-click Kittens", "description": "This extension demonstrates a browser action with kittens.", "version": "1.0", "permissions": [ "" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "manifest_version": 2,
 
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
 
  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

第一行声明我们使用清单文件格式的版本 2,必须包含(版本 1 是旧的,已弃用,不建议使用)。

接下来的部分定义扩展程序的名称、描述与版本。这些都会在 Chrome 浏览器中使用,向用户显示已安装的扩展程序,同时在 Chrome 网上应用店中向潜在的新用户显示您的扩展程序。名称应该简练,描述不要比一句话左右还长(后面将会有更多的空间用于更详细的描述)。

最后一部分首先请求权限,用于访问 上的数据,并声明该扩展程序实现了一个浏览器按钮,同时在这一过程中为它指定一个默认图标与弹出窗口。

定义浏览器按钮时指向了两个资源文件:icon.png 与 popup.html。这两个资源都必须在扩展程序包中存在,图片是扩展的显示,html是扩展具体运行的基础文件。

具体详细的开发教程可以看看官方的这个文档,非常简明的入门教程。

Yarn 的采用改善了 JS 包管理的生态系统

NPM 自从最初发布以来已经有了相当长的一段时间,但它仍然缺少一些关键特性,而这正是 Yarn 希望补充的。Yarn 的主要贡献是包缓存,一个确保确定性构建的锁文件,并行操作以及依赖关系。这些功能非常成功,以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次(目前每月下载量达到了 125 万次)并拥有惊人的 28000 多个 GitHub stars。即使你没在使用 Yarn,JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。

Yarn

Tree shaking 两步走

webpack 负责对代码进行标记,把 import & export 标记为 3 类:

  1. 所有 import 标记为 /* harmony import */
  2. 被使用过的 export 标记为 /* harmony export ([type]) */,其中 [type] 和 webpack 内部有关,可能是 bindingimmutable 等等。
  3. 没被使用过的 import 标记为 /* unused harmony export [FuncName] */,其中 [FuncName] 为 export 的方法名称

之后在 Uglifyjs (或者其他类似的工具) 步骤进行代码精简,把没用的都删除。

功能实现-Vuejs实践

整个插件的核心交互功能非常简单,如文章开头的动图所示,用户选择对齐方式,代码区域显示对应的代码。这种简单数据交互使用vuejs再适合不过了,vuejs基础知识这里就不再细说了。

这里需要注意的一点是,chrome 扩展的运行环境有一些特殊要求,称为 Content Security Policy (CSP),使得通常的 vue 不能被正常使用。如果用的是 vue 1.x,那么可以下载 csp 版本,在 这里。如果是 2.x 版本,请参考官网文档的这一段。

核心代码如下所示。

HTML:

XHTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="mystique.css"> </head> <body> <div id="app"> <h1 class="title-box">flexbox对齐就是这么简单</h1> </div> <div id="type-select"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <!-- <span>Selected: {{ selected }}</span> --> <div class="resule-preview"> <div v-bind:class="selected" class="cols"> <div class="col col-3"> <p>对齐</p> </div> <div class="col col-3"> <p>对齐</p> </div> <div class="col col-3"> <p>对齐</p> </div> </div> </div> <div class="resule-code"> <pre class="code-display"> <code class="code-lang"> {{ cssMsg }} </code> </pre> </div> </div> <!-- 先引入 Vue --> <script src="vue.js"></script> <!-- 引入组件库 --> <script src="main.js"></script> </body> </html><!-- 引入样式 -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="mystique.css">
</head>
<body>
    <div id="app">
      <h1 class="title-box">flexbox对齐就是这么简单</h1>
    </div>
    <div id="type-select">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <!-- <span>Selected: {{ selected }}</span> -->
      <div class="resule-preview">
        <div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
        </div>
      </div>
      <div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}
            </code>
        </pre>
      </div>
    </div>
    <!-- 先引入 Vue -->
    <script src="vue.js"></script>
    <!-- 引入组件库 -->
    <script src="main.js"></script>
</body>
</html><!-- 引入样式 -->

CSS 网格布局

网格布局最终被 CSS 采纳为标准,浏览器也正在快速地采用它。过去,网格系统在 CSS 中曾被 tablesfloatflex 以及 inline-block 实现过。原生的 CSS 网格布局擅长于将一个页面划分成几个主要的区域,并为内容创建列和行。查看 Rachel Andrew 写的 开始学习。

CSS Grid Layout

实例分析

所有实例代码均在demo/webpack 目录

CSS就不列出来了,可以在源代码中查看。

下面来使用vuejs来实现插件的功能。

WebAssembly 在所有主流浏览器中都得到了支持

WebAssembly(或者 wasm)正登陆所有主流浏览器。wasm 是一个用于浏览器内客户端脚本处理接近原生的 字节格式 。由于其接近原生,它具有令人难以置信的性能,但也提供了一个 JavaScript API,以使得前端开发人员有一个更容易的切入点。Firefox 最近宣布对它的支持已经被所有(译者注:此处所有应该是指所有主流)浏览器内置。

WebAssembly support now shipping in all major browsers – The Mozilla Blog

方法的处理

JavaScript

// index.js import {hello, bye} from './util' let result1 = hello() console.log(result1)

1
2
3
4
5
6
// index.js
import {hello, bye} from './util'
 
let result1 = hello()
 
console.log(result1)

JavaScript

// util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

1
2
3
4
5
6
7
8
// util.js
export function hello () {
  return 'hello'
}
 
export function bye () {
  return 'bye'
}

编译后的 bundle.js 如下:

JavaScript

/******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1); let result1 = Object(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* hello */])() console.log(result1) /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = hello; /* unused harmony export bye */ function hello () { return 'hello' } function bye () { return 'bye' }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1);
 
 
let result1 = Object(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* hello */])()
 
console.log(result1)
 
 
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = hello;
/* unused harmony export bye */
function hello () {
  return 'hello'
}
 
function bye () {
  return 'bye'
}

注:省略了 bundle.js 上边 webpack 自定义的模块加载代码,那些都是固定的。

对于没有使用的 bye 方法,webpack 标记为 unused harmony export bye,但是代码依旧保留。而 hello 就是正常的 harmony export (immutable)

之后使用 UglifyJSPlugin 就可以进行第二步,把 bye 彻底清除,结果如下:

图片 5

只有 hello 的定义和调用。

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:前端技术发展回顾,插件开发实录

关键词:

上一篇:windows命令行大全,安装FTP及添加用户

下一篇:酷炫的3D旋转透视金沙澳门官网网址:,必知必会