xml地图|网站地图|网站标签 [设为首页] [加入收藏]
代码静态质量检查,前端这条路
分类:web前端

前端这条路,我们该何去何从

2016/10/06 · 前端职场 · 4 评论

本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

昨日在园子里看到几篇关于程序生涯的几篇文章博有感触,想想自己这几个月多少有些堕落了,想起刚学那会,连过年那天晚上还在看js,这些天在想自己为什么会突然的感觉迷茫了,想起有次去面试的时候,面试官问起的,你的职业规划是什么。沉默一会,技术大牛?项目经理?架构师?这些不是我听他们说的吗?为什么我也回答了这些。偶然想起自己好像一直从未有过职业规划,虽然半年前也有过那么一段时间考虑过,但最终失败之,因为那时候的我认为每一天就是最好的证明。看来我是一个比较喜欢用过去的经验来判断某个事物的价值,或许是太过于年轻,年轻总是起伏很大,喜欢把东西认死理,后来发现其实他们没有对错,不过是它们都占有一些罢了。

为什么需要职业规划,曾经以为做好每一天就是职业规划固然没有错,但是你总得有一个长远的方向吧,这样也不会太过于迷茫,别人说这个好就去学这个,跟随潮流没有错,错的是你得有自己的方向。人生之所以迷茫,不就是因为我们不知道该何去何从吗

虽然年轻,但一味的错下去,将来不也和他们一样了吗,是啊,我们该有一个规划了。

这里再说一下自己为什么会迷茫,技术学到某个阶段就很难提升了,更多只能靠自己摸索,没有人可以指导,就像是创业公司的CEO,突然想起之前的一家公司老板当时说的话,你看我现在好像是成功了,但是每天付出的却是你的10倍,你们只要把每天的工作完成就算合格了,要是再好一点就是优秀,但是我呢,没有人可以给我指导,更没有人给我方向,我工资是比你们高,但你们想想要是公司倒闭了,我就全没了,你们工资还是一样的,你付出的多少回报的就是多少,自然风险也更大。

在创业公司呆过以后让我懂得了创业并不是那么容易,扯歪了,回到上面的,到了这个阶段,本想说想自己的经验,但想想自己正在这个阶段也就没有经验可谈,那我说说我之前的进阶之路怎么走的吧。

初级:

如果你是想学好JS:预解析、作用域、作用域链、|| &&、什么是原始类型、什么是引用类型、闭包、for循环运行机制、多重for循环、递归、原型链、继承、(数组、字符串、函数的各种内置方法,不需要全部记住但你得知道它们能干嘛,在将来你用到的时候可以想到那去。看似没有用,但无数的经验告诉我,非常有用。)。

这些必须学会!!!必须静下心来,这些你不学,永远入不了门。这段时间其他什么都不要看,就好好把这些概念理解以及实践。

高级:

call,apply,bind,面向对象、函数式编程、搞懂异步、学习算法、设计模式。这是一条很长的路,此地我也没啥经验可讲,一起加油吧。

扩展能力:

了解HTTP、linus、(nodejs、php、python、java、c)等、只需要了解即可,当然最好熟练使用其中一项。

HTTP,设计模式,算法,非常建议你去学,对于互联网大部分编程都会用到,你会知道它们是多么的通用,不要仅仅局限在前端,不然很难学好的。

这里没有提到各种框架,不是说它们不重要,而是你把这些搞懂了,再去学习会简单很多,而且大部分框架的核心都差不多学习其中一到两种即可,框架这里就不推荐了,另外这里可能更多说的关于JS的学习,但是学习的思想是不会变的,也因为本人的精力有限,其他方面你还得多去看看其他文章。

其实在很长的一段前端学习过程中,我始终是觉得自己是不会的,但我又多少有些懂,但就是说不上个之所以然,也就谈不上去实践。后来想想自己其实是懂的,有很多时候我在路上想,那个东西为什么这样的,另外一个东西又是那样的,当然这是后话了,因为在刚开始学这个东西的时候往往是很难静下心来去思考的,刚学东西的时候容易浮躁,但当你静下来多去问几个为什么之后很多东西就自然懂了。当然这里有个小技巧,就是问自己最核心的,比如很久以后我才彻底明白的闭包,我当时路上问自己,闭包究竟什么东西,为什么外部就可以访问内部的东西,突然顿悟,可以通过reurn,也可以想其他办法让外部可以访问内部变量,解决作用域,变量不被回收。

这里要说的技巧就是:当你觉得你会了,但是不会用的时候,是时候静下心来多问自己几个为什么。当然还有一点作为初学者一定要把复杂的东西变简单,现在的教程往往喜欢复杂化,很可能你就看不懂,这个时候,你应该问自己以下几件事:

1.这些代码全部都是必要的吗?

2.这个代码最核心是什么。

更新:2016.08.21

先学会怎么去用,再来编写核心代码。

别小瞧这两句话,它们却至关重要,比如你想学php,你先搜索一下PHP是干什么的?它有什么用?OK,接着你问自己,他最核心的是什么?,按照最核心的去做,其他的暂时都不要管,比如你只要知道PHP中的GET,POST接收前端发送的数据,接着你用PHP把数据发给前端这就是最简单的交互,但你不得不承认这就是最核心的。做为初期我们只能这样,等你理解了这一点之后,你可以开始进阶学习。

学习的建议:

不要为了找教程而找教程,这句话我多该和自己多说上几句,因为我就是这样一个人,资源很多了,但我还是喜欢不断的去找,现在还好一点,我希望你们不要这样,因为你会发现,如果你觉得某个教程写的不好,那可能很难找到一个教程适合你的,不是因为别人教程写的差(除非特别那种的),而是你该问问自己,是否有静下心来认真去看。找教程我给一个建议,建议你刚入门不要去看大牛的作品,最好看那些菜鸟或者和你技术差不多的,因为他们更容易让你懂,大牛的作品一般里面会涉及到很多东西,你去看的话,难免受打击,等到你了解部分之后再去品味大牛的作品。

当然菜鸟的文章多少有些错误的观点,但学习就是这个过程,不断的跟进,等到你有能力自己去研究的时候自然会知道哪些是错误的,同样道理本人博客也有大量的错误,也许有人会说,错误的你为什么还要去写,这不是教坏别人吗,当然这多少有些道理,但如果因为这个我就不去写了,那怎么能进步呢,再者说,如果看文章的人知道这是错的,自然也不会同意的我的观点,如果他不清楚,那只能说明他也不清楚什么是对错,尽管如此一旦他懂得了以后他会更加深刻的明白为什么这个是对的,为什么那个是错的。

后期的学习,静~~~专注!!!

坚持,我一直告诉自己,坚持,不然一切都白费,堕落很正常,难过也很正常,但想想他们不也是这样的吗,想起曾经有人和我说,他们都能,你为什么不能。

最后的最后,程序的路很长,如果你想在这条路上走,快快调整好你的心态,毕竟不是5年就是10年,是快乐是悲伤的过,一切由你,如果没有人给你指导,没有人给你鼓励时,请记得不时给自己一份鼓励和关心,虽然我们是程序员,但你应该利用剩余时间学会生活,我们不只是活在计算机世界里,我们还有很多,它们一样精彩,希望你留心的去关注它们。

2016.08.18更新

很多没有工作过的朋友尤其是那些喜欢专研的同学认为技术===工资,然而很大一部分却是:技术!==工资,曾经我就是这样天真的认为,然并不是这样的,工资往往和你的沟通能力,交际能力,思想,学历,技术这些方面挂钩,而不是单方面,为什么这么说,比如你在公司里面确实很努力,每天拼命的干活,但你从来都是干自己的事,那么公司老板根本不觉得你做了什么,有些人确实没干什么,但是他们每天在和老板沟通,这样的话就算他没做什么,老板也觉得他做的比你多,所有你最好得学会沟通。还有思想的提升,不要把自己当成一个彻彻底底的程序员,我们的生活不是为了程序而程序,这个你得时刻知道。

时刻给自己放松一下,别压抑的去学习。

这篇文章算是我大部分的学习经历吧,不一定你能产生共鸣,毕竟大家的生活环境都不一样,建议不要看太多这种类型的文章,就像不要为了找方法而找方法,大部分都差不多,只是你没有去运用罢了,人本身就不喜欢学习别人的方法,多少还是喜欢自己研究出来的,有些错还是得自己去尝试。

里面多少有些废话,可以把里面的重点抽里面,慢慢体会。

时间就像一条大河,我不知道我们说过多少的谎,又有多少是因为当时而说的。

2016.09.09更新

不要一直困在自己所限的技术里面,多看看其他的写法往往会有意想不到的所获,很多自己是想不到的,只有不断的学习才能进步的更快些。如果你觉得你懂了但是还是不会,其实缺少的是你站在更高的角度看待这个问题,因为我们往往容易把事情复杂化。多问个为什么,你那样做是在干嘛?该干嘛干嘛。

打赏支持我写出更多好文章,谢谢!

打赏作者

JavaScript 代码静态质量检查

2015/07/15 · JavaScript · 质量检查

原文出处: 百度efe - 我佛山人(@i我佛山人)   

自鸿蒙初判,Brendan Eich 10 天捏出 Mocha 之后,即便进化成 EcmaScript,这个语言依旧毁誉相随。那些经过重重劫难,侥幸渡劫成功的苦主标识了诸多天坑(见 JavaScript Garden) —— 当然,你也可以称之 feature。据无责任乱猜,Douglas Crockford 也没少踩坑,于是才有了蝴蝶书《JavaScript: The Good Parts》,下雨天与 JSLint 一起使用会更配哟。

图片 1

《JavaScript: The Definitive Guide》 V.S. 《JavaScript: The Good Parts》

时至今日,代码的静态质量检查在项目质量保障方面的重要性与必要性已毋庸置疑。越来越多的开发者意识到了这一点,纷纷在项目构建流程或者源码控制系统中添加静态检查的 hook。本文将依时间顺序,选出 JavaScript 史上的主要几个 Linter 作横向比较,最终属意谁家,那就见仁见智了。

利用 handlebars 实现后端组件化

2016/04/27 · 基础技术 · handlebars, 组件化

本文作者: 伯乐在线 - 亚里士朱德 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

基本说明(使用过exress和handlebars的可以略过):express中的handlebars引擎是这么生成页面的:

XHTML

/* layout.hbs * 主模板,所有的的页面都将替换"{{{body}}}","{{}}"相当于占位符,由数据进行替换 */ <!DOCTYPE html> <html> <head> <title>{{title}}</title> </head> <body> {{{body}}} </body> </html> /* index.hbs * 单个页面模板,这里以首页为例。"{{>}}"表示引用其他模板来替换,这里引用名为"partial"的模板 */ <div>index</div> {{>partial}} /* partial.hbs * 一个分页文件,被其他模板引用,分页之间也可以互相引用。 */ <div>123</div> /* index.html * 当浏览器请求index.html时,经过handlebars模板引擎处理后生成的页面 */ <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div>index</div> <div>123</div> </body> </html>

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
/* layout.hbs
* 主模板,所有的的页面都将替换"{{{body}}}","{{}}"相当于占位符,由数据进行替换
*/
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    {{{body}}}
  </body>
</html>
 
/* index.hbs
* 单个页面模板,这里以首页为例。"{{>}}"表示引用其他模板来替换,这里引用名为"partial"的模板
*/
<div>index</div>
{{>partial}}
 
/* partial.hbs
* 一个分页文件,被其他模板引用,分页之间也可以互相引用。
*/
<div>123</div>
 
/* index.html
* 当浏览器请求index.html时,经过handlebars模板引擎处理后生成的页面
*/
<!DOCTYPE html>
<html>
   <head>
     <title></title>
   </head>
   <body>
     <div>index</div>
     <div>123</div>
   </body>
</html>

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 2 图片 3

2 赞 18 收藏 4 评论

JSLint

JSLint 的名字源于早期用于检查 C 语言代码质量的 Lint,老道把认为非 Good Parts 、有陷阱的部分全部报 warning,而且绝不允许妥协(当前版本已经允许部分的可配置项),固执得令人心疼。

虽然这个在 2002 年的 JSLint 代表着先进的方向,但是前端的发展一日千里,严格不妥协的 JSLint 开始阻碍前端的发展 —— 例如函数内变量全部集中在顶部定义,推荐一个 var 定义多个变量等。最最最重要的是,老道拒绝开源 JSLint(无责任乱猜,也许JSLint 的实现代码违反它自己制定的规则)。

截止 2015年6月9日,JSLint 仍然在更新,官网上写着 JSLint edition 2015-06-02 BETA,固执的老道。

实现步骤1:模板

react的火热让“组件化”的概念持续升温,不过组件化确实在开发中提供了高可复用的代码,大大减少了工作量和bug,确实值得提倡。举个例子。

XHTML

<ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li> </ul>

1
2
3
4
5
<ul class="titles border" id="navigator">
  <li class="title">标题1</li>
  <li class="title">标题2</li>
  <li class="title">标题3</li>
</ul>

这一段html代码,会在几个页面用到,如果按照一般的做法把这段代码ctrl-c、ctrl-v到要用的页面。就会出现两个问题:1.重复代码增多(ctrl-c、ctrl-v应该是程序员的大忌),当然这不是最重要的,最重要的是第2点——维护性差。如果现在我要把“标题1”改成“标题0”,那么只能进行全量搜索然后替换,不仅操作麻烦而且容易出错。 如果用到了模板技术的话这个问题就很好解决,把上面那一段代码写成一个模板,在handlebars中我们成为分页,然后需要这段的代码的页面引用这个分页,如果要修改的话直接修改分页了。以handlebars为例:

XHTML

//navigator.hbs <ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li> </ul> //在index.hbs中引用 {{>navigator}}

1
2
3
4
5
6
7
8
9
//navigator.hbs
<ul class="titles border" id="navigator">
  <li class="title">标题1</li>
  <li class="title">标题2</li>
  <li class="title">标题3</li>
</ul>
 
//在index.hbs中引用
{{>navigator}}

为什么handlebars?本文所用的后端模板引擎都以handlebars为例,原因是上次听去哪儿前端团队做的关于node.js的技术分享,炫耀了一个自己基于handlebars实现的小功能:分页中引用的css文件可以全部放到head中。心中一直觊觎这个小功能,直到最近和“组件化”的概念结合在一起考虑,发现这个功能对于实现后端的组件化很有帮助。自己对handlebars也略有研究,所以试着用handlebars来实现一下“组件化”。

关于作者:追梦子

图片 4

快乐一直在我们身边,不管你身处何地何时,只要心是快乐的,一切都是快乐的。是那一秒,也是那一秒,都不会改变。 个人主页 · 我的文章 · 8 ·    

图片 5

JSHint

鉴于 JSLint 的现状,Anton Kovalyov 以 JSLint 为蓝本,在社区力量的帮助下实现了开源的 JSHint

相较之下,JSHint 更友好,可配置性更高。由于大家受 JSLint 的压迫太久,而且得益于开源的优势,风头很快盖过 JSLint,一时无两,获得大量 IDE/Editor 的支持。然而成败萧何,JSHint 的成功源于对 JSLint 的改进,但同样继承了 JSLint 的诸多缺点,比如不易扩展,难以根据报错信息定位到具体的规则配置等。虽然有专门的文档说明,但是修复的成本仍旧不低,于是出现了JSLint Error Explanations 这样的网站,针对 JSLint/JSHint/ESLint 报的错误作修复说明 —— “啪啪”,这对 JSHint 团队来说无异于打脸。

JSHint 团队也逐渐意识到这个问题的重要性,2012 年时曾有 讨论 使用 esprima 生成 AST(见 jshint-next,提示该项目已过期,已 merge 到主项目,但在 2013/5 又从主项目移除,现已难觅芳踪,原因未明),并有专门针对 JSHint 的 warning 作修复的fixmyjs。

实现步骤2:打包

这样就完美了么?no~no~no~ 上面的这一段html代码中可是有样式的,按照w3c的规范,样式应该写在css文件中,怎么实现?自然而然想到两种解决办法:

  1. 在分页中加入link标签来引入所需的样式,想一想html代码中到处穿插link标签是什么感觉~且不说生成页面难以维护,浏览器渲染速度也会受影响。
  2. 把分页所需的样式放在公共的样式文件中,这是目前我们项目的通用做法,纯粹的懒人策略,缺点很明显,很多页面引用了一些无用的样式,浪费网络带宽,尤其当项目变大时这个缺点将更加明显。 所以最好的解决方法是按需加载,只加载引用组件所需的样式,当然样式文件按分页拆分得这么细的话会增加请求数,影响不会太大,如果想优化的话也可以压缩合并成一个请求,这个后面再说。 handlerbas中常见的扩展方式就是编写helper,我们可以编写一个helper,

XHTML

//app.js hbs.registerHelper('css', function(str, option) { //在上下文中创建一个数组用来保存该页面需要用到的css文件 this.cssList = this.cssList || []; this.cssList.push(str); });

1
2
3
4
5
6
//app.js
hbs.registerHelper('css', function(str, option) {
  //在上下文中创建一个数组用来保存该页面需要用到的css文件
  this.cssList = this.cssList || [];  
  this.cssList.push(str);
});

这个helper的作用就是注册一个名为”css”的helper,帮我们保存分页中用到的css文件地址。然后我们在主模板layout的head标签部分遍历cssList数组循环加载出来。

XHTML

//layout.hbs <head> <title>{{title}}</title> {{#each cssList}} <link rel="stylesheet" href="{{this}}" media="screen" title="no title" charset="utf-8"> {{/each}} </head> ...

1
2
3
4
5
6
7
8
9
//layout.hbs
<head>
  <title>{{title}}</title>
 
  {{#each cssList}}
  <link rel="stylesheet" href="{{this}}" media="screen" title="no title" charset="utf-8">
  {{/each}}
</head>
...

同时原来的分页改成

XHTML

//navigator.hbs {{css '/stylesheets/components/navigator.css'}} <ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li> </ul>

1
2
3
4
5
6
7
//navigator.hbs
{{css '/stylesheets/components/navigator.css'}}
<ul class="titles border" id="navigator">
  <li class="title">标题1</li>
  <li class="title">标题2</li>
  <li class="title">标题3</li>
</ul>

上面写的只是一个简单的无逻辑的静态组件,有些组件可能会有交互效果,比如处理一些点击事件或者对外暴露可操作的接口等,那么就需要js逻辑来实现了。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:代码静态质量检查,前端这条路

上一篇:致刚入行的前端工程师,面向属性的CSS命名 下一篇:刨根问底,Chrome开发者工具不完全指南
猜你喜欢
热门排行
精彩图文