云顶娱乐集团

当前位置:云顶娱乐集团 > 云顶娱乐集团 > 仿效文书档案,代码静态品质检查【云顶娱乐集

仿效文书档案,代码静态品质检查【云顶娱乐集

来源:http://www.clubskodakaroq.com 作者:云顶娱乐集团 时间:2019-11-27 03:06

NodeJS 开辟者的 10 个数见不鲜错误

2015/06/16 · CSS · 1 评论

本文由 伯乐在线 - 刘健超-J.c 翻译,黄利民 校稿。未经许可,禁绝转发!
希伯来语出处:www.toptal.com。招待参加翻译组。

自 Node.js 公之于世的那一刻,就陪伴着表彰和讨论的音响。那一个顶牛仍在相连,而且并不会急忙消失。而我们日常忽略掉这么些纠纷产生的原由,每一个编制程序语言和平台都以因一些难题而面临研究,而那些主题材料的产生,是在于我们如何行使那一个平台。不管有多难技能写出平安的 Node.js 代码,或有多轻易写出高并发的代码,该平台已经有一定长风度翩翩段时间,并已被用来树立二个数目庞大、稳健和成熟的 web 服务器。那一个 web 服务器伸缩性强,并且它们经过在 Internet 上平稳的运作时刻,注脚自身的安居。

唯独,像别的平台同样,Node.js 轻便因开拓者难点而碰到议论。一些谬误会减少性能,而此外一些标题会让 Node.js 直接崩溃。在此篇随笔里,我们将会聊生龙活虎聊关于 Node.js 新手的 十个常犯错误,并让他们清楚怎么样防止那一个不当,进而成为一名 Node.js 高手。

云顶娱乐集团 1

CSS 火爆回想第风流倜傥期

2013/12/30 · CSS · CSS

本文由 伯乐在线 - 黄余粮 翻译。未经许可,幸免转发!
克罗地亚语出处:css-weekly。招待参与翻译组。

CSS的紧俏回看涉及的内容囊括:最新推荐阅读的篇章、产业界的动态、最新推荐的工具和种种创新意识。尽管每意气风发期大概迥然不一致,但差不离是其黄金时代协会。假若你也在跟进CSS这块的本事,招待投递分享CSS技艺文章与新闻到此处,也许加入大家的 前端开垦 小组,同我们联合翻译与传播优良的原委。

十步图解CSS的position

2013/10/12 · CSS · 1 评论 · CSS

原来的书文出处: barelyfitz   译文出处:w3cplus   

CSS的positon,作者想做为两个Web制笔者来讲都有蒙受过,但关于对其是还是不是真正的打听吗?那本身就不也说了,起码作者本身并不非常的刺探其根本的运行。前些天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,认为蛮有趣的。收拾了须臾间贴上来与我们一块儿享用。希望大家能欢愉。

在图解那十一个进程以前,我将实例的代码放上来,好让大家三个实体参照他事他说加以考查:

HTML Markup

XHTML

<div id="example"> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p> </div> <div id="div-1c"> <p>id = div-1c</p> </div> </div> </div> <div id="div-after"> <p>id = div-after</p> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c">
<p>id = div-1c</p>
</div>
</div>
</div>
<div id="div-after">
<p>id = div-after</p>
</div>
</div>

CSS Code

回顾的行使一些样式:

CSS

#example { float: right; } #example p { margin: 0 0.25em; padding: 0.25em 0; } #仿效文书档案,代码静态品质检查【云顶娱乐集团】。div-before, #div-after { background-color: #88d; color: #000; } #div-1 { width: 400px; background-color: #000; color: #fff; } #div-1-padding { padding: 10px; } #div-1a { background-color: #d33; color: #fff; } #div-1b { background-color: #3d3; color: #fff; } #div-1c { background-color: #33d; color: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#example {
float: right;
}
 
#example p {
margin: 0 0.25em;
padding: 0.25em 0;
}
#div-before,
#div-after {
background-color: #88d;
color: #000;
}
 
#div-1 {
width: 400px;
background-color: #000;
color: #fff;
}
 
#div-1-padding {
padding: 10px;
}
 
#div-1a {
background-color: #d33;
color: #fff;
}
 
#div-1b {
background-color: #3d3;
color: #fff;
}
 
#div-1c {
background-color: #33d;
color: #fff;
}

最先成效:

云顶娱乐集团 2

为了前边能更加好的问询相关知识点,作者特将此例的DOM草图画出来:

云顶娱乐集团 3

上面的DOM图,作者想大家肯定特别轻松的掌握,上边就一路来根本看position的利用。

CSS 代码静态品质检查

2015/08/01 · CSS · 品质检查

原来的小说出处: 百度EFE - ielgnaw   

至于代码静态品质检查,在大佛的上意气风发篇作品 《JavaScript 代码静态质量检查》中曾经说得很明白了,尽管首要讲的是 JavaScript 方面,但代码静态品质检查的本色是不变的,明日大家来介绍一下 CSS 方面包车型大巴静态品质检查。

CSS 中也可以有生机勃勃部分 Lint 工具,比如 CSSLint,PrettyCSS,recess,CKStyle,stylelint,当然还只怕有百度 EFE 出品的 CSS 代码风格检查工具 CSSHint。本文将从作用、质量、适用范围、法规实现、特性化多少个方面前遭逢那么些Lint 工具实行相比。

CSS 参照他事他说加以考察文书档案

2015/08/03 · CSS · CSS

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁绝转发!
西班牙语出处:tympanus.net。迎接参预翻译组。

大家早就在 Codrops 上宣布了新章节:CSS 参谋文书档案。大家前不久就来谈谈它,看看终究加了怎么新特征让学习 CSS 变得更简便易行实际。

云顶娱乐集团 4

Codrops 是最励志的网址之生机勃勃。是的,小编是多少偏袒的,但笔者一定你也同意那生机勃勃真相。

即使你正在寻求灵感,那您在此就能够找到多数新意能源,它们能让您的脑袋里也会显示风度翩翩五个主张。小编喜悦这么些网址的理由之一是:Manoela 和 佩德罗 提供的财富一定会给大家留下浓厚印象。

只要你在查找怎么样学习运用 CSS 属性的方法,你能够在那间找到超级多源代码来学学。但假设您想学学更加多关于属性的底蕴知识:属性定义,差别的取值,以至各种值的意义和功力,或是其余。而你能在那地找到任何你正在找寻的财富,这岂不是十二分康健?

一年前,大家认为,假若 Codrops 有局地章节供读者来学习 CSS 属性,那会是一件动人心魄的事。因而,将 科德罗ps 构建成为三个为顾客提供灵感来源和读书CSS 的非凡平台。那是 Manoela 向自身提议的主见,而就在几天后,笔者初叶入手试行了。

故此,在过去的一年里(不到一年卡塔尔国,我们给 Codrops 新扩张了叁个板块:CSS 参谋文书档案。我们极度激动能够在最后与我们享受那意气风发果实。

全部早先难,那篇参照他事他说加以考察文书档案仍在不停演变,我们都很努力地改革它,使其尤其完备。若是你有其余校订的提出,或发掘错误,都可交付到此处 GitHub repo。

错误 #1:拥塞事件循环

JavaScript 在 Node.js (好似在浏览器同样) 提供单线程实施景况。这代表你的程序不能够同一时候试行两片段代码,但能透过 I/O 绑定异步回调函数落成产出。举例:一个出自Node.js 的央求是到数据库引擎获取一些文书档案,在此同期允许 Node.js 潜心于应用程序此外一些:

JavaScript

// Trying to fetch an user object from the database. Node.js is free to run other parts of the code from the moment this function is invoked.. // 尝试从数据库中收获多个客户对象。在这里个函数实行的一刻,Node.js 有空去运作代码别的一些.. db.User.get(userId, function(err, user) { // .. until the moment the user object has been retrieved here // .. 直到客户对象检索到此处的那一刻 })

1
2
3
4
5
6
// Trying to fetch an user object from the database. Node.js is free to run other parts of the code from the moment this function is invoked..
// 尝试从数据库中获取一个用户对象。在这个函数执行的一刻,Node.js 有空去运行代码其它部分..
db.User.get(userId, function(err, user) {
// .. until the moment the user object has been retrieved here
        // .. 直到用户对象检索到这里的那一刻
})

云顶娱乐集团 5

可是,具备总计密集型代码的 Node.js 实例被风流浪漫连串客商端同偶尔候连接试行时,会形成短路事件循环,并使具备顾客端处于等候响应状态。计算密集型代码,包含尝试给贰个庞大数组进行排序操作和平运动作三个非常短的大循环等。举个例子:

JavaScript

function sortUsersByAge(users) { users.sort(function(a, b) { return a.age > b.age ? -1 : 1 }) }

1
2
3
4
5
function sortUsersByAge(users) {
users.sort(function(a, b) {
return a.age > b.age ? -1 : 1
})
}

听别人讲小 “users” 数组施行 “sortUserByAge” 函数,或者没什么难题,当基于宏大数组时,会严重影响总体质量。假如在只可以这么操作的动静下,你一定要确认保障程序除了等待事件循环而别无她事(比方,用 Node.js 创建命令行工具的一片段,整个东西一块运维是没难点的卡塔 尔(阿拉伯语:قطر‎,然后那或然没难题。但是,在 Node.js 服务器实例尝试同一时候服务广大个用户的情况下,那将是二个灭亡性的难点。

假如客商数组是从数据库检索出来的,有个消亡办法是,先在数据库中排序,然后再平昔找寻。如果因急需总括宏大的金融交易历史数据总和,而诱致窒碍事件循环,那足以创建额外的worker / queue 来防止梗塞事件循环。

正如您所见到的,那未有新手艺来减轻那类 Node.js 难点,而各样情状都亟待独自管理。而基本消除思路是:不要让 Node.js 实例的主线程履行 CPU 密集型专业 – 客户端同一时间链接时。

推荐介绍阅读

《用Chrome DevTools来为您的网址提速》

Addy Osmani 通过那篇小说陈诉了哪些行使Chrome DevTools来让您的网址更通畅。

《开创三个回顾的响应式HTML邮件》

在此篇教程中,Nicole Merlin 彰显了什么样创制一个简短的响应式HTML邮件,而且保险能够在每叁个邮件用户端(富含手提式有线电电话机邮件顾客端和App卡塔 尔(英语:State of Qatar)上准确显示。其艺术正是利用最小的Media query和不确定地点宽度的章程,尽可能地保管宽容性。

第一步:position: static

在CSS中有所因素的“position”属性的暗许值都以“static”,因为无需显式的为各类成分设置“position:static”。那时大家会问,那这么些属性值是或不是未曾经担当何意义吗?其实不是的,他在CSS中也会起着超大的效应。我们来看三个实例:

举例你的八个页面,同时设有“div#div-1”,那么那时候你在A面中要求对“div#div-1”进行相对定位;而在B页面中“div#div-1”又无需开展相对定位。

A页面中“div#div-1”绝对定位:

CSS

#div-1 { position: absolute; }

1
2
3
#div-1 {
position: absolute;
}

此刻在B页面中不想在进行相对定位,那么我们就务须在您的体制中显式的再度安装“#div-1”的postion属性为“static”

CSS

body.B #div-1 { position: static; }

1
2
3
body.B #div-1 {
position: static;
}

 第二步:相对固定position:relative

relative名字为相对固化,即使您给某些成分内定了postion的值为“relative”,那么您就足以透过“T-RAV4-B-L”(也正是top,right,bottom,left)来设置成分的定位值。

行使relative时有几点要求小心:

  1. 要素设置了relative时,是周旋于元素自个儿地点张开固定;
  2. 要素设置了relative后,能够透过“T-纳瓦拉-B-L”改变成分当前所在的岗位,但成分移位后,类似点有当年的情理空间位;
  3. 要素设置了relative后,若无举办别的的“T-Evoque-B-L”设置,成分不会进展任何职分变动。

地点三点第一点和第三点来讲都以比较好掌握,那么以往本着第二点,大家来看二个实例的操作:

在上边的底蕴上,我们对“div-1”进行向下移动20px;向左移动40px:

CSS

#div-1 { position:relative; top:20px; left:-40px; }

1
2
3
4
5
#div-1 {
position:relative;
top:20px;
left:-40px;
}

咱俩来看看效果:

云顶娱乐集团 6

从效果与利益图能够再一次注明下边说的第二点。成分“div-1”向下活动了20px,向左移动了40px,自身地点变动了,而要素最早所占的情理空间依然依旧存在,其余一些要素相对固化后并从未影响其余相邻的因素。

CSSLint

CSSLint 和它底层所选取的分析器 parserlib 都是 Nicholas C. Zakas 的作品(当然,ESLint 也是他的创作卡塔 尔(阿拉伯语:قطر‎。它适用于浏览器以及CLI 蒙受,在浏览器端和 CLI 蒙受中分头是两套代码,这么做的来由是它的尾部库 parserlib 在浏览器和 CLI 意况分别是两套。

功能上,CSSLint 提供了对 CSS 的分析、检查等效果。在准绳实现地方,无法通过 JSON 配置来保管,暗许的法则全体在src/rules/ 目录中,要增添自定义准绳,必得经过全局的 CSSLint.addRule 方法来兑现。

实现上,CSSLint 重假若利用事件监听,在尾巴部分 parse CSS 进程中触发事件,举个例子startstylesheetendstylesheetcharsetimportnamespacestartmediaendmediastartpageendpagestartrul 和endrule 等,事件回调中会重临当前 AST 的音信,开垦者依照那么些音信来拓宽平整检查评定。

属性上,若是不增多自定义的规行矩步,品质照旧不错的,不过假使增添自定义准则,质量就能够打些折扣。那是底层解析器 parserlib 的原因,parserlib 成效比较单黄金时代,而且回去的 AST 上消息不是很丰裕,也不帮衬插件机制,因而要落到实处部分自定义的规行矩步,基本只可以靠正则相配来促成。

CSSLint 开垦时间相比较早,相同的时间也因为大神的影响力,因而现在分布配套特别丰盛,援助各类编辑器举个例子:TextmateSublime TextAtomVimEmacs 等等。

参照文书档案

Codrops 的 CSS 参谋文书档案包蕴了贰个条目列表入口:CSS 属性CSS 功能CSS 数据类型CSS @规则CSS 伪类/伪选择器/伪成分。每种条目款项都定义和陈诉了CSS 的质量、效能、数据类型、@法规或伪类/伪接受器/伪成分。

云顶娱乐集团 7

除了这一个之外上述 5 类条目款项,还恐怕有后生可畏类便是 CSS 概念。CSS 概念中的每一个条目款项都带有具体 CSS 概念或完整的风味指引

CSS 概念条约充任了生龙活虎组有关属性的大局条目款项。举个例子,Flexbox 和 Counters 是多个概念,所以它们都有和好的条目。每一种条目款项都表达其定义含义和用场,还隐含了其性质的定义与榜样。

那正是说,贰个 CSS 条款到底是何等的吗?

错误 #2:调用回调函数多于二次

JavaScript 一向都是依据于回调函数。在浏览器中,处监护人件是由此调用函数(日常是无名的卡塔 尔(阿拉伯语:قطر‎,这些动作就好像回调函数。Node.js 在举荐 promises 在此之前,回调函数是异步成分用来互相连接对方的独一方法 。今后回调函数仍被选择,并且包开采者如故围绕着回调函数设计 APIs。二个有关接纳回调函数的不乏先例 Node.js 难题是:不仅一遍调用。平常情状下,一个包提供三个函数去异步管理局部东西,设计出来是梦想有一个函数作为最终一个参数,当异步使命实现时就能够被调用:

JavaScript

module.exports.verifyPassword = function(user, password, done) { if(typeof password !== ‘string’) { done(new Error(‘password should be a string’)) return } computeHash(password, user.passwordHashOpts, function(err, hash) { if(err) { done(err) return } done(null, hash === user.passwordHash) }) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports.verifyPassword = function(user, password, done) {
if(typeof password !== ‘string’) {
done(new Error(‘password should be a string’))
return
}
 
computeHash(password, user.passwordHashOpts, function(err, hash) {
if(err) {
done(err)
return
}
 
done(null, hash === user.passwordHash)
})
}

注意每便调用 “done” 都有贰个回到语句(return卡塔尔,而结尾三个 “done” 则可省略重返语句。那是因为调用回调函数后,并不会自行终止近些日子实施函数。借使第一个“return” 注释掉,然后给这一个函数字传送进叁个非字符串密码,引致 “computeHash” 照旧会被调用。那取决 “computeHash” 如哪里理那样大器晚成种情况,“done” 可能会调用数次。任何一位在别处使用那些函数大概会变得措手比不上,因为它们传进的该回调函数被频仍调用。

只要小心就足以制止这几个 Node.js 错误。而有些 Node.js 开垦者养成一个习于旧贯是:在各样回调函数调用前加多一个 return 关键字。

JavaScript

if(err) { return done(err) }

1
2
3
if(err) {
return done(err)
}

对于广大异步函数,它的再次来到值差不离是画饼充饥的,所以该方法能让你很好地制止那个主题材料。

小说与学科

《透过Emmet来为你的CSS开采提速》

Josh Medeski 在此篇小说中分享了有的透过Emmet来扶植你更迅捷地写CSS的本事。

《响应式相册》

Terry Mun 写的大器晚成篇教程,介绍了哪些开辟多少个用来显示相册的Wordpress插件。呈现照片的功能很好,请参见这些Demo。

《BEM,多修饰符,尝试选用性质选用器》

汤米 马歇尔在此篇随笔中研究了风流罗曼蒂克种让您的前端代码保持 DRY 的新点子。可是,这种措施也可以有四个缺欠,参见小编的牵线和小说的褒贬。

《Firefox 29支持CSS变量》

Firefox 29 开端接济CSS变量了,或然叫做自定义属性。你能够定义CSS变量,然后在样式中援用它们。

《Sasstraction》

CSS变量应该继续交给预微电脑(比方:Saas, LESS卡塔 尔(英语:State of Qatar),依然浏览器?

《什么化解在GoogleChrome下的可耻的书体渲染难点》

Christian Lavie 体现了怎么着高雅地缓解WebFonts的渲染难题。这种方案的头一无二白玉微瑕正是您不能不自个儿童卫生保健留字体相关的文本。

其三步:相对定位position:absolute

absolute是position中的第多少个属性值,假若你给成分钦命了absolute,整个因素就能漂出文书档案流,况兼成分本身的大意空间也还要消失了。不像“relative”还装有原先的情理空间。

咱俩来看三个实例,在div-1a成分上扩充相对定位:

CSS

#div-1a { position:absolute; top:0; right:0; width:200px; }

1
2
3
4
5
6
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

云顶娱乐集团 8

当时成分“div-1a”不在当初的文书档案流中,况且其那时候定位也是相对于html来进展定位,那么大家一时候并非急需那样的职能,哪果大家成分div-1a还想在div-1是拓宽相对定位,这要怎么做呢?当时将在发挥前边第二步的“relative”作用了。

PrettyCSS

PrettyCSS 是叁个相比优越的 Lint 工具,但它并不到底多少个纯粹的 Linter,更应有把它称作一个 Parser,那也是它优良的缘故。在 Parser 里面达成的 Linter 以至 Pretty,那样能够最大程度的管教 Linter 的准确度。它适用于浏览器端、作为 Node.js 模块以致 CLI 工具。

落到实处上的话,在 Parser 中集成 Linter 即在 Parse 阶段就把 Linter 的准则给检查测量试验了,由此品质较好。当然短处也相比显著,正是不能够自定义法则。

如果 PrettyCSS 现在能够提供插件机制,允许自定义准则,会更有吸重力。

CSS 条约结构

云顶娱乐集团 9

每一个条款具有三个底部和智能寻觅模块,而尾部描述了该条目款项所属体系。下边某章节就介绍那些智能寻觅性格。

各样 CSS 条约首要由那几个几有的组成:描述官方语法属性值范例线上演示浏览器扶助深入掌握相关条约。每部分或然由四个小部分组成。

呈报章节你能够学到 CSS 属性、功能、选用器等用法。该部分基本上是概念的定义和进一层表明。

在概念部分后正是有个别综述,包罗官方语法、初叶值、该 CSS 天性能应用到什么因素上以致属性值是还是不是扶植过渡(备注:CSS 3 的 transition-property卡塔尔。有些类目不要求本节,所以,它是不是留存决计于你正在阅读哪个类目。

属性值章节里会定义与呈报每种取值。别的,即使多少个 CSS 性子未有风度翩翩组值(如:@ 准绳卡塔 尔(英语:State of Qatar),那么该章节就会被省略掉。

你会在范例章节里看见使用 CSS 脾气的案例 – 富含主要的代码片段和周转结果的截图(假如有截图卡塔 尔(英语:State of Qatar)。

线上演示章节里含有二个或三个线上演示的案例,这几个案例中,有部分是来源于表率章节的,不经常会利用额外的案例。由于运转结果信任于浏览器的支撑,所以线上演示的案例或者会有用来展现运维结果的截图(假若浏览器不支持该 CSS 本性卡塔 尔(阿拉伯语:قطر‎。

内需在乎的是,超级多条文都包蕴部分线上演示,此中有个别是停放在讲述章节内。

请务必反省浏览器的帮忙程度,以分明你所采纳的浏览器是还是不是扶持你正在翻阅的特征。

鉴于有这三个有关 CSS 性子和专项论题的精粹阅读财富,深入理解章节就含有了值得大器晚成读的完美国资金源链接,在那之中有个正式文书档案链接,它归纳了 CSS 就要引进的风味。

本文由云顶娱乐集团发布于云顶娱乐集团,转载请注明出处:仿效文书档案,代码静态品质检查【云顶娱乐集

关键词:

上一篇:没有了

下一篇:没有了