写了个微型JS框架

主要实现了：showDialog、noConflict、定位元素、event绑定功能

使用端的代码：

<head>

    <title></title>

    <script src="A2D.js" type="text/javascript"></script>

    <link href="A2D.css" rel="stylesheet" type="text/css" />

    <script language="A2D" type="text/A2DTemplate" id="showDialog">     //搞了个html模版

        <div class="tooltip">{msg}</div>

    </script>

</head>

<body>

    <button id="a111">Test2</button>

    <script language="javascript" type="text/javascript">

        var newName=$.noConflict();
        newName.say();

        newName.bind(newName("a111"), "click", function () {

                                                               newName.showDialog('raised by test2 button.' + new Date());

                                                           });

    </script>

</body>

A2D.js代码

(function (wd, doc) {

    function noConflict() {

        wd.$ = _$;

        wd.A2D = A2D;
        return A2D;

    }

    function saySomeWord() {

        showDialog("My name is Aaron");

    }

    function showDialog(msg) {

        var template = findA2DTemplate("showDialog");

        template = A2D.helper.replace(template, "{msg}", msg);

        var div = document.createElement("div");

        div.innerHTML = template;

        var first = doc.body.firstChild;

        doc.body.insertBefore(div, first);

    }

    function findA2DTemplate(templateId) {

        return A2D(templateId).innerHTML;

    }

    function bind(element, evtName, evtHandler) {

        if (doc.addEventListener)

            element.addEventListener(evtName, evtHandler, false);

        else

            element.attachEvent("on" + evtName, evtHandler);

    }

    var A2D = function (id) {

        return doc.getElementById(id);

    }

    A2D.noConflict = noConflict;

    A2D.say = saySomeWord;

    A2D.showDialog = showDialog;

    A2D.bind = bind;

    A2D.helper = {};

    A2D.helper.replace = function (src, search, tobe) {

        while (src.indexOf(search) >= 0) {

            src = src.replace(search, tobe);

        }

        return src;

    }

    var _$ = wd.$;

    wd.$ = A2D;

}

)(window, document);

A2D.css代码

.tooltip

{

    padding: 10px;

    font-size: large;

    font-style: normal;

    color: #008000;

    background-color: #CCCCFF;

    border-bottom-style: dotted;

    border-right-style: dotted;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-right-color: #C0C0C0;

    border-bottom-color: #C0C0C0;

}

效果图：

给我的感觉是前端东西比较新颖，要很努力才能真正精通。

A2D JS框架的更多相关文章

  1. A2D JS框架 - loadScript实现

    其实这个功能比较小,本着自己造轮子的优良传统....就自己造一个好了 <head> <title></title> <script src="A2D ...

  2. A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)

    这次实现了JS端的DES加密与解密,并且C#端也能正确解析DES的密文(反之也实现了) 使用的代码如下,非常方便: <script src="A2D.js" type=&qu ...

  3. A2D JS框架 - AOP封装

    AOP在js中的实现,先看看用法吧: var A2D = $.noConflict();//不要误会,此乃我自己写的A2D框架,非jQuery function fn1(name, age) { co ...

  4. A2D JS框架 - Web API CSRF保护实现

    这次自己实现了类似jQuery中ajax调用的方法,并且针对RESTFul进行了改造和集成,实现的A2D AJAX接口如下: $.ajax.RESTFulGetCollection("/ap ...

  5. 微信js框架第二篇(创建完整界面布局)

    接着昨天的继续谈关于微信新出的这个js框架,今天主要谈一个页面的创建到布局的详细步骤. 一.创建一个完整页面       页面你可以创建在项目的任何节点,只要你在入口文件正确引入创建该页面的路径就可使 ...

  6. JS框架

    s框架就是将常用的方法进行封装,方便调取使用.一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方 ...

  7. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  8. Node.js 框架

    Node.js的是一个JavaScript平台,它允许你建立大型的Web应用程序.  Node.js的框架平台使用JavaScript作为它的脚本语言来构建可伸缩的应用. 当涉及到Web应用程序的开发 ...

  9. js框架设计1.1命名空间笔记

    借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...

随机推荐

  1. mysql学习之完整的select语句

    本文内容: 完整语法 去重选项 字段别名 数据源 where group by having order by limit 首发日期:2018-04-11 完整语法: 先给一下完整的语法,后面将逐一来 ...

  2. XML 和 DTD

    1.XML 1.1xml简介 a)xml,eXtensible Markup Language,可扩展标记语言,是一种标记语言: b)xml是一种非常灵活的语言,没有固定的标签,所有的额标签都可以自定 ...

  3. Microsoft Teams 集成 (协作, 沟通 和 行为)

    Microsoft Teams 集成 (协作, 沟通 和 行为) 概述 Microsoft Teams是在Office 365中以chat为中心的工作空间.软件开发团队可以快速获得在一个专门的团队协作 ...

  4. Linux 无线网卡配置

    无线网卡常见的配置选项 某TL-WR842N路由器无线配置选项含义: 无线名称 路由器的无线(Wi-Fi)名称.无线密码 无线加密使用WPA2-PSK/WPA-PSK加密方式.AES加密算法,无线密码 ...

  5. js 实现动态时间

    <span id="timebox"></span>                   //承载时间的span $(function () { var o ...

  6. sql server连接oracle并实现增删改查

    需要一个软件ODAC112040Xcopy_64bit 我连接的oracle是11g r2  sqlserver 是 2016 软件下载 https://pan.baidu.com/s/1OpYmpR ...

  7. c/c++ 友元基本概念

    友元基本概念: 1,把一个一般函数声明为一个类的友元函数 2,把一个类A的某几个成员函数声明为某个类B的友元函数 3,把一个类A声明为一个类B的友元类. 友元的作用:可以访问类B里所有的成员变量和成员 ...

  8. HDU ACM 1690 Bus System （SPFA）

    Bus System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. ASP.NET -- WebForm -- .aspx与.aspx.cs文件

    ASP.NET -- WebForm --  .aspx与.aspx.cs文件 1. ASP.NET -- WebForm(C#)文件 .aspx文件:是Html页面,页面的布局,样式在该文件中设计. ...

  10. JavaScript -- 时光流逝（二）：js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...