zoukankan      html  css  js  c++  java
  • JS中的模块化开发之Sea.JS

    模块化开发的好处:

        1:减少冲突

        2:提高性能

    用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads

    例子:获取非行间样式的模块化开发:

      

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="sea_js/sea.js" ></script>
    <script>
            
            /*
                一:引入sea.js文件
                二:定义模块
                三:引用模块
                四:模块依赖
            */
            //页面调用模块中的类库
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                /*
                    页面调用模块中的类库
                    1:seajs.use(first-argument,second-argument)
                    first-argument:模块文件的地址
                    second-argument:回调函数,回调函数的参数是模文件的对外接口exports    
                */
                seajs.use('./sea_js/getStyle.js',function(ex){
                    alert(ex.getStyle(oDiv,'width'));
                })
            }
    </script>
    <style>
    #div1{200px;height:200px;background:red;}
    </style>
    </head>
    
    <body>
    <div id="div1"></div>
    </body>
    </html>

    获取非行间样式模块文件getStyle.js:

    // JavaScript Document
    //定义一个获取非行间样式的函数模块
    define(function(require,exports,module){
                 /*
              require:模块文件依赖接口
              exports:对外文件接口
              module:
              三个都要写就可以了
            */
    function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr];//非ie下 } } //exports:对外的接口,用于调用模块 exports.getStyle=getStyle;//好像对象中的方法调用. });

    结果获得是:200px;

  • 相关阅读:
    新零售解决方案体系架构
    设计模式-分类
    设计模式-设计原则
    一天一个 Linux 命令(12):tree 命令
    RabbitMQ中如何保证消息的可靠传输?如果消息丢了怎么办
    为什么使用MQ?
    一天一个 Linux 命令(11):cp命令
    数据结构和算法-线性查找-二分查找
    作图工具汇总
    Git 命令大全,Git命令汇总,Git命令说明
  • 原文地址:https://www.cnblogs.com/hellome/p/3791644.html
Copyright © 2011-2022 走看看