babel按需加载插件的实现

2019-03-01

首先对插件的实现效果进行分析：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 以下形式的语法由于已经引入了整个module所以不需要作处理
import defaultExport from "module-name";
import * as name from "module-name";
import defaultExport, { export , [...] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

// 需要作处理的语法
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";

阅读全文

AngularJS Git Commit Message Conventions

2018-12-28

提交消息的格式:

1
2
3
4
5
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

阅读全文

浏览器缓存

2018-12-19

当浏览器发起一个请求时，浏览器会检测缓存文件是否存在，如果有缓存的话：

  1. 判断Cache-control与Expries
    通过Cache-control与Expries来判断缓存是否过期。

阅读全文

简记：日常使用的Git工作流

2018-11-29
  1. fork中央仓库到自己的账号
  2. clone fork的个人仓库到本地
  3. git remote add upstream https://github.com/maintainer/repo 添加远程，通常我们命名为upstream

阅读全文

项目优化：echarts与lodash的按需加载

2018-11-22

由于项目历史遗留, echarts与lodash都是全部打包到vendor里面的，但是显然我们并不需要全部的功能，希望改成按需加载的方式，记录下改造的过程。

首先是echarts：

最开始所有组件都是

1
import echarts from 'echarts'

阅读全文

JS与Android通信

2018-11-13

为了了解JS与Android之间是如何通信的，所以简单的撸了如下代码：

使用Android Studio初始化一个项目，项目主要文件如下

MainActivity.java:

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
47
48
49
50
51
52
package com.example.aurora.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final WebView webView = (WebView) findViewById(R.id.webview);

        // 点击button触发JS内定义的callJs方法
        Button button = (Button) findViewById(R.id.callJs);
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                webView.loadUrl(("javascript: callJs('Hello JS')"));
            }
        });

        // 设置webView可以执行JS
        webView.getSettings().setJavaScriptEnabled(true);
        //设置webView可以弹框
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message,final JsResult result){
                return super.onJsAlert(view,url,message,result);
            }
        });

        class JsObject {
            @JavascriptInterface
            // 定义sayHello方法
            public void sayHello(String msg) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
        }
        // 将Java对象注入JS上下文中，名称为"example"
        webView.addJavascriptInterface(new JsObject(), "example");
        webView.loadUrl("file:///android_asset/example.html");
    }
}

阅读全文

webpack使用import()来进行代码拆分

2018-11-01

查看webpack的分析报告的时候发现mockjs也被打包打到vendor里, 但是其实线上是并不需要这个库, 所以希望将其打成一个单独的chunk, 只在开发环境引用, import()就有这个作用。

最开始的写法:

1
process.env.NODE_ENV === 'development' &&  require('@/mock')

阅读全文

不用循环创建一个长为n各项都为m的数组 问题的引申

2018-09-15

原来面试遇到过这个题, 当时我的答案大概是

1
2
3
4
// 第一种
new Array(n).fill(m)
// 第二种
[...new Array(n)].map(ele => m)

阅读全文

实现一个清除console的babel插件

2018-08-08

本篇只讲babel插件的实现, js AST部分后面有时间再写

首先当然是新建一个文件夹啦, 名字我们叫 bar 好了

开始做准备工作:

安装babel, 略…

然后在根文件内新建一个.babelrc文件, 如果我们的插件名叫console-clear的话, .babelrc文件内容为:

阅读全文

运算符 in 与 hasOwnProperty 方法

2018-07-24

判断一个对象是否有某属性, 可以通过key in obj或者obj.hasOwnProperty(key)来判断, 那么它们有什么区别呐

Object.prototype.hasOwnProperty()只判断对象自身属性中是否具有指定的属性

阅读全文