写了个微型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. Ehcache缓存配置以及基本使用

    在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apache 2.0 ...

  2. (网页)HTMl5的sessionStorage和localStorage

    百度上百度的,记录一下: html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(sessi ...

  3. 资深程序员整理出来的Python面试题

    转载链接:https://www.cnblogs.com/fcxwz/p/9225791.html

  4. python 交互式命令行数据库连接助手 -- mysql、sql server (mssql)、redis

    目录 python 交互式命令行数据库连接助手 0. 操作示例 1. python 连接mssql 2. python 连接mysql 3. python 连接redis n. Tips python ...

  5. github提交代码失败

    向github上面提交代码,提示代码里面有大文件,建议使用git-lfs. 1,安装git-lfs yum install git-lfs 2,配置需要追踪的打文件(由于我这里提交的是jar包) gi ...

  6. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  7. MySQL多表更新的一个坑

    简述 MySQL支持update t1,t2 set t1.a=2;这种语法,别的关系数据库例如oracle和sql server都不支持.这种语法有时候写起来挺方便,但他有一个坑. 测试脚本 dro ...

  8. 使用Navicat for Mysql连接mysql服务器

    使用Navicat for Mysql连接mysql服务器 在windows上用Navicat for Mysql 连接装在虚拟机Ubuntu上的mysql服务器时出现的问题的解决方案. Navica ...

  9. February 15th, 2018 Week 7th Thursday

    Every orientation presupposes a disorientation. 迷失过方向,才能找到方向. Not until we are lost do we begin to u ...

  10. GMM算法的matlab程序（初步）

    GMM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648508.html文章中已经介绍了GMM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...