Loaders

先放出项目地址:https://github.com/j20041426/Loaders

这是一个可以动态选择加载动画的样式和颜色的插件。这个项目仅仅是作为对js组件化的一个探索,不太建议用在生产环境中

原理

通过动态渲染页面元素的方式,实现加载动画的样式选择;再通过less的客户端插件,动态改变css样式中的背景颜色,从而实现加载动画的颜色选择。

讲解

1. 结构

var Loader = (function(){

	var _instance;	//私有属性,对外界隐藏

	var LoadingFun = function(config){
...
} LoadingFun.prototype.show = function(){
...
} LoadingFun.prototype.hide = function(){
...
} return LoadingFun;
})();

这是这个插件的大体结构。在IIFE(立即执行函数)中,返回一个函数结构LoadingFun,并且在原型链中增加show和hide两个方法,这样对外界就只暴露了Loader这个构造函数,以及show和hide这两个成员函数。而_instance这个属性,就作为私有成员存在,而不被外界所知。

2. 构造方法

var LoadingFun = function(config){
_adaptParams(config); //参数的适配器
_init(); //初始化动画
_render(); //渲染动画到页面中
_instance.style.display = "none"; //默认隐藏
}
2.1 适配器

其中_adaptParams这个函数的作用是适配参数。不管调用者是否传递参数,或者以随机顺序传递参数,都可以让loaders正确接收到相应的参数。

var _config = {				//默认参数
type : "ball-pulse",
color : "#fff"
}
var _adaptParams = function(config){ //适配器
if(config){
for(var param in _config){
if(config[param]){
_config[param] = config[param];
}
}
}
}
2.2 初始化动画

这个函数的作用是动态加载需要的less文件,并设置less文件中的全局参数@color为参数中的颜色值,然后动态引用less客户端插件进行less文件的预编译,最终得到需要的css样式代码。

var _init = function(){
var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'css/loaders.less';
style.rel = 'stylesheet/less';
style.type = 'text/css';
head.appendChild(style);
var options = document.createElement('script');
options.innerHTML = "less = {globalVars:{color:'" + _config.color + "'}};";
head.appendChild(options);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'js/less.min.js';
head.appendChild(script);
}

2.3 渲染

根据不同加载动画的DOM结构,动态生成对应的DOM元素,然后append到body元素中。

var divs= {
"ball-pulse" : 3,
...
}; var loader = document.createElement("div");
loader.className = "loader";
var loader_inner = document.createElement("div");
loader_inner.className = "loader-inner " + _config.type;
for(var i = 0; i < divs[_config.type]; i++){
var div = document.createElement("div");
loader_inner.appendChild(div);
}
loader.appendChild(loader_inner);
document.body.appendChild(loader);
_instance = loader; //将渲染的DOM元素存到私有成员_instance中,便于后续的显示控制

3. 显示控制

因为渲染时得到了加载动画的DOM对象_instance,所以可以通过_instance来控制元素的显示与隐藏。

_instance.style.display = "flex" 这里设置成flex是因为加载动画是用flexbox来控制居中显示的。

return this 返回this对象可以实现链式调用。

LoadingFun.prototype.show = function(){
_instance.style.display = "flex";
return this;
} LoadingFun.prototype.hide = function(){
_instance.style.display = "none";
return this;
}

4. 结语

由于在加载和渲染动画时,使用了less的预编译功能,所以加载会有时间损耗。不太建议用在生产环境中,如果一定要使用的话,尽量在页面首次加载时,调用var loaders = new Loaders(),然后在需要显示和隐藏时,再分别调用loaders.show()loaders.hide()

由于自己在前端方面也是个新手,欢迎大家的指正。

关于JavaScript组件化的探索的更多相关文章

  1. javascript组件化(转)

    javascript组件化(转) By purplebamboo 3月 16 2015 更新日期:3月 23 2015 文章目录 1. 最简陋的写法 2. 作用域隔离 3. 面向对象 4. 抽象出ba ...

  2. JavaScript 组件化开发之路(一)

    *:first-child{margin-top: 0 !important}.markdown-body>*:last-child{margin-bottom: 0 !important}.m ...

  3. javascript 组件化(转载)

    这边只是很简陋的实现了类的继承机制.如果对类的实现有兴趣可以参考我另一篇文章javascript oo实现 我们看下使用方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  4. 通过构建Cocoapods私有库进行组件化开发探索

    专题一 一.创建私有索引库 选Github或者码云都可以,本例以Github为例.创建私有索引库用来作为自己组件库的索引: 二.本地添加私有索引库 添加:pod repo add 索引库名称 索引库地 ...

  5. javascript组件化

    http://purplebamboo.github.io/2015/03/16/javascript-component/#%E5%BC%95%E5%85%A5%E4%BA%8B%E4%BB%B6% ...

  6. 【转】Web应用的组件化开发(一)

    原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其 ...

  7. Web应用的组件化(一)

    基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...

  8. 前端web应用组件化(一) 徐飞

    https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...

  9. 从徐飞的文章《Web应用的组件化开发(一)中窥视web应用开发的历史

    Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...

随机推荐

  1. [POJ 2115} C Looooops 题解(扩展欧几里德)

    题目描述 对于C的for(i=A ; i!=B ;i +=C)循环语句,给出A,B,C和k(k表示变量是在k进制下的无符号整数),判断循环次数,不能终止输出"FOREVER". 输 ...

  2. Scrapyd部署爬虫

    Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...

  3. 再谈AbstractQueuedSynchronizer:独占模式

    关于AbstractQueuedSynchronizer JDK1.5之后引入了并发包java.util.concurrent,大大提高了Java程序的并发性能.关于java.util.concurr ...

  4. 基于Java SE的模拟双色球彩票系统

    1.双色球规则: ①双色球分为红球和蓝球,红球选择的范围为1-33,而且红球选择6个数字:蓝球选择的范围为1-16,而且只能选择1个数字. ②选择方式为随机选择号码和手动输入选择号码. ③生成号码的顺 ...

  5. 基于 HTML5 WebGL 的 3D 网络拓扑图

    在数据量很大的2D 场景下,要找到具体的模型比较困难,并且只能显示出模型的的某一部分,显示也不够直观,这种时候能快速搭建出 3D 场景就有很大需求了.但是搭建 3D 应用场景又依赖于通过 3ds Ma ...

  6. jq-toggle

    jq-toggle: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  7. 第一章(认识jQuery)

    1.3.2编写简单的jQuery代码 ①$是jQuery的简写 ②$("#foo") = $("#foo") ③$.ajax  =  jQuery.ajax ④ ...

  8. 【案例分享】SequoiaDB+Spark搭建医院临床知识库系统

    1.背景介绍 从20世纪90年代数字化医院概念提出到至今的20多年时间,数字化医院(Digital Hospital)在国内各大医院飞速的普及推广发展,并取得骄人成绩.不但有数字化医院管理信息系统(H ...

  9. C#开发移动应用系列(4.调用系统应用,以及第三方应用(调用与被调用))

    前言 上篇文章地址: C#开发移动应用系列(1.环境搭建) C#开发移动应用系列(2.使用WebView搭建WebApp应用) C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知识) 写完这篇 ...

  10. [SinGuLaRiTy] 组合数学题目复习

    [SinGuLaRiTy] Copyright (c) SinGuLaRiTy 2017.  All Rights Reserved. [CQBZOJ 2011] 计算系数 题目描述 给定一个多项式( ...