首页

10 个超有用的 JavaScript 技巧

seo达人

方法参数的验证

JavaScript 允许你设置参数的默认值。通过这种方法,可以通过一个巧妙的技巧来验证你的方法参数。


const isRequired = () => { throw new Error('param is required'); };

const print = (num = isRequired()) => { console.log(`printing ${num}`) };

print(2);//printing 2

print()// error

print(null)//printing null

非常整洁,不是吗?


格式化 json 代码

你可能对 JSON.stringify 非常熟悉。但是你是否知道可以用 stringify 进行格式化输出?实际上这很简单。


stringify 方法需要三个输入。 value,replacer 和 space。后两个是可选参数。这就是为什么我们以前没有注意过它们。要对 json 进行缩进,必须使用 space 参数。


console.log(JSON.stringify({name:"John",Age:23},null,'\t'));

>>>

{

"name": "John",

"Age": 23

}

从数组中获取唯一值

要从数组中获取唯一值,我们需要使用 filter 方法来过滤出重复值。但是有了新的 Set 对象,事情就变得非常顺利和容易了。


let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];

>>> [1, 2, 3, "school", "ball", false, true]

从数组中删除虚值(Falsy Value)

在某些情况下,你可能想从数组中删除虚值。虚值是 JavaScript 的 Boolean 上下文中被认定为为 false 的值。 JavaScript 中只有六个虚值,它们是:


undefined

null

NaN

0

"" (空字符串)

false

滤除这些虚值的最简单方法是使用以下函数。


myArray.filter(Boolean);

如果要对数组进行一些修改,然后过滤新数组,可以尝试这样的操作。请记住,原始的 myArray 会保持不变。


myArray

   .map(item => {

       // Do your changes and return the new item

   })

   .filter(Boolean);

合并多个对象

假设我有几个需要合并的对象,那么这是我的首选方法。


const user = {

    name: 'John Ludwig',

    gender: 'Male'

};

const college = {

    primary: 'Mani Primary School',

    secondary: 'Lass Secondary School'

};

const skills = {

   programming: 'Extreme',

   swimming: 'Average',

   sleeping: 'Pro'

};

const summary = {...user, ...college, ...skills};

这三个点在 JavaScript 中也称为展开运算符。你可以在这里学习更多用法。


对数字数组进行排序

JavaScript 数组有内置的 sort 方法。默认情况下 sort 方法把数组元素转换为字符串,并对其进行字典排序。在对数字数组进行排序时,这有可能会导致一些问题。所以下面是解决这类问题的简单解决方案。


[0,10,4,9,123,54,1].sort((a,b) => a-b);

>>> [0, 1, 4, 9, 10, 54, 123]

这里提供了一个将数字数组中的两个元素与 sort 方法进行比较的函数。这个函数可帮助我们接收正确的输出。


Disable Right Click

禁用右键

你可能想要阻止用户在你的网页上单击鼠标右键。


<body oncontextmenu="return false">

   <div></div>

</body>

这段简单的代码将为你的用户禁用右键单击。


使用别名进行解构

解构赋值语法是一种 JavaScript 表达式,可以将数组中的值或对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值。


const object = { number: 10 };


// Grabbing number

const { number } = object;


// Grabbing number and renaming it as otherNumber

const { number: otherNumber } = object;

console.log(otherNumber); //10

获取数组中的最后一项

可以通过对 splice 方法的参数传入负整数,来数获取组末尾的元素。


let array = [0, 1, 2, 3, 4, 5, 6, 7]

console.log(array.slice(-1));

>>>[7]

console.log(array.slice(-2));

>>>[6, 7]

console.log(array.slice(-3));

>>>[5, 6, 7]

等待 Promise 完成

在某些情况下,你可能会需要等待多个 promise 结束。可以用 Promise.all 来并行运行我们的 promise。


const PromiseArray = [

   Promise.resolve(100),

   Promise.reject(null),

   Promise.resolve("Data release"),

   Promise.reject(new Error('Something went wrong'))];


Promise.all(PromiseArray)

 .then(data => console.log('all resolved! here are the resolve values:', data))

 .catch(err => console.log('got rejected! reason:', err))

关于 Promise.all 的主要注意事项是,当一个 Promise 拒绝时,该方法将引发错误。这意味着你的代码不会等到你所有的 promise 都完成。


如果你想等到所有 promise 都完成后,无论它们被拒绝还是被解决,都可以使用 Promise.allSettled。此方法在 ES2020 的最终版本得到支持。


const PromiseArray = [

   Promise.resolve(100),

   Promise.reject(null),

   Promise.resolve("Data release"),

   Promise.reject(new Error('Something went wrong'))];


Promise.allSettled(PromiseArray).then(res =>{

console.log(res);

}).catch(err => console.log(err));


//[

//{status: "fulfilled", value: 100},

//{status: "rejected", reason: null},

//{status: "fulfilled", value: "Data release"},

//{status: "rejected", reason: Error: Something went wrong ...}

//]

即使某些 promise 被拒绝,Promise.allSettled 也会从你所有的 promise 中返回结果。

平面中的构图技巧

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

平面中的9种构图,但有的同学还不是太明白,所以小编今天细说里面其中一种构图:视觉引导线,加深大家的理解。

视觉引导线构图

什么是视觉引导线?(视觉动线)

视觉动线会将观众视觉引导到特定的方向,先创造一个视觉中心点,之后会提供一条让观众可隐约跟随的视觉路径,划分视觉阶级明显让观众知道元素之间的相对重要性。引导线是运用元素本身的原始形象或直接画出实体线条,借用这些引导线观众的视线可以被指向画面的其它元素哦。

上图中使用了视觉动线 + 留白,留白可以让海报中的「手」更加抢眼,使观众第一眼就会看那只手。接着就是视觉引导线了,引导线不一定是实体线条,它可以是元素本身的原始形状、人物视线以及元素组合等等,借用这些引导线让观众的视线可以被指向画面中的其它元素。

说到这里,我想大家也知道上图的引导线是什么了吧?引导线是手与线的组合,观众的第一视线是手,然后会顺着手拉的线方向延伸,最后停留到右下角的小字里。这几行小字就是作者要表达的主要信息。

但为什么不直接居中非要弄个引导线?虽然可以用这些中规中矩的构图,但往往会显得无趣,也不一定能吸引用户去看了。

下面小编用一些案例来让大家更好理解。

案例:

上面的海报设计是很好的例子,首先利用视觉中心点让观众集中到大字区域,然后顺着线条查看下方的内容,先是 bla 的内容,接着就是 zer,所以这图主要信息应该是 RYDER BLAZER(但小编不知道是啥……)

上图中,人物的视线也可以算是一种引导作用。

总之好的视觉引导线可以让作品富有故事性和艺术性,还能提升作品视觉上的观赏度。所以我们创造时应该重视构图。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

时尚 Bootstrap 4 主题:Shards(轻量级)

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

Shards 采用了 Bootstrap 4 前端框架制作的,外观简约而时尚,风格与现代流行的扁平化相当合衬!此外不仅仅拥有 HTML/CSS/SASS 格式模板,还有 Sketch 设计源文件,可见分享者的贴心。

目前从官方介绍来看,UI组件还相当齐全,可用它来快速搭建漂亮、时尚的网页和UI设计作品,下面一起来看看介绍。

bootstrap 4 主题:shards

关于 Shards 这个主题虽然免费,但并不代表它只有「表面」,制作者还为性能性能考虑,压缩版仅12KB大小,实在太好了,以这样的大小,制作出来的网页直接能秒开。

它并不是直接使用 Bootstrap 的设计样式,所有的组件都是重新设计,以便得到统一的风格!

着陆页演示

这是非常不错的UI KIT素材 ,它还包含了10个额外的自定义组件,可以让使用者快事制作着陆页。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 组件演示

Shards 含有丰富的 UI 组件,网页端常用的元素几乎包含了,大方便用户自由定制。

颜色:

字体

图标支持900+ Material icons 和 Font awesome 两大图标库!

表单上的细节,也不容忽视:

还有日期组件的设计:

卡片

按钮

导航菜单

我想这些漂亮的元素,已经足够你设计一般的网页,即使不够,也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。

下载地址

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

你的编程技巧已经过时了吗?

蓝蓝

编程是一个不断向前发展的行业。在某些时候,你可能会诚实地看看自己的技能,并得出结论,你已经落在了曲线的后面。如果你是专业人士,那么这很容易做到,因为很多时候你没有必要夜以继日地推着自己前进。

但迟早,落后的趋势会回过头来咬你一口,让你血流不止。在商业和就业市场上,你的竞争力会降低。那么你该如何再次成为游戏中的高手呢?

are-your-programming-outdated.jpg

让你不一样!20个技巧帮你提升设计的对比度

周周

20-skills-improve-contrasting-1

说道对比,你会想到什么?也许是黑白对比,大小对比,但是对比所存在的形式还有很多,远不止于此。

事实上,对比度是最重要的设计原则之一,它也是每个设计项目中必不可少的设计要求。为什么这么说呢?控制对比度有助于设计项目的组织结构化,建立信息和视觉的层次,让你最重要的部分成为视觉的重心,让关键信息突出展示。善于使用有对比度的设计,能增加视觉的观赏性和趣味性。在相同的布局、相同的视觉元素中,形态和色彩的变化有时候非常单调,但是对比能让变化显得不同凡响。

Photoshop文字功能的几个小技巧

蓝蓝

抗锯齿好像是开始这篇文章最好的一个话题。在CS6以前的PS版本中,选择抗锯齿文字真的是在众多不咋地的选项中唯一可选的。但是,几个月前Adobe介绍了PS中两个操作系统自带的抗锯齿选项:Mac和Mac LCD。这两个抗锯齿选项采用和系统文字抗锯齿一样的方式:“Mac”是Mac OSX里的灰度字体平滑抗锯齿,“Mac LCD”则是子像素字体平滑抗锯齿。

简洁网页设计你需知的6点技巧

蓝蓝

洁净和一尘不染之间是不能划等号的。去掉了多余内容的界面设计看起来外形美观,一目了然,让人心旷神怡,尤其是对网页设计领域更甚。设计师在网站设计过程中,时常会遇到过度设计的例子。保持审美需求和实际需求之间的平衡,对整洁,干净和条理清晰的网站来说很重要。在激烈的行业竞争中,网页设计师想要获得成功,先决条件之一就是要掌握简洁的网站设计基础。在网站设计中,并没有保密规定,但相关的从业人员仍需坚持一些基本原则:用外观专业,整洁的网站设计来打动用户。

但是,简洁的网页设计并不就等同于我们在网页设计中所强调的极简主义。简洁的网页设计可能使用了多种元素来衬托网站内容,但依然还能保持整洁有序的外观。不过,极简网站设计是以内容为核心,多余的东西统统扔掉。而简洁网页设计则使用了创意和美学元素,在一定程度上,这是可行的。也就是说,网页设计师所追求的拥有整洁,专业外观的网站应该着重让所使用的元素变得高雅,而不是丢弃这些元素。但是,这并非一蹴而就,一个简洁的网站可能要花上数天的艰苦努力才能完成。

网页设计经验

蓝蓝

(一)垃圾还是经典
网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。网页设计 者不管自己的学识、技术和经验如何,都自以为自己吊的不得了,这可能是源与商业设计自我意识体现的强烈主观因素。一个闭门造车者做出的东西,是远远赶不上 综合借鉴者的。网页设计不同于其他艺术,在模仿加创新的网页设计领域当中,即便是完全自己设计的,也是沿用了人们已经认同的大部分用户习惯,而且这种沿袭 的痕迹时非常的明显!还有那个设计者敢腆着脸说,这都是我自己的原创设计?对于业界来说,经典只是个理念和象征!

(二)国内网页设计环境
不可否认,国内网页设计环境目前还停留在初级的认知阶段,也就是说,绝大多数人不知道网络的真正的可用之处,你去做一个业务的时候,不得不去做大量的说服 教育工作。以乙方的身份去说服甲方,以专业角度去教育非专业认识,结果是可想而知的。也正是这种全体社会普遍的低认知水平,导致了大量网络垃圾的产生。

举个简单的例子,看看“阿里巴巴”中文和英文两个版本的页面。中文版主色是橙色(与标志色统一),英文版是极不协调的蓝橙(具有很明显的生凑效果)。
 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档