写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. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  2. javascript实现播放音乐

    <script language="javascript"> var flag = 0; //控制变量放在函数内起不到作用.function openplay() { ...

  3. Careercup - Facebook面试题 - 5729456584916992

    2014-05-02 00:59 题目链接 原题: Given a normal binary tree, write a function to serialize the tree into a ...

  4. 把只包含因子2、3和5的数称作丑数(Ugly Number)。例如6、8都是丑数,但14不是,因为它包含因子7。 习惯上我们把1当做是第一个丑数。求按从小到大的顺序的第N个丑数。

    // ConsoleApplication1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> ...

  5. 【BZOJ】【3404】【USACO2009 Open】Cow Digit Game又见数字游戏

    博弈论 Orz ZYF 从前往后递推……反正最大才10^6,完全可以暴力预处理每个数的状态是必胜还是必败(反正才两个后继状态),然后O(1)查询……我是SB /******************** ...

  6. NHibernate 基础

    install-package nhibernate install-package nunit Customer.cs public class Customer { public virtual ...

  7. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  8. JSP图片上传 公共工具类

    需要jsmartcom_zh_CN.jar支持. 下载地址: http://files.cnblogs.com/simpledev/jsmartcom_zh_CN.rar <%@page imp ...

  9. 1. what is Lua?

    glue language Lua is a proven, robust language, small.

  10. hdu 4579 Random Walk 概率DP

    思路:由于m非常小,只有5.所以用dp[i]表示从位置i出发到达n的期望步数. 那么dp[n] = 0 dp[i] = sigma(dp[i + j] * p (i , i + j)) + 1 .   ...