封装自己的库

1. JavaScript立即执行语句

;(function(){
})();

(function(str1,str2){console.log(str1);console.log(str2);
})('11',22);

第二种

//----------------------------;(function(global, factory) {console.log(global);console.log(factory);
}(this, function() {}));/********************************/;(function(global, factory) {console.dir($);var factoryObj = factory();console.dir(factoryObj);}(this, function() {function _init() {alert("test");}var _util = {init: _init,}return _util;
}));/********************************/;(function(global, factory) {console.log(global);console.log(factory);
}('a', 'b'));

参考文章：javaScript中的立即执行函数

2. 设置全局绑定的对象

第一版

;(function($) {if (!window.project) {window.project = {};}window.project = {init: function() {alert("test");},show: function() {alert("test2");}};　　
})(jQuery);

此代码案例可以实现工厂函数库功能。

第二版

;(function($) {if (!window.project) {window.project = {};}function _init() {alert("test");}function _show() {alert("test2");}window.project = {init: _init,show: _show};　　
})(jQuery);

---

3. 实现jQuery插件

• BiliBili-JavaScript高级进阶-H5，73、jquery插件的概念与演示

;(function($){var _that;$.fn.color=function(c){_that = this;$(_that).css('color',c);return _that;}
})(jQuery);

$('body').color('red');

第一版

//自执行函数,带参
//jQuery插件，将对象绑定到jQuery对象上
;(function($) {console.log(jQuery);//第一种写法jQuery.prototype.showme = function() {alert("hello plugin");}/*** 第二种写法* 两种写法效果相同，只是第二种需要重新加上构造器constructor:jQuery*/jQuery.prototype = {constructor: jQuery,showme: function() {alert("hello plugin");}}// 调用方法：    $.prototype.showme();/*** 第三种使用jquery继承的方式* $.fn.extend()*  函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。*/$.fn.extend({showme: function() {alert("hello plugin");}})})(jQuery);

调用写法：
$.fn.showme();
$('body').showme();

第二版

//jQuery插件入门
/**6. this关键字进入插件方法后，第一时间将this关键字（指向对象本身）存起来7. 确保$永远指向jQuery8. 正确使用分号9. 尽可能返回jQuery对象本身，为了实现链式调用10. jQuery插件固定格式;(function($){var _that;//定义一个变量用于存放this关键字指向的对象本身var _插件名 = function(){_that = this;//实现插件功能的代码return that;}$.fn.插件名=_插件名})(jQuery);*/;(function($){var _that;//定义一个变量用于存放this关键字指向的对象本身function _showme(c){_that = this; //对象本身，进入方法时就将对象本身存起来，以便于后面使用；console.dir(_that);return _that;}$.fn.showme=_showme;
})(jQuery);

第三版

增加命名空间规则

;(function($) {var _that;//使用命名空间解决一个插件有多个方法的情况var obj = {printObj: function(config) {console.dir(config);console.log("obj"+config.msg);return undefined;},init: function() {console.log("调用init");return undefined;},show: function() {console.log("调用show");return undefined;},hide: function() {console.log("调用hide");return undefined;},getFileSizeMap:function(){var filesizeMap = new Map();filesizeMap.set('doc',25);//30MBfilesizeMap.set('docx',25);//30MBfilesizeMap.set('xls',15);//20MBfilesizeMap.set('xlsx',15);//20MBfilesizeMap.set('ppt',45);//50MBfilesizeMap.set('pptx',45);//50MBreturn filesizeMap;}    }function _namespace(config) {_that = this;//obj[config.fn].apply(_that, [config]);var _val = obj[config.fn].call(_that, config);if(undefined==_val){return _that;}else {return _val;}}$.fn.namespace = _namespace;
})(jQuery);

//调用
$.fn.namespace({fn:"printObj"});

4. 我封装的库

方式一

; (function($) {function _init() {alert("test");}var _util = {init: _init,}function Cutil() {}function _circleUtility(config) {_that = this;_util[config.fn].apply(_that, [config]);}if (!window.CircleUtility) {window.CircleUtility = _circleUtility;}if (!window.Cutil) {window.Cutil = window.CircleUtility;}
})(jQuery)

方式二

; (function($) {function _init() {alert("test");}var _util = {init: _init,}function Cutil() {}function _circleUtility(config) {_that = this;_util[config.fn].apply(_that, [config]);}Cutil.prototype.circleUtility = _circleUtility;if (!window.Cutil) {window.Cutil = new Cutil();}
})(jQuery)

// 调用：Cutil.circleUtility({fn:'init'});

方式三

; (function($) {function _init() {alert("test");}var _util = {init: _init,}if (!window.Cutil) {window.Cutil = Object.create(_util);}
})(jQuery)

// 调用：Cutil.init()

4. 给对象的原型添加属性和方法。

function HashMap() {this.map = {};
}
HashMap.prototype = {//constructor: HashMap,//效果一致，另一种写法put: function(key, value) { // 向Map中增加元素（key, value)this.map[key] = value;},get: function(key) { //获取指定Key的元素值Value，失败返回Nullif (this.map.hasOwnProperty(key)) {return this.map[key];}return null;},remove: function(key) { // 删除指定Key的元素，成功返回True，失败返回Falseif (this.map.hasOwnProperty(key)) {return delete this.map[key];}return false;},removeAll: function() { //清空HashMap所有元素this.map = {};},keySet: function() { //获取Map中所有KEY的数组（Array）var _keys = [];for (var i in this.map) {_keys.push(i);}return _keys;}
};
HashMap.prototype.constructor = HashMap;

5. 回调函数

1. 将方法对象作为参数进行传递，并调用该方法

function test1(str){console.log(str);
}
function test(callback){if(test1){callback("hello");}
}//调用
test(test1)

2. eval()方法

eval的参数既可以是字符串，也可以是function对象。

eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));

附录

记录的代码

//自执行函数,带参
//jQuery插件，将对象绑定到jQuery对象上
;(function($) {var _that;var _util = {printObj:function(config){console.log(config.msg);},saveObj:function(config) {$('#btn_sub', config.iframe.document).click();}}function _circleUtility(config) {_that = this;_util[config.fn].apply(_that, [config]);}$.fn.circleUtility = _circleUtility;
})(jQuery);
//调用
//$.fn.namespace({fn:"printObj"});

JavaScript封装自己的库相关推荐

1. 后端返回number类型数据_【JavaScript 教程】标准库—Number 对象

   作者 | 阮一峰 1.概述 Number对象是数值对应的包装对象,可以作为构造函数使用,也可以作为工具函数使用. 作为构造函数时,它用于生成值为数值的对象. var n = new Number(1) ...

2. C++将带ui界面的qt工程封装为动态库dll

   C++将带ui界面的qt工程封装为动态库dll 功能如下 完整源代码实现如下 功能如下 将工程封装后可以在别的工程下直接引用该界面,以及该界面的函数, 完整源代码实现如下 #ifndef BUILD_ ...

3. 对象数组参数_【JavaScript 教程】标准库—Array 对象

   作者 | 阮一峰 1.构造函数 Array是 JavaScript 的原生对象,同时也是一个构造函数,可以用它生成新的数组. var arr = new Array(2);arr.length // ...

4. 15个最佳的 JavaScript 表单验证库

   客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

5. 字符串处理_5个JavaScript的字符串处理库，不再996

   处理大小写转换,删除字母符号,Unicode处理,URL处理等 使用字符串可能是一项繁琐的任务,因为有许多不同的用例.例如,将字符串转换为驼峰大小写这样的简单任务可能需要几行代码才能达到最终目标. f ...

6. c++ 封装的zookeeper库

   一个c++ 封装的zookeeper库 特点: 1. c++封装,接口简单易用: 2. 文件少,一个头文件和一个源文件,无论是编译成库还是直接源文件编译都很方便: 3. 支持节点的create.set ...

7. yue-library是一个基于SpringBoot封装的基础库

   yue-library是一个基于SpringBoot封装的基础库

8. JavaScript的RSA加密库(cryptico、Node-rsa、Crypto、jsrsasign、JSEncrypt)

   JavaScript的RSA加密库 一.Rsa利用openssl生成公钥私钥 1.安装openssl: 2.生成公钥: 3.生成私钥: 二.Cryptico 1.优点: 2.缺点: 3.安装: 4.D ...

9. 15个非常实用的JavaScript表单验证库

   来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...

10. 开源库MusicPlayManager - 封装StarrySky音乐库

    开源库MusicPlayManager - 封装StarrySky音乐库 关于 效果图 使用 Java版初始化 Kotlin版初始化 java版权限检查工具使用方法: kotlin权限检查工具使用方法 ...

最新文章

1. 从观望到行动：全球工业物联网市场生态全景观察
2. Java 基础 - 如何重写equals()
3. 使用datatables 中文排序
4. VC中使用Unicode的一些列问题
5. centos mysql 5.6.19_Centos5.8 安装 MySQL5.6.19
6. dbms系统 rdbms_DBMS与传统文件系统之间的区别
7. ivona tts语音合成引擎_高端玩家！树莓派 + Node.js 实现语音机器人
8. 再记一下sscanf的一个小问题
9. TensorFlow教程之API DOC 6.1.4 Class tensorflow::Session
10. jquery的DOM节点操作(创建和插入元素节点)
11. JNI FindClass出错的一种特殊情况
12. 数据挖掘实例1：亲和性分析示例（代码、注释、运行结果）
13. 如何选购计算机硬盘,如何挑选固态硬盘,教您电脑固态硬盘如何挑选
14. 恒生电子面试（面试介绍，面试流程，面试建议，面试题库（软测方向））
15. 世界十大高楼中国占6座 中东要建第一楼
16. insert...on duplicate key update语法详解
17. 如何调用外部webservice 接口来发送短信
18. Ae 内置效果控件（合集）
19. 从零开始学习信号完整性--7-SI分析仿真
20. WebServerApplication

热门文章

1. oppo计算机找不到,oppo手机文件在电脑上无法读取怎么办
2. [设计素材]你也在找CTBiaoSongSJ吗？我这里有耶!
3. 软件工程课程设计-电梯控制系统
4. python如何循环sql语句_python sql 循环语句怎么写-问答-阿里云开发者社区-阿里云...
5. Javascript分页：模拟后台返回数据方法
6. mac iwall 动态桌面引擎
7. appium的环境安装与架构
8. mumu模拟器android调试,如何使用网易mumu模拟器调试安卓程序？
9. SECS/GEM EAP介绍
10. 布客·ApacheCN 编程/后端/大数据/人工智能学习资源 2020.11