第 4 页|IT-北北报

多行溢出省略号

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)进行优化保存
相信漂亮的代码是优雅的舞者~~~

前端框架所使用的技术

2016/07 01 12:07

我们努力使用最前沿的前端技术,做最酷炫的交互效果,始终保持自身竞争力,做一个前端工程师该做的事情。以下是前端技能包,请自行提高学习。

CSS

Bootstrap3: http://www.bootcss.com/

Sass: http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/

JS

Jquery

ES 6:http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/

http://es6.ruanyifeng.com/

JSFunction:http://www.itbbb.com/jsfunction/jsfunction.html

React:http://reactjs.cn/react/index.html

http://www.hubwiz.com/course/552762019964049d1872fc88/

React-bootstrap:https://react-bootstrap.github.io/getting-started.html

React-Reflux:https://segmentfault.com/a/1190000002793786

React-Router:https://github.com/reactjs/react-router

React生态圈:https://github.com/facebook/react/wiki/Complementary-Tools

EChart3.0: http://echarts.baidu.com/index.html

JS注释规范(Yuidoc):http://www.iunbug.com/archives/2012/06/07/296.html

Iconfont

图标素材库:http://www.iconfont.cn/

http://v3.bootcss.com/components/#glyphicons

自动化构建

gulp:http://www.hubwiz.com/course/562089cb1bc20c980538e25b/

webpack: http://www.hubwiz.com/course/5670d0a77e7d40946afc5e65/



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