怎么合理管理、提高Javascript的性能

soゝso 2016-08-22 18:32:05 761
分享到:

我随便去复制一段代码来:

J_valcho = function(w){
	var l = w.find('b'), r = w.find('i'), p = w.find('input'), a = ['spring', 'summer', 'fall','winter'];
	l.click(function(event) {
		var i = parseInt(p.attr('data-season')), y = parseInt(p.attr('data-year'));
		if(i == 1){i = 4;y--;p.attr('data-year',y);}else{i--;}
		p.val(y + a[i-1]).attr('data-season', i);
	});
	r.click(function(event) {
		var i = parseInt(p.attr('data-season')), y = parseInt(p.attr('data-year'));
		if(i == 4){i = 1;y++;p.attr('data-year',y);}else{i++;}
		p.val(y + ' ' + a[i-1]).attr('data-season', i);
	});
};

相信一眼看过去,就觉得很乱。

我在《SegmentFault》网站上看到了这个回复,我觉得不错,就信手拈来了。

我在大概一年前也有同样的困扰,你可以看到,大家的回复都很重肯,很多老司机。
其中这个回答非常棒,体现了很清晰的良好的设计思想,可以说一下点醒了我:

如何在绑定事件的时候,不用关心具体绑定给谁?

事实上,当你开始思考这个问题的时候,说明你开始走起了前端之路。

从jQuery解脱

你需要改变现有类似$('.class1')这种方式,有计划的用事件委派来绑定,这样你的问题解决了,也是第一步迈出了。想想看为什么你看到的牛逼的代码感觉很牛逼?
你需要抽离jQuery的部分和真正逻辑部分,相信我,我理解DOM操作复杂度,我也理解业务复杂度,所以你才需要拆分,不要再看到$('.class').parent().next().next()这种的。

面向对象

记得大学的课程吗,之所以叫面向对象思想,因为这是一种思考方式。你需要将代码颗粒、分散成小而美满足面向对象思想的结构,比如可复用性、适度的封装、善用继承等。
接下来对项目目录和文件结构,甚至命名有要求。简单说不再是一个页面一个js或者一个功能一个js,而是一个对象一个js。

沉淀代码

开始尝试比如React,AngularJS等,看看为什么这些框架写出来的和你现在业务代码不一样。推荐React。
这时候在回来思考你的代码,封装自己的DOM操作方式,形成自己的框架,和完整的前端工程体系。

最后

我总结了下这个路程:

  1. 开始有计划的用事件委派来绑定

  2. 开始抽离jQuery的部分和真正逻辑部分

  3. 开始将代码颗粒、分散成小而美满足面向对象思想的(比如可复用性、适度的封装、善用继承等)结构

  4. 开始对项目目录和文件结构,甚至命名有要求

  5. 善用技巧,摆脱类似$('.class1')这种方式

  6. 开始尝试比如React,AngularJS等。

  7. 封装自己的DOM操作方式

  8. 形成自己的框架

  9. 形成完整的前端工程体系

我觉得回答的不错。其实有的时候确实需要静下心来,考虑怎么提高自己的某个部分。Javascript 有很多争议,我记得看过国外的几片文章,一个作者说Javascript是屎(shi),而另外一个大牛又说Javascript是世界上最伟大的语言。

所以我经常一句话就是:一个语言的存在,只要它存在,那就有它存在的道理和价值。如果它真的很屎(shi),怎么可能能活那么久。

关于作者
目前就职于国内某电商平台公司打杂。。
相关文章
MySQL数据库表怎么锁定
JavaScript function 类型的使用说明
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统?
是Referer?Referer的作用?空Referer是怎么回事?
Javascript模块化编程,本站使用 require.js 优化JS加载, require.js下载
SEO 教程 , 怎么构建网站结构路径?网站目录结构对SEO的影响
不是Maven项目怎么引入Maven 方式的Jar包(七牛篇)
Javascript 生成UUID,Java生成UUID
JS中 “is not defined” 如何判断defined,defined和undefined 的区别
js html5 canvas制作多个小球碰撞的动画效果
最新文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 38754
JS解密,JavaScript 解密,任何JS加密都能100%解密,以及JS 加密讲解 66
阿里云DNS 解析讲解,SEO配置搜索引擎线路解析 41
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程 89
CDN 请求返回 connection reset by peer,被拦截请求解决方案 33
Google AdSense 申请技巧,谷歌广告申请通不过教程 66
Mac 安装 JMeter,JMeter 下载,JMeter Http 压力测试【图解】 45
支付宝吱口令自动复制脚本,自动复制 JavaScript 代码介绍 866
谈谈这次对 SOJSON 的改版 146
Java 计算2个时间相差多少年,多少个月,多少天的几种方式 484
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 38754
Elasticsearch教程(四) elasticsearch head 插件安装和使用 108910
Elasticsearch教程(六) elasticsearch Client创建 73264
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 70727
Elasticsearch教程(二),IK分词器安装 67441
Elasticsearch教程(三),IK分词器安装 (极速版) 54071
Elasticsearch教程(五) elasticsearch Mapping的创建 51534
Elasticsearch教程(一),全程直播(小白级别) 51227
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 47703
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载 40877

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...