From 3d97313732360f712ae833618566d0337ddc5eb4 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 1 Jun 2019 19:04:38 +0800 Subject: [PATCH] update --- .../15-数组的四个基本方法&数组的遍历.md | 2 +- 03-JavaScript基础/18-内置对象：Date.md | 6 + 07-HTML5和CSS3/04-CSS3属性详解（一）.md | 4 +- 14-前端面试/05-01.创建对象和原型链.md | 13 +- 17-前端综合/01-2019年Web前端入门自学路线.md | 8 + 17-前端综合/02-2019年Web前端最新导航.md | 4 +- 17-前端综合/2019年-前端日记.md | 171 +++++++++++++++++- 7 files changed, 195 insertions(+), 13 deletions(-) diff --git a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md index 5c7eae3..4680c94 100644 --- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md +++ b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md @@ -17,7 +17,7 @@ |:-------------|:-------------|:-------------| | for循环 | 这个大家都懂| | | forEach()|和 for循环类似，但需要兼容IE8以上 |forEach() 没有返回值。也就是说，它的返回值是 undefined| -| filter()| 返回结果是true的项，将组成新的数组| 可以起到过滤的作用| +| filter()| 返回结果是true的项，将组成新的数组。可以起到过滤的作用| 不会改变原数组| | map()| 对原数组中的每一项进行加工 | | | every()| 如果有一项返回false，则停止遍历 | 意思是，要求每一项都返回true，最终的结果才返回true | | some()| 只要有一项返回true，则停止遍历 | | diff --git a/03-JavaScript基础/18-内置对象：Date.md b/03-JavaScript基础/18-内置对象：Date.md index 0d403a8..386c7e9 100644 --- a/03-JavaScript基础/18-内置对象：Date.md +++ b/03-JavaScript基础/18-内置对象：Date.md @@ -131,6 +131,12 @@ Date对象 还有如下方法： 我们可以在业务代码的前面定义 `时间戳1`，在业务代码的后面定义 `时间戳2`。把这两个时间戳相减，就能得出业务代码的执行时间。 +### format() + +将时间对象转换为指定格式。 + +参考链接： + ## 练习 ### 举例1：模拟日历 diff --git a/07-HTML5和CSS3/04-CSS3属性详解（一）.md b/07-HTML5和CSS3/04-CSS3属性详解（一）.md index ddc6bcd..a29f8d8 100644 --- a/07-HTML5和CSS3/04-CSS3属性详解（一）.md +++ b/07-HTML5和CSS3/04-CSS3属性详解（一）.md @@ -279,7 +279,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽 /*画圆形的方式一*/ .box:nth-child(1) { - border-radius: 100px; + border-radius: 50px; } /*画圆形的方式二*/ @@ -288,7 +288,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽 } .box:nth-child(3) { - border-radius: 200px 0 0 0; + border-radius: 100px 0 0 0; } .box:nth-child(4) { diff --git a/14-前端面试/05-01.创建对象和原型链.md b/14-前端面试/05-01.创建对象和原型链.md index 92bc1df..9a0e147 100644 --- a/14-前端面试/05-01.创建对象和原型链.md +++ b/14-前端面试/05-01.创建对象和原型链.md @@ -30,8 +30,8 @@ ### 方式一：字面量 ```javascript - var obj11 = {name: 'smyh'}; - var obj12 = new Object(name: `smyh`); //内置对象（内置的构造函数） + var obj11 = {name: 'qianguyihao'}; + var obj12 = new Object(name: 'qianguyihao'); //内置对象（内置的构造函数） ``` 上面的两种写法，效果是一样的。因为，第一种写法，`obj11`会指向`Object`。 @@ -87,7 +87,7 @@ PS：任何一个函数，如果在前面加了new，那就是构造函数。 this.name = name; } - var fn = new Foo('smyhvae'); + var foo = new Foo('smyhvae'); ``` 上面的代码中，`Foo.prototype.constructor === Foo`的结果是`true`： @@ -95,7 +95,7 @@ PS：任何一个函数，如果在前面加了new，那就是构造函数。 ![](http://img.smyhvae.com/20180306_2120.png) -- 4、实例的`__proto__`指向原型。也就是说，`Foo.__proto__ === M.prototype`。 +- 4、实例的`__proto__`指向原型。也就是说，`foo.__proto__ === Foo.prototype`。 声明：所有的**引用类型**（数组、对象、函数）都有`__proto__`这个属性。 @@ -137,7 +137,7 @@ Object是原型链的顶端。 比如说： -- `foo instance of Foo`的结果为true，因为`foo.__proto__ === M.prototype`为true。 +- `foo instance of Foo`的结果为true，因为`foo.__proto__ === Foo.prototype`为true。 - **`foo instance of Objecet`的结果也为true**，因为`Foo.prototype.__proto__ === Object.prototype`为true。 @@ -150,7 +150,7 @@ Object是原型链的顶端。 分析：这就要用到原型的`constructor`属性了。 -- `foo.__proto__.constructor === M`的结果为true，但是 `foo.__proto__.constructor === Object`的结果为false。 +- `foo.__proto__.constructor === Foo`的结果为true，但是 `foo.__proto__.constructor === Object`的结果为false。 所以，用 consturctor判断就比用 instanceof判断，更为严谨。 @@ -176,7 +176,6 @@ Object是原型链的顶端。 - ```javascript diff --git a/17-前端综合/01-2019年Web前端入门自学路线.md b/17-前端综合/01-2019年Web前端入门自学路线.md index 13d39e0..f54db5c 100644 --- a/17-前端综合/01-2019年Web前端入门自学路线.md +++ b/17-前端综合/01-2019年Web前端入门自学路线.md @@ -42,6 +42,14 @@ 非常详细和贴心，你值得star。 +## 学习交流 + +我建了一个“前端学习”的微信交流群，目前来看，学习氛围很不错。加我微信（bootmei），拉你进群： + +- 进群暗号：前端学习。 + +- 进群要求：少提问、少闲聊、多分享（长期潜水的，就不必了）。 + ## 推荐的技术博客 - [阮一峰](http://www.ruanyifeng.com/blog/) diff --git a/17-前端综合/02-2019年Web前端最新导航.md b/17-前端综合/02-2019年Web前端最新导航.md index 3e30474..ebab873 100644 --- a/17-前端综合/02-2019年Web前端最新导航.md +++ b/17-前端综合/02-2019年Web前端最新导航.md @@ -56,7 +56,9 @@ - GitHub 全球排名： -- GitHub trending（官网推荐—）： +这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。 + +- GitHub trending（官网推荐）： 你的项目要是能上 GitHub trending，绝对火得一塌糊涂。 diff --git a/17-前端综合/2019年-前端日记.md b/17-前端综合/2019年-前端日记.md index 975966a..b2b3632 100644 --- a/17-前端综合/2019年-前端日记.md +++ b/17-前端综合/2019年-前端日记.md @@ -66,11 +66,178 @@ if (JSON.stringify(myObj) !== '{}') +### 2019-05-16 + +- 数组随机打乱顺序： + +最佳的打乱算法是Fisher-Yates算法。 + + +### 2019-05-16 + +Vue的全局变量空间：`this.$root.data`，我们可以在这里面存放数据。比如`this.$root.data.skuIdList`。 + +### 2019-05-17 + +- css 动画实现闪烁效果： + + +### 2019-05-20 + +**数组赋值的正确写法**： + +```javascript +this.todayList.splice(0, 0, ...dataList); +``` + +**对象赋值的正确写法**： + +```javascript +Object.assign(this.dataObj, dataObj); +``` + +上方代码中，是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同，会被覆盖。 + + +### 2019-05-20-css3动画水平/镜像翻转 + +参考链接1： + +代码实现举例： + +```html + + + + + + + + +
+ + + +``` + + +参考链接2： + +代码实现：（立体感更强一点） + + ```html + + + + + + + + + +
+
+ +
+ + + + ``` + + +### 2019-05-22-判断字符串是否为纯中文 + +参考链接：https://blog.csdn.net/wozaixiaoximen/article/details/48340061 + + +### 2019-05-24 + +- VScode代码格式化后不符合ESLint风格问题处理： + + +### 2019-05-27-针对 text 文本的属性举例 + +```css + &_promote { + margin-left: 10px; + display: inline-block; + height: 20px; + padding: 4px; + line-height: 20px; + background: #fff0f0; + border-radius: 4px; + font-size: 20px; + color: #ff4142; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: middle; + } + +``` + +尤其要研究一下 `vertical-align: middle;`这个属性。 + + +### 2019-05-30 + +`arr1.push(arr2)` 和