Fork me on GitHub

开发自己的js plugin

工欲善其事，必先利其器。首先去找适合写插件的项目包管理工具。对比了webpack,rollup,gulp,parcel

经过一通对比就选中了 rollup，具体请自行了解。简单说一下我们熟知的vue,react,taro-ui 等 就是使用的 rolluojs 打包的

自己写了一个很简单的插件上传发布到npm。具体步骤如下：

more >>

展开全文 >>

打包工具对比

webpack、gulp、rollup 使用对比和适用场景

webpack

打包工具，根据我们的资源依赖树，分不同类型打包成静态资源，支持热更新，代码模块切分，three-shaking、异步加载等、

特性：

不同资源的模块打包 热更新 代码分割 静态资源压缩 异步加载 three-shaking

适用场景

应用程序打包

rollup

Rollup 是一个模块打包工具，可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式:

  • IIFE: 自执行函数，可通过 <script> 标签加载
  • AMD: 通过 RequireJS 加载
  • CommonJS: Node 默认的模块规范，可通过 Webpack 加载
  • UMD: 兼容 IIFE, AMD, CJS 三种模块规范
  • ESM: ES2015 Module 规范，可用 Webpack, Rollup 加载 -

特性：

支持动态导入。

支持 tree shaking。仅加载模块里用得到的函数以减小文件大小。

Scope Hoisting。 rollup 可以将所有小文件生成到一个大文件中，所有代码都在同一个函数作用域里:， 不会像 Webpack 那样用很多函数来包装模块。

没有其他冗余代码，执行很快。除了必要的 cjs, umd 头外，bundle 代码基本和源码差不多，也没有奇怪的 webpack_require, Object.defineProperty 之类的东西，

缺点：

不支持热更新功能；对于 commonjs 模块，需要额外的插件将其转化为 es2015 供 rollup 处理；无法进行公共代码拆分。 运行时态的动态导入 dynamic imports at runtime.

rollup 通过插件来编译处理各类静态资源：

  • rollup-plugin-typescript2
  • rollup-plugin-babel
  • rollup-plugin-uglify
  • rollup-plugin-commonjs
  • rollup-plugin-postcss
  • rollup-plugin-img
  • rollup-plugin-json

适用场景：

由纯 js 开发的第三方库； 需要生成单一的 umd 文件的场景

gulp

自动化构建工具，把项目工作抽象成自动化任务 用 gulp 构建自动化工作流，处理项目中的资源，基于流式操作。

特性

gulp 文档简单，学习成本低，使用简单；对大量源文件可以进行流式处理，借助插件，可以对文件类型进行多种操作处理。

适用场景

静态资源密集操作型场景，主要用于 css、图片等静态资源的处理操作。 文件处理：

gulp 通过各种中间件处理静态资源的编译：

  • gulp-load-plugins：自动加载 package.json 中的 gulp 插件
  • gulp-rename： 重命名
  • gulp-uglify：文件压缩
  • gulp-concat：文件合并
  • gulp-less：编译 less
  • gulp-sass：编译 sass
  • gulp-clean-css：压缩 CSS 文件
  • gulp-htmlmin：压缩 HTML 文件
  • gulp-babel: 使用 babel 编译 JS 文件
  • gulp-jshint：jshint 检查
  • gulp-imagemin：压缩 jpg、png、gif 等图片
  • gulp-livereload：当代码变化时，它可以帮我们自动刷新页面

展开全文 >>

浏览器知识

在浏览器中找到拓展程序位置

地址栏输入chrome:version 回车，用资源管理器打开”个人资料路径”栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径

浏览器本地跨域解决方案

参考文档

方法1、cmd进入到chrome安装目录，执行如下命令会打开一个不限制跨域的浏览器窗口，关掉会失效

1
chrome.exe --disable-web-security --user-data-dir=C:\MyChromeUserFata

方法2、复制chrome快捷方式图标，将复制品改名后，右键点击【属性】，在已有字段后边加上这句话，–user-data-dir=“c:\ChromeDebug” –test-type –disable-web-security
划重点！！！ –user-data前边有个空格！！

展开全文 >>

springboot基础

配置容器

  • xml配置容器

    就是spring 的 xml文件中那样的写法

    1
    <bean id = "createStudent" class="com.xxx.Student"></bean>

  • javaConfig配置容器

    采用java类的方式来配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @Configuration // 表示当前类是作为配置文件使用
    public class SpringConfig {
        /*
        	创建方法，方法的返回值是对象。在方法上加上@Bean
        	方法的返回值对象就注入到容器中。方法名是默认的Bean id
        */
        @Bean
        public Student createStudent() {
            Student stu = new Student();
            stu.setName("张三");
            return stu;
        }
        
    }

    把XML文件住的的Bean导入到容器

    1
    2
    3
    4
    5
    @Configuration
    @ImportResource("classpath:applicationContext.xml")
    public class SpringConfig {
        
    }

    引入外部属性配置文件

    1
    2
    3
    4
    5
    @Configuration
    @PropertySource("classpath:comfig.properties")
    public class SpringConfig {
        
    }

    扫描组件注解

1
2
3
4
5
@Configuration
@ComponentScan(basePackage="com.xxx.service")
public class SpringConfig {
    
}

spring boot

它是spring中的一个成员，可以简化Spring MVC的使用，他的核心还是IOC容器。

特点：

  1. 内嵌 tomcat，jetty，Undertow
  2. 提供起步依赖，简化配置
  3. 自动配置spring和第三方库
  4. 健康检查，统计，外部化配置
  5. 不同生成代码，不用使用xml做配置
more >>

展开全文 >>

拓展

扫描远程文件

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
    /**
     * 连接sftp服务器
     *
     * @param host     主机
     * @param port     端口
     * @param username 用户名
     * @param password 密码
     * @return
     */
    public static ChannelSftp connect(String host, int port, String username,String password) {
        ChannelSftp sftp = null;
        try {
            JSch jsch = new JSch();
            //jsch.getSession(username, host, port);
            Session sshSession = jsch.getSession(username, host, port);
            System.out.println("Session created.");
            sshSession.setPassword(password);
            Properties sshConfig = new Properties();
            sshConfig.put("StrictHostKeyChecking", "no");
            sshSession.setConfig(sshConfig);
            sshSession.connect();
            System.out.println("Session connected.");
            System.out.println("Opening Channel.");
            Channel channel = sshSession.openChannel("sftp");
            channel.connect();
            sftp = (ChannelSftp) channel;
            System.out.println("Connected to " + host + ".");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return sftp;
    }

    /**
     * 列出目录下的文件
     *
     * @param directory 要列出的目录
     * @param sftp
     * @return
     * @throws SftpException
     */
    public static Vector listFiles(String directory, ChannelSftp sftp) throws SftpException {
        return sftp.ls(directory);
    }

// 测试：

ChannelSftp sftp = connect(HOST, PORT, USER, PWD);

本地文件扫描

参考

more >>

展开全文 >>

redis 基础

非关系型数据库。

缓存数据分类：

  1. 实时同步数据：要求缓存中数据与DB中欧给一致

    如何保证一致？只要DB数据发送改变，清除缓存

  2. 阶段性同步：没必要与DB实时同步，大差不差就行

    如何实现？设置缓存数据得生存时长

more >>

展开全文 >>

spring基础

什么是OCP？

OCP是软件开发的七大开发原则：开闭原则

核心：其他6个原则的基础

OCP开闭原则核心是什么？

只要你在扩展功能的时候，没有修改以前写好的代码，那么就是符合OCP原则的，反之则违背了OCP原则

当系统功能拓展时，如果动了之前稳定的程序，修改了之前的程序。之前所有程序都需要测试，这是不想看到的

违背依赖倒置原则（DIP原则）

上依赖下就是违背：如：表示层依赖服务层，服务层依赖持久层

控制反转

一种编程思想。或设计模式

  • 不在程序中采用硬编码方式来 new 对象
  • 不在程序中采用硬编码方式来 维护对象关系

Spring框架

  • Spring框架实现了控制反转IoC这种思想
    • spring帮你new对象
    • spring帮你维护对象关系
  • Spring 时一个实现了IoC思想的容器
    • 依赖注入的两种方式（依赖注入时现实IoC的具体实现: XML解析+工厂模式+反射机制）
      • set 注入(执行set给属性赋值)
      • 构造方法 注入(执行构造方法给属性赋值)

image-20230217170739281

more >>

展开全文 >>

maven基础

项目管理器，可以帮我们做什么？

  • 管理jar 文件
  • 自动下载jar和他的文档源码
  • 管理jar直接的依赖，a.jar 依赖b.jar 他会自动下载b.jar
  • 帮你管理jar的版本
  • 帮你编译程序： java-> class
  • 帮你测试代码
  • 帮你打包，形成jar/war 文件
  • 帮你部署项目

核心概念

  1. POM

    把一个项目当作模型使用。控制maven构建项目的过程

  2. 约定的目录结构

    maven项目的目录和文件和位置都是规范的

  3. 依赖仓库

    管理项目可以使用的jar

  4. 仓库管理

    资源存放的位置

  5. 生命周期

  6. 插件和木比爱哦

  7. 继承

  8. 聚合

修改本机资源存放目录位置

修改maven的配置文件，maven的安装目录/conf/settings.xml

为啥要改？因为默认放在C盘

1
<localRepository>D://maven//localSpace</localRepository>
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。