# 特扬前端js学习

**Repository Path**: lmw6412036/js_algorithm_practice

## Basic Information

- **Project Name**: 特扬前端js学习
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-06-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 特扬前端js学习

### vue+es6/7高级
- es6部分概念理解，箭头函数，对象属性简写 [答案](#p11)
```hash
在vue单文件组件中,我们通常写的是生命周期钩子函数，和methods各种方法函数，常见写法如下：
demo1
export default {
    ...
    created:function(){
        //TODO
    },
    methods:{
        getData:function(){
            //TODO
        }   
    }
    ...
}

demo2
export default {
    ...
    created(){
        //TODO
    },
    methods:{
        getData(){
            //TODO
        }   
    }
    ...
}

有时候可以这样写：
demo3
export default {
    ...
    created:()=>{
        //TODO
    },
    methods:{
        getData:()=>{
            //TODO
        }   
    }
    ...
}

那么请问,demo1,demo2，demo3有什么区别？
```
<a name="p11">提示</a>
```bash
1.ES6中箭头函数的作用，this指向
2.ES6中对象属性的简写
```

## 前端综合技能学习
<a name="p22"></a>
- 浏览器缓存原理
```bash
请查阅相关资料，深入了解浏览器缓存
```




- 列举一下移动端h5适配方案，以及结合vue、webpack的具体实现方式
```bash
划重点
1. rem方案，vue结合webpack实现rem 
2. 手淘flexiable 
3. vw、vh，vue结合webpack实现vw
```
目前特扬前端已使用方案
1.rem方案+webpack相关loader
```hash
1).简单js计算
./index.ejs
/*程序rem初始化*/
var remUnit = 100;     // 在px2rem中预设rem的值 即 1rem = ? px
var designWid = 750;  // 设计稿宽度
var winWid = window.innerWidth;
var bl = winWid / designWid;
window.rem2px = (bl * remUnit);
document.querySelector('html').style.fontSize = (window.rem2px) + 'px';
2).webpack中配置相关loader
./build/utils.js
const px2remLoader = {
    loader: 'lmw-px2rem-loader',
    options: {
      remUnit: 100,
      exclude: "/*no px2rem file*/"
    }
  }


const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
```
2.目前试行方案 vw、vh方案
```hash
详情参考 如何在Vue项目中使用vw实现移动端适配 https://www.w3cplus.com/mobile/vw-layout-in-vue.html
```



### 算法学习
- 简单DOM操作-class的添加删除<a name="q32"></a>
```bash
曾经，jquery的dom操作给我们带来极大便利，例如
$("#id").addClass('class1');
$("#id").removeClass('class2');

现在我们使用vue也可以方便的对dom元素的class进行操作
<div :class='[{hover?index==i}]'></div>

那么，请你用原生js，不借助任何框架，实现addClass，removeClass操作
```

- npm包标准版本号自动更新算法实现
```angularjs
需求描述：npm 包标准版本号为1.0.0
let version =1.0.0;
version ==> 1.0.1
要求:实现方式可以是函数、类、对象等任何js允许的方式，
原则上不允许引入第三方库实现。
最终输出为标准CommonJS模块
```
```hash
核心思路1
1.0.0  ==> 根据“.”分割成数组 ==> [1,0,0] ==> 数组项操作 ==> [1,0,1] ==> 组合成字符串 1.0.1
涉及知识点js数组操作的相关方法


核心思路2
1.0.0  ==> 正则表达式匹配数字 ==>[1,0,0] ==> 数组项操作 ==> [1,0,1] ==> 组合成字符串 1.0.1
涉及知识点js正则表达式的相关方法


核心思路3
1.0.0  ==> 正则表达式直接匹配替换 ==> 1.0.1
涉及知识点 写一个优雅的正则表达式

其他方式欢迎留言补充
```