web前端分享会

——团队开发的建议及实践

Created by jmj

分享内容

JS作用域及函数模块化
变量的命名规则及建议
用原生DOM API替代jQuery
网站性能及细节优化
善用插件及重复造轮——团队合作效率的提高

JS变量的作用域和模块化

1、尽量避免全局变量

JS里变量没有使用范围，任何变量，函数，数组，对象，只要不在函数内部，都被认为是全局的

为防止变量的污染，解决办法：

根据js的作用域规则，函数外部无法访问内部的变量。所以把变量放在一个匿名函数内部，定义完之后立即调用它

例如:

下面的写法将会产生三个全局变量和两个全局函数：

var name = 'jmj';
var age = '23';
var status = 'single';
function createGirl(){
	// your code
}
function getGirlDetails(){
	// your code
}

解决：

;(function(){
	var name = 'jmj';
	var age = '23';
	var status = 'single';
	function createGirl(){
		// your code
	}
	function getGirlDetails(){
		// your code
	}
})();

如果你想在函数外面也能使用里面的东西，那就要做些修改:

var myApplication = function(){
	var name = 'jmj';
	var age = '23';
	var status = 'single';
	return{
		createGirl: function(){
			// your code
		},
		getGirlDetails: function(){
			// your code
		}
	}
}();
//使用：
myApplication.createGirl();
myApplication.getGirlDetails();

2、函数模块化

定义全局函数：

window.FUN = {};
var FUN = {
	search: function(){},
	currency: function(){},
	cart: function(){}
	//some....
}
//使用：
FUN.search();
FUN.currency();
FUN.cart();

或者：

FUN.cart = {
	addCart: function(){},
	miniCart: function(){}
	//some...
}

FUN.cart.addCart();
FUN.cart.miniCart();

变量的命名规则及建议

在同一个函数内部，局部变量的声明建议置于顶端

 // 孬
 var clear = function(el) {
    var id = el.id;

    //your code

    var name = el.getAttribute("data-name");

    //your code

    return true;
 }

便于其他人查阅代码时，一眼看出此函数所使用的所有变量

 // 好
 var clear = function(el) {
     var id = el.id,
         name = el.getAttribute("data-name");

     //your code
     return true;
 }

使用变量前，要判断它是否存在/定义

FUN.methodName = function(a){
	var a = a || 1;
	//或
	var a = arguments.length >= 1 ? a : 1;
	//或
	var a = typeof a==='undefined' ? 1 : a;
	
	//总结：使用变量名得有个备胎，防止报错
}

缓存变量

// 孬
var
	a = $('#container'),
	b = $('#container li'),
	c = $('#container li span');

// 好
var
	a = $('#container '),
	b = a.find('li'),
	c = b.find('span');

缓存变量

//孬	 
var h = $('#element').height();
$('#element').css('height',h-20);

//好	 
var e = $('#element');
var h = $element.height();
e.css('height',h-20);
// some code 下面可能又有用到变量e的地方

尤其函数内部使用this或者$(this)时：

var that = $(this);
//或者
var _self = $(this);

//孬
$('.select-item').on('click', '.tit', function() {
	if(!$(this).hasClass('on')){
		$(this).siblings('ul').show();
	}else{
		$(this).siblings('ul').hide();
	}        
});

//好
$('.select-item').on('click', '.tit', function() {
	var that = $(this);
	if(!that.hasClass('on')){
		that.siblings('ul').show();
	}else{
		that.siblings('ul').hide();
	}        
});

-用清晰，周到，适当的HTML类名。名称应该体现HTML和CSS文件的信息。
-避免很系统地使用类名缩写，这会让事情变得难以理解。

/* 孬的： */
.s-scr {
  overflow: auto;
}
.cb {
  background: #000;
}

/* 好的：*/
.is-scrollable {
    overflow: auto;
}
.column-body {
    background: #000;
}

//孬的：
function unit(){
	//your code
}

//好的:
function getUnitList(){
	//your code
}

js与css命名规则的不同

javascript:
使用驼峰式或者下划线：getElementById、querySelector
全局函数、全局变量可以考虑用全大写 (COOKIESDOMAIN,CART,DIST_URL)

css:
css的class命名中尽量不出现大写字母，（必须）采用中划线” - “对class中的字母分隔
产品线-产品-模块-子模块

 /* 孬的： */
 .hotelTitle {
     font-weight: bold;
 }

 /* 好的：*/
 .hotel-title {
     font-weight: bold;
 }

为什么：
查阅一些资料、文章：bootstrap、jQuery
js方法：getElementById() setAttribute()
css属性：background-color， line-height

用原生DOM API替代jQuery

原因：

jQuery能做的事情，同样可以用原生代码来做，必要时组合jquery和js 例如this.value代替$(this).val()
个人技术的提升（学好原理，不管框架如何变，我自岿然不动）
牢记没有任何框架能比原生代码更小，更轻，更高效
提高逼格

用js代替jQuery举例：

//jQuery:
$('#myElement');
//js:
// IE 5.5+
document.getElementById('myElement');
// IE 8+
document.querySelector('#myElement');

用js代替jQuery举例：

//jQuery:
$('.myElement');
//js:
// IE 9+
document.getElementsByClassName('myElement');
// IE 8+ 
document.querySelectorAll('.myElement');

此DOM API还有以下用法(就像css选择器一样):

document.querySelectorAll('div');
document.querySelectorAll('[data-name="hello"]');
document.querySelectorAll('#mainWrap > div')
//感兴趣搜索其它语法

利用这些特性简单的封装一下：

window.$ = function(selector) {
    var selectorType = 'querySelectorAll';
    return document[selectorType](selector);
};
$('#mainWrap')
$('div')
$('[data-name="hello"]')
$('#mainWrap > div')
//jQuery内部就是通过这个DOM API封装的选择器，不过有作其它兼容性处理，在此不多讨论

网站性能及细节优化

网速慢怎么办? 异步表单提交的时候 onsubmit="return false"

提交事件绑定在form标签上的submit，而不是click

异步操作的时候，需要有loading状态按钮加上disabled、cursor （例如：加入购物车方法，按下按钮后，需要禁用按钮，有一个等待状态，此时按钮无事件）

使用dom前，判断是否存在

if($('element').length){
	//your code
}

表现与结构分离，避免代码耦合

减少使用$(ele).css('property', 'value')，使用addClass()代替

异步加载js，css也可以异步加载

//定义函数
FUN.loadCSS = function(url ,callback){
    var linkLabel = document.createElement('link');
    linkLabel.rel = 'stylesheet';
    linkLabel.href = url;
    document.body.appendChild(linkLabel);
}
//使用
FUN.loadCSS(DIST_URL+'js.plug/swiper.min.css');
//选择性使用
element.value ? FUN.loadCSS(DIST_URL+'js.plug/swiper.min.css') : '';

丢弃HTML5淘汰的标签及属性,如,align, cellspacing, font等;

与后端约定好json格式

以对象的形式返回回来，而不是字符串

如果是字符串，请使用$.parseJSON而不是eval

{
    "status":0,
    "msg":"success",
    "data": {
        "off_price":  "999"
    }
}

内容部分或者重要的内容放在html前面优先加载，再采用float、position等方法布局

因为我们的模板使用的是smarty，所以html不要使用html注释< !-- -->，而使用smarty注释{* *} 推荐安装sublime插件smarty

公用函数必须写注释（参数、数据类型、返回值）推荐sublime插件DocBlockr

/* 
 * @desc             							加入商品到收藏夹 
 * @param      {object||string}  obj            点击那个按钮到收藏夹 该按钮需要有属性 gid
 * @param      {function}        callback       加入成功后，还需要何操作？
 * @author     jiangminjing
 * @date 	   2015/05   
 * @return	   
 */

善用插件及重复造轮——团队合作效率的提高

加入购物车
焦点图
固定导航菜单
固定导航菜单
滚动监听
触屏事件
日历控件
瀑布流
图片放大镜
等等.....
这些重复的事情我们用公用函数、js/jq插件来提高我们的效率及维护团队开发的统一。

公用函数：

GLOBAL.currency.change_houbi();
GLOBAL.cart.addCart();
GLOBAL.sign.login();

等等....

各位同事也可以扩展我们的公用函数写在common.min.js里

js/jq插件：

jQuery很方便、可以提高开发效率，这无可否认。但是我们还可以让它更方便一些 ———— jQuery插件

优秀的jQuery插件：

layer
LAB.js
jquery.cookie.js
jquery.validate.js

等等.....

使用插件的注意事项：

插件的文件大小和兼容性
插件的文档是否详细明了、扩展性是否强，作者是否有在维护
同一个网站不可使用相同类型的插件两次以上
安装是否简单、快捷、快速上手，无较大的学习成本
使用时保留版本和完整文件结构，方便升级及排察问题
异步/选择性加载插件

if(element.length){	
	FUN.loadCSS('/path/js.pulg/file.css');
	$.LAB.script('/path/js.pulg/file.js')
	 .script(function(){
	 	//使用插件
	 })
}

最近写了2个插件：

jquery.nail.js
jquery.voteStar.js

一个钉子，用于固定页面元素

jquery.nail.js

https://github.com/jmjweb/jquery.nail.js

评分星星

jquery.voteStar.js

https://github.com/jmjweb/jquery.voteStar.js

The End

Created by 江大侠

web前端分享会 ——团队开发的建议及实践 Created by jmj

web前端分享会 – ——团队开发的建议及实践 – 1、尽量避免全局变量

jmjweb

web前端分享会 – ——团队开发的建议及实践 – 1、尽量避免全局变量

0 1

web-dev-share

web前端分享会

——团队开发的建议及实践

分享内容

JS变量的作用域和模块化

1、尽量避免全局变量

2、函数模块化

变量的命名规则及建议

js与css命名规则的不同

用原生DOM API替代jQuery

网站性能及细节优化

善用插件及重复造轮——团队合作效率的提高

最近写了2个插件：

The End

web前端分享会 – ——团队开发的建议及实践 – 1、尽量避免全局变量

jmjweb

web前端分享会 – ——团队开发的建议及实践 – 1、尽量避免全局变量

0 1 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

web-dev-share

web前端分享会

——团队开发的建议及实践

分享内容

JS变量的作用域和模块化

1、尽量避免全局变量

2、函数模块化

变量的命名规则及建议

js与css命名规则的不同

用原生DOM API替代jQuery

网站性能及细节优化

善用插件及重复造轮——团队合作效率的提高

最近写了2个插件：

The End

0 1