前端交互抽象

最新推荐文章于 2024-05-11 17:23:28 发布
最新推荐文章于 2024-05-11 17:23:28 发布
阅读量454 收藏
点赞数
分类专栏： 测试相关 文章标签： 测试 前端测试方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianmo0417/article/details/89448832
版权 
前端项目的测试过程中，不同功能模块会调用相同的方法，因此需要将这些方法封装成类似sdk，供各个功能模块调用，因此这里总结一下有可能会被做成公共方法的点，主要分为以下几个方面：
APP相关（1是否是APP环境 获取APP信息 是否安装某个应用 监听APP退出到后台 监听APP从后台回显）
获取设备信息与网络状态（获取设备信息 获取电量 获取设备存储空间 监听屏幕旋转 设置屏幕方向 获取网络 监听网络 ）
登陆和用户（获取登陆信息 获取用户信息 登陆 重新授权 登出）
客户端存取数据（存储数据 读取数据 复制到系统剪切板 读取系统剪切板内容）
webView相关（打开新窗口 窗口前进一页 窗口后退一页 后退到指定URL 设置窗口属性 注册返回按钮阻止事件 吊起APP 原生页面）
弹窗（打开弹窗 若之前已有弹窗，再次打开覆盖上一个）
分享（打开分享弹窗 显示右上角分享按钮  关闭右上角分享按钮 注册右上角分享监听） 
支付（调用支付 ） 
缓存（更新缓存 ） 
日期与时间选择（日历选择 ）
第三方原生APP 相关（打开商品详情页 ） 
pomelo（init request disconnect 监听pomelo ）

客户端与H5交互sdk定义文档
<!-- more -->

 一、APP相关
1.是否是APP环境
H5调用示例：

var env = Sdk.app.isAppEnv; // true | false

说明：此方法不需要客户端提供接口
2.获取APP信息
接口名：
core.getAppInfo
传入参数：
(function(info){})
回调示例：

{
name: '{String}', // 应用名称,如:AiQiYi,Letv
key: '{String}', // 应用对应的key，如：key123
}

H5调用示例：

Sdk.app.getInfo(function(info){
console.log(info.name);
})

说明：回调字段可能有修改

3.是否安装某个应用
接口名：
core.hasInstalled
传入参数：
(opt, function(info){})
opt参数示例：

{
"name": "weixin" // weixin | alipay | ... 需要判断的应用名(1.ios支持判断哪些应用依赖于第三方宿主APP支持；2.安卓目前支持主流应用 - weixin | alipay | mqq | youku | taobao | weibo | mqzone | openapp.jdmobile | letvclient | tmall | qiyi-iphone)
}

回调示例：

{
status: {Boolean} // 是否已安装  true | false
}

H5调用示例：

Sdk.app.hasInstalled({name: 'weixin'},function(res){
console.log(res.status);
})


4.监听app退出到后台
接口名：
core.onPause
传入参数：
(function(res){})
回调示例：

{

}

H5调用示例：

Sdk.gEvent.enable('onPause');// 取消注册监听把"enable"换成"disable"
Sdk.device.on('onPause', function(){
console.log('onPause');
})


5.监听app从后台回显
接口名：
core.onResume
传入参数：
(function(){})
回调示例：

{

}

H5调用示例：

Sdk.gEvent.enable('onResume');// 取消注册监听把"enable"换成"disable"
Sdk.device.on('onResume', function(){
console.log('onResume');
})


 二、获取设备信息，网络状态
1.获取设备信息
接口名：
core.getDeviceInfo
传入参数：
(function(info){})
回调示例：

{
deviceId: '{String}', // 设备唯一标示符
name: '{String}',  // 设备名称 XiaoMi、Iphone
version: '{String}', // 系统版本 10.2
screen: { // 屏幕分辨率
width: '{Number}', // 宽
height: '{Number}' // 高
}
}

H5调用示例：

Sdk.device.getInfo(function(info){
console.log(info.deviceId);
})

2.获取电量
接口名：
core.getPowerLevel
传入参数：
(function(power){})
回调示例：

{
level: {Number} // 当前电量0-100
}

H5调用示例：

Sdk.device.getPower(function(power){
console.log(power.level);
})

3.获取设备存储空间
接口名：
core.getSpaceSize
传入参数：
(function(size){})
回调示例：

{
spaceSize: {Number}, // 字节 剩余存储空间大小
totalSize: {Number} // 字节 总存储空间大小
}

H5调用示例：

Sdk.device.getSpaceSize(function(size){
console.log(size.spaceSize);
})

~~4.监听屏幕旋转（不需要这个接口）~~
~~接口名：~~
~~core.onOrientationChange~~
~~传入参数：~~
~~(function(net){})~~
~~回调示例：~~

{
orientation: '{String}', // 当前屏幕方向 landscape | portrait
}

~~H5调用示例：~~

Sdk.gEvent.enable('onOrientationChange');// 取消注册监听把"enable"换成"disable"
Sdk.device.on('onOrientationChange', function(res){
console.log(res.orientation);
})

5.设置屏幕方向
接口名：
core.setOrientation
传入参数：
(opt, function(net){})
opt参数示例：

{
"orientation": "landscape" // 屏幕方向 landscape | portrait
}

回调示例：

{
status: {Boolean}, // true | false 是否设置成功
}

H5调用示例：

Sdk.device.setOrientation({"orientation": "landscape"}, function(res){
console.log(res.status);
})


6.获取网络
接口名：
core.getNetwork
传入参数：
(function(net){})
回调示例：

{
type: '{String}',   // 2G|3G|4G|wifi|unknown|none 当前网络类型
operator: '{String}'  // CUCC（中国联通）|CMCC（中国移动）|CTCC（中国电信） 通信运营商
}

H5调用示例：

Sdk.network.getInfo(function(net){
console.log(net.type);
})

7.监听网络
接口名：
onNetworkChange
传入参数：
(function(net){})
回调示例：

{
now: '{String}' //2G|3G|4G|wifi|unknown|none 当前网络类型
}

H5调用示例：

Sdk.gEvent.enable('onNetworkChange');// 取消注册监听把"enable"换成"disable"
Sdk.network.on('onNetworkChange', function(net){
console.log(net.now);
})



 三、登陆和用户
1.获取登陆信息
接口名：
fun.isLogin
传入参数：
(function(flag){})
回调示例：

{
login: {Boolean}, // 是否登陆 true | false
}

H5调用示例：

Sdk.user.isLogin(function(flag){
console.log(flag);
})

~~2.获取用户信息（废弃，H5页面上直接调用接口获取用户信息）~~
~~接口名：~~
~~fun.getUserInfo~~
~~传入参数：~~
~~(function(info){})~~
~~回调示例：~~

{
name: '{String}', // 用户名
nickname: '{String}', // 用户昵称
email: '{String}', // 邮箱
uid: '{String}', // uid
img: '{String}', // 用户头像
status: {Number} // 用户状态：0:正常 1:已禁用 ...
}

~~H5调用示例：~~

Sdk.user.getInfo(function(info){
console.log(info.name);
})

~~说明：如果获取不到用户信息则返回为空{}~~

3.登陆
接口名：
fun.userLogin
传入参数：
(function(info){})
回调示例：

{
res: {Boolean}, // true | false 是否登陆成功
errCode: {Number} // 客户端拿token去乐必中后端换ticket时返回的错误码，如10108：用户被封禁  注：res为true的时候errCode为200
}

H5调用示例：

Sdk.user.login(function(info){
console.log(info.res);
})


4.重新授权（H5用参数必传，且为web）
接口名：
fun.reGrant
传入参数：
(opt, function(res){})
opt示例如下：

{
source: 'web' // 固定为 web，为了区分来自H5还是APP里面的
}

回调示例：

{
status: {Boolean} // true | false 是否成功
}

调用示例：

Sdk.user.reGrant(function(res){
console.log(res.status);
})

说明：1.在入口处如果授权失败，会进入授权失败页面（APP内置），点击页面空白处会调用该方法去重新走授权流程。当重新授权成功后，跳转到目标页。
2.用户未登陆状况下进入页面，然后页面上调起用户登陆接口，如果此时登陆授权失败，则需要跳转到H5的授权失败页面。该方法在H5授权失败页调用。


~~5.登出（废弃）~~
~~接口名：~~
~~fun.userLogout~~
~~传入参数：~~
~~(function(res){})~~
~~回调示例：~~

{
status: '{Boolean}' // 是否登出成功 true | false
}

~~H5调用示例：~~

Sdk.user.logout(function(res){
console.log(res.status);
})

~~6.监听登陆状态改变（废弃）~~
~~接口名：~~
~~fun.onLoginChange~~
~~传入参数：~~
~~(function(res){})~~
~~回调示例：~~

{
action: '{String}', // 动作名称（login | logout）
name: '{String}', // 用户名
nickname: '{String}', // 用户昵称
email: '{String}', // 邮箱
uid: '{String}', // uid
img: '{String}', // 用户头像
status: {Number} // 用户状态：0:正常 1:已禁用 ...
}

~~H5调用示例：~~

Sdk.user.on('onLoginChange', function(res){
console.log(res.action);
})

~~说明：当action是logout时，其他字段为空~~


 四、客户端存取数据
1.存储数据
接口名：
fun.setData
传入参数：
(opt, function(res){})
opt示例如下：

{
key: '{String}', // 存储的key
value: '{String}}' // 存储的内容
}

回调示例：

{
status: {Boolean}, // 是否存储成功 true | false
}

H5调用示例：

Sdk.data.setData({key: 'abc', value: '123'}, function(res){
if(res.status === false){
console.log('存储失败');
}
})

2.读取数据
接口名：
fun.getData
传入参数：
(opt, function(res){})
opt示例如下：

{
key: ["abc", "123"] // 获取的key数组
}

回调示例：

{
"abc": "ds",
"123": "qwqwq"  // 数据，单个元素类型可以是String,Number,JSONString
}

H5调用示例：

Sdk.data.getData({key: ["abc", "123"]}}, function(res){
console.log('获取的数据为：', res);
})

说明：如果获取不到数据则返回结果里data为空

3.复制到系统剪切板
接口名：
fun.copyToClipboard
传入参数：
(opt, function(res){})
opt示例如下：

{
data: 'abc123'
}

回调示例：

{
status: {Boolean}, // 是否复制成功  true | false
}

H5调用示例：

Sdk.data.copyToClipboard({data: 'abc123'}, function(res){
console.log(res.status);
})


4.读取系统剪切板内容
接口名：
fun.getClipboard
传入参数：
(function(res){})
回调示例：

{
data: '{String}', // 剪切板数据，类型可以是String,Number,JSONString
}

H5调用示例：

Sdk.data.getClipboard(function(res){
console.log('获取的数据为：', res.data);
})

说明：如果获取不到数据则返回结果里data为空

 五、webView相关
1.打开新窗口
接口名：
fun.openWebview
传入参数：
(opt)
opt示例如下：

{
url: '{String}', // 打开的链接
title: '{String}', // 设置窗口顶部title
type: '{String}' // 新webview打开还是当前
}

说明：type 可选"new"和"cur"，指定是否需要新开webview，默认"cur"
回调示例：

无回调

H5调用示例：

Sdk.win.open({url: 'http://www.le.com', type: 'new', title: '乐视视频'});

2.窗口前进一页
接口名：
fun.WebviewForward
传入参数：
(function(res){})
回调示例：

{
status: '{Boolean}', // 前进结果 true | false
}

H5调用示例：

Sdk.win.forward(function(res){
console.log(res.status);
})

说明：当webview里没有下一页的时候status返回false

3.窗口后退一页
接口名：
fun.WebviewBack
传入参数：
(function(res){})
回调示例：

{
status: '{Boolean}', // 后退结果 true | false
}

H5调用示例：

Sdk.win.back(function(res){
console.log(res.status);
})

说明：当webview里没有上一页的时候status返回false

4.后退到指定url
接口名：
fun.backToUrl
传入参数：
(opt, function(res){})
opt示例

{
url: '{String}'  // url
}

回调示例：

{
result: '{Boolean}', // true | false
}

H5调用示例：

Sdk.win.backToUrl({"url": "http://m.le.com/"}, function(res){
console.log(res.result);
})

说明：
1.如果历史纪录里没有该url，则不做处理，回调函数返回false;
2.如果历史纪录里有且只有一个，则回退到指定url;
3.如果历史纪录里有多个指定的url，则回退到最外层的那个，即最开始打开的那个指定url

5.设置窗口属性
接口名：
fun.setWebview
传入参数：
(opt, function(res){})
opt示例

{
title: '{String}'  // 窗口标题
}

回调示例：

{
status: '{Boolean}', // 设置结果 true | false
}

H5调用示例：

Sdk.win.set({title: "窗口标题"}, function(res){
console.log(res.status);
})


6.注册返回按钮阻止事件
-- 需要在url中加参数 backInterrupt=1
-- 如果想定制化提示文案或者按钮文案，需要在url里加参数：interruptTitle, interruptCo, interruptYesText,interruptNoText
-- 默认提示文案： "确认返回" "取消" "确定"
-- url示例：http://lebz.le.com/?backInterrupt=1&interruptTitle=大爷,不再玩会儿了&interruptCo=以后常来啊&interruptYesText=不玩了&interruptNoText=滚
接口名：
onBackInterrupt
传入参数：
(function(net){})
回调示例：

{
result: 'ok|cancel'  // 点击了哪个按钮
}

H5调用示例：

Sdk.gEvent.enable('onBackInterrupt');// 取消注册监听把"enable"换成"disable"
Sdk.network.on('onBackInterrupt', function(res){
console.log(res.result);
})


~~5.调起APP原生页面（不需要这个接口）~~
~~接口名：~~
~~fun.openNative~~
~~传入参数：~~
~~(opt)~~
~~opt示例如下：~~

{
url: '{String}' // APP内页面地址
}

~~回调示例：~~

无回调

~~H5调用示例：~~

Sdk.win.openNative({url: 'user_center'});

~~说明：传入的url需要提前知道~~


 六、弹框
1.打开弹框
接口名：
fun.Alert
传入参数：
(opt, function(res){})
opt示例如下：

{
title: '{String}', // 标题
content: '{String}}', // 内容
buttons: '{Array}' // 显示按钮的文字，最多两个，如：['确定'] 或 ['Yes'] 或 ['是','否']
}

回调示例：

{
btn: '{String}' // 用户点击的按钮  ok | cancel
}

H5调用示例：

Sdk.alert.open({title: '显示标题', content: '显示的内容', buttons: ['好的','取消']}, function(res){
if(res.btn === 'cancel'){
console.log('用户点击了取消按钮');
} else {
console.log('用户点击了确定按钮');
}
});

说明：1.如果传入的参数中buttons只有一个，则默认显示"确认"按钮
2.如果之前已有一个弹出框了，则覆盖之前的
2.toast
接口名：
fun.Toast
传入参数：
(opt)
opt示例如下：

{
dur: '{Number}', // 显示时长,单位：毫秒,默认2000 如：2500
pos: {Number},  // 显示位置， 0 | 1 （0:center,1:bottom）
content: {String} // 显示的内容，其中 \n 为换行符
}

回调示例：

无回调

H5调用示例：

Sdk.alert.toast({dur: 3000, pos: 0, content: '分享成功\n获得20金币'})



 七、分享
1.打开分享弹框
接口名：
fun.openShare
传入参数：
(opt, function(){})
opt示例如下：

{
title: '', // 自定义分享标题
desc: '', // 自定义分享内容
link: '', // 自定义分享链接
imgUrl: '' // 自定义分享图标
}

回调示例：

{
code: {Number}, // 分享状态码（200表示成功，400表示用户取消等，具体定义待确定）
channel: {String} // 用户点击的分享渠道 （一期共三种 wxTimeline | wxFriend | weibo）
}

H5调用示例：

LBZSdk.share.open({
title: '自定义分享标题',
desc: '自定义分享内容',
link: '自定义分享链接',
imgUrl: '自定义分享图标'
}, function(res){
console.log('分享渠道：' + res.channel + ';分享结果：' + res.code);
});

说明：1.一期只支持三种渠道分享：微信朋友圈，微信好友，新浪微博
2.此分享是页面里用户点击按钮后手动触发的分享，与 showMenuShare 不同

2.显示右上角分享按钮
接口名：
fun.showMenuShare
传入参数：
(opt, function(){})
opt示例如下：

{
title: '', // 自定义分享标题
desc: '', // 自定义分享内容
link: '', // 自定义分享链接
url: '', // 自定义分享链接（乐视android版分享字段是url，ios版是link）
imgUrl: '', // 自定义分享图标
bubbleTxt: '', // 气泡文案，如果不传或者传空，则不显示气泡
shareIcon: '' // 分享图标地址，如果不传用默认的
...
}

回调示例：

{
status: {Boolean} // 调用结果 true | false
}

H5调用示例：

Sdk.share.showMenuShare({
"title": "您还有1000金币待领取~手慢无！",
"desc": "玩小游戏做任务，就能赚金币，赶紧戳☞",
"link": encodeURIComponent("https://lebz.le.com/fruitShare.html"),
"url": encodeURIComponent("https://lebz.le.com/fruitShare.html"),
"imgUrl": encodeURIComponent("http://i0.letvimg.com/lc06_img/201804/26/18/26/wechatShare.png"),
"bubbleTxt": '+20金币',
"shareIcon": 'http://onm9ileaw.bkt.clouddn.com/appoint@3x.png'
}, function(res){
console.log(res);
});


3.关闭右上角分享按钮
接口名：
fun.hideMenuShare
传入参数：
(function(){})
回调示例：

{
status: {Boolean} // 调用结果 true | false
}

H5调用示例：

Sdk.share.hideMenuShare(function(res){
console.log(res);
});


4.注册右上角分享监听
接口名：
onMenuShare
传入参数：
(function(net){})
回调示例：

{
code: {Number}, // 分享状态码（200表示成功，400表示用户取消等，具体定义根据第三方APP给的错误码确定）
channel: {String} // 用户点击的分享渠道 （如 wxTimeline | wxFriend | weibo | wxShare）
}

H5调用示例：

Sdk.gEvent.enable('onMenuShare');// 取消注册监听把"enable"换成"disable"
Sdk.share.on('onMenuShare', function(res){
console.log(res);
})


~~2.分享（废弃）~~
~~接口名：~~
~~fun.callShare~~
~~传入参数：~~
~~(opt, function(res){})~~
~~opt示例如下：~~

{
channelName: 'wxFriend', //分享渠道：weibo|wxFriend|wxTimeline
title: '', // 自定义分享标题
desc: '', // 自定义分享内容
link: '', // 自定义分享链接
imgUrl: '', // 自定义分享图标
}

~~回调示例：~~

{
code: {Number} // 分享结果code，需具体定义，如：200表示分享成功，400表示用户取消分享等...
}

~~H5调用示例：~~

Sdk.share.callShare({
channelName: 'wxFriend',
title: '自定义分享标题',
desc: '自定义分享内容',
link: '自定义分享链接',
imgUrl: '自定义分享图标'
}, function(res){
if(res.code === 200){
console.log('分享成功了，恭喜');
}
})

~~说明：传入的参数可能需要根据不同的渠道差异化~~


 八、支付
1.调用支付
接口名：
fun.pay
传入参数：
(opt, function(res){})
opt示例如下：

{
goodsId: '{String}', // 商品id
channel: '{String}' // 支付渠道 weixin | alipay | thirdWeixin | thirdAlipay        applepay(for ios)
}

回调示例：

{
code: {Number} // 支付结果code,需具体定义，如：200表示支付成功，400表示用户取消支付，401表示传入的金额与订单实际金额不符等...
}

H5调用示例：

Sdk.pay.payOrder({goodsId: 'abcd1234', channel: 'weixin'}, function(res){
if(res.code === 200){
console.log('支付成功');
} else if(res.code === 400){
console.log('用户取消支付');
} else {
其他情况需具体定义
}
});


 九、缓存
1.更新缓存
接口名：
fun.updateCache
传入参数：
(function(res){})
回调示例：

{
status: {Boolean} // 是否更新成功 true | false
}

H5调用示例：

Sdk.cache.updateCache(function(res){
console.log(res.status);
});


 十、日期、时间选择
1.日历选择
接口名：
fun.selectDate
传入参数：
(opt, function(res){})
opt示例如下：

{
"minDate": "2016-01-03", // 结束日期，当type为"time"时不需要
"maxDate": "2019-11-12", // 开始日期，当type为"time"时不需要
"type": "date" // 可选 date | time | ym  ==>  日期 | 时间 | 年月
}

回调示例：

{
value: {String} // 选择的时间（如"2018-02-23"、"2018-02"、"17:23"），如果用户点取消不会进入该回调
}

H5调用示例：

Sdk.calendar.select({
"minDate": "2016-01-03",
"maxDate": "2019-11-12",
"type": "date"
}, function(res){
console.log(res.value);
});


 十一、第三方原生APP相关
1.打开商品详情页
接口名：
fun.openDetail
传入参数：
(opt, function(res){})
opt示例如下：

{
"channel": "tmall", // tmall | jd | taobao
"id": 212123   // 商品id
}

回调示例：

{
status: {Boolean}, // 是否成功 true | false
}

H5调用示例：

Sdk.native.openDetail({"channel": "taobao", "id": 1213121}, function(info) {
alert(info);
});


 十二、pomelo（仅供安卓4.4以下）
1.init
接口名：
fun.initPomelo
传入参数：
(opt, function(res){})
opt示例如下：

{
"host": 'x.x.x.x',
"port": 'xxxx',
// 其他根据不同业务调用
}

回调示例：

{
status: {Boolean} // true | false
}

H5调用示例：

Sdk.pomelo.init({
"host":"lebzs.le.com",
"port":9014,
"user":{"uid":"10002","nickname":"乐必中_10002","picture":"https://i3.letvimg.com/lc06_user/201605/09/15/04/1923203311462777446_50_50.jpg","balance":"23800"}
}, function(info) {
alert(info);
});


2.request
接口名：
fun.requestPomelo
传入参数：
(opt, function(res){})
opt示例如下：

{
// 其他根据不同业务调用
}

回调示例：

{
// 其他根据不同业务调用
}

H5调用示例：

Sdk.pomelo.request("fruit.fruitHandler.select", {
"fruit":{"id":4,"key":"banana4","image":"//i3.letvimg.com/lc03_img/201803/01/10/23/1022/fruits04.png","title":"雪梨","order":3}
}, function(res) {
alert(res);
});


3.disconnect
接口名：
fun.disconnectPomelo
传入参数：
()
H5调用示例：

Sdk.pomelo.disconnect();


4.监听pomelo
接口名：
core.onPomeloEvent
传入参数：
(function(res){})
回调示例：

{
type: '{String}', // 自定义的监听类型，如： onResult , onSelect ...
data: {}  // 回调的数据
}

H5调用示例：

Sdk.gEvent.enable('onPomeloEvent');// 取消注册监听把"enable"换成"disable"
Sdk.pomelo.on('onPomeloEvent', function(res) {
if('onResult' === res.type){
console.log('onResult', res.data);
} else if('onSelect' === res.type){
console.log('onSelect', res.data);
} else if(){
...
}
});
qianmo0417
关注
专栏目录
关于前端应用表现层抽象--学习笔记
weixin_45951911的博客
12-06 742
「表现层」与「视图层」 「表现层」的英文是「presentation tier」或「presentation layer」，具体是哪个取决于是物理上还是逻辑上划分；而「视图层」的英文是「view」。「表现层」是「视图层」的超集，根据前端应用的架构设计，它们既可以不等又可以相等。  表现层  「表现层」这个词出自经典的三层架构（或多层架构），是其中一个分层。三层架构包括数据层、逻辑层和表现层，一般用在 C/S 架构中。 为什么会在这篇讲前端开发的文章中提到它？这是因为，虽然在一些前端应用中用不到，尤其
前端设计模式之抽象工厂模式
weixin_44051815的博客
12-15 352
抽象工厂模式： 工厂方法模式 主要是作用与同一类产品，比如说：手机，而 抽象工厂模式 是对一产品簇的抽象，比如说， 小米有小米手机，小米笔记本… 如果说 工厂方法模式 是对同一类产品的抽象，那么 抽象工厂模式 就是对同一类簇的抽象，也可以说是对一个复杂对象，进行更细致的抽象； 简单的类比，小米从当初的小米手机发展成小米商城，小米一开始创建时，只有小米手机这一类产品，此时可以用 工厂方法模式，管理小米手机，但是当小米日益庞大，就需要更细致的划分，比如，小米手机，小米笔记本… 这个时候，就相当于 抽象工厂模
大型Web前端架构设计：面向抽象编程入门
图灵教育
12-30 513
面向抽象编程，是构建一个大型系统非常重要的参考原则。但对于许多前端同学来说，对面向抽象编程的理解说不上很深刻。大部分同学的习惯是 拿到需求单和设计稿之后就开始编写UI界面，UI里哪个按钮...
java和前端的接口_第十八节：详解Java抽象类和接口的区别
weixin_31618799的博客
02-25 84
前言对于面向对象编程来说，抽象是它的特征之一。在Java中，实现抽象的机制分两种，一为抽象类，二为接口。抽象类为abstract class，接口为Interface。今天来学习一下Java中的抽象类和接口。目录什么是抽象什么是抽象类什么是接口区别代码例子结语什么是抽象从具体事物抽出，概括它们共同的方面，本质属性与关系等，称为抽象。看不见，摸不着的东西叫做抽象，抽象是人们对世界万物的感觉，用特定的...
前端能力划分
weixin_30868855的博客
07-21 254
前端学习学的是什么，在不同的阶段我思考这个问题。 最近的结论是：前端学习要学的是前端的三大能力。工程能力，架构能力，开发能力。 工程能力 工程能力的范畴我认为涵盖了项目模板的自动化生成、项目的自动化编译和构建。 当然传统的开发方式并不过分着重工程化能力。 架构能力 架构能力的范畴涵盖了项目模板自动化之后，一些可变文件的位置问题，文件之间的相对位置问题。就比如单页面的vue应用...
基于Android的APP前端数据交互.pdf
08-26
基于Android的APP前端数据交互 一、Android操作系统概述 Android是一种自由开放的操作系统，由Google公司和开放手机联盟领导联合开发。目前大多用于移动设备，如智能手表、智能手机、平板电脑、电视等。Android...
hyperledger-typescript-boilerplate:这是在Hyperledger Fabric Peers和前端之间交互的样板
05-02
这是在Hyperledger Fabric对等方和前端之间进行交互的入门模板。 当前，此样板提供以下功能： 开箱即用的 使用使用Typescript构建的Express后端 宁静的路由以连接自定义前端 自动OpenAPI（Swagger）生成 Fabric客户...
前端 - 钟恒《Vue.js实践：使用Vue2.0开发富交互WEB应用》.pdf
12-30
Vue.js正是采用MVVM设计模式，将复杂的DOM操作抽象化，并通过数据驱动来更新视图，极大地提高了前端开发的效率。 对于初学者或正在学习Vue.js的开发者而言，这本书不仅提供了理论知识，还提供了实践中的具体应用...
行业文档-设计装置-教学用无线智能体感交互前端.zip
08-27
《教学用无线智能体感交互前端》是一份深入探讨现代教育技术中无线智能体感交互设计的专业文档。在当今科技日新月异的时代，教育领域也开始广泛应用智能技术，特别是无线体感交互技术，以提升教学效果和学习体验。这...
前端进击笔记第十七节 提升开发效率：数据抽象与配置化
fegus的博客
08-13 482
上一讲介绍了如何对前端应用进行模块化和组件化设计，是一个对系统设计进行抽象的过程。实际上，我们在业务功能开发过程中，也会在很多地方使用到抽象的能力，比如将页面内容抽象为数据展示，将页面的呈现方式抽象为状态。通过抽象的方式，我们可以将整个前端应用使用数据的方式来进行表达和描述，还可以配合配置化来减少硬编码、提升功能的灵活性。今天我就主要介绍如何将应用抽象成数据，以及怎么配合配置化来提升代码的可维护性。...
前后端交互模块
初心魏的博客
03-10 481
一、java对象和json格式的转换 1.1 JSON.stringify 将数据转换为json格式的字符串 JSON格式数组 var stu = [{"name":"jack",age:23},{"name":"rose",age:56}] undefined var stu = JSON.stringify(stu) undefined stu "[{"name":"jack","ag...
抽象能力真的很重要
yuan487639的博客
03-04 879
最近做个几个模块，越发觉得代码写的特别纠结，并没有用到什么新技术，都是之前用到的一些东西，在使用dataTable、echarts、mybatis等一些东西上面，其实很熟练，不过代码总是写的不爽，甚至写到一半不想写，刚刚发生了一件事，才突然意识到问题的关键。 为什么说抽象能力很重要？因为刚才画某张表的时候，某一列的数据不太好出，时间上是不允许的，问了下老大，老大说不行你跟后台商量下，再建一张...
前端算法与抽象化概念及其程序模型的建立关系
we do not talk any more的博客
10-13 1446
前端对于算法的重视程度还是不足的，但是随着前后端分离的越来越明显，大量的数据渲染过程开始由服务器端开始转向浏览器端。 那么平时我们普通前端所做的工作用到算法的地方大部分还是遍历，事件绑定。也有些低层次的甚至脑子里都没有算法的概念。但是在html5的canvas的推动下，前端对于算法的概念越来越重视。因为大量的数据要经过前端的渲染不仅仅是功能的完成，还要考虑其复杂程度，这样才不会导致浏览器端的不好
软件架构基本技法——抽象
Stay hungry, Stay foolish
01-24 850
是什么 抽象，是指在概念上明确划清界限。这种明确划清界限的方式可以将一个模块与其他模块区分开来。 抽象由“舍象”和“一般化”两个观点组合而成。 舍象指的是舍去复杂对象的几个性质，只关注其特定的性质。 一般化指的是从具体对象中抽出共有的性质，将其固定为更加通用的概念。 为什么 抽象是人们在处理复杂事物时使用的基本手段。 舍象可以除去对象的枝叶，让它的本质暴露出来。复杂度下降之后，我们便能集中精力去对付真正的问题。抽象化的概念简明扼要，便于使用，应用范围极广。 一般化通过抽取共同特征将多个对象聚
Web前端开发之前后端交互09——模块化、模块作用域、exports对象、包
DRLDER的博客
04-07 445
模块化： 模块作用域： 共享模块作用域中的成员： module对象： module.exports对象： 根据上面所学，我们看看下面的代码： 模块调用JS： //当我们导入模块时，会自动运行模块 const getModule=require(__dirname+'/File/模块作用域测试use.js') if (getModule){ console.log(getModule) // console.log(mod...
前端组件化-抽象公共组件类
weixin_33730836的博客
05-14 1357
优化上次的组件化小demo 上次的组件化demo只是为了简单的实现前端组件化的思想，这次我们稍微优化一下抽离公共类 下面代码 html <div id="wrapper"></div> 复制代码js /* DOM字符串转DOM节点 */ const createStringToDom = str => { const ele = document.crea...
前端组件级别的抽象方向
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
11-29 169
前言基于2大主流前端框架下，前端的主要的工作其实就是在编写各种组件。似乎所有人都在说前端开发的天花板很低，除了一些特别的方向，很少有人在前端功能的开发上遇到过什么难题。这也导致没有人关注和讨论前端组件的抽象，大家都忙于做功能的开发。甚至有些前端开发在完全不做抽象的情况下仅用少数几个组件就完成了对整个SPA的开发。为什么需要组件级别的模块抽象？即使在掘金这样偏前端的专业社区，也有很多人认为不需要做模...
Web前端最全CSS 中的分离、抽象和层叠(1)，12年高级工程师的“飞升之路”
2401_84435555的博客
05-08 935
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在这篇文章中，我将从一个开发者和编程语言爱好者的直觉感受到的，尽可能图文并茂的解释下为什么css天生难以维护，并且没有达到他自身的设计目的；为什么LESS和Sass使这个糟糕的语言变得更加可用。
2024年Web前端最新CSS 中的分离、抽象和层叠，阿里面试被鸽
最新发布
2401_84435152的博客
05-11 290
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】抽象如果你对混合类和变量有了进一步的认识，你会发现他们可以任意组合。我可以定义一个混合类，然后在另一个混合类里面引用它。我也可以用他们组合出第三种样式，红色边框，黄色字体，绿色背景。
JavaScript进阶：面向对象与前端交互
- **工厂模式**：一种创建对象的抽象方法，可以返回一个新对象，但不指定具体的类型。 ```javascript function createObj(name, age) { var o = {}; o.name = name; o.age = age; return o; } ``` - **自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值