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

1. JS在实战中的分层方法,主要是分为四层,浏览器底层,框架core核心层,框架组件层,应用层。

Web组件开发一 分层详解 和模块化_第1张图片

2. 浏览器底层,存在的问题

  • JS核心语法层面薄弱

  • JS原生API不好用

  • 浏览器兼容问题

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

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

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

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

3. 模块化和require.js

解决多个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>
    ...
    <script src="js/require.js" data-main="js/main">script>
body>

你可能感兴趣的:(前端)