第 3 页|IT-北北报

前端打怪升级的心路历程

2016/07 11 15:07

如果前端像一个打怪升级的过程,满级90级,基本曲线可能是这样的。
新手村任务学习css和div,还有简单js,学会了切图,恭喜你升到了5级,可以打开第一个传送门,去城镇中心了 =>

来到城镇中心,你接到了第一个任务,去野外打怪练级,主要是熟练掌握Javascript与jQuery,通过这个任务,你升到了10级 =>

接下来的任务稍微复杂一些,去野外探索主流的jQuery Plugin,UI框架,HTML5、Css3特效,经过了这番历练,你顺利升级到了15级 =>

接下来,你有幸离开城镇中心,去整个world去自由探索了,在这里你将遇到前端庞大的生态体系,并且你要根据你的情况给自己加天赋点了。第一件事,你要学会简单工程化思想,比如自动构建,这里你可以根据自己的天赋去学习gulp or grunt,完成了前端的压缩合并,降低http请求的初步实践后,恭喜你,升到20级了 =>

然而困难才刚刚开始,如何合理的安排你的目录结构,怎么更好的去做构建将成为你的下一个课题,从现在开始,你要建立模块化的思想了,css、js、html、image怎么合理的排兵布阵,发挥应有的效力,为了完成了这些,你可能用到了sass or less等css预编译框架,requirejs or seajs模块化脚本框架,至此,25级我想你应该有了 =>

但是如今的前端发展已经不是你能想象的了,25级在很多人看来已经是大牛了,然而,我们目前前端界有三个最困难也是必须要啃的副本,AngluarJs、React、Vue,AngluarJs是最早由Google发布的MVVM框架,so,或多或少你要***一两次这个副本,去理解它的思想,***完这个副本,我觉得你至少要到35级了 =>

紧接着React和Vue的副本难度将更加巨大,很多颠覆性的思想开始弥漫开,你再也不能像从前那样去思考前端问题了,你要突破自己,颠覆自己,去迎接组件化时代的到来,同时,新的ES6装备你必须***到,node.js的应用你也要如数家珍,这两个副本至少会让你升15级,50级 =>

当然伴随25级后的整个过程中,你要经历PC端和移动端双端开发的训练,也许你会接触bootstrap、也许是Ionic,也许是zepto,也许是React ui,也许你会懂flex布局,总之,移动端的训练会给你增添10级的经验,60级 =>

至此你应该已经拥有组团打****的能力了,接下来你可能要思考的更加广泛一些,如何与服务器端配合,底层数据库逻辑是怎样的,请求是怎么通讯的,业务是怎样的,怎么样打怪可以掉更多装备与金币,这些思考可以让你升10级,70级 =>

我觉得70级之后,真的就是要拼天赋的时候了,这之后的发展道路完全看你的天赋点,你是力量型技术主力,成为技术大牛;还是法师型指挥官,掌控全局;亦或是敏捷型伤害输出,对技术产品有敏锐洞察力,引领方向。不管你是什么类型,这个阶段的磨练将经历你职业生涯中比较痛苦的过程,这之后……

我也说不定了……

多行溢出省略号

2016/07 04 11:07
记录一个知识点:

/*文字溢出省略*/
//单行溢出省略号
@mixin text-over {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行溢出省略号
@mixin multi-text-over {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;//几行后显示省略号
}

前端规范

2016/07 01 12:07

编码规范

常量命名:(大写名字_大写功能)

const HELLOWORLD_ICON = "";
const HELLOWORLD_CONFIG = "";

变量命名:(驼峰)

let helloWorld = "";
var hello = "";

Dom对象命名:(驼峰_功能)

ref = "helloWorld_form";
ref = "hello_btn";
ref = "helloWorld_txt";
ref = "hello_select";
ref = "helloWorld_radio";
ref = "hello_check";
ref = "helloWorld_div";
...

Class、函数命名:(类首字母大写驼峰、函数驼峰、注释规范参见YUIDoc)

公共组件与方法必须写注释,业务组件与方法依照实际情况书写注释
/**
@class HelloWorld
@extends React.Component
 */
class HelloWorld extends React.Component{
  /**
  @method methodName
  @param template {String} 模版
  @param data {Object} 对象
  @return {String} 返回值是模版加data.name
  */
  methodName(template, data){
   return template+data.name;
  }
  ...
}

Scss变量、函数命名规范

颜色变量必须提取,有利于后续做皮肤扩展
$header-bg: #3a3a3a;
/*文字溢出省略*/
@mixin text-over{
...
}

html还有html的class、id命名、及未尽事宜都遵循驼峰命名规则;

编码原则:

1.公共方法要提取成function,公共样式提取成@mixin

2.变量命名

错误实例
let a=1;
let b="abc";
let c=[];
正确实例
let a=1,b="abc",c=[];

3.对于多次使用的对象要用局部变量

错误实例
$(".abc").addClass("active");
$(".efj").addClass("active");
$(".abc").html($(".efj").html());
正确实例
const ACTIVE="active";
let _abc=$(".abc"),_efg=$(".efj");
_efg.addClass(ACTIVE);
_abc.addClass(ACTIVE).html(_efh.html());

4.每个页面引用css不得超过2个(公共样式、业务样式),js不得超过3个(框架js、插件js、业务js),如果超出考虑是否要进行压缩合并,除了必须要引用的框架文件外,单个文件体积尽量不要超过200k

5.图片保存要使用photoshop的control+shift+alt+s(Mac:cmd+option+shift+s)进行优化保存
相信漂亮的代码是优雅的舞者~~~



无觅相关文章插件,快速提升流量