Abcat

Abcat 查看完整档案

北京编辑武汉纺织大学  |  广播电视新闻学 编辑今日头条  |  web开发工程师 编辑 github.com/taikongfeizhu/ 编辑
编辑

浮世滔,人情渺,千古纷争何时了?江湖远,碧空长,几度飘零试锋芒!

个人动态

Abcat 发布了文章 · 2020-03-09

字节跳动商业产品研发团队招聘

团队介绍

大家好,我们是字节跳动商业产品研发团队,目前负责字节跳动旗下多款移动端创新产品的研发工作。2019年我们团队经历了蓬勃发展的一年,无论是用户规模还是收入增长都取得了不俗的表现,2020我们将面临更大的增长挑战,热切期盼有更多优秀的同学能加入我们再创佳绩。

目前大团队方向诸多,对各类研发都有大量需求,分为用户侧,商业侧,增长侧,数据组和质量保证等;

img

img

期待您的加入,也欢迎推荐同事和朋友来面试。

简历发送至:adhr@bytedance.com,邮箱命名:职位+公司+姓名

HR咨询微信:huangjian1820,申请备注:职位+公司+姓名

特殊时期说明:我们可支持无接触面试,无接触入职,无接触办公

团队精彩瞬间

有趣有料还“挣钱”,字节跳动商业产品研发团队了解一下

工作内容

  • 依托字节系流量平台,打造业内领先的APP产品;
  • 解决行业痛点,赋能更多业务场景,持续提升产品内容质量;
  • 场景丰富,鼓励从原型设计到商业变现产出的全流程参与;
  • 增长黑客,用数据驱动的方式持续改进产品体验;
  • 技术领先,注重效率,鼓励用各种创新的手段来解决实际问题;
  • 关注个体,鼓励个体成员都能持续学习与成长,提供业内领先的成长计划和物质回报。

团队文化

  1. 追求极致,不放过问题,思考本质,持续学习和成长
  2. 务实敢为,尝试多种可能,快速迭代
  3. 开放谦逊,合作共赢,信任伙伴
  4. 坦诚清晰,实事求是,反对“向上管理”
  5. 始终创业,始终像公司创业第一天那样思考

职位描述

  1. 负责垂类APP、行业频道、运营活动以及中后台商业产品开发;
  2. 业务方向包含PC端,客户端,小程序,hybrid等多个研发方向;
  3. 负责推动与优化已有的项目基础架构与服务稳定性;
  4. 负责高质量的设计和编码,承担重点、难点的技术攻坚
  5. 数据驱动,围绕核心产品指标进行相关迭代设计

工作城市

北京、上海、杭州

招聘岗位

高级前端开发工程师:

  1. 本科及以上学历,3年相关工作经验,参与过大型互联网产品的设计研发工作 ;
  2. 精通JavaScript,CSS,HTML,DOM、协议、安全、性能等前端技术;
  3. 熟悉W3C,ECMAScript,CommonJS,ES6,小程序等相关技术标准 ;
  4. 了解Angular,React,Vue等新式前端框架和相关技术栈;
  5. 了解MVC,MVVM,Redux,前端构建等相关工程知识;
  6. 熟练掌握Web以及Mobile Web开发相关技术优先;
  7. 能独立完成复杂前端系统或大型框架
  8. 至少了解Node、Python、Go等一门后端开发语言;
  9. 良好的设计和编码风格,关注国内外各大开源社区和技术论坛;
  10. 优秀的团队合作能力,沟通顺畅,追求卓越,乐于创新,敢于尝试。

资深iOS开发工程师:

  1. 本科以上学历,计算机、通信、自动化相关专业;
  2. 扎实的编程功底,良好的设计能力和编程习惯;
  3. 精通oc、swift语言,熟练使用iOS常用库;
  4. 具备丰富的体验改进和性能优化经验;
  5. 至少参与过一款知名app的开发工作;
  6. 了解 Hybrid App研发,熟悉H5,JS,CSS相关技术栈;
  7. 熟悉iOS 界面开发规范以及AppStore 上架流程和规则;
  8. 有github有开源项目或者技术博客优先。

资深Android开发工程师:

  1. 本科及以上学历,计算机或相关专业;
  2. 2年以上Android开发经验;
  3. 熟悉Android系统和相关SDK以及Android App的开发到上架全流程;
  4. 至少主导过一个完整的商业级手机应用;
  5. 熟悉各种主流手机特性和开发迭代流程;
  6. 扎实的编程基础和数据结构算法基础;
  7. 了解 Hybrid App研发,熟悉H5,JS,CSS相关技术栈;
  8. 有github有开源项目或者技术博客优先。

数据开发工程师:

  1. 本科及以上学历,计算机或相关专业;
  2. 2年以上开发经验,数据挖掘、机器学习相关学术背景的优先;
  3. 具备强悍的编码能力,扎实的算法和数据结构知识;
  4. 熟悉Python、Go、C++/Java中的一种,hadoop相关开源组件如:hive/spark/storm等;
  5. 具备优秀的分析问题和解决问题的能力;
  6. 熟悉常见的开源组件,有大数据处理相关经验;
  7. 对内容系统、推荐系统、计算广告、搜索引擎相关技术有经验者优先。

高级服务端开发工程师:

  1. 本科及以上学历,计算机或相关专业;
  2. 3年以上后端开发经验;
  3. 具备扎实的编码能力,熟悉 Linux 开发环境,熟悉Golang/Python/Java语言优先;
  4. 优秀的分析问题和解决问题的能力,对解决具有挑战性问题充满激情;
  5. 有扎实的数据结构和算法功底,熟悉机器学习、自然语言处理、数据挖掘中一项或多项;
  6. 对内容系统、推荐系统、计算广告、搜索引擎相关技术有经验者优先。

高级测试开发工程师:

  1. 五年以上软件app测试或服务端测试工作经验,有带团队经验者加分;
  2. 熟悉 Android 和 iOS 平台基础特性, 有丰富的专项测试和优化经验;
  3. 熟练使用各种性能测试工具进行问题分析和定位;
  4. 至少熟练使用 Java/Python/Shell 其中一种进行工具平台开发, 熟悉Linux 开发环境;
  5. 有较强的问题定位和推动能力,协调各个角色进行问题解决;
  6. 精通测试流程和测试用例设计方法,能主动进行技术钻研。

长按一下,保存招聘信息

img

查看原文

赞 1 收藏 1 评论 0

Abcat 评论了文章 · 2019-02-28

webpack 构建性能优化策略小结

背景

如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,React,Vue,Angular等诸多知名项目也都相继选用其作为官方构建工具,极受业内追捧。但是,随者工程开发的复杂程度和代码规模不断地增加,webpack暴露出来的各种性能问题也愈发明显,极大的影响着开发过程中的体验。

图片描述

问题归纳

历经了多个web项目的实战检验,我们对webapck在构建中逐步暴露出来的性能问题归纳主要有如下几个方面:

  • 代码全量构建速度过慢,即使是很小的改动,也要等待长时间才能查看到更新与编译后的结果(引入HMR热更新后有明显改进);
  • 随着项目业务的复杂度增加,工程模块的体积也会急剧增大,构建后的模块通常要以M为单位计算;
  • 多个项目之间共用基础资源存在重复打包,基础库代码复用率不高;
  • node的单进程实现在耗cpu计算型loader中表现不佳;

针对以上的问题,我们来看看怎样利用webpack现有的一些机制和第三方扩展插件来逐个击破。

慢在何处

作为工程师,我们一直鼓励要理性思考,用数据和事实说话,“我觉得很慢”,“太卡了”,“太大了”之类的表述难免显得太笼统和太抽象,那么我们不妨从如下几个方面来着手进行分析:

图片描述

  • 从项目结构着手,代码组织是否合理,依赖使用是否合理;
  • 从webpack自身提供的优化手段着手,看看哪些api未做优化配置;
  • 从webpack自身的不足着手,做有针对性的扩展优化,进一步提升效率;

在这里我们推荐使用一个wepback的可视化资源分析工具:webpack-bundle-analyzer,在webpack构建的时候会自动帮你计算出各个模块在你的项目工程中的依赖与分布情况,方便做更精确的资源依赖和引用的分析。

从上图中我们不难发现大多数的工程项目中,依赖库的体积永远是大头,通常体积可以占据整个工程项目的7-9成,而且在每次开发过程中也会重新读取和编译对应的依赖资源,这其实是很大的的资源开销浪费,而且对编译结果影响微乎其微,毕竟在实际业务开发中,我们很少会去主动修改第三方库中的源码,改进方案如下:

方案一、合理配置 CommonsChunkPlugin

webpack的资源入口通常是以entry为单元进行编译提取,那么当多entry共存的时候,CommonsChunkPlugin的作用就会发挥出来,对所有依赖的chunk进行公共部分的提取,但是在这里可能很多人会误认为抽取公共部分指的是能抽取某个代码片段,其实并非如此,它是以module为单位进行提取。

假设我们的页面中存在entry1,entry2,entry3三个入口,这些入口中可能都会引用如utils,loadash,fetch等这些通用模块,那么就可以考虑对这部分的共用部分机提取。通常提取方式有如下四种实现:

1、传入字符串参数,由chunkplugin自动计算提取

new webpack.optimize.CommonsChunkPlugin('common.js')

这种做法默认会把所有入口节点的公共代码提取出来, 生成一个common.js

2、有选择的提取公共代码

new webpack.optimize.CommonsChunkPlugin('common.js',['entry1','entry2']);

只提取entry1节点和entry2中的共用部分模块, 生成一个common.js

3、将entry下所有的模块的公共部分(可指定引用次数)提取到一个通用的chunk中

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function (module, count) {
       return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
       )
    }
});

提取所有node_modules中的模块至vendors中,也可以指定minChunks中的最小引用数;

4、抽取enry中的一些lib抽取到vendors中

entry = {
    vendors: ['fetch', 'loadash']
};
new webpack.optimize.CommonsChunkPlugin({
    name: "vendors",
    minChunks: Infinity
});

添加一个entry名叫为vendors,并把vendors设置为所需要的资源库,CommonsChunk会自动提取指定库至vendors中。

方案二、通过 externals 配置来提取常用库

在实际项目开发过程中,我们并不需要实时调试各种库的源码,这时候就可以考虑使用external选项了。

图片描述

简单来说external就是把我们的依赖资源声明为一个外部依赖,然后通过script外链脚本引入。这也是我们早期页面开发中资源引入的一种翻版,只是通过配置后可以告知webapck遇到此类变量名时就可以不用解析和编译至模块的内部文件中,而改用从外部变量中读取,这样能极大的提升编译速度,同时也能更好的利用CDN来实现缓存。

external的配置相对比较简单,只需要完成如下三步:

1、在页面中加入需要引入的lib地址,如下:

<head>
<script data-original="//cdn.bootcss.com/jquery.min.js"></script>
<script data-original="//cdn.bootcss.com/underscore.min.js"></script>
<script data-original="/static/common/react.min.js"></script>
<script data-original="/static/common/react-dom.js"></script>
<script data-original="/static/common/react-router.js"></script>
<script data-original="/static/common/immutable.js"></script>
</head>

2、在webapck.config.js中加入external配置项:

module.export = {
    externals: {
        'react-router': {
            amd: 'react-router',
            root: 'ReactRouter',
            commonjs: 'react-router',
            commonjs2: 'react-router'
        },
        react: {
            amd: 'react',
            root: 'React',
            commonjs: 'react',
            commonjs2: 'react'
        },
        'react-dom': {
            amd: 'react-dom',
            root: 'ReactDOM',
            commonjs: 'react-dom',
            commonjs2: 'react-dom'
        }
    }
}

这里要提到的一个细节是:此类文件在配置前,构建这些资源包时需要采用amd/commonjs/cmd相关的模块化进行兼容封装,即打包好的库已经是umd模式包装过的,如在node_modules/react-router中我们可以看到umd/ReactRouter.js之类的文件,只有这样webpack中的require和import * from 'xxxx'才能正确读到该类包的引用,在这类js的头部一般也能看到如下字样:


if (typeof exports === 'object' && typeof module === 'object') {
    module.exports = factory(require("react"));
} else if (typeof define === 'function' && define.amd) {
    define(["react"], factory);
} else if (typeof exports === 'object') {
    exports["ReactRouter"] = factory(require("react"));
} else {
    root["ReactRouter"] = factory(root["React"]);
}

3、非常重要的是一定要在output选项中加入如下一句话:

output: {
  libraryTarget: 'umd'
}

由于通过external提取过的js模块是不会被记录到webapck的chunk信息中,通过libraryTarget可告知我们构建出来的业务模块,当读到了externals中的key时,需要以umd的方式去获取资源名,否则会有出现找不到module的情况。

通过配置后,我们可以看到对应的资源信息已经可以在浏览器的source map中读到了。

externals.png

对应的资源也可以直接由页面外链载入,有效地减小了资源包的体积。

图片描述

方案三、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块

我们的项目依赖中通常会引用大量的npm包,而这些包在正常的开发过程中并不会进行修改,但是在每一次构建过程中却需要反复的将其解析,如何来规避此类损耗呢?这两个插件就是干这个用的。

简单来说DllPlugin的作用是预先编译一些模块,而DllReferencePlugin则是把这些预先编译好的模块引用起来。这边需要注意的是DllPlugin必须要在DllReferencePlugin执行前先执行一次,dll这个概念应该也是借鉴了windows程序开发中的dll文件的设计理念。

相对于externals,dllPlugin有如下几点优势:

  • dll预编译出来的模块可以作为静态资源链接库可被重复使用,尤其适合多个项目之间的资源共享,如同一个站点pc和手机版等;
  • dll资源能有效地解决资源循环依赖的问题,部分依赖库如:react-addons-css-transition-group这种原先从react核心库中抽取的资源包,整个代码只有一句话:

    module.exports = require('react/lib/ReactCSSTransitionGroup');

    却因为重新指向了react/lib中,这也会导致在通过externals引入的资源只能识别react,寻址解析react/lib则会出现无法被正确索引的情况。

  • 由于externals的配置项需要对每个依赖库进行逐个定制,所以每次增加一个组件都需要手动修改,略微繁琐,而通过dllPlugin则能完全通过配置读取,减少维护的成本;

1、配置dllPlugin对应资源表并编译文件

那么externals该如何使用呢,其实只需要增加一个配置文件:webpack.dll.config.js:

const webpack = require('webpack');
const path = require('path');
const isDebug = process.env.NODE_ENV === 'development';
const outputPath = isDebug ? path.join(__dirname, '../common/debug') : path.join(__dirname, '../common/dist');
const fileName = '[name].js';

// 资源依赖包,提前编译
const lib = [
  'react',
  'react-dom',
  'react-router',
  'history',
  'react-addons-pure-render-mixin',
  'react-addons-css-transition-group',
  'redux',
  'react-redux',
  'react-router-redux',
  'redux-actions',
  'redux-thunk',
  'immutable',
  'whatwg-fetch',
  'byted-people-react-select',
  'byted-people-reqwest'
];

const plugin = [
  new webpack.DllPlugin({
    /**
     * path
     * 定义 manifest 文件生成的位置
     * [name]的部分由entry的名字替换
     */
    path: path.join(outputPath, 'manifest.json'),
    /**
     * name
     * dll bundle 输出到那个全局变量上
     * 和 output.library 一样即可。
     */
    name: '[name]',
    context: __dirname
  }),
  new webpack.optimize.OccurenceOrderPlugin()
];

if (!isDebug) {
  plugin.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        except: ['$', 'exports', 'require']
      },
      compress: { warnings: false },
      output: { comments: false }
    })
  )
}

module.exports = {
  devtool: '#source-map',
  entry: {
    lib: lib
  },
  output: {
    path: outputPath,
    filename: fileName,
    /**
     * output.library
     * 将会定义为 window.${output.library}
     * 在这次的例子中,将会定义为`window.vendor_library`
     */
    library: '[name]',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  plugins: plugin
};

然后执行命令:

 $ NODE_ENV=development webpack --config  webpack.dll.lib.js --progress
 $ NODE_ENV=production webpack --config  webpack.dll.lib.js --progress 

即可分别编译出支持调试版和生产环境中lib静态资源库,在构建出来的文件中我们也可以看到会自动生成如下资源:

common
├── debug
│   ├── lib.js
│   ├── lib.js.map
│   └── manifest.json
└── dist
    ├── lib.js
    ├── lib.js.map
    └── manifest.json

文件说明:

  • lib.js可以作为编译好的静态资源文件直接在页面中通过src链接引入,与externals的资源引入方式一样,生产与开发环境可以通过类似charles之类的代理转发工具来做路由替换;
  • manifest.json中保存了webpack中的预编译信息,这样等于提前拿到了依赖库中的chunk信息,在实际开发过程中就无需要进行重复编译;

2、dllPlugin的静态资源引入

lib.js和manifest.json存在一一对应的关系,所以我们在调用的过程也许遵循这个原则,如当前处于开发阶段,对应我们可以引入common/debug文件夹下的lib.js和manifest.json,切换到生产环境的时候则需要引入common/dist下的资源进行对应操作,这里考虑到手动切换和维护的成本,我们推荐使用add-asset-html-webpack-plugin进行依赖资源的注入,可得到如下结果:

<head>
<script data-original="/static/common/lib.js"></script>
</head>

在webpack.config.js文件中增加如下代码:

const isDebug = (process.env.NODE_ENV === 'development');
const libPath = isDebug ? '../dll/lib/manifest.json' : 
'../dll/dist/lib/manifest.json';

// 将mainfest.json添加到webpack的构建中

module.export = {
  plugins: [
       new webpack.DllReferencePlugin({
       context: __dirname,
       manifest: require(libPath),
      })
  ]
}

配置完成后我们能发现对应的资源包已经完成了纯业务模块的提取

图片描述

多个工程之间如果需要使用共同的lib资源,也只需要引入对应的lib.js和manifest.js即可,plugin配置中也支持多个webpack.DllReferencePlugin同时引入使用,如下:

module.export = {
  plugins: [
     new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require(libPath),
      }),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require(ChartsPath),
      })
  ]
}

方案四、使用 Happypack 加速你的代码构建

以上介绍均为针对webpack中的chunk计算和编译内容的优化与改进,对资源的实际体积改进上也较为明显,那么除此之外,我们能否针对资源的编译过程和速度优化上做些尝试呢?

众所周知,webpack中为了方便各种资源和类型的加载,设计了以loader加载器的形式读取资源,但是受限于node的编程模型影响,所有的loader虽然以async的形式来并发调用,但是还是运行在单个 node的进程以及在同一个事件循环中,这就直接导致了当我们需要同时读取多个loader文件资源时,比如babel-loader需要transform各种jsx,es6的资源文件。在这种同步计算同时需要大量耗费cpu运算的过程中,node的单进程模型就无优势了,那么happypack就针对解决此类问题而生。

开启happypack的线程池

happypack的处理思路是将原有的webpack对loader的执行过程从单一进程的形式扩展多进程模式,原本的流程保持不变,这样可以在不修改原有配置的基础上来完成对编译过程的优化,具体配置如下:

 const HappyPack = require('happypack');
 const os = require('os')
 const HappyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length}); // 启动线程池});

module:{
    rules: [
      {
        test: /\.(js|jsx)$/,
        // use: ['babel-loader?cacheDirectory'],
        use: 'happypack/loader?id=jsx',
        exclude: /^node_modules$/
      }
    ]
  },
  plugins:[
    new HappyPack({
     id: 'jsx',
     cache: true,
     threadPool: HappyThreadPool,
     loaders: ['babel-loader']
   })
  ]

我们可以看到通过在loader中配置直接指向happypack提供的loader,对于文件实际匹配的处理 loader,则是通过配置在plugin属性来传递说明,这里happypack提供的loader与plugin的衔接匹配,则是通过id=happybabel来完成。配置完成后,laoder的工作模式就转变成了如下所示:

图片描述

happypack在编译过程中除了利用多进程的模式加速编译,还同时开启了cache计算,能充分利用缓存读取构建文件,对构建的速度提升也是非常明显的,经过测试,最终的构建速度提升如下:

优化前:
图片描述

优化后:
图片描述

关于happyoack的更多介绍可以查看:

方案五、增强 uglifyPlugin

uglifyJS凭借基于node开发,压缩比例高,使用方便等诸多优点已经成为了js压缩工具中的首选,但是我们在webpack的构建中观察发现,当webpack build进度走到80%前后时,会发生很长一段时间的停滞,经测试对比发现这一过程正是uglfiyJS在对我们的output中的bunlde部分进行压缩耗时过长导致,针对这块我们可以使用webpack-uglify-parallel来提升压缩速度。

从插件源码中可以看到,webpack-uglify-parallel的是实现原理是采用了多核并行压缩的方式来提升我们的压缩速度。

plugin.nextWorker().send({
    input: input,
    inputSourceMap: inputSourceMap,
    file: file,
    options: options
});

plugin._queue_len++;
                
if (!plugin._queue_len) {
    callback();
}               

if (this.workers.length < this.maxWorkers) {
    var worker = fork(__dirname + '/lib/worker');
    worker.on('message', this.onWorkerMessage.bind(this));
    worker.on('error', this.onWorkerError.bind(this));
    this.workers.push(worker);
}

this._next_worker++;
return this.workers[this._next_worker % this.maxWorkers];

使用配置也非常简单,只需要将我们原来webpack中自带的uglifyPlugin配置:

new webpack.optimize.UglifyJsPlugin({
   exclude:/\.min\.js$/
   mangle:true,
   compress: { warnings: false },
   output: { comments: false }
})

修改成如下代码即可:

const os = require('os');
    const UglifyJsParallelPlugin = require('webpack-uglify-parallel');
    
    new UglifyJsParallelPlugin({
      workers: os.cpus().length,
      mangle: true,
      compressor: {
        warnings: false,
        drop_console: true,
        drop_debugger: true
       }
    })

目前webpack官方也维护了一个支持多核压缩的UglifyJs插件:uglifyjs-webpack-plugin,使用方式类似,优势在于完全兼容webpack.optimize.UglifyJsPlugin中的配置,可以通过uglifyOptions写入,因此也做为推荐使用,参考配置如下:

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  new UglifyJsPlugin({
    uglifyOptions: {
      ie8: false,
      ecma: 8,
      mangle: true,
      output: { comments: false },
      compress: { warnings: false }
    },
    sourceMap: false,
    cache: true,
    parallel: os.cpus().length * 2
  })

方案六、Tree-shaking & Scope Hoisting

wepback在2.X和3.X中从rolluo中借鉴了tree-shakingScope Hoisting,利用es6的module特性,利用AST对所有引用的模块和方法做了静态分析,从而能有效地剔除项目中的没有引用到的方法,并将相关方法调用归纳到了独立的webpack_module中,对打包构建的体积优化也较为明显,但是前提是所有的模块写法必须使用ES6 Module进行实现,具体配置参考如下:

 // .babelrc: 通过配置减少没有引用到的方法
  {
    "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }],
      // https://www.zhihu.com/question/41922432
      ["es2015", {"modules": false}]  // tree-shaking
    ]
  }

  // webpack.config: Scope Hoisting
  {
    plugins:[
      // https://zhuanlan.zhihu.com/p/27980441
      new webpack.optimize.ModuleConcatenationPlugin()
    ]
  }

适用场景

在实际的开发过程中,可灵活地选择适合自身业务场景的优化手段。

优化手段开发环境生产环境
CommonsChunk
externals 
DllPlugin
Happypack 
uglify-parallel 

工程演示demo

温馨提醒

本文中的所有例子已经重新优化,支持最新的webpack3特性,并附带有分享ppt地址,可以在线点击查看

小结

性能优化无小事,追求快没有止境,在前端工程日益庞大复杂的今天,针对实际项目,持续改进构建工具的性能,对项目开发效率的提升和工具深度理解都是极其有益的。

查看原文

Abcat 评论了文章 · 2019-02-28

webpack 构建性能优化策略小结

背景

如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,React,Vue,Angular等诸多知名项目也都相继选用其作为官方构建工具,极受业内追捧。但是,随者工程开发的复杂程度和代码规模不断地增加,webpack暴露出来的各种性能问题也愈发明显,极大的影响着开发过程中的体验。

图片描述

问题归纳

历经了多个web项目的实战检验,我们对webapck在构建中逐步暴露出来的性能问题归纳主要有如下几个方面:

  • 代码全量构建速度过慢,即使是很小的改动,也要等待长时间才能查看到更新与编译后的结果(引入HMR热更新后有明显改进);
  • 随着项目业务的复杂度增加,工程模块的体积也会急剧增大,构建后的模块通常要以M为单位计算;
  • 多个项目之间共用基础资源存在重复打包,基础库代码复用率不高;
  • node的单进程实现在耗cpu计算型loader中表现不佳;

针对以上的问题,我们来看看怎样利用webpack现有的一些机制和第三方扩展插件来逐个击破。

慢在何处

作为工程师,我们一直鼓励要理性思考,用数据和事实说话,“我觉得很慢”,“太卡了”,“太大了”之类的表述难免显得太笼统和太抽象,那么我们不妨从如下几个方面来着手进行分析:

图片描述

  • 从项目结构着手,代码组织是否合理,依赖使用是否合理;
  • 从webpack自身提供的优化手段着手,看看哪些api未做优化配置;
  • 从webpack自身的不足着手,做有针对性的扩展优化,进一步提升效率;

在这里我们推荐使用一个wepback的可视化资源分析工具:webpack-bundle-analyzer,在webpack构建的时候会自动帮你计算出各个模块在你的项目工程中的依赖与分布情况,方便做更精确的资源依赖和引用的分析。

从上图中我们不难发现大多数的工程项目中,依赖库的体积永远是大头,通常体积可以占据整个工程项目的7-9成,而且在每次开发过程中也会重新读取和编译对应的依赖资源,这其实是很大的的资源开销浪费,而且对编译结果影响微乎其微,毕竟在实际业务开发中,我们很少会去主动修改第三方库中的源码,改进方案如下:

方案一、合理配置 CommonsChunkPlugin

webpack的资源入口通常是以entry为单元进行编译提取,那么当多entry共存的时候,CommonsChunkPlugin的作用就会发挥出来,对所有依赖的chunk进行公共部分的提取,但是在这里可能很多人会误认为抽取公共部分指的是能抽取某个代码片段,其实并非如此,它是以module为单位进行提取。

假设我们的页面中存在entry1,entry2,entry3三个入口,这些入口中可能都会引用如utils,loadash,fetch等这些通用模块,那么就可以考虑对这部分的共用部分机提取。通常提取方式有如下四种实现:

1、传入字符串参数,由chunkplugin自动计算提取

new webpack.optimize.CommonsChunkPlugin('common.js')

这种做法默认会把所有入口节点的公共代码提取出来, 生成一个common.js

2、有选择的提取公共代码

new webpack.optimize.CommonsChunkPlugin('common.js',['entry1','entry2']);

只提取entry1节点和entry2中的共用部分模块, 生成一个common.js

3、将entry下所有的模块的公共部分(可指定引用次数)提取到一个通用的chunk中

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function (module, count) {
       return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
       )
    }
});

提取所有node_modules中的模块至vendors中,也可以指定minChunks中的最小引用数;

4、抽取enry中的一些lib抽取到vendors中

entry = {
    vendors: ['fetch', 'loadash']
};
new webpack.optimize.CommonsChunkPlugin({
    name: "vendors",
    minChunks: Infinity
});

添加一个entry名叫为vendors,并把vendors设置为所需要的资源库,CommonsChunk会自动提取指定库至vendors中。

方案二、通过 externals 配置来提取常用库

在实际项目开发过程中,我们并不需要实时调试各种库的源码,这时候就可以考虑使用external选项了。

图片描述

简单来说external就是把我们的依赖资源声明为一个外部依赖,然后通过script外链脚本引入。这也是我们早期页面开发中资源引入的一种翻版,只是通过配置后可以告知webapck遇到此类变量名时就可以不用解析和编译至模块的内部文件中,而改用从外部变量中读取,这样能极大的提升编译速度,同时也能更好的利用CDN来实现缓存。

external的配置相对比较简单,只需要完成如下三步:

1、在页面中加入需要引入的lib地址,如下:

<head>
<script data-original="//cdn.bootcss.com/jquery.min.js"></script>
<script data-original="//cdn.bootcss.com/underscore.min.js"></script>
<script data-original="/static/common/react.min.js"></script>
<script data-original="/static/common/react-dom.js"></script>
<script data-original="/static/common/react-router.js"></script>
<script data-original="/static/common/immutable.js"></script>
</head>

2、在webapck.config.js中加入external配置项:

module.export = {
    externals: {
        'react-router': {
            amd: 'react-router',
            root: 'ReactRouter',
            commonjs: 'react-router',
            commonjs2: 'react-router'
        },
        react: {
            amd: 'react',
            root: 'React',
            commonjs: 'react',
            commonjs2: 'react'
        },
        'react-dom': {
            amd: 'react-dom',
            root: 'ReactDOM',
            commonjs: 'react-dom',
            commonjs2: 'react-dom'
        }
    }
}

这里要提到的一个细节是:此类文件在配置前,构建这些资源包时需要采用amd/commonjs/cmd相关的模块化进行兼容封装,即打包好的库已经是umd模式包装过的,如在node_modules/react-router中我们可以看到umd/ReactRouter.js之类的文件,只有这样webpack中的require和import * from 'xxxx'才能正确读到该类包的引用,在这类js的头部一般也能看到如下字样:


if (typeof exports === 'object' && typeof module === 'object') {
    module.exports = factory(require("react"));
} else if (typeof define === 'function' && define.amd) {
    define(["react"], factory);
} else if (typeof exports === 'object') {
    exports["ReactRouter"] = factory(require("react"));
} else {
    root["ReactRouter"] = factory(root["React"]);
}

3、非常重要的是一定要在output选项中加入如下一句话:

output: {
  libraryTarget: 'umd'
}

由于通过external提取过的js模块是不会被记录到webapck的chunk信息中,通过libraryTarget可告知我们构建出来的业务模块,当读到了externals中的key时,需要以umd的方式去获取资源名,否则会有出现找不到module的情况。

通过配置后,我们可以看到对应的资源信息已经可以在浏览器的source map中读到了。

externals.png

对应的资源也可以直接由页面外链载入,有效地减小了资源包的体积。

图片描述

方案三、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块

我们的项目依赖中通常会引用大量的npm包,而这些包在正常的开发过程中并不会进行修改,但是在每一次构建过程中却需要反复的将其解析,如何来规避此类损耗呢?这两个插件就是干这个用的。

简单来说DllPlugin的作用是预先编译一些模块,而DllReferencePlugin则是把这些预先编译好的模块引用起来。这边需要注意的是DllPlugin必须要在DllReferencePlugin执行前先执行一次,dll这个概念应该也是借鉴了windows程序开发中的dll文件的设计理念。

相对于externals,dllPlugin有如下几点优势:

  • dll预编译出来的模块可以作为静态资源链接库可被重复使用,尤其适合多个项目之间的资源共享,如同一个站点pc和手机版等;
  • dll资源能有效地解决资源循环依赖的问题,部分依赖库如:react-addons-css-transition-group这种原先从react核心库中抽取的资源包,整个代码只有一句话:

    module.exports = require('react/lib/ReactCSSTransitionGroup');

    却因为重新指向了react/lib中,这也会导致在通过externals引入的资源只能识别react,寻址解析react/lib则会出现无法被正确索引的情况。

  • 由于externals的配置项需要对每个依赖库进行逐个定制,所以每次增加一个组件都需要手动修改,略微繁琐,而通过dllPlugin则能完全通过配置读取,减少维护的成本;

1、配置dllPlugin对应资源表并编译文件

那么externals该如何使用呢,其实只需要增加一个配置文件:webpack.dll.config.js:

const webpack = require('webpack');
const path = require('path');
const isDebug = process.env.NODE_ENV === 'development';
const outputPath = isDebug ? path.join(__dirname, '../common/debug') : path.join(__dirname, '../common/dist');
const fileName = '[name].js';

// 资源依赖包,提前编译
const lib = [
  'react',
  'react-dom',
  'react-router',
  'history',
  'react-addons-pure-render-mixin',
  'react-addons-css-transition-group',
  'redux',
  'react-redux',
  'react-router-redux',
  'redux-actions',
  'redux-thunk',
  'immutable',
  'whatwg-fetch',
  'byted-people-react-select',
  'byted-people-reqwest'
];

const plugin = [
  new webpack.DllPlugin({
    /**
     * path
     * 定义 manifest 文件生成的位置
     * [name]的部分由entry的名字替换
     */
    path: path.join(outputPath, 'manifest.json'),
    /**
     * name
     * dll bundle 输出到那个全局变量上
     * 和 output.library 一样即可。
     */
    name: '[name]',
    context: __dirname
  }),
  new webpack.optimize.OccurenceOrderPlugin()
];

if (!isDebug) {
  plugin.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        except: ['$', 'exports', 'require']
      },
      compress: { warnings: false },
      output: { comments: false }
    })
  )
}

module.exports = {
  devtool: '#source-map',
  entry: {
    lib: lib
  },
  output: {
    path: outputPath,
    filename: fileName,
    /**
     * output.library
     * 将会定义为 window.${output.library}
     * 在这次的例子中,将会定义为`window.vendor_library`
     */
    library: '[name]',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  plugins: plugin
};

然后执行命令:

 $ NODE_ENV=development webpack --config  webpack.dll.lib.js --progress
 $ NODE_ENV=production webpack --config  webpack.dll.lib.js --progress 

即可分别编译出支持调试版和生产环境中lib静态资源库,在构建出来的文件中我们也可以看到会自动生成如下资源:

common
├── debug
│   ├── lib.js
│   ├── lib.js.map
│   └── manifest.json
└── dist
    ├── lib.js
    ├── lib.js.map
    └── manifest.json

文件说明:

  • lib.js可以作为编译好的静态资源文件直接在页面中通过src链接引入,与externals的资源引入方式一样,生产与开发环境可以通过类似charles之类的代理转发工具来做路由替换;
  • manifest.json中保存了webpack中的预编译信息,这样等于提前拿到了依赖库中的chunk信息,在实际开发过程中就无需要进行重复编译;

2、dllPlugin的静态资源引入

lib.js和manifest.json存在一一对应的关系,所以我们在调用的过程也许遵循这个原则,如当前处于开发阶段,对应我们可以引入common/debug文件夹下的lib.js和manifest.json,切换到生产环境的时候则需要引入common/dist下的资源进行对应操作,这里考虑到手动切换和维护的成本,我们推荐使用add-asset-html-webpack-plugin进行依赖资源的注入,可得到如下结果:

<head>
<script data-original="/static/common/lib.js"></script>
</head>

在webpack.config.js文件中增加如下代码:

const isDebug = (process.env.NODE_ENV === 'development');
const libPath = isDebug ? '../dll/lib/manifest.json' : 
'../dll/dist/lib/manifest.json';

// 将mainfest.json添加到webpack的构建中

module.export = {
  plugins: [
       new webpack.DllReferencePlugin({
       context: __dirname,
       manifest: require(libPath),
      })
  ]
}

配置完成后我们能发现对应的资源包已经完成了纯业务模块的提取

图片描述

多个工程之间如果需要使用共同的lib资源,也只需要引入对应的lib.js和manifest.js即可,plugin配置中也支持多个webpack.DllReferencePlugin同时引入使用,如下:

module.export = {
  plugins: [
     new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require(libPath),
      }),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require(ChartsPath),
      })
  ]
}

方案四、使用 Happypack 加速你的代码构建

以上介绍均为针对webpack中的chunk计算和编译内容的优化与改进,对资源的实际体积改进上也较为明显,那么除此之外,我们能否针对资源的编译过程和速度优化上做些尝试呢?

众所周知,webpack中为了方便各种资源和类型的加载,设计了以loader加载器的形式读取资源,但是受限于node的编程模型影响,所有的loader虽然以async的形式来并发调用,但是还是运行在单个 node的进程以及在同一个事件循环中,这就直接导致了当我们需要同时读取多个loader文件资源时,比如babel-loader需要transform各种jsx,es6的资源文件。在这种同步计算同时需要大量耗费cpu运算的过程中,node的单进程模型就无优势了,那么happypack就针对解决此类问题而生。

开启happypack的线程池

happypack的处理思路是将原有的webpack对loader的执行过程从单一进程的形式扩展多进程模式,原本的流程保持不变,这样可以在不修改原有配置的基础上来完成对编译过程的优化,具体配置如下:

 const HappyPack = require('happypack');
 const os = require('os')
 const HappyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length}); // 启动线程池});

module:{
    rules: [
      {
        test: /\.(js|jsx)$/,
        // use: ['babel-loader?cacheDirectory'],
        use: 'happypack/loader?id=jsx',
        exclude: /^node_modules$/
      }
    ]
  },
  plugins:[
    new HappyPack({
     id: 'jsx',
     cache: true,
     threadPool: HappyThreadPool,
     loaders: ['babel-loader']
   })
  ]

我们可以看到通过在loader中配置直接指向happypack提供的loader,对于文件实际匹配的处理 loader,则是通过配置在plugin属性来传递说明,这里happypack提供的loader与plugin的衔接匹配,则是通过id=happybabel来完成。配置完成后,laoder的工作模式就转变成了如下所示:

图片描述

happypack在编译过程中除了利用多进程的模式加速编译,还同时开启了cache计算,能充分利用缓存读取构建文件,对构建的速度提升也是非常明显的,经过测试,最终的构建速度提升如下:

优化前:
图片描述

优化后:
图片描述

关于happyoack的更多介绍可以查看:

方案五、增强 uglifyPlugin

uglifyJS凭借基于node开发,压缩比例高,使用方便等诸多优点已经成为了js压缩工具中的首选,但是我们在webpack的构建中观察发现,当webpack build进度走到80%前后时,会发生很长一段时间的停滞,经测试对比发现这一过程正是uglfiyJS在对我们的output中的bunlde部分进行压缩耗时过长导致,针对这块我们可以使用webpack-uglify-parallel来提升压缩速度。

从插件源码中可以看到,webpack-uglify-parallel的是实现原理是采用了多核并行压缩的方式来提升我们的压缩速度。

plugin.nextWorker().send({
    input: input,
    inputSourceMap: inputSourceMap,
    file: file,
    options: options
});

plugin._queue_len++;
                
if (!plugin._queue_len) {
    callback();
}               

if (this.workers.length < this.maxWorkers) {
    var worker = fork(__dirname + '/lib/worker');
    worker.on('message', this.onWorkerMessage.bind(this));
    worker.on('error', this.onWorkerError.bind(this));
    this.workers.push(worker);
}

this._next_worker++;
return this.workers[this._next_worker % this.maxWorkers];

使用配置也非常简单,只需要将我们原来webpack中自带的uglifyPlugin配置:

new webpack.optimize.UglifyJsPlugin({
   exclude:/\.min\.js$/
   mangle:true,
   compress: { warnings: false },
   output: { comments: false }
})

修改成如下代码即可:

const os = require('os');
    const UglifyJsParallelPlugin = require('webpack-uglify-parallel');
    
    new UglifyJsParallelPlugin({
      workers: os.cpus().length,
      mangle: true,
      compressor: {
        warnings: false,
        drop_console: true,
        drop_debugger: true
       }
    })

目前webpack官方也维护了一个支持多核压缩的UglifyJs插件:uglifyjs-webpack-plugin,使用方式类似,优势在于完全兼容webpack.optimize.UglifyJsPlugin中的配置,可以通过uglifyOptions写入,因此也做为推荐使用,参考配置如下:

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  new UglifyJsPlugin({
    uglifyOptions: {
      ie8: false,
      ecma: 8,
      mangle: true,
      output: { comments: false },
      compress: { warnings: false }
    },
    sourceMap: false,
    cache: true,
    parallel: os.cpus().length * 2
  })

方案六、Tree-shaking & Scope Hoisting

wepback在2.X和3.X中从rolluo中借鉴了tree-shakingScope Hoisting,利用es6的module特性,利用AST对所有引用的模块和方法做了静态分析,从而能有效地剔除项目中的没有引用到的方法,并将相关方法调用归纳到了独立的webpack_module中,对打包构建的体积优化也较为明显,但是前提是所有的模块写法必须使用ES6 Module进行实现,具体配置参考如下:

 // .babelrc: 通过配置减少没有引用到的方法
  {
    "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }],
      // https://www.zhihu.com/question/41922432
      ["es2015", {"modules": false}]  // tree-shaking
    ]
  }

  // webpack.config: Scope Hoisting
  {
    plugins:[
      // https://zhuanlan.zhihu.com/p/27980441
      new webpack.optimize.ModuleConcatenationPlugin()
    ]
  }

适用场景

在实际的开发过程中,可灵活地选择适合自身业务场景的优化手段。

优化手段开发环境生产环境
CommonsChunk
externals 
DllPlugin
Happypack 
uglify-parallel 

工程演示demo

温馨提醒

本文中的所有例子已经重新优化,支持最新的webpack3特性,并附带有分享ppt地址,可以在线点击查看

小结

性能优化无小事,追求快没有止境,在前端工程日益庞大复杂的今天,针对实际项目,持续改进构建工具的性能,对项目开发效率的提升和工具深度理解都是极其有益的。

查看原文

Abcat 关注了专栏 · 2018-11-20

有赞美业前端团队

关注 2795

Abcat 关注了用户 · 2018-04-26

谢慧琦 @xiehui_59ad0ac9505c6

欢迎加入阿里巴巴新零售技术部,有意者私信我。

关注 7

Abcat 收藏了文章 · 2018-04-16

前端面试题总结——JS(持续更新中)

前端面试题总结——JS(持续更新中)

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind string

2.例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)
隐式(== - ===)

3.split() join() 的区别

前者是切割成数组的形式,后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Unshift()头部添加 shift()头部删除
Push()尾部添加 pop()尾部删除

5.IE和DOM事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

6.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

7.ajax请求的时候get 和post方式的区别

1.一个在url后面 一个放在虚拟载体里面
2.有大小限制
3.安全问题
4.应用不同 一个是论坛等只需要请求的,一个是类似修改密码的

8.call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

9.ajax请求时,如何解析json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

10.写一个获取非行间样式的函数

function getStyle(obj, attr, value) {
if(!value) {
if(obj.currentStyle) {
return obj.currentStyle(attr)
}
else {
obj.getComputedStyle(attr, false)
}
}
else {
obj.style[attr]=value
}
}

11.事件委托(代理)是什么

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

12.闭包是什么,有什么特性,对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanw... (问这个问题的不是一个公司)
也可以直接点击此处查看之前更的关于闭包的文章

13.如何阻止事件冒泡和默认事件

stoppropagation / preventdefault

14.添加 插入 替换 删除到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

15.解释jsonp的原理,以及为什么不是真正的ajax

动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作

16.javascript的本地对象,内置对象和宿主对象

本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

17.document load 和document ready的区别

页面加载完成有两种事件:
一.是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。
二.是onload,指示页面包含图片等文件在内的所有元素都加载完成。

18.”==”和“===”的不同

前者会自动转换类型
后者不会

19.javascript的同源策略

同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义,
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是协议、域名和端口号的组合

20.最快捷的数组求最大值

var arr = [ 1,5,1,7,5,9];
Math.max(...arr)  // 9 

21.更短的数组去重写法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]

// [2, "12", 12, 1, 6, 13]

22.排序算法

升序:

var numberArray = [3,6,2,4,1,5];
numberArray.sort(function(a,b){  
   return a-b;
})
console.log(numberArray);

23.冒泡排序

var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
    for(i=0;i<arr.length-1;i++){
        for(j=0;j<arr.length-1-i;j++){
            if(arr[j]>arr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
sortarr(examplearr);
console.log(examplearr);

24.null和undefined的区别:

null:表示无值;undefined:表示一个未声明的变量,或已声明但没有赋值的变量,
或一个并不存在的对象属性。

25.使用闭包的注意点:

1.由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2.闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
(关于闭包,详细了解请看JavaScript之作用域与闭包详解)

26.请解释JSONP的工作原理,以及它为什么不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

AJAX是不跨域的,而JSONP是一个是跨域的,还有就是二者接收参数形式不一样!

27.请解释变量声明提升。

在函数执行时,把变量的声明提升到了函数顶部,而其值定义依然在原来位置。

28.如何从浏览器的URL中获取查询字符串参数。

以下函数把获取一个key的参数。

  function parseQueryString ( name ){
      name = name.replace(/[\[]/,"\\\[");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
 
      if(results == null) {
          return "";
      } else {
     return results[1];
     }
 }

29.arguments是什么?

arguments虽然有一些数组的性质,但其并非真正的数组,只是一个类数组对象。
其并没有数组的很多方法,不能像真正的数组那样调用.jion(),.concat(),.pop()等方法。

30.什么是”use strict”;?使用它的好处和坏处分别是什么?

在代码中出现表达式-“use strict”; 意味着代码按照严格模式解析,这种模式使得Javascript在更严格的条件下运行。

好处:
1.消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
2.消除代码运行的一些不安全之处,保证代码运行的安全;
3.提高编译器效率,增加运行速度;

坏处:
1.同样的代码,在”严格模式”中,可能会有不一样的运行结果;一些在”正常模式”下可以运行的语句,在”严格模式”下将不能运行。

31.什么是回调函数?

1.就是一个函数的调用过程。那么就从理解这个调用过程开始吧。
函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。

2.另外种解释:开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。

32.使用 typeof bar === “object” 判断 bar 是不是一个对象有神马潜在的弊端?如何避免这种弊端?

let obj = {};
let arr = [];
 
console.log(typeof obj === 'object');  //true
console.log(typeof arr === 'object');  //true

从上面的输出结果可知,typeof bar === “object” 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === “[object Object]” 来避免这种弊端:

let obj = {};
let arr = [];
 
console.log(Object.prototype.toString.call(obj));  //[object Object]
console.log(Object.prototype.toString.call(arr));  //[object Array]

33.下面的代码会输出什么?为什么?


    console.log(1 +  "2" + "2"); //122
    console.log(1 +  +"2" + "2"); //32
    console.log(1 +  -"1" + "2"); //02
    console.log(+"1" +  "1" + "2"); //112
    console.log( "A" - "B" + "2"); //NaN2
    console.log( "A" - "B" + 2); //NaN
    console.log('3' + 2 + 1);//321
    console.log(typeof +'3');  //number
    console.log(typeof (''+3));  //string
    console.log('a' * 'sd');   //NaN

34.逻辑运算

或逻辑时:当0在前面时console.log((0|| 2));则输出为后面的数,为2;

     当除0以为的数在前面时console.log((2|| 0));则输出为2;

与逻辑时:当只要有0时console.log(0&&2 );则输出都为0;

     当不存在0时,console.log(1&&2 );则输出都为后面的一个,为2;
                 console.log(2&&1 );则输出为1;

35.在 JavaScript,常见的 false 值:

0, '0', +0, -0, false, '',null,undefined,null,NaN

要注意空数组([])和空对象({}):


    console.log([] == false) //true
    console.log({} == false) //false
    console.log(Boolean([])) //true          

36.解释下面代码的输出

 var a={},
        b={key:'b'},
        c={key:'c'};
     
    a[b]=123;
    a[c]=456;
     
    console.log(a[b]);

因为在设置对象属性时,JS将隐式地stringify参数值。
在本例中,由于b和c都是对象,它们都将被转换为“[object object]”。
因此,a[b]和[c]都等价于[[object object]],并且可以互换使用。
所以,设置或引用[c]与设置或引用a[b]完全相同。`

37.解释下面代码的输出

(function(x) {
    return (function(y) {
        console.log(x);
    })(2)
})(1);

输出1,闭包能够访问外部作用域的变量或参数。

38.请写出以下输出结果:

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
new new Foo().getName(); //3

39.谈谈你对Ajax的理解?(概念、特点、作用)

AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML)是指一种创建交互式网页应用的开发技术、改善用户体验,实现无刷新效果。

优点

a、不需要插件支持
b、优秀的用户体验
c、提高Web程序的性能
d、减轻服务器和带宽的负担

缺点

a、破坏浏览器“前进”、“后退”按钮的正常功能,可以通过简单的插件弥补
b、对搜索引擎的支持不足

40.说说你对延迟对象deferred的理解?

a、什么是deferred对象

在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。
简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是”延迟”,所以deferred对象的含义就是”延迟”到未来某个点再执行。
它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。

b、它的主要功能,可以归结为四点:

(1)、实现链式操作
(2)、指定同一操作的多个回调函数
(3)、为多个操作指定回调函数
(4)、普通操作的回调函数接口

41.什么是跨域,如何实现跨域访问?

跨域是指不同域名之间相互访问。
JavaScript同源策略的限制,A域名下的JavaScript无法操作B或是C域名下的对象

实现:

(1)、JSONP跨域:利用script脚本允许引用不同域下的js实现的,将回调方法带入服务器,返回结果时回调。
1 通过jsonp跨域

    1.原生实现:



<script>
            var script = document.createElement('script');
            script.type = 'text/javascript';
        
            // 传参并指定回调执行函数为onBack
            script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
            document.head.appendChild(script);
        
            // 回调执行函数
            function onBack(res) {
                alert(JSON.stringify(res));
            }
         </script>


2.document.domain + iframe跨域  
    此方案仅限主域相同,子域不同的跨域应用场景。
    1.父窗口:(http://www.domain.com/a.html)

 



  <iframe id="iframe" data-original="http://child.domain.com/b.html"></iframe>
        <script>
            document.domain = 'domain.com';
            var user = 'admin';
        </script>
            2.子窗口:(http://child.domain.com/b.html)
            
      

  <script>
            document.domain = 'domain.com';
            // 获取父窗口中变量
            alert('get js data from parent ---> ' + window.parent.user);
        </script>
弊端:请看下面渲染加载优化

1、 nginx代理跨域
2、 nodejs中间件代理跨域
3、 后端在头部信息里面设置安全域名

(3)、跨域资源共享(CORS)
跨域资源共享(CORS)是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。

CORS与JSONP相比:

a、JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
b、使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
c、JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
更多跨域的具体内容请看 https://segmentfault.com/a/11...

42.为什么要使用模板引擎?

a.模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
b.在一些示例中javascript有大量的html字符串,html中有一些像onclick样的javascript,这样javascript中有html,html中有javascript,代码的偶合度很高,不便于修改与维护,使用模板引擎可以解决问题。

43.根据你的理解,请简述JavaScript脚本的执行原理?

JavaScript是一种动态、弱类型、基于原型的语言,通过浏览器可以直接执行。
当浏览器遇到<script> 标记的时候,浏览器会执行之间的javascript代码。嵌入的js代码是顺序执行的,每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。 变量的调用,必须是前面已经声明,否则获取的变量值是undefined。

44.JavaScript的数据类型有哪些?

基本数据类型:字符串 String、数字 Number、布尔Boolean
复合数据类型:数组 Array、对象 Object
特殊数据类型:Null 空对象、Undefined 未定义

45.ionic和angularjs的区别?

a、ionic是一个用来开发混合手机应用的,开源的,免费的代码库。可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化。
b、AngularJS通过新的属性和表达式扩展了HTML。AngularJS可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
c、Ionic是一个混合APP开发工具,它以AngularJS为中间脚本工具(称为库,似乎又不恰当),所以,你如果要使用Ionic开发APP,就必须了解AngularJS。

46.谈谈你对闭包的理解?

(1)、使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,
缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

(2)、闭包有三个特性:
a、函数嵌套函数
b、函数内部可以引用外部的参数和变量
c、参数和变量不会被垃圾回收机制回收

47.谈谈你This对象的理解?

回答一:

(1)、js的this指向是不确定的,也就是说是可以动态改变的。call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高
(2)、this 一般情况下,都是指向函数的拥有者。
(3)、在函数自执行里,this 指向的是 window 对象。

扩展:关于this,还有一个地方比较让人模糊的是在dom事件里,通常有如下3种情况:
a、使用标签属性注册事件,此时this指向的是window对象。
b、对与a,要让this指向input,可以将this作为参数传递。
c、使用addEventListener等注册事件。此时this也是指向 input。

回答二:

(1)、处于全局作用域下的this:

this;/*window*/
var a = {name: this}/*window*/
var b = [this];/*window*/

在全局作用域下,this默认指向window对象。

(2)、处在函数中的this,又分为以下几种情况:
a、一般定义的函数,然后一般的执行:

var a = function(){
console.log(this);
}
a();/*window*/

this还是默认指向window。

b、一般定义,用new调用执行:

var a = function(){
console.log(this);
}
new a();/*新建的空对象*/

这时候让this指向新建的空对象,我们才可以给空对象初始化自有变量
c、作为对象属性的函数,调用时:

var a = {
f:function(){
console.log(this)
}
}
a.f();/*a对象*/

这时候this指向调用f函数的a对象。
(3)、通过call()和apply()来改变this的默认引用:

var b = {id: 'b'};
var a = {
f:function(){
console.log(this)
 }
}
a.f.call(b);/*window*/

所有函数对象都有的call方法和apply方法,它们的用法大体相似,f.call(b);的意思 是,执行f函数,并将f函数执行期活动对象里的this指向b对象,这样标示符解析时,this就会是b对象了。不过调用函数是要传参的。所以,f.call(b, x, y); f.apply(b, [x, y]);好吧,以上就是用call方法执行f函数,与用apply方法执行f函数时传参方式,它们之间的差异,大家一目了然:apply通过数组的方式传递参数,call通过一个个的形参传递参数。
(4)、一些函数特殊执行情况this的指向问题:

a、setTimeout()和setInverval():

var a = function(){
console.log(this);
}
setTimeout(a,0);/*window*/
setInterval()类似。 

b、dom模型中触发事件的回调方法执行中活动对象里的this指向该dom对象。

48.JavaScript对象的几种创建方式?

(1) 工厂模式

function Parent(){
var Child = new Object();
Child.name="欲泪成雪";
Child.age="20";
return Child;
};
var x = Parent();

引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象

(2)构造函数方式

function Parent(){
  this.name="欲泪成雪";
  this.age="20";
};
var x =new Parent();

(3) 原型模式

function Parent(){
};
Parent.prototype.name="欲泪成雪";
Parent.prototype.age="20";
var x =new Parent();

(4)混合的构造函数,原型方式(推荐)

function Parent(){
  this.name="欲泪成雪";
  this.age=22;
};
Parent.prototype.lev=function(){
  return this.name;
};
var x =new Parent();

(5)动态原型方式

function Parent(){
  this.name="欲泪成雪";
  this.age=22;
;
if(typeof Parent._lev=="undefined"){
Parent.prototype.lev=function(){
  return this.name;
}
Parent._lev=true;
}
};
var x =new Parent();


49.请写出js内存泄漏的问题?

回答一:

(1)、IE7/8 DOM循环引用导致内存泄漏
a、多个对象循环引用
b、循环引用自己

(2)、基础的DOM泄漏
当原有的DOM被移除时,子结点引用没有被移除则无法回收。

(3)、timer定时器泄漏
这个时候你无法回收buggyObject,解决办法,先停止timer然后再回收

回答二:

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)也会引发内存泄漏问题。

50.JS应该放在什么位置?

(1)、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
(2)、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
(3)、使用defer(只支持IE)
(4)、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用

51.请你解释一下事件冒泡机制

a、在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

b、冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发

c、js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数。

//阻止冒泡时间方法,兼容ie(e.cancleBubble)和ff(e.stopProgation)

function stopBubble(e){
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault

51.说说你对Promise的理解?

ES6 原生提供了 Promise 对象。
所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

Promise 对象有以下两个特点:

(1)、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。

(2)、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

52.说说你对原型(prototype)理解?

JavaScript是一种通过原型实现继承的语言与别的高级语言是有区别的,像java,C#是通过类型决定继承关系的,JavaScript是的动态的弱类型语言,总之可以认为JavaScript中所有都是对象,在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个” prototype”内部属性,这个属性所对应的就是该对象的原型。

“prototype”作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,Firefox和Chrome内核的JavaScript引擎中提供了”proto“这个非标准的访问器(ECMA新标准中引入了标准对象原型访问器”Object.getPrototype(object)”)。

原型的主要作用就是为了实现继承与扩展对象。

53.在 JavaScript 中,instanceof用于判断某个对象是否被另一个函数构造。

使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。

54.纯数组排序

常见有冒泡和选择,这里利用sort排序

 export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            return a-b //将arr升序排列,如果是倒序return -(a-b)
        })
    }

55.数组对象排序

export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            let value1 = a[property];
            let value2 = b[property];
            return value1 - value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
            //来接收对象属性名,其他部分代码与正常使用sort方法相同
        })
    }      
  1. 对象遍历

export const traverseObj=(obj)=>{
        for(let variable in obj){
        //For…in遍历对象包括所有继承的属性,所以如果
         //只是想使用对象本身的属性需要做一个判断
        if(obj.hasOwnProperty(variable)){
            console.log(variable,obj[variable])
        }
        }
    }
    

57.promise

promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序

1.应用方法一

export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
    resolve(()=>{
        let a=1;
        return ++a;
    }).then((data)=>{
        console.log(data)//data值为++a的值
    }).catch(()=>{//错误执行这个

    })
})
}

2.应用方法二

export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
    console.log(data)//data值为[1,2,3]
})
}

58.如何禁用网页菜单右键?

<script>
function Click(){
window.event.returnValue=false;
}
document.oncontextmenu=Click;
</script>
恢复方法:javascript:alert(document.oncontextmenu='')



查看原文

Abcat 收藏了文章 · 2018-04-10

面试题:你能写一个Vue的双向数据绑定吗?

在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧。结合注释,希望能让大家有所收获。

1、原理

Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例。为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-model,v-bind 和v-click三个命令,其他命令也可以自行补充。

添加网上的一张图

2、实现

页面结构很简单,如下

<div id="app">
    <form>
      <input type="text"  v-model="number">
      <button type="button" v-click="increment">增加</button>
    </form>
    <h3 v-bind="number"></h3>
  </div>

包含:

 1. 一个input,使用v-model指令
 2. 一个button,使用v-click指令
 3. 一个h3,使用v-bind指令。

我们最后会通过类似于vue的方式来使用我们的双向数据绑定,结合我们的数据结构添加注释

var app = new myVue({
      el:'#app',
      data: {
        number: 0
      },
      methods: {
        increment: function() {
          this.number ++;
        },
      }
    })

首先我们需要定义一个myVue构造函数:

function myVue(options) {
  
}

为了初始化这个构造函数,给它添加一 个_init属性

function myVue(options) {
  this._init(options);
}
myVue.prototype._init = function (options) {
    this.$options = options;  // options 为上面使用时传入的结构体,包括el,data,methods
    this.$el = document.querySelector(options.el); // el是 #app, this.$el是id为app的Element元素
    this.$data = options.data; // this.$data = {number: 0}
    this.$methods = options.methods;  // this.$methods = {increment: function(){}}
  }

接下来实现_obverse函数,对data进行处理,重写data的set和get函数

并改造_init函数

 myVue.prototype._obverse = function (obj) { // obj = {number: 0}
    var value;
    for (key in obj) {  //遍历obj对象
      if (obj.hasOwnProperty(key)) {
        value = obj[key]; 
        if (typeof value === 'object') {  //如果值还是对象,则遍历处理
          this._obverse(value);
        }
        Object.defineProperty(this.$data, key, {  //关键
          enumerable: true,
          configurable: true,
          get: function () {
            console.log(`获取${value}`);
            return value;
          },
          set: function (newVal) {
            console.log(`更新${newVal}`);
            if (value !== newVal) {
              value = newVal;
            }
          }
        })
      }
    }
  }
 
 myVue.prototype._init = function (options) {
    this.$options = options;
    this.$el = document.querySelector(options.el);
    this.$data = options.data;
    this.$methods = options.methods;
   
    this._obverse(this.$data);
  }

接下来我们写一个指令类Watcher,用来绑定更新函数,实现对DOM元素的更新

function Watcher(name, el, vm, exp, attr) {
    this.name = name;         //指令名称,例如文本节点,该值设为"text"
    this.el = el;             //指令对应的DOM元素
    this.vm = vm;             //指令所属myVue实例
    this.exp = exp;           //指令对应的值,本例如"number"
    this.attr = attr;         //绑定的属性值,本例为"innerHTML"

    this.update();
  }

  Watcher.prototype.update = function () {
    this.el[this.attr] = this.vm.$data[this.exp]; //比如 H3.innerHTML = this.data.number; 当number改变时,会触发这个update函数,保证对应的DOM内容进行了更新。
  }

更新_init函数以及_obverse函数

myVue.prototype._init = function (options) {
    //...
    this._binding = {};   //_binding保存着model与view的映射关系,也就是我们前面定义的Watcher的实例。当model改变时,我们会触发其中的指令类更新,保证view也能实时更新
    //...
  }
 
  myVue.prototype._obverse = function (obj) {
    //...
      if (obj.hasOwnProperty(key)) {
        this._binding[key] = {    // 按照前面的数据,_binding = {number: _directives: []}                                                                                                                                                  
          _directives: []
        };
        //...
        var binding = this._binding[key];
        Object.defineProperty(this.$data, key, {
          //...
          set: function (newVal) {
            console.log(`更新${newVal}`);
            if (value !== newVal) {
              value = newVal;
              binding._directives.forEach(function (item) {  // 当number改变时,触发_binding[number]._directives 中的绑定的Watcher类的更新
                item.update();
              })
            }
          }
        })
      }
    }
  }

那么如何将view与model进行绑定呢?接下来我们定义一个_compile函数,用来解析我们的指令(v-bind,v-model,v-clickde)等,并在这个过程中对view与model进行绑定。

 myVue.prototype._init = function (options) {
   //...
    this._complie(this.$el);
  }
 
myVue.prototype._complie = function (root) { root 为 id为app的Element元素,也就是我们的根元素
    var _this = this;
    var nodes = root.children;
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      if (node.children.length) {  // 对所有元素进行遍历,并进行处理
        this._complie(node);
      }

      if (node.hasAttribute('v-click')) {  // 如果有v-click属性,我们监听它的onclick事件,触发increment事件,即number++
        node.onclick = (function () {
          var attrVal = nodes[i].getAttribute('v-click');
          return _this.$methods[attrVal].bind(_this.$data);  //bind是使data的作用域与method函数的作用域保持一致
        })();
      }

      if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) { // 如果有v-model属性,并且元素是INPUT或者TEXTAREA,我们监听它的input事件
        node.addEventListener('input', (function(key) {  
          var attrVal = node.getAttribute('v-model');
           //_this._binding['number']._directives = [一个Watcher实例]
           // 其中Watcher.prototype.update = function () {
           //    node['vaule'] = _this.$data['number'];  这就将node的值保持与number一致
           // }
          _this._binding[attrVal]._directives.push(new Watcher(  
            'input',
            node,
            _this,
            attrVal,
            'value'
          ))

          return function() {
            _this.$data[attrVal] =  nodes[key].value; // 使number 的值与 node的value保持一致,已经实现了双向绑定
          }
        })(i));
      } 

      if (node.hasAttribute('v-bind')) { // 如果有v-bind属性,我们只要使node的值及时更新为data中number的值即可
        var attrVal = node.getAttribute('v-bind');
        _this._binding[attrVal]._directives.push(new Watcher(
          'text',
          node,
          _this,
          attrVal,
          'innerHTML'
        ))
      }
    }
  }

至此,我们已经实现了一个简单vue的双向绑定功能,包括v-bind, v-model, v-click三个指令。效果如下图

附上全部代码,不到150行

<!DOCTYPE html>
<head>
  <title>myVue</title>
</head>
<style>
  #app {
    text-align: center;
  }
</style>
<body>
  <div id="app">
    <form>
      <input type="text"  v-model="number">
      <button type="button" v-click="increment">增加</button>
    </form>
    <h3 v-bind="number"></h3>
  </div>
</body>

<script>
  function myVue(options) {
    this._init(options);
  }

  myVue.prototype._init = function (options) {
    this.$options = options;
    this.$el = document.querySelector(options.el);
    this.$data = options.data;
    this.$methods = options.methods;

    this._binding = {};
    this._obverse(this.$data);
    this._complie(this.$el);
  }
 
  myVue.prototype._obverse = function (obj) {
    var value;
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        this._binding[key] = {                                                                                                                                                          
          _directives: []
        };
        value = obj[key];
        if (typeof value === 'object') {
          this._obverse(value);
        }
        var binding = this._binding[key];
        Object.defineProperty(this.$data, key, {
          enumerable: true,
          configurable: true,
          get: function () {
            console.log(`获取${value}`);
            return value;
          },
          set: function (newVal) {
            console.log(`更新${newVal}`);
            if (value !== newVal) {
              value = newVal;
              binding._directives.forEach(function (item) {
                item.update();
              })
            }
          }
        })
      }
    }
  }

  myVue.prototype._complie = function (root) {
    var _this = this;
    var nodes = root.children;
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      if (node.children.length) {
        this._complie(node);
      }

      if (node.hasAttribute('v-click')) {
        node.onclick = (function () {
          var attrVal = nodes[i].getAttribute('v-click');
          return _this.$methods[attrVal].bind(_this.$data);
        })();
      }

      if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {
        node.addEventListener('input', (function(key) {
          var attrVal = node.getAttribute('v-model');
          _this._binding[attrVal]._directives.push(new Watcher(
            'input',
            node,
            _this,
            attrVal,
            'value'
          ))

          return function() {
            _this.$data[attrVal] =  nodes[key].value;
          }
        })(i));
      } 

      if (node.hasAttribute('v-bind')) {
        var attrVal = node.getAttribute('v-bind');
        _this._binding[attrVal]._directives.push(new Watcher(
          'text',
          node,
          _this,
          attrVal,
          'innerHTML'
        ))
      }
    }
  }

  function Watcher(name, el, vm, exp, attr) {
    this.name = name;         //指令名称,例如文本节点,该值设为"text"
    this.el = el;             //指令对应的DOM元素
    this.vm = vm;             //指令所属myVue实例
    this.exp = exp;           //指令对应的值,本例如"number"
    this.attr = attr;         //绑定的属性值,本例为"innerHTML"

    this.update();
  }

  Watcher.prototype.update = function () {
    this.el[this.attr] = this.vm.$data[this.exp];
  }

  window.onload = function() {
    var app = new myVue({
      el:'#app',
      data: {
        number: 0
      },
      methods: {
        increment: function() {
          this.number ++;
        },
      }
    })
  }
</script>

如果喜欢请关注我的Github,给个Star吧,我会定期分享一些JS中的知识,^_^

查看原文

Abcat 收藏了文章 · 2018-04-09

利用angular4和nodejs-express构建一个简单的网站(一)——构建前后端开发环境

学习了一段时间的angular4知识,结合以前自学的nodejs-express后端框架知识,做了一个利用angular4作为前端,node-express作为后端服务器的网站。这个网站的功能很简单,主要是为了体验一下angular4的各项功能。
现在这个网站做的差不多了,拿来和大家分享一下。有不足之处,希望大家多提意见,也希望能给大家的开发提供一些帮助。
话不多说,开始介绍我的网站。(特此声明:本人非专业人士,只是个人爱好,不足之处还请大家多多原谅)。
这个网站是一个类似于通讯录的网站,网站逻辑比较简单,在这里简单画了一张网站运行逻辑图:

clipboard.png
好了,开始吧!
我使用的是windows操作系统。所以,以下操作全部是在windows系统下进行的。

先从构建应用程序开始吧

  • 构建前端应用程序

在前端我使用的是angular-cli构建前端开发环境,angular-cli的好处就在于集成了开发angular前端应用的一切工具和依赖,还集成了webpack打包工具,使用angular-cli构建完应用,对于我们来说,基本上就剩下写代码了。

1、安装angular-cli。

你的电脑上首先需要安装node.js,可以从node.js官网下载(官网下载地址:https://nodejs.org/en/),也可以从node.js中文网下载(node.js中文网地址:http://nodejs.cn/),我用的是windows系统,下载后直接双加安装就可以了。安装好node.js后,在命令提示符下输入:

npm install -g @angular/cli

回车后就会自动安装好angular-cli的最新版本,如果你的网络环境和我的一样,处处受限的话,我建议你先安装cnpm后,利用cnpm安装angular-cli。
安装cnpm,请在命令提示符下输入:

npm install -g cnpm

回车就OK了。之后将安装angular-cli语句改为

cnpm install -g @angular/cli

2、用angular-cli构建angular4应用

用angular-cli构建angular4应用非常简单,你只需在要构建应用的目录中按住shift+鼠标右键,选择“在此处打开命令窗口”,在打开的命令窗口输入:

ng new <projectname>

我的应用名称设置为front,比较简单,大家可以在<projectname>处填入自己的应用名称,回车后,会在你选择的目录下新建一个以“projectname”命名的应用(在应用构建进行到下载安装依赖包的时候,由于网络的原因,可能会产生错误。你可以在命令行模式下进到应用目录中,运行cnpm install,应该就能够安装好所有依赖)。

  • 构建后端应用程序

1、安装express应用生成器,通过应用生成器工具 express 可以快速创建一个应用的骨架在命令行输入:

npm install express-generator -g

2、利用express应用生成器快速生成应用:
在要构建应用的目录下输入:

express <appname>

(appname是你的express应用名称,我的直接就用了server),命令执行完毕后,进入你的appname目录,执行一下npm install或cnpm install,安装好依赖后就能使用了。

好了,基本的前端和后端程序已经构建完成了,下面需要对前端和后端环境进行一下配置。

查看原文

Abcat 收藏了文章 · 2018-04-09

chrome扩展应用开发快速科普

概述

本文通过对chrome插件的各个部分进行快速的介绍,从而让大家了解插件各个部分的关系,并且知道如何将其进行组装成一个完整的chrome插件。

由于chrome官方文档中对于如何从零开发一个chrome扩展应用没有一套完整的流程,同时官方的API文档对于初学者也不是那么友好,因此本文将通过一个初学者的视角来讲解如何从零开始快速了解和开发一个chrome插件。

本文的目标群体:已经了解或使用过chrome扩展应用,但是自己不知道如何开发一个chrome扩展应用的工程师。如果有具体的chrome扩展应用开发经验的同学,本篇文章可能太过简单,并不适合你。

本文的主要内容如下:

  • chrome扩展应用模块功能介绍
  • chrome扩展应用模块开发介绍

本文的内容不包括chrome扩展应用开发时提供的各个API功能详解,有需求的同学可以自行查看官方API文档

chrome扩展应用模块功能介绍

chrome扩展应用由很多部分组成,其中主要模块为:

  • Manifest File
  • Background Pages
  • Content Script
  • Options

为了避免由于翻译原因导致的问题,因此在下文中对相关模块的称呼一律采用上面的英文。下面,我们先简单来了解下这些模块具体是什么作用。

Background Pages

A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.

从官方的介绍我们可以知道,Background Pages的作用就是在浏览器运行时,会长时间执行的脚本。只要浏览器处于打开状态,在Background Pages中的脚本就会在后台执行。

Content Script

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

从上面官方的介绍我们可以知道,Content Script其实就是我们需要写的将会在我们希望的目标页面中执行的脚本文件。每次目标页面刷新时,这部分脚本也会重新加载执行。

Options

To allow users to customize the behavior of your extension, you may wish to provide an options page.

从官方的介绍我们可以了解,Options部分就是我们对于扩展的管理功能。我们能够通过一个模块来对chrome扩展应用的设置和数据进行处理。

chrome扩展应用模块开发介绍

首先,让我们先确定我们插件需要完成的一个功能,这样我们就能够有一个目标示例来进行介绍。

以我自己开发的表情插件为例,它必须具备以下几项功能:

  • 能够收集任何网页的图片作为表情
  • 能够在插件中管理已有表情
  • 能够在特定页面中将表情发送出去

我们将上面的功能抽象一下,就能够得到如下的结果:

  • 能够收集保存任何网页的图片作为表情(长时间执行脚本监听用户操作)
  • 能够在特定页面中将保存的表情发送出去(在目标页面中使用脚本与页面进行交互)
  • 能够在插件中管理已有表情(插件管理相关功能)

因此,需要完成上述功能,我们就需要用到上面我们提到的功能模块。下面,让我们按照模块来看下,我们应该如何实现这些功能。

配置文件(Manifest File)

首先,在进行具体的功能开发时,我们需要来看下我们的项目配置文件。这个配置文件在整个chrome扩展应用中非常重要,包含了项目的属性、配置、权限和资源信息。

{
  "manifest_version": 2,
  "name": "大象表情收藏",
  "description": "大象表情收藏(非官方)",
  "version": "4.15.1",
  "default_locale": "zh_CN",
  "icons": {
    "16": "img/icon16.png",
    "48": "img/icon48.png",
    "128": "img/icon128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "permissions": [
    "<all_urls>",
    "storage",
    "contextMenus"
  ],
  "content_scripts": [
    {
      "css": [
        "js/main.css"
      ],
      "js": [
        "js/favor.js"
      ],
      "matches": [
        "*://x.sankuai.com/*"
      ],
      "run_at": "document_end"
    }
  ],
  "options_page": "options.html",
  "web_accessible_resources": [
    "img/favorite.png",
    "img/left.svg",
    "img/right.svg",
    "img/icon128.png",
    "img/plane.svg",
    "options.html"
  ]
}

这是我开发的大象表情插件的manifest配置文件,我们通过这个配置文件来看下相关的属性字段。

属性名称属性含义备注
manifest_versionmanifest文件版本
name项目名称发布到商店时的名称。
description项目简介发布到商店时的简介。
version项目版本发布到商店时需要每次递增。
default_locale默认的locale目录具体见此处
icons扩展应用图标需要提供16x16,48x48,128x128三种尺寸。
backgroundBackground Pages文件
permissions扩展应用所需权限权限列表见此处。申请权限后,可以使用chrome对象来进行访问该权限提供的API接口。我所开发的扩展应用主要是使用到了右键菜单和存储权限
content_scriptsContent Script文件matches字段表示Content Script文件生效的域名
options_pageOptions文件
web_accessible_resources扩展需要访问的本地资源只用列举的资源才能够在扩展中通过相对路径方式访问。

根据上面的实例文件和具体的属性介绍,相信大家对manifest文件有了一个具体的了解。下面,我们来具体介绍下我们需要使用的各个功能模块。

收集网页的图片(Background Pages)

需要收集各个网页的图片,我们需要一个后台常驻的脚本来满足我们的需求。因此,我们需要使用Background Pages

根据前一节的manifest文件,我们指定了background.js文件作为我们的后台常驻脚本,下面让我们来看下这个文件的部分示例内容。

// 注册一个右键菜单选项
chrome.runtime.onInstalled.addListener(function () {
    chrome.contextMenus.create({
        'id': 'F577D6742FF1A1AB5946A8E5281D5C5D',
        'title': '添加到表情收藏',
        'contexts': ['image']
    });
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
    var src = info['srcUrl'];
    // 获取之前存储的表情
    chrome.storage.local.get(['newFavorList'], function (items) {
        var newFavorList = items['newFavorList'] || [];
        newFavorList.push(src);
        
        // 存储所有表情
        chrome.storage.local.set({
            'newFavorList': newFavorList
        });
    });
});

通过上面的例子,我们可以实现我们的目标:当用户在任意网页上面右键一张图片时,右键菜单中都会增加一个选项——添加到表情收藏。点击这个选项,我们就能够将这张图片存储到我们的扩展应用提供的存储模块中。

其中,runtimecontextMenus是chrome提供的原生API,相关API接口可以见此处

具体效果如下:

clipboard.png

发送保存的表情(Content Script)

当我们需要发送我们已经保存的表情时,我们就需要跟页面进行部分功能交互了。这个时候,我们需要使用到Content Script

当我们使用Content Script时,我们的执行上下文将会是整个页面。因此,我们可以使用JavaScript来操纵DOM节点,和页面原有的JavaScript进行交互。

下面,我们通过jQuery来页面注入表情面板,同时使用PostMessage来与原有页面进行数据通信。让我们来看下favor.js文件的部分示例代码:

chrome.storage.local.get(['newFavorList'], (items) => {
    let favorBox = $('#favorbox');
    favorBox.empty();
    newFavorList = items.newFavorList;


    let emotionPanel = $('<div>', {
        class: 'smiley-emotion-panel'
    });

    newFavorList.forEach((element) => {
        if (element && element.url) {
            emotionPanel.append($('<span>', {
                class: 'icon icon-smiley-emotions',
                'click': postFavor
            }).append($('<img>', {
                'width': '100%',
                'height': '100%',
                src: element.url
            })));
        }
    });

    favorBox.append(emotionPanel);
});

function postFavor(e) {
    let src = event.target.getAttribute('src');
    
    window.postMessage({
        type: 'sendCustomEmotion',
        text: src
    }, '*');
}

通过上面的示例代码,我们可以知道:从Storage中将表情数据取出后,立即渲染到页面中。当渲染的表情被点击时,我们就通过PostMessage将数据按照约定的格式发送即可。

在具体项目中的使用如下图所示:

clipboard.png

这样,我们就解决了在特定的网页与页面的代码进行交互的功能。接下来让我们来看下我们的“设置”页面应该怎么开发。

管理已有表情(Options)

通过Options,我们能够给chrome扩展应用开发一个“设置”页面。当我们指定options_page字段后,它的值就是我们的“设置”页面。

开发一个管理已有表情的options页面,其实就是一个带有特殊API接口的网页。我们仍然能够通过chrome对象来访问chrome提供的已经申请过权限的API接口。

首先,我们将我们存储在Storage中的图片表情数据渲染出来,然后提供相关的操作函数。options.js部分示例代码如下:

$scope.remove = function (obj) {
    var result = [];

    $scope.favors.forEach(function (element) {
        if (element.url !== obj.url) {
            result.push(element);
        }
    });
    $scope.favors = result;
    chrome.storage.local.set({
        'newFavorList': $scope.favors
    });
};

如果我们需要在“设置”页面删除后,Content Script页面立即响应应该怎么做呢?我们只需要在Content Script中增加Storage监听事件即可。具体代码示例如下:

chrome.storage.onChanged.addListener((changes) => {
    let newFavorList = changes['newFavorList'];
    
    renderNewValue(newFavorList.newValue);
});

通过在OptionsContent Script增加相关代码,我们就能够完成管理已有表情的功能。具体展示效果如下:

总结

我们通过一个简单的表情插件的例子来快速的介绍了chrome扩展应用的各个模块的功能和开发方法。通过这篇文章大家应该知道了chrome扩展应用各个模块的作用和开发的方法。

如果大家想对chrome扩展应用有一个更加深入的了解,那么建议自己动手开发相关的功能。这样才能够对chrome扩展应用的相关逻辑有一个更加清楚的认识。

附录中提供了部分学习相关的文档,有兴趣的同学可以自行阅读。

附录

查看原文

Abcat 发布了文章 · 2018-04-09

webpack4升级完全指南

webpack4官方已经于近日升级到了V4.5的稳定版本,对应的一些必备插件(webpack-contrib)也陆续完成了更新支持,笔者在第一时间完成了项目由V3到V4的迁移,在此记录一下升级过程中遇到的种种问题和对应的解决手段,方便后续入坑者及时查阅,减少重复工作,如果觉得本篇文章对你有帮助,欢迎点赞😁

一、Node版本依赖重新调整

官方不再支持node4以下的版本,依赖node的环境版本>=6.11.5,当然考虑到最佳的es6特性实现,建议node版本可以升级到V8.9.4或以上版本,具体更新说明部分可以见:webpack4更新日志

"engines": {
    "node": ">=6.11.5" // >=8.9.4 (recommendation version) 
  },

二、用更加快捷的mode模式来优化配置文件

webpack4中提供的mode有两个值:development和production,默认值是 production。mode是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案,提供对应的构建参数项的默认开启或关闭,降低配置成本。

开启方式 1:直接在启动命令后加入参数

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

开启方式 2:可以在配置文件中加入一个mode属性:

module.exports = {
  mode: 'production' // development
};

development模式下,将侧重于功能调试和优化开发体验,包含如下内容:

  1. 浏览器调试工具
  2. 开发阶段的详细错误日志和提示
  3. 快速和优化的增量构建机制

production模式下,将侧重于模块体积优化和线上部署,包含如下内容:

  1. 开启所有的优化代码
  2. 更小的bundle大小
  3. 去除掉只在开发阶段运行的代码
  4. Scope hoisting和Tree-shaking
  5. 自动启用uglifyjs对代码进行压缩

webpack一直以来最饱受诟病的就是其配置门槛极高,配置内容复杂而繁琐,容易让人从入门到放弃,而它的后起之秀如rollup,parcel等均在配置流程上做了极大的优化,做到开箱即用,webpack在V4中应该也从中借鉴了不少经验来提升自身的配置效率,详见内容可以参考这篇文章《webpack 4: mode and optimization》

三、再见commonchunk,你好optimization

从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分,下面的代码即是optimize.splitChunks 中的一些配置参考,

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: true, // [new UglifyJsPlugin({...})]
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  }
}

从中我们不难发现,其主要变化有如下几个方面:

  1. commonchunk配置项被彻底去掉,之前需要通过配置两次new webpack.optimize.CommonsChunkPlugin来分别获取vendor和manifest的通用chunk方式已经做了整合, 直接在optimization中配置runtimeChunk和splitChunks即可 ,提取功能也更为强大,具体配置见:splitChunks
  2. runtimeChunk可以配置成true,single或者对象,用自动计算当前构建的一些基础chunk信息,类似之前版本中的manifest信息获取方式。
  3. webpack.optimize.UglifyJsPlugin现在也不需要了,只需要使用optimization.minimize为true就行,production mode下面自动为true,当然如果想使用第三方的压缩插件也可以在optimization.minimizer的数组列表中进行配置

四、ExtractTextWebpackPlugin调整,建议选用新的CSS文件提取插件mini-css-extract-plugin

由于webpack4以后对css模块支持的逐步完善和commonchunk插件的移除,在处理css文件提取的计算方式上也做了些调整,之前我们首选使用的extract-text-webpack-plugin也完成了其历史使命,将让位于mini-css-extract-plugin

基本配置如下:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // replace ExtractTextPlugin.extract({..})
          "css-loader"
        ]
      }
    ]
  }
}

生产环境下的配置优化:

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true 
      }),
      new OptimizeCSSAssetsPlugin({})  // use OptimizeCSSAssetsPlugin
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/app.[name].css',
      chunkFilename: 'css/app.[contenthash:12].css'  // use contenthash *
    })
  ]
  ....
}

将多个css chunk合并成一个css文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {            
          name: 'styles',
          test: /\.scss|css$/,
          chunks: 'all',    // merge all the css chunk to one file
          enforce: true
        }
      }
    }
  }
}

五、其他调整项备忘

  1. NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors(默认情况下处于生产模式)
  2. ModuleConcatenationPlugin- > optimization.concatenateModules(默认情况下处于生产模式)
  3. NamedModulesPlugin- > optimization.namedModules(在开发模式下默认开启)
  4. webpack命令优化 -> 发布了独立的 webpack-cli 命令行工具包
  5. webpack-dev-server -> 建议升级到最新版本
  6. html-webpack-plugin -> 建议升级到的最新版本
  7. file-loader -> 建议升级到最新版本
  8. url-loader -> 建议升级到最新版本

六、参考工程

webpack4配置工程实例

七、参阅资料

  1. webpack4
  2. webpack4发布概览
  3. webpack 4: mode and optimization
  4. webpack4新特性介绍
  5. webpack4升级指北
  6. webpack4升级指南以及从webpack3.x迁移
查看原文

赞 238 收藏 321 评论 18

认证与成就

  • 获得 477 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-11-26
个人主页被 3.1k 人浏览