在没接触artTemplate之前,我都是手写字符串拼接做模板替换。这样做往往费时费力,而当我使用了artTemplate之后,只需要两句话,就搞定了全部!通过长期的使用artTemplate,现在我为大家总结出其最全的常用方法。
参考资料:https://github.com/aui/artTemplate
以上是官方文档以及下载地址。
一:安装使用
下载artTemplate后,找到template.js,引入到页面即可
引入代码:
<script type ="text/javascript" src ="artTemplate/dist/template.js" > script >
二:最基本的使用方法
官方给出的小demo就是最基本的使用方法:
<html >
<head >
<meta charset ="UTF-8" >
<title > basic-demotitle >
<script src ="../dist/template.js" > script >
head >
<body >
<div id ="content" > div >
<script id ="test" type ="text/html" >
{{if isAdmin }}
{{title }} </h1>
{{each list as value i }}
索引 {{i + 1}} : {{value }} </li>
{{/each }}
</ul>
{{/if }}
script >
<script >
var data = {
title: '基本例子' ,
isAdmin: true ,
list: ['文艺' , '博客' , '摄影' , '电影' , '民谣' , '旅行' , '吉他' ]
};
var html = template('test' , data);
document.getElementById('content' ).innerHTML = html;
script >
body >
html >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
效果展示:
其实上诉例子给出的写法并不是唯一的写法,还有原生的写法和不重新命名的写法
原生写法:
<%if (admin){%>
<%include(
<%for (var i=0 ;i
<div > <%=i%> . <%=list[i].user%> div >
<%}%>
<%}%>
不重新命名的写法:
{{if admin }}
{{include 'admin _content '}}
{{each list }}
<div > {{$index }} . {{$value.user }} div >
{{/each }}
{{/if }}
总结 ,原生写法太过麻烦,不需要深究,推荐使用简易写法,我们可以使用{{each list as value i}}, 为每一项和其序号重新命名成value,i。这样,在后面只需要使用value和i即可。我们也可以不重新命名,直接使用{{each list}},但这样的话,后面的需要使用$加index和value。
三:引入模板页的写法
上诉的基本写法,是将模板写在页面内的,但是我们在实际开发中,一般不会将模板和js写在页面内,所以,我们会单独写一个模板页,并将其引入到页面内,进行模板替换,如果是这样的话,我们就需要对调用template的方法进行一些小小的调整,具体如下:
1.构建模板页
2.模板页代码
{{if isAdmin }}
<h1 > {{title }} h1 >
<ul >
{{each list as value i }}
<li > 索引 {{i + 1}} : {{value }} li >
{{/each }}
ul >
{{/if }}
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
3.进行模板替换 由于模板是单独写在一个页面的,所以我们需要ajax的get方法获取到模板页,然后在进行模板替换。
<script >
var obj = {
title: '模板页获取例子' ,
isAdmin: true ,
list: ['文艺' , '博客' , '摄影' , '电影' , '民谣' , '旅行' , '吉他' ]
};
var html=$.get('list-template.html' ,function (data) {
var render = template.compile(data);
var str = render(obj);
document.getElementById('content' ).innerHTML = str;
})
script >
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
这里,我使用的是jQuery的get方法获取模板页,然后再利用template.compile()获取渲染内容,然后将数据obj渲染进去,最后添加到页面里即可。
注意:这时候就不能使用template()方法进行模板替换了,必须使用template.compile()及render()进行模板替换才行。
四:复杂数据(数组嵌套)的模板写法
在上诉例子中,我们都是使用了简单的数组进行数据替换,但是在实际开发中,后台给我们的数据可能不仅仅是一个数组那么简单,我们会遇到数组里嵌套对象数组这样的数据,那这样的数据该如何进行模板替换呢?下面我们来一起看一下:
数据形如:
inputData = {
"flag" : true ,
"orderArray" : [{
"id" : "1" ,
"name" : "张三" ,
"identity" : [
{
"id_type" : [{
"id" : 1 ,
"name" : "身份证"
}],
"id" : "110105199408286510"
}
],
"phone" : "15210329866" ,
"date_of_birth" : "19940828" ,
"address" : "北京" ,
}, {
"id" : "2" ,
"name" : "赵四" ,
"identity" : [{
"id_type" : [{
"id" : 1 ,
"name" : "身份证"
}],
"id" : "110105199508286510"
}],
"phone" : "15210329877" ,
"date_of_birth" : "19950828" ,
"address" : "北京" ,
}, {
"id" : "3" ,
"name" : "王五" ,
"identity" : [{
"id_type" : [{
"id" : 2 ,
"name" : "护照"
}],
"id" : "G49331247"
}],
"phone" : "15210329877" ,
"date_of_birth" : "20010124" ,
"address" : "上海" ,
}]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
我们可以看到在inputData下有一个orderArray的对象数组,而在orderArray下还有identity,identity下还有id_type。如果我们需要使用id_type里的数据进行模板替换。那么我们只需要进行多次each循环数组即可。
具体操作如下:
<script type ="text/html" id ="test" >
{{if flag }}
{{each orderArray as value }}
<td > {{value.name }} </td>
{{each value.identity as v }}
{{each v.id _type as vi }}
{{vi.name }} </td>
{{/each }}
{{v.id }} </td>
{{/each }}
{{value.phone }} </td>
{{value.date _of _birth }} </td>
tr>
{{/each }}
{{/if }}
script >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
只要理解template里每个参数,变量的含义,我们就能灵活运用这个优秀的模板替换工具了,相信看完我写的博客后,对大家有帮助。
下面是利用teplate.js做的一道面试题,主要是数组嵌套问题:
<html >
<head >
<meta charset ="utf-8" />
<title > title >
<style type ="text/css" >
style >
head >
<body >
<table border ="1px solid #ccc" style ="border-collapse:collapse;" id ="table" >
<tr >
<th > 姓名th >
<th > 证件类型th >
<th > 证件号th >
<th > 手机号th >
<th > 出生日期th >
tr >
<tbody id ="content" >
tbody >
table >
<div id ="info" style ="border: 1px solid #ccc; text-align: center; display: none;" >
<h2 > 编号:111h2 >
<p > 姓名:<span id ="name" > 张三span >p >
<p > 证件类型:<span id ="iden" > 张三span >p >
<p > 证件号:1111p >
<p > 手机号:<span id ="phone" > 张三span >p >
<p > 出生日期:<span id ="add" > 张三span >p >
<p > 所在地:北京p >
<p > <span > 取消span > <span id ="btn" > 确定span >p >
div >
body >
<script type ="text/html" id ="test" >
{{if flag }}
{{each orderArray as value }}
<td > {{value.name }} </td>
{{each value.identity as v }}
{{each v.id _type as vi }}
{{vi.name }} </td>
{{/each }}
{{v.id }} </td>
{{/each }}
{{value.phone }} </td>
{{value.date _of _birth }} </td>
tr>
{{/each }}
{{/if }}
script >
<script type ="text/javascript" src ="js/jquery.js" > script >
<script type ="text/javascript" src ="js/template.js" > script >
<script >
var inputData;
function getTestData () {
inputData = {
"flag" : true ,
"orderArray" : [{
"id" : "1" ,
"name" : "张三" ,
"identity" : [
{
"id_type" : [{
"id" : 1 ,
"name" : "身份证"
}],
"id" : "110105199408286510"
}
],
"phone" : "15210329866" ,
"date_of_birth" : "19940828" ,
"address" : "北京" ,
}, {
"id" : "2" ,
"name" : "赵四" ,
"identity" : [{
"id_type" : [{
"id" : 1 ,
"name" : "身份证"
}],
"id" : "110105199508286510"
}],
"phone" : "15210329877" ,
"date_of_birth" : "19950828" ,
"address" : "北京" ,
}, {
"id" : "3" ,
"name" : "王五" ,
"identity" : [{
"id_type" : [{
"id" : 2 ,
"name" : "护照"
}],
"id" : "G49331247"
}],
"phone" : "15210329877" ,
"date_of_birth" : "20010124" ,
"address" : "上海" ,
}]
};
var html = template('test' , inputData);
document.getElementById('content' ).innerHTML = html;
}
function clicked (id) {
var o, i;
o = document.getElementById(id).rows;
for (i = 0 ; i < o.length; i++){
o[i].ondblclick = function () {
var oo,op,oq,or;
oo = this .cells[0 ];
op = this .cells[1 ];
oq = this .cells[3 ];
or = this .cells[4 ];
document.getElementById('name' ).innerHTML=oo.innerHTML;
document.getElementById('iden' ).innerHTML=op.innerHTML;
document.getElementById('phone' ).innerHTML=oq.innerHTML;
document.getElementById('add' ).innerHTML=or.innerHTML;
document.getElementById('info' ).style.display='block' ;
document.getElementById('btn' ).onclick=function () {
document.getElementById('info' ).style.display='none' ;
}
}
}
}
getTestData();
clicked('table' )
script >
html >
你可能感兴趣的:(前端工程师)
前端测试方法
gyqJulius_Caesar
C/C++程序设计 前端 可用性测试 压力测试 单元测试 功能测试 模块测试 集成测试
记录一些测试方法。对于前端工程师,测试是开发过程中不可或缺的环节。而其中两种最基本、最常见的测试类型就是“冒烟测试”和“全量测试”。1.冒烟测试众所周知,冒烟这个词是源自汽车行业的。新造出来的车辆要经过“冒烟测试”,以确保所有系统(包括电池、传动系统、制动系统等)都正常运转,或者说没有什么大问题。同样地,软件开发也会进行类似的测试。在软件开发中,“冒烟测试”通常是指对代码库中的主要功能点进行快速测
问了一下 GPT--当前基于 React + TypeScript 的生态中 一名前端工程师需要具备哪些能力?
zoe_ya
前端 gpt react.js
在当前基于React+TypeScript的生态中,你需要掌握一系列的技能和知识,以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点:基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript(ES6+)的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ
4. webpack 中使用 Eslint 和 Babel
北京周老板
webpack5 webpack javascript 前端
博主简介:知名前端工程师!✒️出没地点:重庆-沙坪坝交流扣群:559658154,欢迎您的加入!———————————————————————————————————————————版权声明:本文为CSDN博主「LadyMarry」的原创文章,转载请附上原文出处链接及本声明。文章目录一.前言二.Eslint1.配置文件2.具体配置说明parserOptionsrulesextends三.在webp
Vue中$root的使用方法
还是大剑师兰特
# vue2实战指南 vue.js vue的root 大剑师
查看本专栏目录关于作者还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。热门推荐内容链接1openlayers从基础到精通,300+代码示例2leaflet热门分解学习教程,15
LeetCode JS专栏刷题笔记(一)
子洋丶
leetcode javascript 笔记
一、前言LeetCode在前不久出了一个JavaScript专栏,这个专栏一个目的是为了非前端工程师学习JS,另一个是为了前端工程师提升JS能力。因此在这个专栏中,基本不涉及什么具体算法问题,都是一些JS的入门语法与常见的JS面试题,但我在给朋友推荐该专栏时阻力非常大,绝大部分当看到是LeetCode链接时就直接失去了点击的欲望,认为里面都是十分烧脑的算法题,而实际题目远比想象中的简单,甚至远比平
vue3中mockjs模拟获取数据
前端小趴菜05
前端 vue.js javascript
开发项目的时候,如果后端接口没有出来,前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据,以下就是使用vue3设置hook函数来封装axios请求,配合mock.js来实现的代码,mock的官网Mock.js一.mockjs安装npminstallmockjs--save二.在src下创建mock\index.js配置文件importMockfrom'mockjs'
小白学安全--web安全入门(非常详细)零基础入门到精通,收藏这一篇就够了
网络安全大白
网络安全 黑客 程序员 安全 web安全
作为一个从知道创与到自建安全团队的资深白帽子,一路也是从不止所谓的web小白历经磨难成长起来的我,给现在正在准备学习web安全的同学一些建议。在我认为,渗透安全的范围其实要学习的东西很广泛的,间接的相当于你要是一个前端工程师,也要是一个后端工程师(其中就包含主流的php,JAVA,python等),如果学习移动端安全,你还要是一个出色的安卓工程师,而网络安全又细分为很多方向,比如系统安全、移动安全
Angular、React、Vue三选一,前端工程师更青睐使用哪款框架?
前端吴彦祖
现在前端三架马车Angular、React、Vue各有所长。Angular从一开始就带有很明显的工程化血统,齐全的cli命令,背靠TypeScript,涉及模块、服务以及指令等概念,使用后端的依赖注入思想,特有模板语法。React和Vue就"轻"很多,React甚至只是一个UI库,他们共同的一个思想就是,做好且只做好。1.1Angular、React、Vue三选一,前端工程师更青睐使用哪款框架?下
前端究竟怎么学?最全的学习方法和路径大公开!
WEB前端含光
眼看着金九银十的黄金面试季又到了,如何学好前端才能在日渐竞争激烈的前端面试中脱颖而出?其实不论是小白程序员还是有了工作经验的成熟程序员,不同阶段的人对前端学习和职业发展总有自己的迷茫,简单汇总了下,发现大家出现的问题主要是3种:1、行业竞争变大,初级前端工程师泛滥,发展预冷;2、部分有技术追求和热情的中级工程师,工作了几年也开始接触管理岗,但做了才发现,技术积累不够,不仅跟不上节奏,在工作中只能是
前端深入学习笔记(2)浏览器渲染原理
叶梓zh
前端 学习 javascript
浏览器渲染原理是做项目优化的基础性原理,是前端工程师必须掌握的知识谷歌浏览器当前的内核-blink,而web-kit目前谷歌已经没用了目录1.浏览器是如何渲染页面1.1什么叫渲染(render)1.1.1解析HTML-ParseHTMLHTML解析遇到了CSS代码的时候做了什么?HTML解析过程中遇到JS代码会做什么1.1.2样式计算-RecalculateStyle1.1.4分层-Layer1.
这bug有点狠,到大西洋送外卖?成功逼疯前端工程师
强哥科技兴
写半天代码,改一天BUG,这就是程序员的日常。大大小小的bug充斥着工作的边边角角,有些bug很有趣,但有些bug,可能会让你后悔不准备一把菜刀。找到bug后,简直就是侮辱智商一样。狂奔的蜗牛是一家外卖平台的前端工程师,临时接收一个大项目,需要把原来平台的老代码,迁移一部分到新平台上。他所负责的,就是将物流模块的相关代码。在正常情况下,外卖配送区域的地图,应该展示如下的效果:然而,在实际的搬运过程
Vue项目部署优化
硅谷干货
前言使用vue、react、angular等技术开发过程中,我们都会遇到以下问题:首屏加载慢每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽)这两个问题可以从很多方面进行优化,今天我就从前端页面部署阶段来优化一下这两个问题。PS:以下内容都基于vue-cli3+。晨曦:为什么整个互联网行业都缺前端工程师?44赞同·8评论文章前端页面文件缓存方案从vue-cli3打包说起路由使用按需加载后
web前端还能火多久?现在学来得及吗?
终身成长型
前端开发 web 前端
前端是个最近几年火起来的工种,而且持续火热中,有个词叫水涨船高,来的人多了,竞争多了,标准也就提高了。现在对前端工程师的要求跟当年前已经不能同日而语了。当然了,所谓的趋势,不是一天两天就到来的,它是未来的一个技术方向,我们之所以关注趋势,是要关注变化,技术的发展与普及不是一日之功,一定是慢慢过渡的,但是你能够比其他人提前看到方向,真正的市场到来的时候,你就可以提前做好准备,提前发掘机会。首先,我们
运营为什么要琢磨人
不二唐卡
刚刚知道互联网运营的时候,一个前端工程师和我说,运营就是要琢磨人,那时是2016年的夏天,之后我又做了一年多的销售,去年开始在一个区块链公司做运营,我以为都已经懂得了,琢磨人是什么意思。了解他们的恐惧和热爱,激发他们的痛点和需求,维持他们的注意力,让更多的人愿意更长时间的停留,到最后激发他们的付费和传播,这就是运营,而所有这些都和用户分不开。事实真的是这样简单吗?运营为什么要琢磨人呢?真的需要琢磨
重新探索java restful api文档生成工具
shalousun
谁说生成api文档就必须要定义注解?谁说生成接口请求和返回示例必须要在线?用代码去探路,不断尝试更多文档交付的可能性。如果代码有生命,为什么不换种方式和它对话!一、背景没有背景、就自己做自己的背景在当今各种盛行的前后端分离、restfulservice开发过程中,接口文档是必不可少的。对于前后端分离的开发中,后端开发需要将接口写好后需要告诉前端工程师接口的请求参数、响应示例等重要信息,而对于对外暴
前端小白快速撸懂 mysql + koa2
三猪技术团队
前端开发工程师为什么要学习node?实际开发中会用到吗?答案是肯定的。Node.js是前端工程师必学的,如果你想在软件开发这行走的更远的话。node.js并不难学,反而收益会很大。此篇文章针对与有node.js基础的项目的创建1.全局安装koa-generator快速生成器npminstallkoa-generator-g类似于express项目的快速生成器,有一个基本的模板进行使用k1.jpg安
前端面试题——二叉树遍历
_Minato_
算法
前言二叉树遍历在各种算法和数据结构问题中都有广泛的应用,如二叉搜索树、表达式的树形表示、堆的实现等。同时也是前端面试中的常客,掌握好二叉树遍历算法对于一名合格的前端工程师来说至关重要。概念二叉树遍历(BinaryTreeTraversal)是指按照某种规则访问二叉树中所有节点的过程。由于二叉树是一个递归的数据结构,因此遍历操作通常也是递归进行的。二叉树的遍历主要有四种方式:前序遍历(Pre-ord
什么是前端工程化?
tomzhangto
虽然前端工程化的概念兴起还没几年的时间,但是对于“工程化”这个词并不是一个新鲜词了,在其他软件开发的领域很早就已经有了高度的工程化,例如Web服务端开发。只不过那个时候,前端工程师并没有工程化的意识,也没有必要对前端进行工程化的操作,毕竟在那个时期,前端的开发工作只能算是整个项目开发过程中的“附属品”。那为什么这几年,前端工程化的概念又突然成为了热点话题了呢?要想讲好前端工程化其实并不容易,我就从
2022-10-03
止风眉
核酸检测软件开发团队组建岗位人数薪资产品经理1人18K/人/月前端工程师3人15K/人/月后端工程师5人15K/人/月UI设计师2人12K/人/月测试工程师2人8K/人/月运维工程师2人8K/人/月软件开发流程用户需求分析→产品原型设计→UI视觉设计→数据库搭建→服务端开发→IOS开发→Android开发→测试→运维总耗时:一个月开发成本工资:194K五险一金:31K合计:225K
《破茧成蝶》读书笔记整理2
迅哥儿Z
07设计标准——好的设计需要表达7.1什么是原型原型并不是简单的图形化的需求文档;既包含静态的页面样式(线框图),也包含动态的操作效果(交互说明);原型的使用者有产品经理、视觉设计师、前端工程师、开发工程师、测试工程师,可能还有商务、法务人员等书中原插图7.2标准的原型应该包含什么内容·简要说明与信息结构:变更日志(同需求文档,现实情况往往是做一部分评审一部分,评审后定期更新);版本说明;信息结构
springBoot集成swagger2
林犀居士
java springboot 工具 springboot swagger2 自动生成接口文档 接口测试
前言作为一个后台开发人员,写接口文档和接口测试无疑是最令人痛心疾首的事情了,随着业务的繁复,接口文档的维护变得更加困难了,因此,在本章将学习swagger2,有了它以后接口测试将变得更加的方便,最重要的是无需手动维护接口文档了,和前端工程师的合作将变得更加灵活。springBoot集成swagger2添加maven依赖io.springfoxspringfox-swagger2LATESTio.s
node.js基础-02
码路老默007
node.js
Authornodes:(题记)HypertestTransferprotocolisveryimportanttoprogrammingpersonnel。itdoesn'tmatterifyou'reafront-endengineeroraback-endengineer.So,let'sstudyittogether.http协议对于编程工程师很重要,不管你是前端工程师还是后端工程师。所以
图形系统开发实战课程:基础篇——图形系统概述
图形开发学院
图形系统开发实战:基础篇 个人开发 前端 信息可视化 javascript 图形渲染
图形开发学院|GraphAnyWhere课程名称:图形系统开发实战课程(基础篇)课程章节:“图形系统概述”原文地址:http://graphanywhere.com/graph/overview.html图形系统概述\qquad近年来,随着Web技术的不断发展,越来越多的前端工程师开始涉足Canvas图形开发。作为一种基于HTML5的元素,Canvas可以用来绘制各种各样的图形,从简单的线条和矩形
2019百度前端工程师面试题及答案解
PHP9年架构师
一、单选题(共25题,每题5分)1.该正则可以匹配下列哪个字符串?/^sjm/A、absjmB、phpsjmC、sjmphpD、phpsimd参考答案:C答案解析:该正则匹配以sjm开头的字符串2.新窗口打开网页,用到以下哪个值()。A、_selfB、_blankC、_topD、_parent参考答案:B答案解析:在html中通过标签打开一个链接,通过标签的target属性规定在何处打开链接文档。
前端工程师经常上哪些网站学习最新技术?
飞鹰艾哈迈迪
程序员这个职业,面试造火箭,工作拧螺丝,前端开发工程师也逃不出这个宿命。把自己修炼的十八般武艺样样精通,给自己多找些挣钱机会,才能让焦虑的职业生涯踏实下来。所以,我们把前端工程师常用的网站分为两类:学习充电,接单挣钱。学习充电1.B站(www.bilibili.com/)曾经我也只是把B站当做一个看番刷鬼畜的地方,但现在不错的课程也越来越多,之后想学些什么东西的时候,都会优先来B站搜一搜相关的学习
前端笔试题涉及html、css、js、Vue 等
脏十三i
综合题你觉得前端工程师的价值体现在哪?为简化用户使用提供技术支持(交互部分)为多个浏览器兼容性提供支持为提高用户浏览速度(浏览器性能)提供支持为跨平台或者其他基于webkit或者其他渲染引擎的应用提供支持为展示数据提供支持(数据接口)什么是w3c标准,谈谈对w3c的理解?答:如果从WEB技术角度,可以分为三个方面的标准:结构、表现、行为。结构主要指(X)HTML标准,包括各种标签的名字、属性、语义
内卷之下,前端工程师如何自救
编程范儿
近两年的职场内卷现象越来越严重,996工作制在各大公司已经很常见,甚至有更甚者,告诉你我们公司的前端是如何内卷的?为了数字化转型,公司要为产品平台化打造一个办公协同的在线管理系统,来规范化项目流程管理和数据资料共享。为了这个目标部门一开始给到的人力资源配置是这样的:产品经理(一个,其实算半个)后端(一个)前端(一个)为什么说产品经理只有半个,都知道产品经理的职能包括产品需求的整理,产品原型的输出,
选择转行学习WEB前端,你必须要了解基本概念
强哥科技兴
随着互联网开展,互联网的体系越多越多,越来越杂乱,用户不能满意基本功用的需求,对互联网体会要求越来越高,客户端与服务器的交互不在是简略页面和页面的交互,而变为页面和页面+程序+数据的交互,其间完成与客户交互和体会的程序就是Web前端工程师完成的,这时Web前端工程师就诞生了,跟着用户对体会和交互要求越高,体系功用越杂乱,Web前端工程师的岗位就越重要。1前端岗位饱和了?随着互联网和移动终端的普及,
80行代码,领你手撸一个Tree组件
小九九的爸爸
前端 javascript reactjs
前端工程师肯定对Tree组件很熟悉,那它是怎么实现的呢?本篇文章,小编就带着大家实现一个简易版本的tree组件。市面上的Tree组件都差不多一样,我们以antd为例:其实看到这个组件,我没多想,就直接打开了控制台,查看了这个组件的dom结构,如下图:这么一看,着实清晰了。那接下来的问题就很清晰了:如何定义数据类型如何抽取最小单元如何维护单元状态定义数据类型这个我觉着树就可以,数据格式如下:letd
ChatGPT是否会取代程序员?2024年,我想来回答一下这个问题
小九九的爸爸
chatgpt
ChatGPT这个概念很早之前就有了,只不过在去年爆发了。相信大家在去年都看到过这样的一个话题:《程序员是否会被取代?》那大家看了这篇文章会得到什么呢?更重要的是,你能看到一名毕业2年半的前端工程师在这个技术浪潮下的思考,或许可以引起大家的共鸣。相信这类题材在各大平台上都能搜到,那2024年了,我想来回答一下这个话题。我大约是在去年3月份的时候接触了这个概念,那个时候无意间刷到了一些视频,最开始这
java Illegal overloaded getter method with ambiguous type for propert的解决
zwllxs
java jdk
好久不来iteye,今天又来看看,哈哈,今天碰到在编码时,反射中会抛出
Illegal overloaded getter method with ambiguous type for propert这么个东东,从字面意思看,是反射在获取getter时迷惑了,然后回想起java在boolean值在生成getter时,分别有is和getter,也许我们的反射对象中就有is开头的方法迷惑了jdk,
IT人应当知道的10个行业小内幕
beijingjava
工作 互联网
10. 虽然IT业的薪酬比其他很多行业要好,但有公司因此视你为其“佣人”。
尽管IT人士的薪水没有互联网泡沫之前要好,但和其他行业人士比较,IT人的薪资还算好点。在接下的几十年中,科技在商业和社会发展中所占分量会一直增加,所以我们完全有理由相信,IT专业人才的需求量也不会减少。
然而,正因为IT人士的薪水普遍较高,所以有些公司认为给了你这么多钱,就把你看成是公司的“佣人”,拥有你的支配
java 实现自定义链表
CrazyMizzz
java 数据结构
1.链表结构
链表是链式的结构
2.链表的组成
链表是由头节点,中间节点和尾节点组成
节点是由两个部分组成:
1.数据域
2.引用域
3.链表的实现
&nbs
web项目发布到服务器后图片过一会儿消失
麦田的设计者
struts2 上传图片 永久保存
作为一名学习了android和j2ee的程序员,我们必须要意识到,客服端和服务器端的交互是很有必要的,比如你用eclipse写了一个web工程,并且发布到了服务器(tomcat)上,这时你在webapps目录下看到了你发布的web工程,你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是,有时你会突然的发现之前用struts2上传的图片
CodeIgniter框架Cart类 name 不能设置中文的解决方法
IT独行者
CodeIgniter Cart 框架
今天试用了一下CodeIgniter的Cart类时遇到了个小问题,发现当name的值为中文时,就写入不了session。在这里特别提醒一下。 在CI手册里也有说明,如下:
$data = array(
'id' => 'sku_123ABC',
'qty' => 1,
'
linux回收站
_wy_
linux 回收站
今天一不小心在ubuntu下把一个文件移动到了回收站,我并不想删,手误了。我急忙到Nautilus下的回收站中准备恢复它,但是里面居然什么都没有。 后来我发现这是由于我删文件的地方不在HOME所在的分区,而是在另一个独立的Linux分区下,这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下,相关的删除信息(删除时间和文件所在
jquery回到页面顶端
知了ing
html jquery css
html代码:
<h1 id="anchor">页面标题</h1>
<div id="container">页面内容</div>
<p><a href="#anchor" class="topLink">回到顶端</a><
B树、B-树、B+树、B*树
矮蛋蛋
B树
原文地址:
http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html
B树
即二叉搜索树:
1.所有非叶子结点至多拥有两个儿子(Left和Right);
&nb
数据库连接池
alafqq
数据库连接池
http://www.cnblogs.com/xdp-gacl/p/4002804.html
@Anthor:孤傲苍狼
数据库连接池
用MySQLv5版本的数据库驱动没有问题,使用MySQLv6和Oracle的数据库驱动时候报如下错误:
java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
java泛型
百合不是茶
java泛型
泛型
在Java SE 1.5之前,没有泛型的情况的下,通过对类型Object的引用来实现参数的“任意化”,任意化的缺点就是要实行强制转换,这种强制转换可能会带来不安全的隐患
泛型的特点:消除强制转换 确保类型安全 向后兼容
简单泛型的定义:
泛型:就是在类中将其模糊化,在创建对象的时候再具体定义
class fan
javascript闭包[两个小测试例子]
bijian1013
JavaScript JavaScript
一.程序一
<script>
var name = "The Window";
var Object_a = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
探索JUnit4扩展:假设机制(Assumption)
bijian1013
java Assumption JUnit 单元测试
一.假设机制(Assumption)概述 理想情况下,写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方,但是有的时候,这些导致测试用例不通过的地方并不是很容易的被发现,可能隐藏得很深,从而导致开发人员在写测试用例时很难预测到这些因素,而且往往这些因素并不是开发人员当初设计测试用例时真正目的,
【Gson四】范型POJO的反序列化
bit1129
POJO
在下面这个例子中,POJO(Data类)是一个范型类,在Tests中,指定范型类为PieceData,POJO初始化完成后,通过
String str = new Gson().toJson(data);
得到范型化的POJO序列化得到的JSON串,然后将这个JSON串反序列化为POJO
import com.google.gson.Gson;
import java.
【Spark八十五】Spark Streaming分析结果落地到MySQL
bit1129
Stream
几点总结:
1. DStream.foreachRDD是一个Output Operation,类似于RDD的action,会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法
2. 获取MySQL Connection的操作应该放在foreachRDD的参数(是一个RDD[T]=>Unit的函数类型),这样,当foreachRDD方法在每个Worker上执行时,
NGINX + LUA实现复杂的控制
ronin47
nginx lua
安装lua_nginx_module 模块
lua_nginx_module 可以一步步的安装,也可以直接用淘宝的OpenResty
Centos和debian的安装就简单了。。
这里说下freebsd的安装:
fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz
tar zxvf lua-5.1.4.tar.gz
cd lua-5.1.4
ma
java-递归判断数组是否升序
bylijinnan
java
public class IsAccendListRecursive {
/*递归判断数组是否升序
* if a Integer array is ascending,return true
* use recursion
*/
public static void main(String[] args){
IsAccendListRecursiv
Netty源码学习-DefaultChannelPipeline2
bylijinnan
java netty
Netty3的API
http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html
里面提到ChannelPipeline的一个“pitfall”:
如果ChannelPipeline只有一个handler(假设为handlerA)且希望用另一handler(假设为handlerB)
来
Java工具之JPS
chinrui
java
JPS使用
熟悉Linux的朋友们都知道,Linux下有一个常用的命令叫做ps(Process Status),是用来查看Linux环境下进程信息的。同样的,在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用,它就是jps(Java Process Status),它可以用来
window.print分页打印
ctrain
window
function init() {
var tt = document.getElementById("tt");
var childNodes = tt.childNodes[0].childNodes;
var level = 0;
for (var i = 0; i < childNodes.length; i++) {
安装hadoop时 执行jps命令Error occurred during initialization of VM
daizj
jdk hadoop jps
在安装hadoop时,执行JPS出现下面错误
[slave16]
[email protected] :/tmp/hsperfdata_hdfs# jps
Error occurred during initialization of VM
java.lang.Error: Properties init: Could not determine current working
PHP开发大型项目的一点经验
dcj3sjt126com
PHP 重构
一、变量 最好是把所有的变量存储在一个数组中,这样在程序的开发中可以带来很多的方便,特别是当程序很大的时候。变量的命名就当适合自己的习惯,不管是用拼音还是英语,至少应当有一定的意义,以便适合记忆。变量的命名尽量规范化,不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数,这给我们程序的编写带来了很多的方便。当然,在大型程序中我们往往自己要定义许多个函数,几十
android笔记之--向网络发送GET/POST请求参数
dcj3sjt126com
android
使用GET方法发送请求
private static boolean sendGETRequest (String path,
Map<String, String> params) throws Exception{
//发送地http://192.168.100.91:8080/videoServi
linux复习笔记 之bash shell (3) 通配符
eksliang
linux 通配符 linux通配符
转载请出自出处:
http://eksliang.iteye.com/blog/2104387
在bash的操作环境中有一个非常有用的功能,那就是通配符。
下面列出一些常用的通配符,如下表所示 符号 意义 * 万用字符,代表0个到无穷个任意字符 ? 万用字符,代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如:[abcd]代表一定有一个字符,可能是a、b、c
Android关于短信加密
gqdy365
android
关于Android短信加密功能,我初步了解的如下(只在Android应用层试验):
1、因为Android有短信收发接口,可以调用接口完成短信收发;
发送过程:APP(基于短信应用修改)接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
asp.net在网站根目录下创建文件夹
hvt
.net C# hovertree asp.net Web Forms
假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下:
string m_keleyiFolderName = Server.MapPath("/hovertree");
if (Directory.Exists(m_keleyiFolderName))
{
//文件夹已经存在
return;
}
else
{
try
{
D
一个合格的程序员应该读过哪些书
justjavac
程序员 书籍
编者按:2008年8月4日,StackOverflow 网友 Bert F 发帖提问:哪本最具影响力的书,是每个程序员都应该读的?
“如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本, 你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西。”
很多程序员响应,他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单,不过都是推荐数
单实例实践
跑龙套_az
单例
1、内部类
public class Singleton {
private static class SingletonHolder {
public static Singleton singleton = new Singleton();
}
public Singleton getRes
PO VO BEAN 理解
q137681467
VO DTO po
PO:
全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象。
BO:
全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
战胜惰性,暗自努力
金笛子
努力
偶然看到一句很贴近生活的话:“别人都在你看不到的地方暗自努力,在你看得到的地方,他们也和你一样显得吊儿郎当,和你一样会抱怨,而只有你自己相信这些都是真的,最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋,我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在,是否你就真的相信他们如此不思进取,而开始放松了对自己的要求随波逐流呢?
我有个朋友是搞技术的,平时嘻嘻哈哈,以
NDK/JNI二维数组多维数组传递
wenzongliang
二维数组 jni NDK
多维数组和对象数组一样处理,例如二维数组里的每个元素还是一个数组 用jArray表示,直到数组变为一维的,且里面元素为基本类型,去获得一维数组指针。给大家提供个例子。已经测试通过。
Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata)
{
jint i,j;
int s