• 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;

  • 相关阅读:
    Linq 入门 顺带 Func与Action
    关于asp.net 的一些好资料地址 , 防止丢失!
    Sql日期时间格式转换 备用
    自己动手写 ASP.NET MVC 分页 part1
    怎么做好一个美食排行榜的用户投票功能?
    「要买车网」免费获取汽车电商要买车网购车优惠券
    MVC Ajax Form & Ajax Valida(笔记)
    C# 序列化高级用法
    我与葡萄城的故事
    生成分布式随机ID
  • 原文地址:https://www.cnblogs.com/hellome/p/3791644.html
Copyright © 2020-2023  润新知