Web组件开发一分层详解和模块化

最新推荐文章于 2024-05-07 03:00:43 发布

Winge_Fish

最新推荐文章于 2024-05-07 03:00:43 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： web

本文链接：https://blog.csdn.net/Winge_Fish/article/details/60477673

版权

4 篇文章 0 订阅

订阅专栏

这里写图片描述

后来有了框架核心层去解决以上的问题，如Prototype，YUI，
Dojo，以及一直流行很长时间的JQuery。

框架组件层，提高了一些简单的控件，如input，text，
checkbox radio select 可是还有其他常用控件没有提供
如日历选择器，富文本编辑器等。这些通常由程序员编写。

框架组件层，又可以分为 定制组件 和框架通用组件

而一般的框架通用组件又大公司（BAT等之类）会自己开发，
通常我们程序员使用还是定制组件，所以定制组件，才是我们的核心。

解决多个JS文件模块依赖关系。

http://requirejs.org/

用define定义模块
举个栗子：
模块名就是文件名mod1
mod1

define(function(){
    return {a:3};  //返回一个字典
});

mod2
//参数m1 就代表模块1return出来的字典

define(['mod1'],function(m1){ 
    var a, b=2, c=3;
    a = c*m1.a;
    return{
            a:a
            b:b
    };
});

main.js (require 类似java的main方法)，从这里开始执行
require接收2个参数，第一个数组，第二个是个函数，传入什么模块名，函数就接收什么参数。

应用层:
main.js

require(['mod2'],function(m2){
    alert(m2.a * m2.b);
});

那如何使用呢？

index.html

<body>
    ...<!-- 当加载完成require.js后，会去找data-main路径下的main，不需要加后缀.js,即整个程序的入口 -->
    <script src="js/require.js" data-main="js/main"></script>
</body>

关注