标签 js 下的文章

(暂定)

IMG_20200429_004104-01-03-01.png

简介

SPARKS by 兰兰想 version 0.7
体验地址:
https://blog.lanhaoo.club/new/

嗯, 这是我自己写的一款前端页面,(以及重写的接口) 现在并未开源, 在官方的基础上, 增加了以下新特性

界面

  1. 更好的文章排版 (包含代码高亮)
  2. 正确的搜索结果
  3. 正文&评论可放大图片, 文章可全屏视频
  4. 正文&评论可全屏代码
  5. 正文下可根据目录/标签显示相关文章

这些都能在上面的体验地址里面看到, 就不放截图了

管理界面

  1. 管理界面夜间主题
  2. 撰写文章时支持实时预览文章内容

2020-04-25 _2_.png

吐槽

所以这就是从 wordpress 转过来的结果, 不仅 SEO 过山车雪崩式滑到底部, 而且各种麻烦, 所以干脆自己写一个前端, 自己写的永远满足自己嘛...

前言

vue cli 打包好的dist目录中的文件, 默认是根目录的, 像这样: lanhaoo.club/index.html
现在想要将文件放到子目录,比如myApps, 想要的效果是这样: lanhaoo.club/myApps/index.html

Vue cli 3版本里的config build 的文件夹都没了

vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍)
vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是“0配置”
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化

修正assets文件的引用

  1. 在根目录下新建 vue.config.js文件, 在这里面我们写配置
  2. 去掉路由的 history 模式
  3. 把那些图片啊之类的资源文件(在 assets 文件夹下的)整顿好, 在配置里面写好别名, 然后修改引用

vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
}

将 vue 界面里的涉及到 assets 的链接都改下 例如:'../assets/xx.png' 改为 '@/assets/xx.png'

配置子文件夹路径

在 configureWebpack 上插入官方文档里提供的 publicPath 示例代码(baseUrl已弃用), 一个表达式, 检测是否是生产环境(还不错), 把子文件夹名换成你想要的, 然后重新 build 一遍,上传到对应目录,就OK了,整个 vue.config.js 文件类似下面

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/子文件夹名/'
    : '/',

    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'components': '@/components',
                'views': '@/views',
            }
        }
    },
}

参考:
https://cli.vuejs.org/zh/config/#publicpath
https://segmentfault.com/a/1190000016135314
https://segmentfault.com/a/1190000016101954

简单的面向对象:

<script>

    function Person() {
        this.realname="Person RealName";
    }

    function User(username,birthday,gender) {

        Person.apply(this,arguments);
        this.username=username;
        this.birthday=birthday;
        this.gender=gender;

    }
    User.prototype.getUsername=function () {
        return "name is :"+this.username;
    };

    function h() {
        User.prototype=new Person();
        let justmyvar=new User("小明",1573525293,1);
        let anothervar=new User("小红",1573525093,0);

        justmyvar.realname="张啸明";
        console.log(justmyvar.realname);
        console.log(anothervar.realname);

    }
</script>

参考:
Javascript 面向对象编程(一):封装
JavaScript面向对象简介

1. 问题描述:

输入 J (jewels) 代表珠宝, S (stone) 代表石头, 要从石头S里面挑选出J珠宝

示例:

Example 1:
输入: J = "aA", S = "aAAbbbb" 输出: 3
Example 2:
输入: J = "z", S = "ZZ"
输出: 0


其实就是算 S 中, J 所有字符的出现次数. 然后我的思路是....

2. 算法思路:

为了找到 S 中, J 每个字符的数量, 可以将每个 J 字符分割, 然后循环, 循环次数为分割后的数组, 比如example1, 的循环次数就是2, 而example 2的循环次数为1

循环体内, 先用indexOf 判定元素是否存在, 不存在就直接跳过循环,

存在就用正则表达式, 来进行匹配, 匹配到 count+= 匹配到的数量

最后返回 count 就可以了

3. 代码!

光说不练假把式, 这里是代码

/**
 * @param {string} J
 * @param {string} S
 * @return {number}
 */
var numJewelsInStones = function(J, S) {
    var tmp=J.split("");
    var count=0;
    
    for (var i=0;i<tmp.length;i++){
        if(S.indexOf(J[i])==-1){
            continue;
        }
        var Reg=new RegExp(tmp[i],'g');
        count+=S.match(Reg).length;
    }
    return count;
};

提交通过, https://leetcode.com/submissions/detail/246208595/

/**
@param {number[]} nums
@param {number} target
@return {number[]}
*/
var twoSum = function(nums, target) {
for(var i=0;i<nums.length;i++){
for(var j=i+1;j<nums.length;j++){
if(nums[i]+nums[j]==target){
return [i,j];
}
}
}
};

nums=[1,2,3,4] target=6 应该返回的结果为[1,3]

j=i+1保证计算不会重复,返回下标正确