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

soゝso 2016-08-22 18:32:05 783

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

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),怎么可能能活那么久。

版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/28.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

相关文章
怎么合理管理提高Javascript性能
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 的区别
最新文章
Macbook teamviewer 突破5分钟,苹果电脑重置 Mac 地址,100%解决限制 218
腾讯云代金券 10000 元/ 30000 代金券领取技巧 321
SEO 换友情链接的主意事项,友情链接断链、友情链接套路说明 229
Springboot + Mybatis,数据库多数据源配置项目Demo【源码下载】 1893
Mac mtr 安装并使用,mrt: command not found 297
Java 集成阿里云消息队列,日志消息存储 497
域名备案注意事项,网站域名ICP备案快速通过攻略【干货分享】 470
Springboot 集成Aliyun MQ消息队列,Aliyun 消息队列配置及代码实现 835
SpringBoot 集成Spring-data-redis,redis对象序列化存储 2025
天气API,全国天气 JSON API接口,可以获取十五天的天气预报 598
最热文章
Elasticsearch教程(四) elasticsearch head 插件安装和使用 126749
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 107829
Elasticsearch教程(六) elasticsearch Client创建 78804
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 74431
Elasticsearch教程(二),IK分词器安装 73210
Elasticsearch教程(一),全程直播(小白级别) 65754
Elasticsearch教程(五) elasticsearch Mapping的创建 61863
Elasticsearch教程(三),IK分词器安装 (极速版) 56354
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 53535
Java 解析JSON,JSON-LIB jar包下载和使用。 48956

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

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

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

支付扫码

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

正在加载... ...