js代码如何封装
发布网友
发布时间：2022-04-23 01:10
共5个回答
懂视网
时间：2022-04-22 18:15
1、判断是否是一个数组
function isArray(arr){
return Object.prototype.toString.call(arr) ==='[object Array]';
}
isArray([1,2,3]) //true2、判断是否是一个函数(三种)
function isFunction(fn) {
return Object.prototype.toString.call(fn) ==='[object Function]';
return fn.constructor == Function;
return fn instanceof Function;
return typeof (fn) == Function;
}3、数组去重，只考虑数组中元素为数字或者字符串
function newarr(arr){
var arrs = [];
for(var i =0;i<arr.length;i++){
if(arrs.indexOf(arr[i])== -1){
arrs.push(arr[i])
}
}
return arrs;
}4、动态去重
var arr = [1,2, 3, 4];
function add() {
var newarr = [];
$('.addEle').click(() => {
var rnd = Math.ceil(Math.random() * 10);
newarr.push(rnd)
for (var i =0; i < newarr.length; i++) {
if (arr.indexOf(newarr[i]) == -1) {
arr.push(newarr[i])
arr.sort(function (a, b) {
return b - a //降序
});
}
}
console.log(arr)//[1,2,3,4,5,6,7,8,9]
})
}
add()5、去除字符串空格(包含三种情况)
function trim(str) {
return str.replace(/^[" "||" "]*/,"").replace(/[" "|" "]*$/,"");// 去除头和尾
return str.replace(/s/g,'');//去除所有空格
return str.replace(/(s*$)/g,"");//去除右边所有空格
}6、判断是否为邮箱地址
function isEmail(emailStr) {
var reg = /^[a-zA-Z0-9]+([._-]*[a-zA-Z0-9]*)*@[a-zA-Z0-9]+.[a-zA-Z0-9{2,5}$]/;
var result = reg.test(emailStr);
if (result) {
alert("ok");
} else {
alert("error");
}
}7、判断是否是手机号
function isMobilePhone(phone) {
var reg = /^1d{10}$/;
if (reg.test(phone)) {
alert('ok');
} else {
alert('error');
}
}8、获取一个对象里面第一次元素的数量
function getObjectLength(obj){
var i=0;
for( var attrin obj){
if(obj.hasOwnProperty(attr)){
i++;
}
}
console.log(i);
}
var obj = {name:'kob',age:20};
getObjectLength(obj) //29、获取元素相对于浏览器窗口的位置，返回一个{x,y}对象
function getPosition(element) {
var offsety = 0;
offsety += element.offsetTop;
var offsetx = 0;
offsetx += element.offsetLeft;
if (element.offsetParent != null) {
getPosition(element.offsetParent);
}
return { Left: offsetx, Top: offsety };
} 10、判断某个字母在字符串中出现的次数
var str = 'To be, or not to be, that is the question.';
var count = 0;
var pos = str.indexOf('e');
while (pos !== -1) {
count++;
pos = str.indexOf('e', pos + 1);
}
console.log(count) //411、计算出数组中出现次数最多的元素
var arrayObj = [1,1, 2, 3, 3, 3,4, 5, 5];
var tepm = '',count =0;
var newarr = new Array();
for(var i=0;i<arrayObj.length;i++){
if (arrayObj[i] != -1) {
temp = arrayObj[i];
}
for(var j=0;j<arrayObj.length;j++){
if (temp == arrayObj[j]) {
count++;
arrayObj[j] = -1;
}
}
newarr.push(temp + ":" + count);
count = 0;
}
for(var i=0;i<newarr.length;i++){
console.log(newarr[i]);
}12、数组filter（搜索功能）
var fruits = ['apple','banana', 'grapes','mango', 'orange'];
function filterItems(query) {
return fruits.filter(function(el) {
return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
})
}
console.log(filterItems('ap')); // ['apple', 'grapes']13、copy 对象（第一种）
//第一种
var cloneObj =function(obj) {
var newObj = {};
if (obj instanceof Array) {
newObj = [];
}
for (var keyin obj) {
var val = obj[key];
newObj[key] = typeof val === 'object' ? cloneObj(val) : val;
}
return newObj;
};
//第二种
function clone(origin , target){
var target = target || {};
for(var propin origin){
target[prop] = origin[prop];
}
return target;
} 14、深度克隆
var newObj ={};
function deepClone(origin,target){
var target = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]";
for(var propin origin){
if(origin.hasOwnProperty(prop)){
if(origin[prop] != "null" && typeof(origin[prop]) == 'object'){//判断原型链
target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {}//判断obj的key是否是数组
deepClone(origin[prop],target[prop]);//递归的方式
}else{
target[prop] = origin[prop];
}
}
}
return target
}
deepClone(obj,newObj);
console.log(newObj)15、求数组最大值和最小值
Array.prototype.max = function(){
return Math.max.apply({},this)
}
Array.prototype.min = function(){
return Math.min.apply({},this)
}
console.log([1,5,2].max())16、json数组去重
function UniquePay(paylist){
var payArr = [paylist[0]];
for(var i =1; i < paylist.length; i++){
var payItem = paylist[i];
var repeat = false;
for (var j =0; j < payArr.length; j++) {
if (payItem.name == payArr[j].name) {
repeat = true;
break;
}
}
if (!repeat) {
payArr.push(payItem);
}
}
return payArr;
} 17、对比两个数组，取出交集
Array.intersect = function () {
var result = new Array();
var obj = {};
for (var i =0; i < arguments.length; i++) {
for (var j =0; j < arguments[i].length; j++) {
var str = arguments[i][j];
if (!obj[str]) {
obj[str] = 1;
}
else {
obj[str]++;
if (obj[str] == arguments.length)
{
result.push(str);
}
}//end else
}//end for j
}//end for i
return result;
}
console.log(Array.intersect(["1","2", "3"], ["2","3", "4", "5", "6"]))18、数组和对象比较。取出对象的key和数组元素相同的
var arr = ['F00006','F00007','F00008'];
var obj = {'F00006':[{'id':21}],'F00007':[{'id':11}]}
var newobj = {};
for(var itemin obj){
if(arr.includes(item)){
newobj[item] = obj[item]
}
}
console.log(newObj)19、删除数组中某个元素
//第一种
Array.prototype.remove = function(val){
var index = this.indexOf(val);
if(index !=0){
this.splice(index,1)
}
}
[1,3,4].remove(3)
//第二种
function remove(arr, indx) {
for (var i =0; i < arr.length; i++) {
var index = arr.indexOf(arr[i]);
if (indx == index) {
arr.splice(index, 1)
}
}
return arr
}20、判断数组是否包含某个元素
Array.prototype.contains = function (val) {
for (var i =0; i < this.length; i++) {
if (this[i] == val) {
return true;
}
}
return false;
};
[1, 2,3, 4].contains(2)//true总结：
热心网友
时间：2022-04-22 15:23
1. 定义js类
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.
代码如下:
function ShapeBase() {this.show = function(){
alert("ShapeBase show");
};
this.init = function(){
alert("ShapeBase init");
};
}
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.
另外, 我们还可以用prototype属性来定义Shape的方法.
代码如下:
ShapeBase.prototype.show=function(){
alert("ShapeBase show");
}
ShapeBase.prototype.init=function()
{
alert("ShapeBase init");
}
上面这种写法看起来不太直观，我们可以将所有的方法写在一起.
代码如下:
ShapeBase.prototype={show:function(){
alert("ShapeBase show");
},
init:function() {
alert("ShapeBase init");
}
};
现在, 类是写好了， 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢?
代码如下:
function test(src){var s=new ShapeBase();
s.init();
s.show();
}
看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料.
到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法，要是实现跟C#中的静态方法要怎么做呢？
其实, 实现js的静态方法很简单, 看下面如何实现:
代码如下:
//静态方法ShapeBase.StaticDraw = function()
{
alert("method draw is static");
}
2. 实现JS类抽象和继承
同样, js中也不支持类继承机制，但我们可以通过将父类prototype中的成员方法复制到子类的prototype中来实现.
和类的继承一样,JavaScript也没有任何机制用于支持抽象类.但利用JavaScript语言本身的性质.可以实现自己的抽象类.
首先来看看js中的虚方法, 在传统语言中虚方法是要先定义的, 而包含虚方法的类就是抽象类,不能被实例化,而在JavaScript中，虚方法就可以看作该类中没有定义的方法，但已经通过this指针使用了.
和传统面向对象不同的是，这里虚方法不需经过声明，而直接使用了, 并且类也可以被实例化.
先定义object的extend方法, 一个为静态方法，一个为实例方法, 这两个方法用于实现继承的prototype复制
代码如下:
Object.extend = function(destination, source) {for (property in source) {
destination[property] = source[property];
}
return destination;
}
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]);
}
接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现。
代码如下:
function Rect() { }Rect.prototype = ShapeBase.prototype; //只这一句就行了
//扩充新的方法
Rect.prototype.add=function() {
alert("Rect add");
}
这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址.
如果上面也定义了:
alert("Rect show");
}
那么执行结果如下:
var s=new ShapeBase();
s.show(); //结果:Rect show
var r=new Rect();
r.show(); //结果:Rect show
r.add();
}
我们再使用object.extend实现继承, 并实现一个oninit虚方法, 修改ShapeBase如下:
代码如下:
ShapeBase.prototype={show:function()
{
alert("ShapeBase show");
},
initialize:function () {
this.oninit();
}
};
实现Rect类继承.
代码如下:
Rect.prototype=(new ShapeBase).extend({//添加新的方法
add:function() {
alert("Rect add");
},
//使用这种方法可以重写show方法
show:function() {
alert("Rect show");
},
//实现虚方法
oninit:function() {
alert("Rect oninit");
}
})
热心网友
时间：2022-04-22 16:41
给你举例子吧
(function(w,d,u){var obj={
one:function(){
...
}
...
}
obj.prototype={
doEverything:function(){
...
}
}
...
}(window,document))
一个简单的而又不失强大的面向对象的封装就是这样，如果还有问题可以直接留言。
热心网友
时间：2022-04-22 18:16
if (typeof HdGame == "undefined") {
HdGame = {}
}
(function (a) {
a.encodeHtml = function (c) { return c && c.replace ? (c.replace(/&/g, "&").replace(/ /g, " ").replace(/\b +/g, " ").replace(/</g, "<").replace(/>/g, ">").replace(/\\/g, "\").replace(/\'/g, "'").replace(/\"/g, """).replace(/\n/g, "<br/>").replace(/\r/g, "")) : c
};
a.encodeUrl = function (c) {
return typeof c === "undefined" ? "" : encodeURIComponent(c)
};
a.decodeHtml = function (c) {
return c && c.replace ? (c.replace(/ /gi, " ").replace(/</gi, "<").replace(/>/g, ">").replace(/\/gi, "\\").replace(/'/gi, "'").replace(/"/gi, '"').replace(/\<br\/\>/gi, "\n").replace(/&/gi, "&")) : c
};
a.decodeUrl = function (c) {
return typeof c === "undefined" ? "" : decodeURIComponent(c)
};
a.checkCharacterLen = function (c, g) {
var h = g.val().replace(/[^\x00-\xff]/g, "**");
var f = h.trim().length;
var e = 0;
for (var d = 0; d < f; d++) {
e++
}
return e > c
};
a.checkTextLength = function (o, f, k) {
var g;
if (k) {
g = f
} else {
g = f.val()
}
var m = g.replace(/[^\x00-\xff]/g, "**");
var d = m.length;
if (d < o) {
return {
isOverflow: false
}
}
var j = m.substr(0, o);
var h = 0;
var l = "";
for (var e = 0; e < j.length; e++) {
var c = j.substr(e, 1);
if (c == "*") {
h++
}
}
var n = 0;
if (h % 2 == 0) {
n = h / 2 + (o * 1 - h);
l = g.substr(0, n)
} else {
n = (h - 1) / 2 + (o * 1 - h);
l = g.substr(0, n)
}
if (k) {
return {
isOverflow: true,
returnValue: l
}
} else {
f.val(l)
}
};
a.fadOut = function (c, d) {
if (c.is(":visible")) {
d && d();
return
}
c.css("opacity", 0);
c.show();
c.addClass("poupFadIn");
setTimeout(function () {
c.removeClass("poupFadIn");
c.css("opacity", 1);
d && d()
},
200)
};
a.fadIn = function (c, d) {
if (c.is(":hidden")) {
d && d();
return
}
c.css("opacity", 1);
c.addClass("poupFadOut");
setTimeout(function () {
c.hide();
c.removeClass("poupFadOut");
c.css("opacity", 1);
d && d()
},
200)
};
a.statusMsg = (function () {
var e = null;
var g = '<div class="statusTip" style="display:none; opacity:0;"><div
};
a.favorite = function () { http://dreaminbj.com if ((g_config.wxAward && g_config.wxAward.genewxcard)) {
return
}
if ($("#favoritePanel").length > 0) {
$("#favoritePanel").show();
return
热心网友
时间：2022-04-22 20:07
按照面向对象的方式
