写了个微型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. SQL中触发器的使用

    创建触发器 是特殊的存储过程,自动执行,一般不要有返回值 类型: 1.后触发器 (AFTER,FOR)先执行对应语句,后执行触发器中的语句 2.前触发器  并没有真正的执行触发语句(insert,up ...

  2. CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6

    CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6 解决办法: 1.进入/etc/sysconfig/network-script ...

  3. c/c++ 数组 数组的引用，指针数组的引用

    c/c++ 数组 知识点 1,数组的声明和初始化,对应代码里的test1和test2 2,char数组,对应代码里的test3 3,数组不可以拷贝和复制,对应代码里的test4 4,指针数组, 数组的 ...

  4. python 爬虫 requests+BeautifulSoup 爬取巨潮资讯公司概况代码实例

    第一次写一个算是比较完整的爬虫,自我感觉极差啊,代码low,效率差,也没有保存到本地文件或者数据库,强行使用了一波多线程导致数据顺序发生了变化... 贴在这里,引以为戒吧. # -*- coding: ...

  5. UnicodeEncodeError: 'ascii' codec can't encode characters in position

    UnicodeEncodeError: 'ascii' codec can't encode characters in position python运行时出现这个错误,解决方法如下: 加入如下语句 ...

  6. ELK收集tomcat访问日志并存取mysql数据库案例

    这个案例中,tomcat产生的日志由filebeat收集,然后存取到redis中,再由logstash进行过滤清洗等操作,最后由elasticsearch存储索引并由kibana进行展示. 1.配置t ...

  7. LeetCode算法题-Contains Duplicate II（Java实现）

    这是悦乐书的第193次更新,第197篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第53题(顺位题号是219).给定整数数组和整数k,找出数组中是否存在两个不同的索引i和 ...

  8. LeetCode算法题-House Robber（Java实现）

    这是悦乐书的第187次更新,第189篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第46题(顺位题号是198).你是一个专业的强盗,计划在街上抢劫房屋. 每个房子都藏着一 ...

  9. March 06th, 2018 Week 10th Tuesday

    Hope for the best, but prepare for the worst. 抱最好的愿望,做最坏的打算. To hope for the best and prepare for th ...

  10. 移动端rem flexible方案

    一.px 自动转换为rem sublim Text3 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录(在Subl ...