1. 如何实现前端模块化开发
SeaJS 是一个适用于 Web 浏览器端的模块加载器。
使用 SeaJS,可以更好地组织 JavaScript 代码。
2. 前端的mvc和模块化有什么关系
mvc核心就是双向数据绑定,起到数据变(js),联动视图变(css),view change =>data change。
模块化简单来说,就是代码适应多个应用场景,起到复用代码作用。
3. 如何理解前端模块化
前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀
这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(mole)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
模块
既然JavaScript不能handle如此大规模的代码,我们可以借鉴一下其它语言是怎么处理大规模程序设计的,在Java中有一个重要带概念——package,逻辑上相关的代码组织到同一个包内,包内是一个相对独立的王国,不用担心命名冲突什么的,那么外部如果使用呢?直接import对应的package即可
import java.util.ArrayList;
遗憾的是JavaScript在设计时定位原因,没有提供类似的功能,开发者需要模拟出类似的功能,来隔离、组织复杂的JavaScript代码,我们称为模块化。
一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,各行其是就都乱套了
规范形成的过程是痛苦的,前端的先驱在刀耕火种、茹毛饮血的阶段开始,发展到现在初具规模,简单了解一下这段不凡的历程
函数封装
我们在讲函数的时候提到,函数一个功能就是实现特定逻辑的一组语句打包,而且JavaScript的作用域就是基于函数的,所以把函数作为模块化的第一步是很自然的事情,在一个文件里面编写几个相关函数就是最开始的模块了
function fn1(){
statement
}
function fn2(){
statement
}
这样在需要的以后夹在函数所在文件,调用函数就可以了
这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。
对象
为了解决上面问题,对象的写法应运而生,可以把所有的模块成员封装在一个对象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
这样我们在希望调用模块的时候引用对应文件,然后
myMole.fn2();
这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系
看似不错的解决方案,但是也有缺陷,外部可以随意修改内部成员
myModel.var1 = 100;
这样就会产生意外的安全问题
立即执行函数
可以通过立即执行函数,来达到隐藏细节的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
这样在模块外部无法修改我们没有暴露出来的变量、函数
上述做法就是我们模块化的基础,目前,通行的JavaScript模块规范主要有两种:CommonJS和AMD
CommonJS
我们先从CommonJS谈起,因为在网页端没有模块化编程只是页面JavaScript逻辑复杂,但也可以工作下去,在服务器端却一定要有模块,所以虽然JavaScript在web端发展这么多年,第一个流行的模块化规范却由服务器端的JavaScript应用带来,CommonJS规范是由NodeJS发扬光大,这标志着JavaScript模块化编程正式登上舞台。
定义模块
根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
模块输出:
模块只有一个出口,mole.exports对象,我们需要把模块希望输出的内容放入该对象
加载模块:
加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的mole.exports对象
4. 如何学习前端模块化知识
学习前端模块化知识主要集中精力学好以下知识点:
1、学好三驾马车:HTML5 + CSS3 + JavaScrip
2、推荐学习过程:
1)CSS
(1)入门:
Codeademy上的html&css课程——在线交互式编程平台,弄清楚基本概念和基本语法
w3school上的HTML/CSS教程——技术手册式的教程,比较全面,照着实例敲一遍
(2)进阶:
《精通CSS·高级Web标准解决方案》——对CSS有一个比较深入的学习,对核心技术了解。
《HTML5权威指南》——非常全面的书,内容也很新,包含了HTML5+CSS3+JS DOM
(3)实战:
bootstrap框架: bootstrap中文网/《bootstrap实战》——流行的前端框架,注重实用即可
Codeademy上的Web Developer Skills+Projects——通过自己做小页面/小网站来运用所学
(4)提高:
《CSS禅意花园》——提高自己的艺术设计能力,通过实例来学习如何用CSS设计出漂亮的页面
2).Javascript:
(1)入门:
Codeademy上的javascript教程——实例比较多,比较浅,算是基本了解JS
w3school上的JS教程——比较详细的了解下JS的特性
《JavaScript DOM编程艺术》——讲js和DOM的基本知识和运用,了解JS和DOM可以做什么
(2)进阶:
《JavaScript高级程序设计》——JS圣经,比较全面,非常好的一本书,比犀牛书可阅读性强
《JavaScript权威指南》——传说中的犀牛书,好厚好厚的一本书,不适合入门,适合当工具书看
《JavaScript语言精粹》——很薄的一本书,但是可以帮助你快速了解JS的精华部分
(3)实战:
jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery
《jQuery基础教程》——流行的前端框架,注重实用
(4)提高:
《高性能JavaScript》——讲如何提高js性能,以及构建和部署文件到生产环境的最佳实践
《Secrets of the JavaScript Ninja》——jQuery作者写的书,如果你觉得精通JS了再看这本书
5. 前端为什么要使用模块化
当严谨古板的德国工程师用“积木游戏”来形容未来的造车理念时,全球汽车制造业的天空彻底“变色”了。在全世界范围内品牌和车型的设计、采购、制造的灵活度都在不断提升的今天,一套类似于乐高积木的高集成度模块化生产方式出现了。没有统一着装、埋头苦干的工人师傅,也没有烟尘漫天、气味刺鼻的车间环境,取而代之的是科技含量愈来愈高的流水线,过程愈来愈简单的操作和愈来愈少的人力成本,这些都是模块化生产的优势所在。
“当今,模块化的概念不仅是经济学、经营学专家之间最热门的话题之一,而且它还有可能彻底改变现存产业、企业的结构,具有十分强大的冲击力。”国际经济学会主席、斯坦福大学经济学教授青木昌彦如是说。
从19世纪末的福特T型车的流水线生产,到近代以日系企业丰田为代表的精益生产方式,再到最近被媒体炒得火热但实际推进阻力重重的大众MQB平台,汽车的生产模式一直围绕着两个根本目标:降低生产成本和使用成本。进入新世纪,随着数字化技术在生产中的应用,汽车的生产制造模式开始向集约化和标准化发展,由此带来的生产模式的变革让汽车“生产结构”开始趋向于电脑生产一样简单。
模块化简单来说就是“数线并产”,每条生产线产出不同的模块,最后将所有模块拼装整合,工作效率以数量级方式提升。比如大众采用的MQB平台就是将发动机、变速箱加上前轴和前悬挂放在同一模块内,再和车身等模块总装。通过模块化平台应用的加深,大量的汽车零部件实现标准化,在不同品牌和不同级别的车型中达到共享,从而实现生产从A00、A0、A到B四个级别的车型的共通生产。
随着模块化生产概念的不断深入,现今的分级采购模式将不复存在,取而代之的是模块化整体采购。现在各大主机厂的采购的是一个个零部件。日常接触和交易对象可能是大零部件供应商,也可能是小零部件企业,而模块化采购的交易品是高集成度的各种模块,对象是模块集成供应商。因此,模块化采购使得与主机厂发生直接关系的的供应商数量大为削减,并由此改变模块供应商与其他零部件生产企业的关系。毫不夸张的说,模块化生产会将许多规模小、产品类型单一的供应商企业冲击的七零八落,市场上航母级的零件供应商可以趁机重新划定市场版图,吞并无力支撑的中小型供应商,重组企业关系,最终完成“模块”帝国的最后一块拼图。
6. 前端模块化和 js 模块化的区别
两者是包含与被包含的关系,前端模块化泛指JS、CSS、HTML等资源的模块化,而JS模块化单指JS资源模块化。
7. 北大青鸟设计培训:web前端编程模块化开发的好处
模块化编程开发模式相信大家在学习前端编程开发技术的时候应该有接触和了解过。
今天南昌北大青鸟http://www.kmbdqn.cn/就一起来分析一下,web前端模块化编程的好处都有哪些。
一、模块化的理解1.什么是模块?将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起;块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信。
2.模块化的进化过程全局function模式:将不同的功能封装成不同的全局函数;编码:将不同的功能封装成不同的全局函数;问题:污染全局命名空间,容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系。
3.模块化的好处避免命名冲突(减少命名空间污染)更好的分离,按需加载更高复用性高可维护性4.引入多个script后出现出现问题请求过多先我们要依赖多个模块,那样就会发送多个请求,导致请求过多。
依赖模糊我们不知道他们的具体依赖关系是什么,也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
难以维护以上两种原因就导致了很难维护,很可能出现牵一发而动全身的情况导致项目出现严重的问题。
8. 做了这么久的前端开发,怎么理解CSS模块化开发
所谓的模块化就是把常用的css放在一个文件,然后重复使用这个css对应到对应的html组件中进行调用使用。
像现在你可以参考的最好例子就是bootstrap,像它这样的css组件写的就很整洁,唯一不好就是杂糅在一个文件,导致不用的css也放进去了。个人觉得可以自己也弄一个这样的。
希望我的回答对楼主有帮助,不懂可以继续追问。
9. javascript模块化是什么及其优缺点介绍
如今backbone、emberjs、spinejs、batmanjs
等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而
来。web前端已经演变成大前端,web前端的发展速度之快。
1)我们来看看什么是模块化?
模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见:
c中使用include 包含.h文件;php中使用require_once包含.php文件
java使用import导入包
此中都有模块化的思想。
2)模块化的优缺点:
a>优点:
可维护性
1.灵活架构,焦点分离
2.方便模块间组合、分解
3.方便单个模块功能调试、升级
4.多人协作互不干扰
可测试性
1.可分单元测试
b>缺点:
性能损耗
1.系统分层,调用链会很长
2.模块间通信,模块间发送消息会很耗性能
3)最近的项目中也有用到模块化,
使用的是seajs,但是当引用到jquery,jquery easyui/或者jquery
UI组件时,有可能会用到很多jquery插件,那这样要是实现一个很复杂的交互时,模块间的依赖会很多,使用define()方法引入模块会很多,不知
有么有什么好的方法?
4)附:
内聚度
内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。 设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。
耦合度
耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。