《编写优雅的前端业务代码》听后感
2017-03-12 11:14
323 查看
这场知乎live主要拿了一份现实工作中的业务代码进行一步步地优化分析。每个人的收获都是不一样的。我就以我的水平去总结一下这场live,也说说我的收获。
原来的代码一共300行不到的js,用jquery写的。整个代码结构,就是前面定义少许变量,然后一堆函数,一堆事件的绑定,中间夹杂着几个函数的调用,算是初始化的功能吧。对这份代码的整体感受,代码格式整洁,有些注释,太多DOM操作,太多样式的计算看得有点眼花缭乱。
对于我这种小白水平的来说,如果要我去优化。我会做的不多,最多就是把那些函数的调用放在一块,省得找来找去的。可能会调换一下代码的顺序,更好读一些。一个函数如果业务太多,拆分成多个子函数来实现。提取一些复用的函数和变量。
然后,我们看下大神是怎么做的。
然后在代码结构上,将代码写成模块的形式。定义了一个构造函数(来模拟类), 函数内部做了一些初始化操作的事情,然后在把那些方法定义在它的原型对象(prototype)上,顺便把这个类暴露给全局变量,然后在dom加载完毕之后进行实例化。简化的框架如下:
再细节地来说,整个代码加入了生命周期的概念。生命周期的概念我听过,比如一些框架都有自己的一套生命周期,但我不怎么熟悉。对业务代码的生命周期的概念更加模糊,其实也有看过或者接触过。听完这场live之后,我理解的业务代码的生命周期,就是初始化过程中,初始化一些组件,绑定一些事件啊,然后在最后销毁这个模块的时候,将这些组件销毁,将事件解绑。我觉得主要的目的就是释放内存吧。是不是理解的对不对,或者理解地比较狭窄?
然后它还做了个小细节的优化,就是所有事件绑定的都整理到一块,写在一个eventsMap里面,用一个函数将元素和事件绑定在一块。
到此,整个代码的结构都清晰了很多。
代码看得懂,可能自己写不出来,ES6还没好好地看好一遍,对类和继承理解也还没那么深刻。我觉得这里比较巧妙的是,多级继承的写法。在定义的时候,将父类作为函数变量,使得最后myApp的类继承自一个高阶函数的样子。我是第一次见过这样的写法。抽出来这些代码的关键部分:
总之,这次改造非常高大上,需要很好地掌握模块化,类,继承,以及ES6的语法糖。
这次live,从一个很一般的js业务代码一步一步地重构,的确挺有收获的。
最后大神对这次live进行了总结。我用我的话来说一下那些我理解的点:
合理的选择器:无意义的样式,以 “j-“为前缀
选择器的统一管理
事件绑定的统一管理
生命周期的概念
方法的复用
模块化
转载请注明出处:http://blog.csdn.net/fen747042796 野草园
欢迎关注我的知乎:野蛮的小小芬
原来的代码一共300行不到的js,用jquery写的。整个代码结构,就是前面定义少许变量,然后一堆函数,一堆事件的绑定,中间夹杂着几个函数的调用,算是初始化的功能吧。对这份代码的整体感受,代码格式整洁,有些注释,太多DOM操作,太多样式的计算看得有点眼花缭乱。
对于我这种小白水平的来说,如果要我去优化。我会做的不多,最多就是把那些函数的调用放在一块,省得找来找去的。可能会调换一下代码的顺序,更好读一些。一个函数如果业务太多,拆分成多个子函数来实现。提取一些复用的函数和变量。
然后,我们看下大神是怎么做的。
第一次优化
这一次在结构上是比较大的修改,算是一次大重构。首先用经典的立即执行函数写法把所有代码包起来( 主要作用应该是避免污染全局变量 ),一般jquery的插件都可以看到。而原始代码用的仅仅是$(function(){ //some code }),主要是为了保证在dom加载完毕之后才执行代码。
然后在代码结构上,将代码写成模块的形式。定义了一个构造函数(来模拟类), 函数内部做了一些初始化操作的事情,然后在把那些方法定义在它的原型对象(prototype)上,顺便把这个类暴露给全局变量,然后在dom加载完毕之后进行实例化。简化的框架如下:
// 立即执行函数 (function($, global, doc){ var app = function(options){ // 一些变量的初始化 // 执行某些函数,进行初始化 init(); }; app.eles = {}; //存了一些元素的map,用静态变量的形式。我觉得写在上面匿名函数内部this.eles也是一样的吧!? app.prototype = { constructor: app, // 修改构造器的指向 // 前面加_表示内部私有函数,一种约定习惯吧 _foo: function(){ }, init: function(){ } // ... // 以及 所有的函数方法 } // 将这个模块暴露给全局变量 window.app = app; // dom加载完毕之后,实例化一次 $( function() { new app(); }) })(jQuery, window, document, undefined)
再细节地来说,整个代码加入了生命周期的概念。生命周期的概念我听过,比如一些框架都有自己的一套生命周期,但我不怎么熟悉。对业务代码的生命周期的概念更加模糊,其实也有看过或者接触过。听完这场live之后,我理解的业务代码的生命周期,就是初始化过程中,初始化一些组件,绑定一些事件啊,然后在最后销毁这个模块的时候,将这些组件销毁,将事件解绑。我觉得主要的目的就是释放内存吧。是不是理解的对不对,或者理解地比较狭窄?
然后它还做了个小细节的优化,就是所有事件绑定的都整理到一块,写在一个eventsMap里面,用一个函数将元素和事件绑定在一块。
app.prototype = { constructor: app, // 修改构造器的指向 // 前面加_表示内部私有函数,一种约定习惯吧 _foo: function(){ }, init: function(){ // 初始化操作 this.initWidgets(); this.bindEvents(); }, initWidgets: function(){ // 初始化组件 }, destroyWidgets: function(){ // 销毁组件 }, bindEvents: function(){ // 绑定事件 }, unbindEvents: function(){ // 解绑事件 } destroy: function(){ // 整个模块的销毁 this.unbindEvents(); this.destroyWidgets(); } // ... // 以及 所有的函数方法 }
到此,整个代码的结构都清晰了很多。
第二次优化
这次主要是细节上的优化,把常用的变量和dom元素提取出来集中管理,函数内部的一些变量也提取在函数内部的最前面,以便于复用。一个注意点就是dom的元素可以保存为一个变量,这样有利于代码压缩。因为如果你是$(‘myContent’),里面的’myContent’是无法被压缩的。还有,一个函数如果太长了,将内部部分代码抽取出来变成一个新的函数,这样可读性强一些。这些算是比较常规的优化。第三次优化
提取了公共的基础函数库,封装在util对象中。一些if语句用三元表达式来代替,switch语句改成更加合理的方式。第四次优化
这次优化也是一次大重构。它结合了模块化,类和继承等用ES6语法重构了一次。本来是一个300行不到的js文件,现在拆成了7个加起来500多行的js文件。代码看得懂,可能自己写不出来,ES6还没好好地看好一遍,对类和继承理解也还没那么深刻。我觉得这里比较巧妙的是,多级继承的写法。在定义的时候,将父类作为函数变量,使得最后myApp的类继承自一个高阶函数的样子。我是第一次见过这样的写法。抽出来这些代码的关键部分:
// myApp.js import ... from ... .... class myApp extends drag(resize(base(config))){ constructor( options ){ } ... } export default myApp // resize.js import ... from ... let resize = ( superclass ) => class extends superclass { constructor(){ } ... } export default resize
总之,这次改造非常高大上,需要很好地掌握模块化,类,继承,以及ES6的语法糖。
这次live,从一个很一般的js业务代码一步一步地重构,的确挺有收获的。
最后大神对这次live进行了总结。我用我的话来说一下那些我理解的点:
合理的选择器:无意义的样式,以 “j-“为前缀
选择器的统一管理
事件绑定的统一管理
生命周期的概念
方法的复用
模块化
转载请注明出处:http://blog.csdn.net/fen747042796 野草园
欢迎关注我的知乎:野蛮的小小芬
相关文章推荐
- 代码重构(编写优雅的前端代码)
- 前端开发必备 40款优秀CSS代码编写工具推荐
- web-front-编写高质量代码--Web前端开发修炼之道
- web前端开发修炼之道--编写高质量代码
- 《编写高质量代码-Web前端开发修改之道》笔记--第一章 从网站重构说起
- 前端-重复写业务代码,还能提高自己吗?
- 如何优雅的编写JavaScript代码
- <编写高质量代码--web前端开发修炼之道>之css总结
- WEB前端开发规范文档以及如何提高代码编写效率
- 读书笔记《编写高质量代码-web前端开发修炼之道》
- .Net高级进阶,在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码?
- 编写可测试的前端Javascript代码第一部分--反模式及其解决方案
- 编写可测试的前端代码第二部分 – 从反模式进行重构
- 使用APICloud编写优雅的HTML5代码《二》:ajax、文件上传
- 优雅的代码:将处理用户界面和处理业务逻辑的代码分开
- 编写前端代码经验
- [编写高质量代码:改善java程序的151个建议]建议76 集合运算时使用更优雅的方式
- 如何编写优雅的代码:04. 设计模式(中)
- 如何编写优雅的代码:05. 设计模式(下)
- 编写Web前端代码的注意事项