目錄
回复讨论(解决方案)
首頁 web前端 html教學 我的架构经验系列文章

我的架构经验系列文章

Jun 24, 2016 pm 12:00 PM
前端 文章 架構 系列 經驗

框架层面:近几年前端发展很快,前端之所以叫前端因为前端是已经可以独立成为一种职业了,js也不再是十年前的玩具了,以前富客户端RIA的应用可能会用flash/flex或是silverlight,现在可以使用js来完成大部分的功能,因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码,越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源,而前端做所有UI的事情。

MVC
MVC实现职责分离是很好的,大多数网站在后端都会引入MVC框架,对于一个前端负责所有呈现和前端业务逻辑的网站来说,使用MVC框架也是很有好处的。Javascript的MVC框架现在很多。每一个框架其实都有其特点的,但是前端的MVC框架会和后端的有些不同的。比如前端的MVC框架可能会做一些M和V元素的双向绑定,对于后端来说往往是单向的比较多。通过引入MVC框架我们可以让同一个页面做很多事情,通过一个不刷新的页面实现一个应用程序的根基,还可以很清晰地进行MVC的分离并且突出M的概念,这是没有框架所办不到的。

通讯
对于一个比较复杂的页面可能会有比较多的Javascript模块,如果要进行模块之间通讯的话(比如一个页面有左边菜单和导航以及列表,左边菜单点选一级分类之后要通知导航加上去这项,并且通知列表重新读取数据并刷新,然后从导航删除这个选择的话要通知列表重新获取数据,通知菜单显示所有)。对于比较复杂的通讯,如果把模块模块之间进行强耦合直接调用其它模块的函数的话是不利于可维护性的,我觉得可以引入发布订阅机制,每一个模块做了什么修改把信息发布出去,关心这个信息的人订阅这个信息,并且在回调函数里面做相应的操作就可以了。可以使用Amplifyjs作为发布订阅的框架。

模板
对于前端来说和后端一样一个比较麻烦的问题就是往往会在脚本里面把html也混在一起,个人觉得是这样的,如果对于非常琐碎一些dom修改问题倒不大,如果是大块的html拼接的话,数据和html甚至是css混合在一起,那么代码的可维护程度非常差。此时可以考虑使用一些模板引擎来分离数据和表现,比如Twitter hoganjs。由于很多模板引擎,比如大胡子引擎不仅仅是针对前端的,后端语言也有相应的引擎,因此甚至可以把模板放在文本文件中,前端后端共同使用一套模板引擎,也就是说现在的代码偏向于服务端渲染的那么就在后端使用模板,如果要以后改为客户端渲染了这套模板可以直接被前端使用。

类库
除了框架之外还有很多类库,比如jquery,underscore,linq.js(linq to javascript),jscex(wind)反正后端有啥现在前端也有啥,尽情发挥想象吧。用好这些框架可以大大改善生产力的,脚本能做的事情真的比想象的要多的多。我是做后端的前端知道的不多在这里列出的可能只是九牛一毛。

依赖
可以使用Requirejs、Commonjs之类的组件来管理脚本之间的依赖,好处很多的,我们的模块只需要写清楚需要依赖什么,Requirejs自然会帮我们按照一定的次序加载进来,这样我们既不用担心顺序问题也不用担心组件的版本号问题。基于Requirejs它具有丰富的配置,即使是我们进行了静态资源合并也完全能处理,只要通过配置把组件配置到相同的服务端生成的一个路径上即可,不过以前在做的时候发现它会自动加上.js 扩展名,不过完全可以通过改Requirejs源代码解决。在架构上我的观点是既然使用开源的东西,遇到问题了就不要去怕改源代码。我们一定不能停留在框架的使用者,定制框架甚至向作者贡献自己的代码没有这么难。 设计层面:

职责分离的理念
虽然我们都知道CSS样式、JS行为以及HTML结构。个人觉得只有HTML是必须的,也就是说如果一个页面没有样式没有脚本的话它应该是一个清晰的页面,可以大致表现出页面需要表现的内容,只不过样子比较难看,并且也是交互的。如果说很多功能是ajax实现的话那么就把交互工作转到服务端实现服务端的渲染。多了样式只是布局上样子上更好看,多了脚本只是交互性上更友好,不需要刷新页面,但是少了也不代表这个网站就是废物了,现在有很多理念其实目的是一样的。如果达不到这个境界至少我们要很明确的让css、js和html履行自己的职责,不要把过多的事情赋予不相关的组件。比如尽量不要在html中包含操作性的脚本代码,而是应该直接在脚本中选择dom元素进行操作,尽量不要在脚本中包含大段的html代码而是应该从模板读取然后把数据填充进去,也尽量不要在html代码中包含大量内嵌的样式而是应该通过选择器选择进行样式赋值。

分层和目录结构
对于一个比较复杂的大型的项目,合理规划目录结构也是很重要的,你可能会说脚本和样式分两个目录就可以了,但是如果一个复杂的项目有几百个脚本都列在一个文件夹下吗?后端有分层的概念其实前端完全也可以有分层的概念,有表现层、业务逻辑层和模型层,然后是下面的数据访问ajax层,当然还会有常量的文件,我反问觉得前端的分层可以超大型项目的ios或android程序来靠。比如之前我做的一个ios程序的示例,个人觉得这样的分层就比较一目了然的。

合并和拆分的平衡
很多时候架构上的东西就是一种权衡,如果有固定的标准的话也就不需要架构师了,我们只需要按照固定的标准去做就行了。比如,一个页面上使用了10个脚本文件,5个样式文件,按道理说合并成两个文件可以达到最小的请求数,但这样一定是好的吗?这个10个脚本和5个样式文件中有很多或许是其它页面也需要公用的,如果仅仅简单的合并在一起反而可能增加用户的下载流量,因此怎么规划通用的东西合成一个文件,框架的文件单独,而每一个页面都有自己独特的脚本和样式,也是一种学问。 性能层面:

性能检测
诸如YSlow和PageSpeed等工具可以分析出前端的性能问题,在这里就不展开讨论了。对于前端来说由于涉及到用户的客户端环境和网络环境所以情况不是这么单纯,但是我们可以做到的就是在我们的可控范围之内尽量减少用户域名解析数量,减少用户下载的数据量,增加并发等等。其实说白了,我们就是清理管道使得管道更大,或者增加更多的管道,或者就是尽量让管道之内的水少一点了,这样就可以更顺畅。

性能分析
现在有一些工具可以对Javascript的性能甚至是DOM解析的情况进行细致的分析,比如dynaTrace AJAX Edition,通过这样的工具我们可以分析我们的脚本代码以及页面布局是否合理,从开发的角度来全面了解和优化我们的前端代码。客户端的资源虽然不像服务端的资源这么重要,但是为了给用户的机制体验最好还是对客户端的性能消耗有所优化。


回复讨论(解决方案)

蛮好看,就是要价太高

好吧  经验收下了

学学经验了

写得挺不错,价格也不错,其实我是过来专门接分的。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1654
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1225
24
今日頭條發布文章怎麼有收益?今日頭條發布文章獲得更多收益方法! 今日頭條發布文章怎麼有收益?今日頭條發布文章獲得更多收益方法! Mar 15, 2024 pm 04:13 PM

一、今日頭條發布文章怎麼有收益?今日頭條發布文章獲得更多收益方法! 1.開通基礎權益:原創文章選擇投放廣告可獲得收益,影片必須原創橫屏才會有收益。 2.開通百粉權益:粉絲量達百粉以上,微頭條、原創問答創作及問答均可獲得收益。 3.堅持原創作品:原創作品包含文章、微標題及問題等,要求300字以上。注意違規抄襲作品作為原創發布,會被扣信用分,即使有收益也會被扣除。 4.垂直度:做專業領域一類的文章,不能隨意跨領域寫文章,會得不到合適的推薦,達不到作品的專和精,難以吸引粉絲讀者。 5.活躍度:活躍度高,

1.3ms耗時!清華最新開源行動裝置神經網路架構 RepViT 1.3ms耗時!清華最新開源行動裝置神經網路架構 RepViT Mar 11, 2024 pm 12:07 PM

论文地址:https://arxiv.org/abs/2307.09283代码地址:https://github.com/THU-MIG/RepViTRepViT在移动端ViT架构中表现出色,展现出显著的优势。接下来,我们将探讨本研究的贡献所在。文中提到,轻量级ViTs通常比轻量级CNNs在视觉任务上表现得更好,这主要归功于它们的多头自注意力模块(MSHA)可以让模型学习全局表示。然而,轻量级ViTs和轻量级CNNs之间的架构差异尚未得到充分研究。在这项研究中,作者们通过整合轻量级ViTs的有效

Spring Data JPA 的架構和工作原理是什麼? Spring Data JPA 的架構和工作原理是什麼? Apr 17, 2024 pm 02:48 PM

SpringDataJPA基於JPA架構,透過映射、ORM和事務管理與資料庫互動。其儲存庫提供CRUD操作,派生查詢簡化了資料庫存取。此外,它使用延遲加載,僅在必要時檢索數據,從而提高了效能。

小米 15 系列全代號曝光:Dada、Haotian、Xuanyuan 小米 15 系列全代號曝光:Dada、Haotian、Xuanyuan Aug 22, 2024 pm 06:47 PM

小米15系列預計10月正式發布,其全系列代號已在外媒MiCode程式碼庫曝光。其中,旗艦級小米15Ultra代號為"Xuanyuan"(意為"軒轅"),此名源自中國神話中的黃帝,象徵尊貴。小米15的代號為"Dada",而小米15Pro則以"Haotian"(意為"昊天")為名。小米15SPro內部代號為"dijun",暗指《山海經》創世神帝俊。小米15Ultra系列涵蓋

PHP與Vue:完美搭檔的前端開發利器 PHP與Vue:完美搭檔的前端開發利器 Mar 16, 2024 pm 12:09 PM

PHP與Vue:完美搭檔的前端開發利器在當今網路快速發展的時代,前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高,前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術,搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合,以及詳細的程式碼範例,幫助讀者更好地理解和應用這兩

華為 Mate 60 系列最佳入手時機,新增 AI 消除 + 影像升級,更可享秋日禮遇活動 華為 Mate 60 系列最佳入手時機,新增 AI 消除 + 影像升級,更可享秋日禮遇活動 Aug 29, 2024 pm 03:33 PM

自去年华为Mate60系列开售以来,我个人就一直将Mate60Pro作为主力机使用。在将近一年的时间里,华为Mate60Pro经过多次OTA升级,综合体验有了显著提升,给人一种常用常新的感觉。比如近期,华为Mate60系列就再度迎来了影像功能的重磅升级。首先是新增AI消除功能,可以智能消除路人、杂物并对空白部分进行自动补充;其次是主摄色准、长焦清晰度均有明显升级。考虑到现在是开学季,华为Mate60系列还推出了秋日礼遇活动:购机可享至高800元优惠,入手价低至4999元。常用常新的产品力加上超值

golang框架架構的學習曲線有多陡峭? golang框架架構的學習曲線有多陡峭? Jun 05, 2024 pm 06:59 PM

Go框架架構的學習曲線取決於對Go語言和後端開發的熟悉程度以及所選框架的複雜性:對Go語言的基礎知識有較好的理解。具有後端開發經驗會有所幫助。複雜度不同的框架導致學習曲線差異。

Django是前端還是後端?一探究竟! Django是前端還是後端?一探究竟! Jan 19, 2024 am 08:37 AM

Django是一個由Python編寫的web應用框架,它強調快速開發和乾淨方法。儘管Django是web框架,但要回答Django是前端還是後端這個問題,需要深入理解前後端的概念。前端是指使用者直接和互動的介面,後端是指伺服器端的程序,他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下,前後端程式可以獨立開發,分別實現業務邏輯和互動效果,資料的交

See all articles