实时搜索: js为什么要模块化

js为什么要模块化

942条评论 4974人喜欢 3521次阅读 765人点赞
1 这不是类吗?
function Fun(){
this.name = "xxx";

this.age = "xx";

}
2 这不是闭包吗?
(function(){
var num = 0;

return function(){
num++;
}

})()
3 是不是一个意思啊? ...

前端模块化seajs可以用在pc端网站吗: seajs只是JS模块加载框架,PC端和移动端都是可用的,不存在什么终端兼容问题。但是seajs玉伯已经不在维护,对es6支持不够。。如果使用模块化开发,推荐使用webpack

webpack这个js模块管理器怎么样: 看了其他人的答案,来讲个不一样的!
开发可维护的js代码与css代码

css模块化;
以需求来代入:
大家在开发中是否经常会有这样的困扰,在css的命名、复用上找不到好的解决方案。
比如有一个系统中有这样两个列表页面(list),包含需要展示的内容是大体上一样的,但是布局展示样式切是要求不一样的。
比如:

平常做法
我们平时的做法是,做命名两种css
.list-1{
.....
}
.image-1{
....
}
--------------------------------------------------------------------
.list-2{
.........
}
.image-2{
........
}

这样做可以满足我们的需求,但是你需要为每套布局想一个【样式名称】,而且我们平时写css代码一般放在同一个页面内,后续不好维护。
webpack的做法
(1)解决样式命名,为单独的某块写一个css文件,通过require的形式引入样式。如下:
两个css文件内的样式可以重名,webpack打包的时候生成的样式名是 模块名_css_随机字符(可以自定义规则)。这样来确保两个样式是独立的。如下,我们定义css名称为.item-btn,webpack打包后,在浏览器下生成的样式名如下:两个css文件内的样式可以重名,webpack打包的时候生成的样式名是 模块名_css_随机字符(可以自定义规则)。这样来确保两个样式是独立的。如下,我们定义css名称为.item-btn,webpack打包后,在浏览器下生成的样式名如下:
js内的具体调用如下:js内的具体调用如下:

(2)解决样式复用。
你可以用css模块化里面的compose来处理

js模块化:
es6想必大家已经都已跃跃一试,无奈浏览器支持太少了。
想想es6的(promise、=>、let ......) 大家都去试一下吧,越来越像服务端语言了。
webpack打包时,通过调用babel的配置可以将我们的es6代码转化为es5代码,实现浏览器的全兼容。
这个requirejs应该实现不了吧!
也许很快我们就看不到requirejs了吧!

webpack与react
了解过react的同学,可能就会有体会了。webpack对react来说可谓开发神器。

angularjs 模块化 css怎么写:

控制器模块化

指令模块化

过滤器模块化

服务模块化

定义值模块化

使用模块工作

第一步:创建一个模块

   // function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])   

在视图中应用模块

<!-- use module --><html ng-app="exampleApp"> ...</html>   

第二步:定义值

   var valueModule = angular.module("exampleApp.Values", [])// defind valuevar now = new Date();valueModule.value("nowValue", now);   

第三步:定义服务

   var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.service("days", function (nowValue) {  this.today = nowValue.getDay();  this.tomorrow = this.today + 1; })   

第四步:定义控制器

var controllerModule = angular.module("exampleApp.Controllers", []);// function : define a controller named dayCtrl// the controller include two param:// param detail:// param one : name of controller// param two : a factory function// the param $scope of factory function show information to viewcontrollerModule.controller("dayCtrl", function ($scope, days) {  // days : use custom service // today is ... $scope.day = days.today; // tomorrow is ... $scope.tomorrow = 7;})   

将控制器应用于视图

   <!-- use controller --> <div class="panel" ng-controller="dayCtrl">  <div class="panel-header">   <h3>Angular App</h3>  </div>  <!-- if the day is undefined, show unknow -->  <!-- use filter and data binding -->  <h4>Today is {{ day || "unknow" }}</h4>  <h4>Tomorrow is {{ tomorrow || "unknow" }}</h4> </div>   

第五步:定义指令

   var directiveModule = angular.module("exampleApp.Directives", []);// function : define a directive named highlight// it accepts two param// param one : the name of directive// param two : a factory methoddirectiveModule.directive("highlight", function ($filter) {   // get the filter function  var dayFilter = $filter("dayName");   // param detail:  // scope : view scope of action  // element : the element which uses the custom directive  // attrs : the attrs of the element  return function (scope, element, attrs) {   // console.log(dayFilter(scope.day));   if (dayFilter(scope.day) == attrs['highlight']) {    element.css("color", 'red');   }  } })   

将指令应用于视图

   ...<h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>...   

第六步:定义过滤器

   var filterModule = angular.module("exampleApp.Filters", []);// function : define a fitler named dayNamefilterModule.filter('dayName', function () {  var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday']; return function (input) {  // input is the value of data binding  return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7; };})   

将过滤器应用于视图

<!-- 用 | 分开 --><h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4><h4>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h4>   

最后,下面是完整的代码: 

文件一:example.html

   <!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" ></head><body> <!-- use controller --> <div class="panel" ng-controller="dayCtrl">  <div class="panel-header">   <h3>Angular App</h3>  </div>  <!-- if the day is undefined, show unknow -->  <!-- use defined directive "highlight" -->  <!-- use filter and data binding -->  <h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>  <h4>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h4> </div><script type="text/javascript" src="/img/anMvYW5ndWxhci5taW4uanM="></script><script type="text/javascript" src="/img/dmFsdWVzL2V4YW1wbGVWYWx1ZS5qcw=="></script><script type="text/javascript" src="/img/Y29udHJvbGxlcnMvZXhhbXBsZUNvbnRyb2xsZXIuanM="></script><script type="text/javascript" src="/img/ZmlsdGVycy9leGFtcGxlRmlsdGVyLmpz"></script><script type="text/javascript" src="/img/ZGlyZWN0aXZlcy9leGFtcGxlRGlyZWN0aXZlLmpz"></script><script type="text/javascript" src="/img/c2VydmljZXMvZXhhbXBsZVNlcnZpY2UuanM="></script><script type="text/javascript">// function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])</script></body></html>   

文件二:/img/c2VydmljZXMvZXhhbXBsZVNlcnZpY2UuanM=

   var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.service("days", function (nowValue) {  this.today = nowValue.getDay();  this.tomorrow = this.today + 1; })   

文件三:/img/dmFsdWVzL2V4YW1wbGVWYWx1ZS5qcw==

   var valueModule = angular.module("exampleApp.Values", [])// defind valuevar now = new Date();valueModule.value("nowValue", now);   

文件四:/img/ZGlyZWN0aXZlcy9leGFtcGxlRGlyZWN0aXZlLmpz

   var directiveModule = angular.module("exampleApp.Directives", []);// function : define a directive named highlight// it accepts two param// param one : the name of directive// param two : a factory methoddirectiveModule.directive("highlight", function ($filter) {   // get the filter function  var dayFilter = $filter("dayName");   // param detail:  // scope : view scope of action  // element : the element which uses the custom directive  // attrs : the attrs of the element  return function (scope, element, attrs) {   // console.log(dayFilter(scope.day));   if (dayFilter(scope.day) == attrs['highlight']) {    element.css("color", 'red');   }  } })   

文件五:/img/Y29udHJvbGxlcnMvZXhhbXBsZUNvbnRyb2xsZXIuanM=

   var controllerModule = angular.module("exampleApp.Controllers", []);// function : define a controller named dayCtrl// the controller include two param:// param detail:// param one : name of controller// param two : a factory function// the param $scope of factory function show information to viewcontrollerModule.controller("dayCtrl", function ($scope, days) {  // days : use custom service // today is ... $scope.day = days.today; // tomorrow is ... $scope.tomorrow = days.tomorrow;})   

文件六:/img/ZmlsdGVycy9leGFtcGxlRmlsdGVyLmpz

var filterModule = angular.module("exampleApp.Filters", []);// function : define a fitler named dayNamefilterModule.filter('dayName', function () {  var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday']; return function (input) {  // input is the value of data binding  return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7; };})   

js 模块化 shim 里面添加依赖关系后,为什么主页面路径引用就有变化了: 你应当理解为“A依赖于B,B依赖于C和D”。如果没有依赖,你的js就可以不按顺序放了。
那么,依赖加载就是模块化js的概念了,而requirejs 就是为此而生的模块化js加载器(AMD规范)。
比如:bootstrap中的modal只是依赖jquery,那么你就需要包装modal。

js模块化开发用框架好吗?seajs怎么样呢?: 可以
如果英语基础好,建议上requirejs,资源更多,针对性的解决方案也多。

js模块化和面对对象是不是一个意思啊?:

是对象,任何函数都是对象

是闭包,任何被大括号包立起来的方法都可以看做闭包

对象和闭包不是一回事

在前端中什么是组件化 什么是模块化: 模块化更一种开发规范,比如cmd amd 是为了更好的解藕,比如一个网站,按照不同的模块来开发,比如你有个评论区,a 项目有,b 项目有,如果仅是单纯的模块开发,这个js 文件你就可以单独来回引用,
更比如 ,一个页面 分好多个功能, 这时候你要是都写在一个js 中 会越来越大,
而你把他分成不同的模块,
比如评论是一块
分页又是一块,
已经上线,或你不做了,后期别人拉手,或你接手别人的项目, 这时候来个需求让你把分页去掉,或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的,

组件,更想当于一个通用的东西,有的分功能组件,有的分业务组件
大图切换,这种就是单纯的一个效果展示,只要调用就ok
一个分页,也是只单纯的调用,
组件更是一个多处都可以使用 ,不需要再单独开发的

怎么理解js面向对象编程和模块化思维: 怎么理解js面向对象编程和模块化思维
是对象,任何函数都是对象 是闭包,任何被大括号包立起来的方法都可以看做闭包 对象和闭包不是一回事

  • iphone的录音在哪个文件夹里

    怎样将iPad里ibooks的pdf导出到电脑里: 将iPad里ibooks的pdf导出到电脑里的操作为:第一步:电脑登陆百度搜索“itools”软件,下载安装完毕后打开。第二步:用数据线把iPad与电脑连接。第三步:在界面左侧点击ipad设备,选择“ibooks”软...

    404条评论 5668人喜欢 6600次阅读 397人点赞
  • mini有几个排量

    iphone怎么在ibook中导入电子书: 1,首先要在电脑上下载安装“iTunes”。2,连接iphone手机和电脑,点击打开“iTunes”。3,点击左上角的三角图标,点击“将文件添加到资料库”。4,然后找到想要添加的电子书文件,下载的时候,下载epub格...

    368条评论 3350人喜欢 4882次阅读 585人点赞
  • 踏的读音有几个

    为什么系统升级以后,IPAD2电用完后,无法充电,不能开机了?:   原因分析:  如果是从升完级后开使就充不了电,可能是内存满了的原因,(系统崩溃了)。  如果升完级后曾成功充过电,可能是一些软件造成的,或者充电器坏了,可以验证一下。  验证方法为:  把插头和别的设备连接,能充...

    506条评论 1761人喜欢 2004次阅读 418人点赞
  • 五征多少钱一辆

    ipad air为什么充不进去电: 1、先确认数据线是否正常,数据线外表看似正常,里面可能已经出现断裂了;2、电池电量过低电池保护了,会导致电池进入休眠状态,需要充20-30分钟来激活电池才可以继续充电;3、按住power键 和home键 出现苹果标志...

    334条评论 5884人喜欢 5270次阅读 872人点赞
  • 昆山千灯镇在哪里

    苹果手机ibook里面的书怎么导出来: 提问的是如何导出,回答的是如何导入,典型的答非所问! ...

    858条评论 4517人喜欢 4754次阅读 907人点赞
  • 100万现金有多少

    小学五年级上册第九课《鲸》第一段运用了说明方法的句子是什么?: 其实还有比象大得多的动物,那就是鲸。 ...

    723条评论 1333人喜欢 4270次阅读 935人点赞
  • 2012年8月份有几个星期

    苹果ipad充不上电是什么原因: 1、先确认数据线是否正常,数据线外表看似正常,里面可能已经出现断裂了;2、电池电量过低电池保护了,会导致电池进入休眠状态,需要充20-30分钟来激活电池才可以继续充电;3、按住power键 和home键 出现苹果标志...

    738条评论 6492人喜欢 6331次阅读 360人点赞
  • 50对有几个人

    为什么ipad不能全屏看?: 用ifunbox找到//Library/MobileSubstrate/DynamicLibraries这个路径,删除两个retinapad打头的文件,重启一下就可以解决这个问题。...

    353条评论 6494人喜欢 4573次阅读 353人点赞