模块化

我那进了"模块化研究"小组.所以嘞.研究模块化以及如何让项目的模块化更加合理和高效是我们小组的主要目的.

首先,在实行模块化之前,得先巩固模块化开发的理论基础,因为理论是实践的基础。
只有这样,在过程中理论与实践相结合,才有可能达到最满意的效果.

什么是模块化?

  • 模块化就是为了减少系统耦合度,提高高内聚,减少资源循环依赖,增强系统框架设计。
  • 让开发者便于维护,同时也让逻辑相同的部分可复用
  • 模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、
    api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程,那么模块化的过程通俗点讲就是:

模块化的过程就是:
  • 1、拆分
    将整个系统按功能,格式,加载顺序,继承关系分割为一个一个单独的部分.
    注意:拆分的粒度问题,可复用问题,效率问题.如何这些问题处理的不好,就有可能出现不想要的后果。
  • 2、归纳
    将功能或特征相似的部分组合在一起,组成一个资源块.
  • 3、总结
    将每个资源块按找需求,功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案:

  1. namespace
  2. sass,less
  3. AMD&CMD
  4. html模版
  5. grunt,gulp,webpack
  6. FIS,YUI,KISSY

在亘古年代,机智的人们为了处理javascript的命名冲突,功能块管理等等,在js中使用了namespace。我们可以说这是最原始的模块化管理模式。
如下:

// 使用namespace之前
var name={};
var name2={};// 使用namespace之后
var nameSpace={}; nameSpace.branchOne={ name:{} }; nameSpace.branchTwo={ name:{} };

添加命名空间,达到拆分js逻辑的目的。

到了现代,处理css的模块化的有sass,less等工具。根据其提供的语法,便可以有效将css拆分为不同的块。
还有随着AMDCMD的出现,javascrip中namespace机制便已经被淘汰殆尽。不过目前我们的项目组中那部分还没有迁移过来的老代码还在默默的使用着这种“古老”的方式。根据模块加载的工具类库,实现js逻辑的模块化加载的方式越来越称为主流。其中的好处大家可以查一查,不在这里就不赘述咯。
但是,最重要的一点必须要提比namespace更加利于维护和复用
在html中也存在着各种前端和后端的模版。就像php中的smarty(我们现在就在用)。前端中的juicer,underscore等等。它们同样的也可以将html按功能特点拆分抽离为单独的html块。
不过,上面的只是将js,css,html单独的进行进行模块化处理,并没有一个统一的完整的实现功能模块划分,而spmwebpack这些工具恰恰做了这些事。它们可以将js,html,css以及其他静态资源按照开发者的意愿拆分为单独的模块,抽离的也更加完整。
上面的工具虽然可以帮助开发者们完成模块化,但是它们也仅仅只是一个单独的模块化工具,并没有形成一个十分成熟的前端模块化方案。而fis,yui,kissy这些框架提供了囊括上述全部的功能。可以帮助开发者实现从头到尾的模块化。

此外,需要注意的是,前端的模块化并不应该只专注于某一项(js,css,html)的模块化,而应该是对项目整体进行解耦,抽离,组装。从而达到项目整体模块化的目的。

如何实现?

因为模块是按功能进行分类的,所以可以先将模块分为两类:

  • 公共模块(用于促进代码复用)
  • 业务模块(用于提升可维护性)

目前,我们产品的V3版本的模块是通过:

  1. 把耦合密集的归为一个模块
  2. 模块间通过固定的接口交互
  3. 模块内部实现自由发挥

这3个规则来区分和调用的。

主流的模块化是什么?

什么是主流的模块化哪?我接下来就用我们项目组用依赖fis的fisp来粗略的说一下fis的模块化。

1、html的模块化分割

将偶合度比较高的页面片段进行单独拆分,模块布局作为公开的接口,进行html片段的继承 复用与拼装.
每个单独的html片段使用单独并且对应的css片段,html中的图片可以按照相关性放到模块文件下的一个单独的图片文件夹里.
举个例子:

当我们在打开外链页的时候,右侧圈住的那部分就是一个模块。那么在html中,它的结构是什么哪?
我们有一个base.tpl是一个最外头的模版,结构如下:

还有一个html的主要框架lqyout.tpl

一个功能模块share.tpl

最后哪,就到了我们广告的模块 personal.tpl

细心的同学可能会发现,这些结构是一层一层的嵌套的。有大到小的分割。由最外头(base.tpl)->主结构(layout.tpl)->功能结构(share.tpl)->具体广告模块(personal.tpl)
这样哪,就会有效的组织页面。

html模块化可以实现多人协同开发页面.各司其职.有效提高页面的开发效率,和维护成本. 可以有效减少文件冲突,文件错误.
其中,页面模块代码作用域的控制通过css文件来控制。某类具有高度耦合的页面使用自身的css文件。

2、css的模块化

根据视觉布局,定义通用的css 以及单个html片段css

3、JS的模块化

鉴于目前主流的模块加载器,fis也提供了一个模块加载器叫mod.js。用法和requirejs,seajs差不多。我们会按照功能将js分割并放到对应的位置。针对于模块化加载fis有一点做的比较好
为了协调异步环境下模块开发与性能间的矛盾,我们必须在工程阶段就具备依赖分析的能力,把具备依赖关系的资源进行打包。就算不打包,也希望像 F.I.S 那样有个记录依赖关系的map.json,可以照单抓药,一次性地把需要的依赖项加载下来。

因此,在开发期解析模块依赖、合并代码、甚至重写资源路径都得在工程化的层面完成。工程化和模块化变成了容易耦合且不得不耦合的两个话题。

上文提到的基本的原理,真正实施起来还是存在很多问题,模块粒度问题,公共模块与普通模块的区分,继承模块是否值得继承等等,页面模块如何划分。
  • 首先,了解你的项目,通过画网站树状图了解你网站的总体结构和页面模块。
  • 其次,理清结构逻辑和视觉逻辑,结构逻辑就是看你的页面由那些模块组成,视觉逻辑了解可继承模块,布局逻辑(网格布局或者非网格布局)
目录结构:

按照相似性 可以将css html js 以及其他的静态资源放到一个一个文件夹中.当然,因为标准的确实,至于模块化的文件如何组织就见仁见智了.
我们的目录是这样的:

一个单独的模块放到一个单独的文件夹里,这个模块的css,html,js以及其他静态资源也都放到一起,便于管理。
结构差不多可以像这样:

组件化:

组件化开发 :在模块化基础上,以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护,组件单元是资源独立的,
组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等,甚至一些复杂的组件比如下载(download)等。
通常业务会针对组件化的js部分进行必要的封装,解决一些常见的组件渲染、交互问题。实现高内聚,低耦合.
就拿我们的会员中心来说,整体是一个大的组件。目录结构如下:

上述的模块化特点,目前我们百度网盘使用的FIS已经将这些概念全部实现.而且做的还相当不错.
好了,正经的模块化介绍就到此结束。接下来,我为大家阐述一种另类的模块化.

换一种思路的模块化

就拿上面的百度网盘外链的单文件分享来说:
每次有用户请求,上述的每个html块都要经过php的smarty引擎在服务器端组合成一个完整的html在返回给浏览器端,不仅如此,js、css以及其他静态资源都是.server端一天要做几十万次这种重复的操作。它好累!!!
不过,针对于前端开发者来说,fisp做的已经足够了。它确实已经实现了完整的模块化。但是仅仅只是针对开发者而已
有没有想过,对于浏览器来说,这么一个同样的功能,每次都是重新加载一个内容和结构都差不多的html,如果能在这块做点什么东西,就像把模块化的思想用到浏览器上。那么,这个缺口是不是大有可为
所以,实现针对于浏览器的模块化可以说是有必要的.从针对于开发者的模块化转换到针对浏览器的模块化.这是一个尝试的革命路线.

转载于:https://www.cnblogs.com/yebai/p/10129535.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/449975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1566:基础练习 十六进制转八进制

题目地址&#xff1a;https://acmore.cc/problem/LOCAL/1566 1 #include <iostream>2 #include <string>3 4 using namespace std;5 6 string HexToBin(string s) //16进制转2进制7 {8 string str "";9 for (int i 0; i < s.size(); i) 10…

java命令--jmap命令使用(查找内存泄漏对象)

转自&#xff1a;https://www.cnblogs.com/kongzhongqijing/articles/3621163.html jdk安装后会自带一些小工具&#xff0c;jmap命令(Java Memory Map)是其中之一。主要用于打印指定Java进程(或核心文件、远程调试服务器)的共享对象内存映射或堆内存细节。 jmap命令可以获得运行…

tr069相关协议说明

截图自easycwmp官网&#xff1a;http://easycwmp.org/转载于:https://www.cnblogs.com/kiss-passion/p/10362029.html

Beta 冲刺(6/7)

队名 火箭少男100组长博客 林燊大哥作业博客 Beta 冲鸭鸭鸭&#xff01;成员冲刺阶段情况 林燊&#xff08;组长&#xff09; 过去两天完成了哪些任务 协调组内工作最终测试文稿编写展示GitHub当日代码/文档签入记录(组内共享)接下来的计划 协助开发组完成标签制作展示视频制作…

Android Bluetooth BLE相关开发资源汇总

Android开启蓝牙开关 转载自Android&#xff1a;Bluetooth 的打开和关闭 检查系统蓝牙是否开启 BluetoothManager bluetoothManager (BluetoothManager) this. getSystemService(Context.BLUETOOTH_SERVICE); BluetoothAdapter mBluetoothAdapter bluetoothManager.getAdapt…

git常用命令及冲突解决

2019独角兽企业重金招聘Python工程师标准>>> git常用命令 git config --global user.name chenhongjiang git config --global user.email 123qq.com git init 建立厂库 git status 查看状态 git add . 添加当前目录 git add a.php 添加文件…

从零开始学习PYTHON3讲义(二)把Python当做计算器

《从零开始PYTHON3》第二讲 上一讲我们说过了如何启动Python IDLE集成开发学习环境&#xff0c;macOS/Linux都可以在命令行执行idle3。Windows则从开始菜单中去寻找IDLE程序的图标。 上一讲我们还见到了Python的两种工作模式&#xff0c;交互模式和程序模式。 通常在一个大型的…

创业者谈:畏惧失败,但也要拥抱失败

摘要&#xff1a;本文作者为Paydirt创始人Tristan Gamilis&#xff0c;他在文中分享了如何面对创业过程中的失败。作为一个创业者&#xff0c;开始的时候并非全才&#xff0c;很多知识都是经历了创业中的失败&#xff0c;摸爬滚打之后才学会的。所以&#xff0c;我们在创业过程…

redis 资料

redis是什么: Redis is an open source, BSD licensed, advanced key-value store. It is often referred to as a data structure server since keys can contain strings, hashes, lists, sets and sorted sets. redis是开源,BSD许可,高级的key-value存储系统. 可以用来存储字…

UnaryOperator函数式接口

2019独角兽企业重金招聘Python工程师标准>>> 这是一个函数式接口&#xff0c;因此可以用作lambda表达式或方法引用的赋值目标。 可以看到UnaryOperator<T>继承了Function<T,T>接口&#xff0c;这里可是两个T,T,还增加了static修饰的identity()方法。 然…

linux--命令rcp和scp

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 rcp代表“remote file copy”&#xff08;远程文件拷贝&#xff09;。该命令用于在计算机之间拷贝文件。rcp命令有两种格式。第一种格式…

Nokia落寞身影下 三星成为全球最大手机厂商

摘要&#xff1a;在诺基亚统治全球最大手机厂商宝座长达14年后&#xff0c;三星今年首次取代诺基亚&#xff0c;成为全球最大手机厂商。据IHS iSuppli的数据显示&#xff0c;三星预计今年手机出货量将占全球29&#xff05;&#xff0c;而落寞的诺基亚市场份额将下降到24&#x…

Django:学习笔记(2)——创建第一个应用

Django&#xff1a;学习笔记(2)——创建第一个应用 创建应用 在 Django 中&#xff0c;每一个应用都是一个 Python 包&#xff0c;并且遵循着相同的约定。Django 自带一个工具&#xff0c;可以帮你生成应用的基础目录结构&#xff0c;这样你就能专心写代码&#xff0c;而不是创…

dubbo源码解析(十)远程通信——Exchange层

远程通讯——Exchange层 目标&#xff1a;介绍Exchange层的相关设计和逻辑、介绍dubbo-remoting-api中的exchange包内的源码解析。前言 上一篇文章我讲的是dubbo框架设计中Transport层&#xff0c;这篇文章我要讲的是它的上一层Exchange层&#xff0c;也就是信息交换层。官方文…

为何获得风险投资的公司多数倒闭了?

北京时间12月12日消息&#xff0c;据国外媒体报道&#xff0c;哈佛商学院的高级讲师施克哈尔高希(Shikhar Ghosh)指出&#xff0c;风险投资领域的失败案例比媒体报道的要多得多。 高希的研究表明&#xff0c;在风险资本支持的公司之中&#xff0c;有75%的公司从未向投资者返回过…

苹果前CEO斯卡利变身创业导师:欲寻下个乔布斯

乔布斯和约翰斯卡利 导语&#xff1a;国外媒体今天撰文称&#xff0c;苹果前CEO约翰斯卡利(John Sculley)虽然早已离开苹果&#xff0c;但仍然活跃在科技行业。他现在将目光转向了医疗科技领域&#xff0c;希望从中挖掘出下一个乔布斯。 以下为文章全文&#xff1a; 下一个乔布…

Linux grep命令、Linux cd命令、Linux pwd命令

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Linux grep命令用于查找文件里符合条件的字符串。 grep指令用于查找内容包含指定的范本样式的文件&#xff0c;如果发现某文件的内容符…

历时四年,给Google提交的Android Framework Bug终于被Fixed了

历时四年&#xff0c;Google终于修复了一个我发现的Android Framework Bug 2014年在做一个Android终端设备开发过程中&#xff0c;发现了一个Android Framework层的Bug&#xff0c;给Google提交了issue和解决方案&#xff0c;和外界传言一致Google一般不太在意个人开发者提交的…

前端布局神器display:flex

2009年&#xff0c;W3C提出了一种新的方案--Flex布局&#xff0c;可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 flex浏览器支持一、Flex布局是什么&#xff1f; Flex是Flexible Box的缩写&#xff0c;翻译成中文就是“弹性盒子”&#xff0c;用…

bind简单转发实验

2019独角兽企业重金招聘Python工程师标准>>> *主配置文件内容// [rootlocalhost /]# cat /etc/named.conf // // named.conf // // Provided by Red Hat bind package to configure the ISC BIND named(8) DNS // server as a caching only nameserver (as a local…