写JS插件,最好是先通过HTML方式将展示结果显示出来,然后再封装成JS插件,将其画出来。JS模板如下:

(function($){
$.fn.fnName = function(options){
var opts = $.extend({},$.fn.fnName.Defaults,options);
return this.each(function(){
var $window;
CreateTemplate(this); // 创建模板,也就是拼接一个界面
SetStyleForTemplate(); // 给模板添加样式
SetEventForTemplate(); //添加事件 function CreateTemplate(w){
$window = $(w);
var arrcontent = [];
arrcontent.push("*********");
*************************** //拼接
CreateSubTemplate(arrcontent);//分支拼接,特殊情况利于层次分明 $window.html(arrcontent.join(""));
arrcontent = null;
} functon CreateSubTemplate(arrcontent){
arrcontent.push("*********");
} function SetStyleForTemplate(){
$window.find("***")*************;//设置样式
} function SetEventForTemplate(){
$window.find("***")************;//添加事件
}
});
};
$.fn.fnName.Defaults ={
// 默认参数
};
})(jQuery);

  

javascript插件编写小结的更多相关文章

  1. 原生JavaScript插件编写指南(转载)

    原生js开发指南 https://www.jianshu.com/p/e65c246beac1 在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有 ...

  2. JavaScript插件编写指南

    在编写插件之前,大家要先了解做插件的几个要点: 插件需要满足的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量: ...

  3. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  4. 关于chrome插件编写的小结

    一个插件的大致目录结构如下: 其中manifest文件最为重要,它定义/指明插件应用的相关信息(权限.版本.功能说明等),点此查看Manifest的详情>>   这里有一篇chrome官方 ...

  5. javascript&&jquery编写插件模板

    javascrpt插件编写模板 这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理 ;(function(window,document){ function FnName ...

  6. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

  7. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  8. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  9. 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

随机推荐

  1. Careercup - Facebook面试题 - 5890898499993600

    2014-05-01 02:30 题目链接 原题: Given a matrix of letters and a word, check if the word is present in the ...

  2. oracle merge into 语法

    MERGE INTO upperLowerLimitData t1 USING (select name,enname,starttime,value ...   from dual) t2 ON ( ...

  3. 无root权限安装python

    http://lujialong.com/?p=150 pipe 安装第三方包 http://www.lfd.uci.edu/~gohlke/pythonlibs/#pip http://www.cn ...

  4. action间传多个参数时注意问题

    通常我们action之间传参可以有多种形式,举例说明:示例1: <result name="test" type="redirect-action"> ...

  5. 对于WIFI版ipad(无GPS芯片)定位功能的释疑

    把玩ipad(WIFI版ipad,无GPS芯片)很久时间了,曾今有很多人(包括我)也用过它的定位功能,发现它确实很准确,通常的误差在40米以内,所以很多人都怀疑这个版本的ipad是不是真的内置了GPS ...

  6. XEE介绍

    摘要: XMl Entity Expansion(攻击)某种程度上类似于 XML Entity Expansion,但是它主要试图通过消耗目标程序的服务器环境来进行DOS攻击的.这种攻击基于XML E ...

  7. poj 1797 Heavy Transportation(最短路变种2,连通图的最小边)

    题目 改动见下,请自行画图理解 具体细节也请看下面的代码: 这个花了300多ms #define _CRT_SECURE_NO_WARNINGS #include<string.h> #i ...

  8. mahout安装配置

    1.下载mahout 下载地址:http://mahout.apache.org 我下载的最新版:mahout-distribution-0.9 2.把mahout解压到你想存放的文档,我是放在/Us ...

  9. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  10. hdu 4447 Yuanfang, What Do You Think?

    思路: 这题有个结论也可以自己归纳: 对于给定的n,其约数用pi表示 T(n)=T(p1)T(p2)……T(pn)T(n') 其中T(n')是这个式子所独有的也就是 T(n')=(x^n-1)/T(p ...