like

like 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

正向积累

个人动态

like 赞了文章 · 1月21日

从一道面试题掌握ES6的综合运用(有彩蛋)

在面试的过程中,经常能看到候选人写熟练掌握或者精通ES6,那就拿一道题试一试你的掌握情况吧,题目其实非常简单,如下所示。

// 有以下数据结构
const data = [{
    key: 'name',
    value: '豆皮范er'
}, {
    key: 'age',
    value: 1,
}, {
    key: 'from',
    value: '数据平台'
}]
// 实现一个转换函数 processFn
// 根据对应的key,value生成对象
{
    name: '豆皮范er',
    age: 1,
    from: '数据平台'
}
const processFn = data => processData

// 要求尽可能的多用一些es6的新特性,尽可能的少去声明变量,减少副作用。

好多候选人一看题目,思路一下就有了,啪一下就写出来了,很快啊。
先看下实现的最多的版本

const processFn = data => {
    const processData = {};
    for (let i = 0; i < data.length; i++) {
        const key = data[i].key;
        const value = data[i].value;
        processData[key] = value;
    }
    return processData;
}

很标准的实现,不是吗,问这里面用到了哪些ES6的特性,可以看出,主要用到了三个,一个是箭头函数=>,一个是块级声明let,一个是常量声明const

这里可以在顺手问一个拓展的考点,如何实现一个真正的const,因为这里的const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动, 那如何实现一个真正只能只读的对象呢,下面给出答案。
const constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

继续上面的题,其实如果单独问ES6有哪些新特性,很多人都能答出来很多,但是一旦运用到真正的代码编写中,就还是使用回老一套,其实就这道题而言比如箭头函数解构赋值扩展运算符使用表达式作为对象的属性名, 等等这些ES6的特性都能运用其中,下面就把这些特性一一代入到这个题当中,来体验一下综合运用ES6的感觉吧。
首先,先加上解构赋值解构赋值可以很方便的从一个对象中取值,这里可以在取得数组中每一个对象的keyvalue时运用上。

const processFn = data => {
    const processData = {};
    for (let i = 0; i < data.length; i++) {
        const { key, value } = data[i];
        processData[key] = value;
    }
    return processData;
}

在这里还可以顺带的把for循环改成 for...of, for...of可以遍历一个迭代器(iterator), Array本质上就是一个迭代器,因为它实现了迭代器接口。

这里又可以拓展的去问一个问题,标准三连,什么是迭代器?javascript都有哪些迭代器?如何实现一个迭代器?这个大家下来后自行回答

还是先继续改造代码。把解构的过程放在for...of上,代码就变得更简洁了一些。

const processFn = data => {
    const processData = {};
    for (let { key, value } of data) {
        processData[key] = value;
    }
    return processData;
}

然后,可以加上扩展运算符了,对于一个对象来说,扩展运算符的作用是可以合并一个对象,在ES5的时代,也可以使用Object.assign。这两个方法其实都可以。但无论用哪个方法,都会遇到一个问题,属性是一个动态的变量,在ES5的时代,想把属性作为变量进行对象赋值,只能使用以下方式

const keyName = 'name';
const obj = {}
obj[keyName] = 'xxxx';

ES6允许我们使用字面量的形式来完成这个事情,只需要给属性表达式加上一个[]即可,现在组合使用扩展运算符对象属性表达式来优化一下代码吧。

const processFn = data => {
    const processData = {};
    for (let { key, value } of data) {
        Object.assign(processData, {[key] : value})
    }
    return processData;
}

或者

const processFn = data => {
    let processData = {};
    for (let { key, value } of data) {
        processData = {...processData, [key]: value}
    }
    return processData;
}

这样就成功的把这些ES6的特性综合的运用上了,现阶段总结一下用到的ES6特性吧,constlet箭头函数扩展运算符for...of, 解构赋值对象属性表达式。算下来有个了。
不过这还没有结束,题目中还有一个要求,尽可能的少去声明变量,减少副作用。除了函数声明所必须的声明const,剩下的还有两处显式声明,那最少可以把这种显式的声明减少到几个呢,答案实际上是0个,这时就需要去改动for循环了,因为for循环是肯定会有显示的const或者let声明的,for循环本身就是命令式的编程方式,如果使用的是声明式的方式,那就可能会把显式声明变成参数的隐式声明,可以进一步提高代码的可读性和简洁性,这一点其实卡住了很多候选人。
解决的思路其实可以转化为,如何把一个数组进行所谓的折叠(fold),就是把数组的多项合并成一项,这里其实涉及到的是一个ES5的数组函数,reduce,众所周知,对reduce的经典使用当然就是累加了。

[1,2,3].reduce((total, item) => total + item, 0)

其实以类比的思想,把对应的数字换成数组中的对象,把累加换成提取keyvalue,进行合并,那数组的合并就是一种变相的累加了。有了reduce,就可以更大的发挥ES6的结合性了。

const processFn = data => data.reduce((obj, {key, value}) => {
    return {...obj, [key]: value};
}, {})

最后的return其实也可以去掉,让代码可以在一行的空间就可以实现了,在箭头函数返回对象的时候加一个括号即可。

const data => data.reduce((obj, {key, value}) => ({...obj, [key]: value}), {})

至此,我们对这个题的改造就结束了,综合使用了ES6特性,以及减少了显式的声明。写出这样的代码,这道题的解答就可以毕业啦。

彩蛋时间

这就结束了吗,还没有,可以看出,ES6虽然很强大,但是要掌握它还是要学习各种特性,而且还要综合一些ES5的特性结合在一起才能发挥出最好的功效,有没有本身就和谐统一的形式来做这个事情呢,其实是有的,坐稳了,我们要加速了。进入到声明式的世界,打开函数式编程的大门吧。

说起函数式编程(Functional Program),其实也是一项法则,入门的话,你们只需要记住下面几个公理和几个概念就可以了。类比小说《三体》的黑暗森林法则就是这么解释的。

  • 函数是一等公民(function first),FP的世界只有函数
  • 函数自身都有可组合的特性(composition),但函数本身是纯净(pure)的

想要继续了解函数式编程,还有两个很重要的概念,柯里化(curry)和PointFree

针对JS函数式编程有一个很重要的工具库,对,它不是lodash`而是Ramda,使用Ramda`来做一下上面的题吧。

// 打开 http://ramda.cn/docs/ 在控制台粘贴下面代码

const data = [{
    key: 'name',
    value: '豆皮范er'
}, {
    key: 'age',
    value: 1,
}, {
    key: 'from',
    value: '数据平台'
}]
const processFn = R.reduce(
    R.useWith(R.merge, [
        R.identity,
        R.converge(R.objOf, [
            R.prop('key'),
            R.prop('value')
        ])
    ]), {})
    
console.log(processFn(data))

乍一看代码,我大意了啊,没看懂,就像面壁者罗辑的咒语一样晦涩难懂和不可理喻对吧,但在某种程度上,即使只从表面来看,它又充满了和谐简洁的美,拥有高度的秩序排列和统一性,而且完全符合上面的两条公理两个重要概念,如果大家对什么是函数式编程,它主要有那些概念,具体的应用场景有哪些感兴趣的话,我会另写一篇详细的讲一讲函数式编程

查看原文

赞 11 收藏 5 评论 2

like 赞了文章 · 1月21日

18个编写 JavaScript 好习惯!

作者:ivan.c
译者:前端小智
来源:medium
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

在我多年的编程生涯中,我会优先考虑编写代码的方式,不仅是为了让代码更简洁,还因为它有助于提高编码效率,使编写代码的速度更快。

写1000行代码和写300行代码是不一样的,这对我们正在做的程序或脚本有很大的帮助。编程时必须非常小心,因为在大型项目中,脏代码可能是一个严重的问题。

许多程序员批评 JS 语言没有像Java或c++那样的标准工作方式,但事实是JavaScript是目前使用的最好的语言之一,其中一些是FacebookNetflix。像React这样的库提高了前端性能,至于后端,nextJs用于提高速度,这些组合让当今的程序员抓狂。

ECMAScript v6(缩写为ES6或ES2015)是JavaScript自2015年6月以来一直遵循的标准。

通过学习以下技巧,我们能够改善编写代码的方式。 花点时间在控制台上练习,学习好。

开始吧~

1.常量使用const代替var

常量是永远不变的变量,这样声明变量可以确保它们永远不变。

/* 旧方法 */
var i = 1;

/* 正确方式 */
const i = 1;

2. 使用let替换变量,而不是var

let语句声明了一个具有块作用域的局部作用域变量

/* 不适当的*/
var myVal = 1;
for (var i; i < 10; i++){
  myVal = 1 + i;
}

/* 正确方式*/
let myVal = 1;
for (let i; i < 10; i++){
  myVal += i
}

3.声明对象

用快捷方式声明对象

/* 
  旧方法
  The Object() class makes an unnecessary function call
*/

const myObject = new Object();
/* 正确方式*/
const myObject = {};

5.连接字符串

/* 旧方法 */
const myStringToAdd = "world";
const myString = "hello " + myStringToAdd;


/* 正确方式*/
const myStringToAdd = "world";
const myString = `hello ${myStringToAdd}`;

6. 使用对象方法简写

/* 不适当 */
const customObject = {
  val: 1,
  addVal: function () {
   return customObject.val + 1;
  }
}

/* 正确方式*/
const customObject = {
  val: 1,
  addVal(){
    return customObject.val++
  }
}**加粗文字**

7.创建对象的值

/* 旧方法*/
const value = 1;
const myObject = {
  value: value
}
/* 正确方式*/
const value = 1;
const myObject = {
  value
}

8. 给对象赋值

/* 旧方法 */
const object1 = { val: 1, b: 2 };
let object2 = { d: 3, z: 4 };
object2.val = object1.val;
object2.b = object1.b;

/* 正确方式 */
const object1 = { val: 1, b: 2 };
const object2 = { ...object1, d: 3, z: 4 }

9. 给数组赋值

/* 不适当*/
const myArray = [];
myArray[myArray.length] = "hello world";


/* 正确方式 */
const myArray = [];
myArray.push('Hello world');

10. 连接数组

/* 不适当*/
const array1 = [1,2,3,4];
const array2 = [5,6,7,8];
const array3 = array1.concat(array2);


/* 正确方式 */
const array1 = [1,2,3,4];
const array2 = [5,6,7,8];
const array3 = [...array1, ...array2]

11.获取对象的多个属性

/* 不适当*/
function getFullName(client){
  return `${client.name} ${client.last_name}`;
}

/* 正确方式 */
function getFullName({name, last_name}){
  return `${name} ${last_name}`;
}

12.从对象获取值

/* 不适当*/
const object1 = { a: 1 , b: 2 };
const a = object1.a;
const b = object1.b;

/* 正确方式 */
const object1 = { a: 1 , b: 2 };
const { a, b } = object1;

13. 创建函数

/* 老办法,但很好 */
function myFunc() {}

/* 很好*/
const myFunc = function() {}

/* 最好 */
const myFunct = () => {}

// 重要说明:在某些情况下,建议不要将这些函数与箭头一起使用,以避免读取错误

14.默认值

/* 不适当*/
const myFunct = (a, b) => {
  if (!a) a = 1;
  if (!b) b = 1;
  return { a, b };
}

/* 正确方式 */
const myFunct = (a = 1, b = 1) => {
  return { a, b };
}

15. 使用reduce代替forEachfor来求和

/* 不适当*/
const values = [1, 2, 3, 4, 5];
let total = 0;
values.forEach( (n) => { total += n})

/* 不适当*/
const values = [1, 2, 3, 4, 5];
let total = 0;
for (let i; i < values.length; i++){
  total += values[i];
}

/* 正确方式 */
const values = [1, 2, 3, 4, 5];
const total = values.reduce((total, num) => total + num);

16. 是否存在数组中

/* 不适当*/
const myArray = [{a: 1}, {a: 2}, {a: 3}];
let exist = false;
myArray.forEach( item => {
 if (item.a === 2) exist = true
})

/* 正确方式 */
const myArray = [{a: 1}, {a: 2}, {a: 3}];
const exist = myArray.some( item => item.a == 2)

17.布尔值的快捷方式

/* 不适当*/
const a = 5;
let b;
if (a === 5){
  b = 3;
} else {
  b = 2;
}

/* 正确方式 */
const a = 5;
const b = a === 5 ? 3 : 2;

总结

回顾这篇文章,加以练习并学会如何以一种更干净的方式工作,提高处理速度。

完~,我是小智,我要去刷碗了,我们下期再见!


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://medium.com/javascript...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 18 收藏 9 评论 3

like 赞了文章 · 1月20日

怎么提升写代码的能力

简介: 对于程序员而言,我始终认为代码是展现能力的关键,一个优秀程序员写的代码,和一个普通程序员写的代码是很容易看出差别的,代码作为程序员的硬实力和名片的展示,怎么提升写代码的能力始终是一个关键的话题,不过很遗憾这篇文章其实也不是讲具体的步骤、银弹方法、武功秘籍什么的,这篇文章讲讲我自己印象中对我写代码能力提升比较大的四段经历,也许可供参考。

第一段:第一次感受每天亿级系统的挑战

2008 年,HSF 的第二个版本,在当时淘宝最重要的交易中心上线,上线当天造成淘宝网站访问巨慢,交易类的页面几乎打不开,最后靠下线 HSF 才恢复。

下线后开始查问题,HSF 的第二个版本基于的是 jboss-remoting,jboss-remoting 在当时的版本里远程同步调用的超时时间是写死在代码里的 60s,而调用的服务确实会有一些超过 10 几秒的现象出现,导致了 web 应用处理 web 请求的线程池被这些慢请求给逐渐占据,请求堆积,最终呈现出了页面打开非常慢的现象。

查清原因后,决定基于当时的 Mina 重写整个 HSF 的通信,重写的这两个月时间对我自己写代码的能力有很大的提升,无论是对网络 IO 方面处理的深入学习,还是在高并发系统上的深入学习,现在想想学习的方式也就是翻各类网络 IO 的科普资料,然后是读 Mina 的源码、Java 网络 IO 的源码,并发这块的学习主要还是靠那本经典的《Java 并发编程实战》,以及读 Java J.U.C 里的代码,这段时间的学习相比以往翻 Think in Java 之类的最大区别是,学习后付诸实践,随着 HSF 这个新的重写的版本的上线,基本算是逐渐真正掌握了这些部分的代码能力。

除了代码能力的提升外,得到了另外一个最大的教训就是,对于一个亿级且长时间运行的系统,很多看起来的小概率的问题都一定会成为严重的问题,这也是为什么写高并发系统的难度,要求了必须对自己写的代码,以及自己代码调用到的各种 API 里的实现都非常的清楚,这样才能真正确保最终代码的鲁棒性。

第二段:民间“消防队”的故事

第二段对我自己写代码能力提升特别大的经历是在民间"消防队"的那段日子,淘宝在 2009 年故障特别多,但处理故障还没有一个标准的体系和组织,导致很多时候会出现故障出了都没什么人处理,或者处理效率不高,于是当时有个运维团队的同学拉了一些人组建了一个群,群的名字叫淘宝消防队,用来处理淘宝出现的各种故障,我很凑巧的也加入了这个群,这个群里还有另外一个整个阿里公认的超级技术大神:多隆。

一开始看到各种故障的时候,压根就不知道怎么下手,处理故障会需要的通常不仅仅是写代码的能力,还需要对一个系统全貌要有一定的掌握,例如前几年一篇特别火的文章,当点击搜索背后发生了什么这样的文章,其实就是要对一个系统的处理流程特别的熟悉,这在处理故障的时候是非常重要的,在有了故障大概在哪个环节后,很重要的就是对这个环节代码运行机制的细节掌控了,这个时候通常来说各种工具非常重要,可以有效的帮助你知道具体发生了什么,例如像系统层面的 top -H 之类的, java 层面的 btrace 等等,都可以让你根据运行情况去定位问题的点。

这段时间我觉得我的提升就是靠大量的练手,故障确实有点多,一开始就靠看人怎么处理,主要是从多隆这里学,然后是尝试自己解决一些故障,解决的越来越多后慢慢熟练度就上去了,除了解决故障能力的提升外,因为看了很多由于代码层面造成的故障,对自己在写代码时如何更好的保证鲁棒性,来避免故障,是非常有帮助的,例如,我看过很多滥用线程池造成创建了大量线程,最终导致线程创建不出来的 case,就会明白自己在用线程池的场景里一定要非常清楚的控制最大的数量,包括堆积的策略等,又例如我看过 N 多的因为自增长容量的数据结构导致的 OOM 的 case,就会明白在写代码的时候不能认为一定不会发生数据结构增长到超级大,所以不做任何保护的 case,这个时间我明白到的就是写一段能运转,实现需求的代码不难,但要写一段在各种情况下都能长期稳定运行的代码是真心不容易,这我觉得是一个职业的写商业系统的程序员和只是写程序玩玩的最大差别。

第三段:重写通信框架

2010 年,我从中间件团队离开,去做 HBase,那个时候的 HBase 里面的通信还是用一个非常简单的写法实现的,我想着要么就把以前 HSF 里用的移植到 HBase 里用,这个时候刚好多隆在用 c 给各类 c 的应用写一个通用的通信框架 libeasy,于是就有了一次测试,我记得第一次测试结果看到原来 HSF 里面的通信框架的高并发能力和 libeasy 比相差无比巨大,我和多隆便探讨他是怎么实现的,我看看能不能学习下在 Java 这边的版本里也改改,所以有了这段重写通信框架的经历。

本来以为之前在写 HSF 的那几年应该算是对通信框架这块的代码相关的能力掌握的不错了,在和多隆一起重写的这段过程中,才发现差距还是很大的,多隆教会了很多细节的问题,基于 NIO 的通信框架的核心是用非常少的 IO 线程来处理 IO 事件(太多也没用,因为有些部分就只能串行),所以怎么高效的使用好这几个 IO 线程是非常关键的,要尽量减少这几个 IO 线程处理一些不相关的动作,另外一点就是尽量减少 IO 线程和业务处理线程的切换,例如后来常见的批量把一个流里的多个请求一次性丢给业务处理线程。

这段经历对自己更加深入的掌握在代码逻辑整体的细节层面是非常有帮助的,这对于写要求很高的系统是非常重要的,毕竟对于一个超大规模的系统而言,1% 的提升还是可观的。

第四段:学习 JVM

之前因为处理故障比较多,有段时间我开始给公司同事们分享如何处理故障,后来发现有些问题自己也讲不清楚,或者也不知道怎么处理,必须深入学习 JVM 才行,但其实一开始我完全摸不着门路,JVM 代码打开都不知道从哪看起。

很幸运,碰到了一个同样爱好又比我强很多的同学,就是撒迦,圈内通常叫 R 大,我和撒迦好几个周末约着在公司一起看 JVM 代码,有撒迦的指点,我终于是入门了,知道大概怎么去看了,而且两个人一起看代码,互相分享和探讨,效率是非常高的。

有了这段经历,再加上继续处理着一些故障,基本上逐渐对 JVM 的代码实现有了更多的理解,在后来做故障分享、问题解决什么的时候终于能更好的做到知其然知所以然,同样,这对处理故障的能力,写代码的能力也是非常有帮助的,例如会更加明白以前认为的所谓的面向 GC 友好的代码是几个意思,也会有了更深的感受是其实 Java 的代码呢,通常不会写的太烂,因为 JVM 在运行期会做很多的尽可能的优化,拉到一个平均线,但要写的很好,难度是非常大的,因为需要懂 JVM,懂 JVM 下面的 OS。

总结

其实也总结不出什么,因为每个人的环境什么的不太一样,也有适合各自提升的方法,我看自己的经历呢,我觉得:

  • 如果环境不具备,就给自己一个挑战的命题,例如要学高并发的通信,可以尝试自己写一个和其他的做对比,做性能等的 pk,这个通常提升还是会很大的,要学 GC,可以尝试给自己几个题目,来控制 GC 的行为等,如果环境具备的话,确实会更加有利。
  • 多和优秀的程序员一起,我自己从多隆、撒迦身上学习到了很多很多,从很多优秀的开源代码,像 Netty,OpenJDK 里面也学习到了很多很多,所以多参与一些优秀的开源项目也是一个很好的提升方法,看优秀的书(例如并发里的那本 Java 并发编程实战,JVM 里的 Oracle JRockit: The Definitive Guide,深入理解 Java 虚拟机等),也同样是一种向优秀程序员学习的好方法。
  • 多多尝试解决问题/故障,这绝对是提升代码综合能力非常好的一个方法,自己工作里机会少的话,网上有大把,像 stackoverflow 之类的,都是很好的练习场。

最后的最后,我还是想说,代码能力作为程序员的硬名片,始终是最有效的区分程序员能力的东西,"talk is cheap, show me the code" 这句话我觉得是永远成立的。

作者:毕玄
原文链接
本文为阿里云原创内容,未经允许不得转载

查看原文

赞 7 收藏 4 评论 0

like 关注了用户 · 1月18日

朱昆iamkun_com @zhukuniamkun_com

关注 55

like 赞了文章 · 1月18日

🎉 Element UI for Vue 3.0 来了!

第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 🎉 ~

2016 年 3 月 13 日 Element 悄然诞生,经历了 4 年的风雨洗礼,我们从一个饿了么内部业务组件库成长为 Vue 生态里最流行的 UI 组件库之一。

截至本文撰写时,Element 已获得 48200 Github Star, NPM 下载量 95 万次/每月的可喜成绩。感谢超过 530 名社区贡献者的参与维护,和我们一同完成了 4400 次 commit 的更新迭代。

Element 40000 star
*Element 开发团队 40000 Github Star 庆祝会

Element Plus for Vue 3.0

2020 年,随着 Vue 3.0 不断完善和发布,我们也紧张投入到 Element 对 Vue 3.0 的升级适配工作中。历经 6 个月共计 23 个 alpha 版本的迭代,终于,在今天, Element Plus for Vue 3.0 Beta 版本正式发布 🎊 !

https://github.com/element-plus/element-plus

Vue 3.0 的大版本升级,对生态组件库来说也是一次丢掉历史包袱前行的好机会,我们大刀阔斧对 Element 进行了一次深度重构。

Element Plus For Vue 3

Element Plus for Vue 3.0 是一个使用 TypeScript + Composition API 重构的全新项目。我们几乎重写了每一行 Element 的代码,用最 Vue 3 的方式呈现了最完美的 Element,主要有:

  • 使用 TypeScript 开发,提供完整的类型定义文件
  • 使用 Vue 3.0 Composition API 降低耦合,简化逻辑
  • 使用 Vue 3.0 Teleport 新特性重构挂载类组件
  • 使用 Lerna 维护和管理项目
  • 使用更轻量更通用的时间日期解决方案 Day.js
  • 升级适配 popperjs, async-validator 等核心依赖
  • 完善 52 种国际化语言支持

除此以外,还有:

  • 全新的视觉*
  • 优化的组件 API
  • 更多自定义选项
  • 更加详尽友好的文档

Q:Element Plus 和 Element UI 是什么关系? 为什么又一个新项目?

正如 vue-next 之于 vue,一次 100% 的重构虽然解决了很多历史遗留问题,但也不可避免的引入一些新的 bug 和问题,而独立的 issue 和 pr 区可以减少大家使用和反馈的心智成本,也能更加方便我们定位问题,并行维护迭代。

Element will stay with Vue 2.x

For Vue 3.0, we recommend using Element Plus from the same team

具体可以参考 Element 的 README https://github.com/ElemeFE/element/blob/dev/README.md

Q: 老 Element 项目可以平滑升级到 Vue 3.0 + Element Plus 吗?

由于 Vue 3.0 升级引入了部分 API 的调整,老项目的升级不可避免的要做些许改动。但我们力争把变更内容做到可控,只需要很少的调整就能完成项目升级。在今后 Vue 3.0 的项目里,还是熟悉的 Element 的配方和味道。

Q: Element UI 还会维护吗?

当然会!(而且一直在正常迭代发布呀 ヽ(✿゚▽゚)ノ)

每每看到社区类似的担忧,对我们都是一种鞭策。作为一个负责任的开源项目,必然不会辜负大家的期待。随着用户的增多,肩上的压力也越来越大,希望大家使用了 Element 能真正为项目开发减负提效,这样我们多加班,大家早下班,想到这,感觉胸前的红领巾更鲜艳了😘。

开始体验吧

有很多方式可以体验 Element Plus for Vue 3.0

  • 手动安装 npm install element-plus ,详见官网安装指南
  • 🥳 尝鲜时下最炫酷的Vite 打包脚手架

What's Next for Element Plus?

  • 一次重大视觉更新
  • 2 个全新组件紧张研发中
  • 访问速度更快,功能更强大的官方网站

喜欢 Element Plus 吗?来点个 Star ❤️ 支持鼓励我们一下吧 ~

感谢大家 4 年以来对 Element 的关注,是你们的支持让 Element 不断完善,力争做到最好。我们也会不忘开源初心,反哺社区,未来将对社区更加开放,非常欢迎热爱开源的你来和我们一起完善 Element Plus —— 赠人玫瑰,手有余香,开源社区的维护,不仅仅是靠一个团队,一个公司,我们相信是靠所有热爱开源,拥有开源精神,热衷于分享和交流的朋友们。

查看原文

赞 17 收藏 3 评论 1

like 赞了文章 · 1月18日

字节跳动的无奈!20 亿打水漂。。。

图片

字节跳动的无奈!20亿打水漂了。。。

日前,字节宣布:旗下悟空问答APP将于2021年1月20日0:00起从各大应用商店平台下架,之后将不再提供下载。

2021年2月3日停止运营,关闭服务。之后将不再提供注册、登录、发布内容、查看自己或他人已经发布的内容等相关服务,一句话:悟空问答凉了。。。

图片

悟空APP是今日头条平台旗下的问答社区,经常刷头条的读者应该是非常熟悉,和知乎的问答很类似。前身是头条问答,2017年6月由其升级而成,改名:悟空问答,关闭之前是拥有独立APP端与PC端。

据了解,在问答上线之前,头条就在花大价钱从各大平台挖大V过来,2017年8月,知乎用户“恶魔奶爸Sam”称“今日头条今年一口气签约了300多个知乎大V,而且还是给钱的,年收入比普通白领还高。

也许是为了在问答领域快速抢占市场,收罗用户,头条对悟空问答投入了大量资金,其势头直逼知乎。

2017 年头条创作者大会上,头条副总裁赵添表示:今后会重点发力“微头条”和“悟空问答”两个产品,计划在 2018 年投入 10亿元的补贴于问答版块,签约至少5000名博主大V。至此,悟空问答的“抢‘V’大战”也因此拉开序幕。图片砸钱补贴答主的模式,让不少内容创作者赚的盆满钵满,也让不少做号党也薅了不少的羊毛。

图片但是,之后好景不长,对标知乎的悟空问答出现明显的下降趋势。

根据 QuestMobile数据显示,2018年4月到7月,知乎的MAU(月活跃用户)从3019万增长至3476万,但悟空问答却从93.4万下降至67.9万

相比知乎,悟空问答的运作模式完全是烧钱式的,不断的烧钱抢人,来补充平台的内容与提升整体活跃度,看似用户与内容增长一片繁荣,但真相却并非如此。这种问答社区如果缺少了内容沉淀与一定社区氛围的支撑,光靠一时的用户活跃度(而这种活跃还是一种假象)是无法持续维持社区流量的,终究会衰败下去。

2018年8月低,据报道称,字节跳动要放弃悟空问答业务,并入微头条,团队100多人已转岗。字节跳动则对此回复称,没有放弃问答业务,而是优先级发生了调整。

如今,悟空平台的落幕下线,可能也是早有征兆的事。

这种靠烧钱补贴来刺激作者而形成的短暂繁荣,终究只会是昙花一现,迟早会枯萎。

无论是哪个行业,靠烧钱是不可能维持长久、稳定的发展,钱烧完了,留下的只会是一地鸡毛!!!

查看原文

赞 3 收藏 0 评论 3

like 关注了用户 · 1月15日

前端小智 @minnanitkong

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

关注 9498

like 发布了文章 · 1月14日

antd的select为多选模式下时,输入框禁用搜索功能,禁止输入内容

背景:

1.在做项目的时候,经常使用antd中”多选的select组件“;
image.png
2.antd KPI文档写的:showSearch 使单选模式可搜索,意为在单选时,搜索功能是可以设置的,当showSearch:false,在多选模式仍有搜索功能。
image.png
3.导致多选模式输入框会获取焦点光标出现,并且还可输入内容,由于选项的value是值的code不是label,所以输入内容搜索会找不到相关内容。
<Select
 mode={'multiple'}
/>

image.png
image.png
image.png

解决方法:

1.针对antd 3.x 的select组件: 进行dom操作,找到该input,添加只读属性

js
// antd 下拉组件 多选模式 不支持禁用输入搜索功能, 通过dom操作禁用输入功能
const auctionTimesCode = document.querySelector('#auctionTimesCode #auctionTimesCode');
auctionTimesCode && auctionTimesCode.setAttribute('readonly', 'true');
css
.ant-select-selection--multiple {
  cursor: pointer;
}

image.png

2.针对antd 4.x 的select组件: showSearch:false 竟然可以了📣😍,看来是antd文档没有更新。

<Select
 mode={'multiple'}
 showSearch={false}
/>

image.png

结语:

之前为了解决antd3.x查了很多资料,确实是antd3中select组件没有对多选模式下搜索功能可禁用配置,整理出来此文档希望对正在苦恼的小伙伴提供帮助。

查看原文

赞 1 收藏 0 评论 0

like 赞了文章 · 1月11日

漫画 | 如何向外行解释产品经理频繁更改需求会令程序员很烦恼?

众所周知,程序员是一类思维比较特殊的群体,但他们也有不为人知的烦恼,最常见的是经常被产品经理频繁改需求、拿老板来压人等...,而这些烦恼外行人是很难理解的.

就像前些年就出现过“软件公司老板被员工用显示器砸脸”的新闻,而老板被采访时的回答是:“我就是让程序员再改一下需求...”,但真的仅仅只是再让改一次这么简单吗?

今天这篇漫画用一个日常生活中很常见的例子来讲述产品经理频繁更改需求,为什么会令程序员烦恼的故事,一起来看看吧,是否有戳中你的泪点?

情节纯属虚构,如有雷同,纯属巧合..
001234567891011
121314151617181920212223

编后

  • 你 = 客户
  • 服务员 = 客户经理 + 产品经理
  • 大厨 = 码农
    请自行转换...

本文纯属虚构,情节如有雷同,纯属巧合,现实生产生活中码农和PM还是和睦友好的相亲相爱的一家人!
仅以此篇漫画献给漫漫编程路中,不易的你 —— 程序员

参考资料

本文系 “ 前端布道师 ”  原创

转载请先微信联系苏南 (su-south)授权,并标明出处!

撰稿:苏南、萤火一号

插画 / 排版:苏南

往期回顾

image
小公司卧薪尝胆三年,意外拿到美团offer
人到中年,一地鸡毛
前端发展史的江湖恩怨情仇
揭密微信是如何诞生的?

前端布道师-苏南著作

更多精彩,欢迎关注我们

本文首发于公众号:前端布道师

链接:https://mp.weixin.qq.com/s/pVEJmBXFgo8qtyiUTKem6g

转载请联系微信:su-south 授权

用漫画解读前端技术,执笔演绎程序人生,愿吾手中笔,能博君(卿)一笑
Github地址:更多有趣漫画https://github.com/meibin08/comics-program-life欢迎 Star、watch

查看原文

赞 4 收藏 1 评论 1

like 赞了文章 · 1月7日

白话分析自适应跟响应式的区别

根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析自适应响应式的区别。注:本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法

一、什么是自适应布局

自适应布局就是宽度自适用布局,在不同大小的设备上,网页以等比例的形式缩放宽度,呈现同样的主体内容和排版布局

自适应布局演示图

图片
随着屏幕宽度缩放,网页内容也以等比例缩放,不管屏幕宽度为多少,网页主体排版布局总是一样的

二、什么是响应式布局

响应式布局就是根据屏幕大小变化,页面的内容排版布局会自动调整变动,已呈现更好的用户体验

响应式布局演示图

图片
随着屏幕宽度的缩放,页面做出相应调整,布局和展示的内容会有所变动

1.自适应布局出现的背景

在PC时代初期,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少。后来随着显示器种类越来越多,以及笔记本、平板电脑的普及,这种固定宽度的页面出现了问题。于是出现了一种新的布局方式,宽度自适应布局。我们平时谈论的自适应布局,大多指的就是宽度自适应布局

再到后来,互联网大战从PC打到了手机,还有 HTML5 标准的发布。自适应布局也从PC延伸到手机,自适应布局也因此火了起来,成为网页设计的必要需求

2.响应式布局出现的背景

自适应虽然成为网页设计的必要需求,但还是暴露出一个问题,如果屏幕太小,即使网页内容能够根据屏幕大小进行适配,但是在小屏幕上查看,会感觉内容过于拥挤,降低了用户体验。此时,为了解决这个问题而衍生出来的概念就是响应式布局。它可以自动识别屏幕宽度、并做出相应调整。网页的排版布局和展示的内容会有所变动

最后

觉得文章不错的,给我点个赞哇,关注一下呗!
技术交流可关注微信公众号【GitWeb】,加我好友一起探讨
微信交流群:加好友(备注思否)邀你入群,抱团学习共进步

查看原文

赞 14 收藏 2 评论 0

认证与成就

  • 获得 3 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-05-09
个人主页被 498 人浏览