如何在年报网站上做遗失公告,wordpress默认摘要,如何做html网站,互动平台上市公司什么是代码耦合#xff1f;代码耦合的表现是改了一点毛发而牵动了全身#xff0c;或者是想要改点东西#xff0c;需要在一堆代码里面找半天。由于前端需要组织js/css/html#xff0c;耦合的问题可能会更加明显#xff0c;下面按照耦合的情况分别说明#xff1a; 1. 避免全… 什么是代码耦合代码耦合的表现是改了一点毛发而牵动了全身或者是想要改点东西需要在一堆代码里面找半天。由于前端需要组织js/css/html耦合的问题可能会更加明显下面按照耦合的情况分别说明 1. 避免全局耦合 这应该是比较常见的耦合。全局耦合就是几个类、模块共用了全局变量或者全局数据结构特别是一个变量跨了几个文件。例如下面在html里面定义了一个变量 在html里面定义全局变量 XHTML 1 2 3 4 5 script varPAGE20; /script script srcmain.js/script 上面在head标签里面定义了一个PAGE的全局变量然后在main.js里面使用。这样子PAGE就是一个全局变量并且跨了两个文件一个html一个js。然后在main.js里面突然冒出来了个PAGE的变量后续维护这个代码的人看到这个变量到处找不到它的定义最后找了半天发现原来是在xxx.html的head标签里面定义了。这样就有点egg pain了并且这样的变量容易和本地的变量发生命名冲突。 所以如果需要把数据写在页面上的话一个改进的办法是在页面写一个form数据写成form里面的控件数据如下 JavaScript 1 2 3 4 form idpage-data input typehiddennamepagevalue2 textarea nameliststyledisplay:none[{userName:yin},{}]/textarea /form 上面使用了input和textarea使用textarea的优点是支持特殊符号。再把form的数据序列化序列化也是比较简单的可以查看Effective前端2优化html标签 第二种是全局数据结构这种可能会使用模块化的方法如下 JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //data.js module.exports{ houseList:null } //search.js 获取houseList的数据 vardatarequire(data); data.houseListajax(); require(format-data).format(); //format-data.js 对houseList的数据做格式化 functionformat(){ vardatarequire(data); process(data); require(show-result).show(); } //show-result.js 将数据显示出来 functionshow(){ showData(require(data).houseList) } 上面四个模块各司其职乍一眼看上去好像没什么问题但是他们都用了一个data的模块共用数据。这样确实很方便但是这样就全局耦合了。因为用的同一个data所以你无法保证其它人也会加载了这个模块然后做了些修改或者是在你的某一个业务的异步回调也改了这个。第二个问题你不知道这个data是从哪里来的谁可能会对它做了修改这个过程对于后续的模块来说都是不透明的。 所以这种应该考虑使用传参的方式降低耦合度把data作为一个参数传递 用传参降低耦合 JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //去掉data.js //search.js 获取数据并传递给下一个模块 varhouseListajax(); require(format-data).format(houseList); //format-data.js 对houseList的数据做格式化 functionformat(houseList){ process(houseList); require(show-result).show(houseList); } //show-result.js 将数据显示出来 functionshow(houseList){ showData(houseList) } 可以看到search里面获取到data后交给format-data处理format-data处理完之后再给show-result。这样子就很清楚地知道数据的处理流程并且保证了houseList不会被某个异步回调不小心改了。如果单独从某个模块来说show-result这个模块并不需要关心houseList的经过了哪些流程和处理它只需要关心输入是符合它的格式要求的就可以。 这个时候你可能会有一个问题这个data被逐层传递了这么多次还不如像最上面的那样写一个data的模块大家都去改那里岂不是简单了很多对这样是简单了但是一个数据结构被跨了几个文件使用这样会出现我上面说的问题。有时候可能出现一些意想不到的情况到时候可能得找bug找个半天。所以这种解耦是值得的除非你定义的变量并不会跨文件它的作用域只在它所在的文件这样会好很多。或者是data是常量的data里面的数据定义好之后值就再也不会改变这样应当也是可取的。 2. js/css/html的耦合 这种耦合在前端里面应该最常见因为这三者通常具有交集需要使用js控制样式和html结构。如果使用js控制样式很多人都喜欢在js里面写样式例如当页面滑动到某个地方之后要把某个条吸顶 页面滑到下面那个灰色的条再继续往下滑的时候那个灰色条就要保持吸顶状态 可能不少人会这么写 fixed操作 JavaScript 1 2 3 4 5 $(.bar).css({ position:fixed; top:0; left:0; }); 然后当用户往上滑的时候取消fixed 取消fixed JavaScript 1 2 3 $(.bar).css({ position:static; }); 如果你用react你可能会设置一个style的state数据但其实这都一样都把css杂合到js里面了。某个想要检查你样式的人想要给你改个bug他检查浏览器发现有个标签style里的属性然后他找半天找不到是在哪里设置的最后他发现是在某个js的某个隐蔽的角落设置了。你在js里面设置了样式然后css里面也会有样式在改css的时候如果不知道js里面也有设置了样式那么可能会发生冲突在某种条件下触发了js里面设置样式。 所以不推荐直接在js里面更改样式属性而应该通过增删类来控制样式这样子样式还是回归到css文件里面。例如上面可以改成这样 通过设置class的方法 JavaScript 1 2 3 4 5 //增加fixed $(.bar).addClass(fixed); //取消fixed $(.bar).removeClass(fixed); fixed的样式 CSS 1 2 3 4 5 .bar.fixed{ position:fixed; left:0; top:0; } 可以看到这样的逻辑就非常清晰并且回滚fixed不需要把它的position还原为static因为它不一定是static也有可能是relative这种方式在取消掉一个类的时候不需要去关心原本是什么该是什么就会是什么。 但是有一种是避免不了的就是监听scroll事件或者mousemove事件动态地改变位置。 这种通过控制类的方式还有一个好处就是当你给容器动态地增删一个类时你可以借助子元素选择器用这个类控制它的子元素的样式也是很方便。 还有很多人可能会觉得html和css/js脱耦那就是不能在html里面写style不能在html里面写script标签但是凡事都不是绝对的如果有一个标签它和其它标签就一个font-size不一样那你直接给它写一个font-size的内联样式又何尝不可呢在性能上来说如果你写个class它还得去匹配这个class比不上style高效吧。或者是你这个html文件就那么20、30行css那直接在head标签加个style直接写在head里面好了这样你就少管理了一个文件并且浏览器不用去加载一个外链的文件。 有时候直接在html写script标签是必要的它的优势也是不用加载外链文件处理速度会很快几乎和dom渲染同时这个在解决页面闪动的时候比较有用。因为如果要用js动态地改变已经加载好的dom放在外链里面肯定会闪一下而直接写的script就不会有这个问题即使这个script是放在了body的后面。例如下面 原始数据是带p标签的但是在textarea里面展示的时候需要把p改成换行\r\n如果在dom渲染之后再在外链里面更新dom就会出现上面的闪动的情况。你可能会说我用react数据都是动态渲染的渲染前已经处理好了不会出现上面的情况。那么好吧至少你了解一下吧。 和耦合相对的是内聚写代码的原则就是低耦合、高聚合。所谓内聚就是说一个模块的职责功能十分紧密不可分割这个模块就是高内聚的。我们先从重复代码说起 3. 减少重复代码 假设有一段代码在另外一个地方也要被用到但又不太一样那么最简单的方法当然是copy一下然后改一改。这也是不少人采取的办法这样就导致了如果以后要改一个相同的地方就得同时改好多个地方就很麻烦了。 例如有一个搜索的界面 用户可以通过点击search按钮触发搜索也可以通过点击下拉或者通过输入框的change触发搜索所以你可能会这么写 点击search搜索 JavaScript 1 2 3 4 5 6 7 8 9 10 $(#search).on(click,function(){ varformDatagetFormData(); $.ajax({ url:/search, data:formData, success:function(data){ showResult(data); } }); }); 在change里面又重新发请求 input change时搜索 JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 $(input).on(change,function(){ //把用户的搜索条件展示进行改变 changeInputFilterShow(); varformDatagetFormData(); $.ajax({ url:/search, data:formData, success:function(data){ showResult(data); } }); }); change里面需要对搜索条件的展示进行更改和click事件不太一样所以图一时之快就把代码拷了一下。但是这样是不利于代码的维护的所以你可能会想到把获取数据和发请求的那部分代码单独抽离封装在一个函数然后两边都调一下 JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 functiongetAndShowData(){ varformDatagetFormData(); $.ajax({ url:/search, data:formData, success:function(data){ showResult(data); } }); } $(#search).on(click,getAndShowData); $(input).on(change,function(){ changeInputFilterShow(); getAndShowData(); }); 在抽成一个函数的基础上又发现这个函数其实有点大因为这里面要获取表单数据还要对数据进行格式化用做请求的参数。如果用户触发得比较快还要记录上次请求的xhr在每次发请求前cancle掉上一次的xhr并且可能对请求做一个loading效果增加用户体验还要对出错的情况进行处理全部都要在ajax里面。所以最好对getAndShowData继续拆分很自然地会想到把它分离成一个模块一个单独的文件叫做search-ajax。所有发请求的处理都在这个模块里面统一操作。对外只提供一个search.ajax的接口传的参数为当前的页数即可。所有需要发请求的都调一下这个模块的这个接口就好了除了上面的两种情况还有点击分页的情景。这样不管哪种情景都很方便我不需要关心请求是怎么发的结果是怎么处理的我只要传一个当前的页数给你就好了。 再往下会发现在显示结果那里即上面代码的第7行需要对有结果、无结果的情况分别处理所以又搞了一个函数叫做showResult这个函数有点大它里面的逻辑也比较复杂有结果的时候除了更新列表结果还要更新结果总数、更新分页的状态。因此这个showResult一个函数难以担当大任。所以把这个show-result也当独分离出一个模块负责结果的处理。 到此我们整一个search的UML图应该是这样的 注意上面把发请求的又再单独封装成了一个模块因为这个除了搜索发请求外其它的请求也可以用到。同时search-result会用到两个展示的模板。 由于不只一个页面会用到搜索的功能所以再把上面继续抽象把它封装成一个search-app的模块需要用到的页面只需require这个search-app调一下它的init函数然后传些定制的参数就可以用了。这个search-app就相当于一个搜索的插件。 所以整一个的思路是这样的出现了重复代码 - 封装成一个函数 - 封装成一个模块 - 封装成一个插件抽象级别不断提高将共有的特性和有差异的地方分离出来。当你走在抽象与封装的路上的时候那你应该也是走在了大神的路上。 当然如果两个东西并没有共同点但是你硬是要搞在一起那是不可取的。 我这里说的封装并不是说你一定要使用requirejs、es6的import或者是webpack的require关键在于你要有这种模块化的思想并不是指工具上的不管你用的哪一个只要你有这种抽象的想法那都是可取的。 模块化的极端是拆分粒度太细一个简单的功能明明十行代码写在一起就可以搞定的事情硬是写了七、八层函数栈每个函数只有两、三行。这样除了把你的逻辑搞得太复杂之外并没有太多的好处。当你出现了重复代码或者是一个函数太大、功能太多又或是逻辑里面写了三层循环又再嵌套了三层if再或是你预感到你写的这个东西其他人也可能会用到这个时候你才考虑模块化进行拆分比较合适。 上面不管是search-result还是search-ajax他们在功能上都是高度内聚的每个模块都有自己的职责不可拆分这在面向对象编程里面叫做单一责职原则一个模块只负责一个功能。 再举一个例子我在怎样实现前端裁剪上传图片功能里面提到一个上传裁剪的实现这里面包含裁剪、压缩上传、进度条三大功能所以我把它拆成三个模块 这里提到的模块大部分是一个单例的object不会去实例它一般可以满足大部分的需求。在这个单例的模块里面它自己的“私有”函数一般是通过传参调用但是如果需要传递的数据比较多的时候就有点麻烦了这个时候可以考虑把它封装成一个类。 3. 封装成一个类 在上面的裁剪上传里面的进度条progress-bar一个页面里可能有几个要上传的地方每个上传的地方都会有进度条每个进度条都有自己的数据所以不能像在最上面说的在一个文件的最上面定义一些变量然后为这个模块里面的函数共用只能是通过传递参数的形式即在最开始调用的时候定义一些数据然后一层一层地传递下去。如果这些数据很多的话就有点麻烦。 所以稍微变通一下把progress-bar封装成一个类 进度条的类 JavaScript 1 2 3 4 5 6 7 functionProgressBar($container){ this.$container$container;//进度条外面的容器 this.$meternull; //进度条可视部分 this.$barnull; //进度条存放可视部分的容器 this.$barFullWidth$container.width()*0.9;//进度条的宽度 this.show(); //new一个对象的时候就显示 } 或者你用ES6的class但是本质上是一样的然后这个ProgressBar的成员函数就可以使用定义的这些“私有”变量例如设置进度条的进度函数 JavaScript 1 2 3 4 ProgressBar.prototype.setProgressfunction(percentage,time){ timetypeoftimeundefined?100:time; this.$meter.stop().animate({width:parseInt(this.$barFullWidth*percentage)},time); }; 这个使用了两个私有变量如果再加上原先两个用传参的方式就得传四个。 使用类是模块化的一种思想另外一种常用的还有策略模式。 4. 使用策略模式 假设要实现下面三个弹框 这三个弹框无论是在样式上还是在功能上都是一样的唯一的区别是上面标题文案是不一样的。最简单的可能是把每个弹框的html都copy一下然后改一改。如果你用react你可能会用拆分组件的方式上面一个组件下面一个组件那么好吧你就这样搞吧。如果你没用react你可能得想办法组织下你的代码。 如果你有策略模式的思想你可能会想到把上面的标题当作一个个的策略。首先定义不同弹框的类型一一标志不同的弹框 JavaScript 1 varpopType[register,favHouse,saveSearch]; 定义三种popType一一对应上面的三个弹框然后每种popType都有对应的文案 JavaScript 1 2 3 4 5 6 7 8 Data.text.pop{ register:{ titlte:Create Your Free Account, subTitle:Search Homes and Exclusive Property Listings }, favHouse:{title:xxx,subTitle:xxx}, saveSearch:{title:xxx,subTitle:xxx} }; {tittle: “”, subtitle: “”}这个就当作是弹框文案策略然后再写弹框的html模板的时候引入一个占位变量 popTemplate JavaScript 1 2 3 4 5 6 7 section {{title}} {{subTitile}} div !--其它内容-- /div /section 在渲染这个弹框的时候根据传进来的popType映射到不同的文案 JavaScript 1 2 3 functionshowPop(popType){ Mustache.render(popTemplate,Data.text.pop[popType]) } 这里用Data.text.pop[popType]映射到了对应的文案如果用react你把一个个的标题封装成一个组件其实思想是一样的。 但是这个并不是严格的策略模式因为策略就是要有执行的东西嘛我们这里其实是一个写死的文案但是我们借助了策略模式的思想。接下来继续说使用策略模式做一些执行的事情。 在上面的弹框的触发机制分别是用户点击了注册、点击了收藏房源、点击了保存搜索条件。如果用户没有登陆就会弹一个注册框当用户注册完之后要继续执行用户原本的操作例如该收藏还是收藏所以必须要有一个注册后的回调并且这个回调做的事情还不一样。 当然你可以在回调里面写很多的if else或者是case JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 functionpopCallback(popType){ switch(popType){ caseregister: //do nothing break; case:favHouse: favHouse(); break; case:saveSearch: saveSearch(); break; } } 但是当你的case很多的时候看起来可能就不是特别好了特别是if else的那种写法。这个时候就可以使用策略模式每个回调都是一个策略 pop-callback JavaScript 1 2 3 4 5 6 7 8 varpopCallback{ favHouse:function(){ //do sth. }, saveSearch:function(){ //do sth. } } 然后根据popType映射调用相应的callback如下 JavaScript 1 2 3 4 varpopCallbackrequire(pop-callback); if(typeofpopCallback[popType]function){ popCallback[popType](); } 这样它就是一个完整的策略模式了这样写有很多好处。如果以后需要增加一个弹框类型popType那么只要在popCallback里面添加一个函数就好了或者要删掉一个popType相应地注释掉某个函数即可。并不需要去改动原有代码的逻辑而采用if else的方式就得去修改原有代码的逻辑所以这样对扩展是开放的而对修改是封闭的这就是面向对象编程里面的开闭原则。 在js里面实现策略模式或者是其它设计模式都是很自然的方式因为js里面function可以直接作为一个普通的变量而在C/Java里面需要用一些技巧玩一些OO的把戏才能实现。例如上面的策略模式在Java里面需要先写一个接口类里面定义一个接口函数然后每个策略都封装成一个类分别实现接口类的接口函数。而在js里面的设计模式往往几行代码就写出来这可能也是做为函数式编程的一个优点。 前端和设计模式经常打交道的还有访问者模式 4. 访问者模式 事件监听就是一个访问者模式一个典型的访问者模式可以这么实现首先定义一个Input的类初始化它的访问者列表 定义一个Input的类 JavaScript 1 2 3 4 5 6 7 8 9 functionInput(inputDOM){ //用来存放访问者的数据结构 this.visitiors{ click:[], change:[], special:[]//自定义事件 } this.inputDOMinputDOM; } 然后提供一个对外的添加访问者的接口 添加访问者 JavaScript 1 2 3 4 5 Input.prototype.onfunction(eventType,callback){ if(typeofthis.visitiors[eventType]!undefined){ this.visitiors[eventType].push(callback); } }; 使用者调用on传递两个参数 一个是事件类型即访问类型另外一个是具体的访问者这里是回调函数。Input就会将访问者添加到它的访问者列表。 同时Input还提供了一个删除访问者的接口 off接口 JavaScript 1 2 3 4 5 6 7 8 9 Input.prototype.offfunction(eventType,callback){ varvisitorsthis.visitiors[eventType]; if(typeofvisitiors!undefined){ varindexvisitiors.indexOf(callback); if(index0){ visitiors.splice(index,1); } } }; 这样子Input就和访问者建立起了关系或者说访问者已经成功地向接收者都订阅了消息一旦接书者收到了消息会向它的访问者一一传递 trigger JavaScript 1 2 3 4 5 6 7 8 9 Input.prototype.triggerfunction(eventType,event){ varvisitorsthis.visitiors[eventType]; vareventFormatprocessEvent(event);//获取消息并做格式化 if(typeofvisitors!undefined){ for(vari0;ivisitors.length;i){ visitors[i](eventFormat); } } }; trigger可能是用户调的也可能是底层的控件调用的。在其它领域它可能是一个光感控件触发的。不管怎样一旦有人触发了trigger接收者就会一一下发消息。 如果你知道了事件监听的模式是这样的可能对你写代码会有帮助。例如点击下面的搜索条件的X要把上面的搜索框清空同时还要触发搜索并把输入框右边的X去掉。要附带着做几件事情。 这个时候你可能会这样写 JavaScript 1 2 3 4 5 6 $(.icon-close).on(click,function(){ $(this).parent().remove();//删除本身的展示 $(#search-input).val(); searchAjax.ajax(); //触发搜索 $(#clear-search).hide();//隐藏输入框x }); 但其实这样有点累赘因为在上面的搜索输入框肯定也会相应的操作当用户输入为空时自动隐藏右边的x并且输入框change的时候会自动搜索也就是说所有附加的事情输入框那边已经有了所以其实只需要触发下输入框的change事件就好了 JavaScript 1 2 3 4 $(.icon-close).on(click,function(){ $(this).parent().remove();//删除本身的展示 $(#search-input).val().trigger(change); }); 输入框为空时该怎么处理search输入框会相应地处理下面那个条件展示的x不需要去关心。触发了change之后会把相应的消息下发给search输入框的访问者们。 当然你用react你可能不会这样想了你应该是在研究组件间怎么通信地好。 上文提及使用传参避免全局耦合然后在js里面通过控制class减少和css的耦合和耦合相对的是内聚出发点是重复代码减少拷贝代码会有一个抽象和封装的过程function - 模块 - 插件/框架封装常用的还有封装成一个类方便控制私有数据。这样可实现高内聚除此方法还有设计模式的思想上面介绍了策略模式和访问者模式的原理和应用以及在写代码的启示。 希望上文能对你有所启迪如有不对之处还请指出。 此文转载 地址http://www.cnblogs.com/chun6/p/6204371.html 转载于:https://www.cnblogs.com/HUANGRONG888/p/6208784.html
