写了个微型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. IT真的是万能的吗？

    朋友最近郁闷了,作为企业信息化主管的他最近经常听到的一句话就是:IT是万能的,不能拒绝用户的任何需求.这句话如果是普通用户私下开玩笑说说也就罢了,但现在演变成了老板在会议场合不止一次这么说,那就让人匪 ...

  2. exports与module.exports的区别,export与export.defult区别

    在JS模块化编程中,之前使用的是require.js或者sea.js.随着前端工程化工具webpack的推出,使得前端js可以使用CommonJS模块标准或者使用ES6 moduel特性. 在Comm ...

  3. Django Admin后台管理用户密码修改

    方法一 在Terminal中执行:python manage.py changepassword your_name(其中“your_name”为你要修改密码的用户名),根据提示内容修改即可. 方法二 ...

  4. MyBatis笔记----@Intercepts({@Signature(type = StatementHandler.class, method = "prepare", args = {Connection.class

    使用MyBatis 3.4.1或者其以上版本 @Intercepts({ @Signature(type = StatementHandler.class,  method = "prepa ...

  5. [20190401]关于semtimedop函数调用.txt

    [20190401]关于semtimedop函数调用.txt --//上个星期测试,链接http://blog.itpub.net/267265/viewspace-2639675/--//关于sql ...

  6. emacs 利用 auto-complete 自动补齐

    emacs 利用 auto-complete 自动补齐 1,首先导入melpa,在文件~/.emacs中添加下面代码 (require 'package) (package-initialize) ( ...

  7. Windows Server 2016-管理站点复制(一)

    可以使用Active Directory站点和服务管理单元来管理实现站点间复制拓扑的特定于站点的对象.这些对象存储在Active Directory域服务 (AD DS) 的站点容器中.同一个站点内的 ...

  8. DubboAdmin部署

    1.软件下载 部署管理后台和监控中心需要以下软件 opensesame  下载地址:https://github.com/alibaba/opensesame Dubbo源码下载  https://g ...

  9. VSCode 首次打开提示“Git installation not found.”解决方案

    ※前提大家先在本地安装好相应的git版本(下载地址:https://www.git-scm.com/download/) 一.找到“默认用户设置”

  10. Qt在多线程中使用信号槽的示例

    之前对线程理解得不深入,所以对Qt的线程机制没有搞清楚,今天写一篇文章总结一下,如有错误,欢迎指出. 首先需要理解线程是什么,线程在代码中的表现其实就是一个函数,只不过这个函数和主线程的函数同时运行, ...