实战（一）: 利用JSON传播数据

我会接网线
347 阅读6分钟

一. css布局注意要点

  1. 一般布局最外层写一个大盒子 cover

  2. mask 遮罩 里面填写详细信息

  3. -webkit-font-smoothing: antialiased; 去字体的锯齿，很多网站会用

  4. box-sizing:border-box; 绘制边框 让它在盒子内部设置，不要让其扩大它的面积

  5. -webkit-box-sizing: border-box; 兼容性： 有webkit内核的浏览器
    -moz-box-sizing: border-box; 兼容性:mozilla firefox浏览器
    -o-box-sizing: border-box; 兼容性： opera 浏览器
    6..clearfix::after{}： 清除浮动： 给浮动元素的容器添加一个clearfix的class，
    然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素清理浮动。

  6. absolute 自动变成块级性质的元素，无需再display：block
    8..album-title h1::after,.album-title h1::before{} 可以造出标题两边的横线
    9.第五和第十个图片不能有右外边距，不然会被挤下去 ：.student-album .list-item:nth-child(5), .student-album .list-item:nth-child(10){ margin-right: 0;}
    10.没有边距的可以用百分比来做
    11.（企业经验）一般企业中不用去居中，直接是padding、margin 宽度设计图已经定好了，所以它正好排中间。
    12.（企业经验） 一般不用去设置浮动，直接padding……

最终效果展示：

第一种方法

        <div class="student-album">
            <div class="album-title">
                <h1>踏实勤奋努力 注定技术到手</h1>
                <p>中大型互联网企业需要真正有技术的人</p>
            </div>
            <div class=" album-wrap">
                <ul class="list  js-list clearfix">
                     <!-- <li class="list-item">
                        <div class="mask">
                            <h3>前端工程师（成都）</h3>
                            <p>月薪18k</p>
                        </div>
                        <img src="./img/1.jpg" alt="">
                    </li>  -->
                </ul>
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

index.js:

var jsonData = '[{"id":"1","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"15","img":"1.jpg"},{"id":"2","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5e7f\u5dde","salary":"11","img":"2.jpg"},{"id":"3","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u4e0a\u6d77","salary":"10","img":"3.jpg"},{"id":"4","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u6210\u90fd","salary":"9","img":"4.jpg"},{"id":"5","career":"\u540e\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"11","img":"5.jpg"},{"id":"6","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"13","img":"6.jpg"},{"id":"7","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u6df1\u5733","salary":"12","img":"7.jpg"},{"id":"8","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u4e0a\u6d77","salary":"10","img":"8.jpg"},{"id":"9","career":"\u540e\u7aef\u5de5\u7a0b\u5e08","city":"\u6210\u90fd","salary":"10","img":"9.jpg"},{"id":"10","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"18","img":"10.jpg"}]';

window.onload = function () {
    render();
}

function render() {
    var data = JSON.parse(jsonData),
        len = data.length,
        oList = document.getElementsByClassName('js-list')[0],
        list = ' ',
        item;

    
    for (var i = 0; i < len; i++) {
        item = data[i];
        list += tpl(item);
    }
    oList.innerHTML = list;
}


function tpl(data) {
    return (
        '<li class="list-item">' +
        '<div class="mask">' +
            '<h3>'+data.career+ '('+data.city+')</h3>' +
           ' <p>月薪' + data.salary + 'K</p>' +
        '</div>' +
        '<img src= "img/' + data.img +'" alt="" />' +  
        //注意 要加"" ,图片不对试了好久，原来是忘记打""
    '</li>'
    );
}

方法总结

1.注意 '<img src= "img/' + data.img +'" alt="" />' + 要加"" ,图片不对试了好久，原来是忘记打""(img之前，alt之前，对应src="img……")
2.render（）函数中 list首先赋值为空字符串，经过tpl函数与for循环慢慢形成一个个类似的模板，布满页面
3.window.onload = function () {  render();   }      是为了让函数自动运行
4.利用data = JSON.parse(jsonData) 获取JSON数据的对象形式
5.创立一个item， 用 item = data[i], 将data数据分隔开 ， 以便调用函数tpl (item) ;

index.css:

body{
    margin: 0;
    color: #3c3c3c;
    -webkit-font-smoothing: antialiased;
    font: 12px/1.5 'Microsoft YaHei';
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}

ul,
li,
div{
   box-sizing: border-box;
   -webkit-box-sizing: border-box; /*  兼容性： 有webkit内核的浏览器 */
   -moz-box-sizing: border-box; /*  兼容性:mozilla  firefox浏览器  */
   -o-box-sizing: border-box;    /*  兼容性： opera 浏览器 */ 
   -ms-box-sizing: border-box;
}
  
.clearfix::after{   /* 清除浮动： 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素清理浮动。 */
    content: " ";
    display: table;
    clear: both;
}
/* 16.41 */
.cover{
    min-width: 1200px;
}
.student-album{
    width: 1200px;
    margin:  80px auto ;
}
.student-album .album-title{
    height: 100px;
    text-align: center;
}
.student-album .album-title h1{
    height: 65px;
    font-size: 35px;
    color: #000;
    position: relative;
}
.student-album .album-title h1::before,
.student-album .album-title h1::after{
    content: "";
    position: absolute;
    top: 25px;
    width: 50px;
    height: 2px;
    background-color: #000;
}
.student-album .album-title h1::before{
    left: 340px;
}
.student-album .album-title h1::after{
    right: 340px;
}
.student-album .album-title p{
    font-size: 20px;
}
.student-album .album-wrap{
    margin-top: 50px;
}
.student-album .list-item{
    float: left;
    position: relative;
    width: 216px;
    height: 216px;
    margin: 30px 30px 0 0;
    border-radius: 50%;
    -webkit-box-radius:50% ; /*  兼容性： 有webkit内核的浏览器 */
    -moz-box-radius:50%; /*  兼容性:mozilla  firefox浏览器  */
    -o-box-radius:50%;    /*  兼容性： opera 浏览器 */ 
    overflow: hidden;
}
.student-album .list-item:nth-child(5),
.student-album .list-item:nth-child(10){
    margin-right: 0;  /* 第五和第十个盒子不能有右外边距，不然会被挤下去  */
}
.student-album .list-item .mask{
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    bottom: -60px;
    left: 0;
    color: #ffffff;
    text-align: center;
    transition: bottom .2s ease-in-out;
}
.student-album .list-item:hover .mask{  
   bottom: 0; 
}

第二种方法：

 <div class="cover">
        <div class="student-album">
            <div class="album-title">
                <h1>踏实勤奋努力 注定技术到手</h1>
                <p>中大型互联网企业需要真正有技术的人</p>
            </div>
            <div class=" album-wrap">
                <ul class="list  js-list clearfix">

                </ul>
            </div>
        </div>
    </div>
 
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/html" id="tpl">
        <li class="list-item">
            <div class="mask">
                <h3>{{ career }}{{ city }}</h3>
                <p>月薪{{ salary }}K</p>
            </div>
            <img src="./img/{{img}}" alt="">
        </li>
    </script>

方法总结

1.这种方法在html中写下 script 模块 ，注意不能写text/javascript , 因为写这个会把它当做脚本来执行从而不会再页面显现，倒不如写个错的如 text/html ，这样会正常执行
2.这种大括号写法类似于Vue，这样就不需要在index.js里写引号，方便多了：

'<h3>'+data.career+ '('+data.city+')</h3>'

第三种方法

 <div class="cover">
        <div class="student-album">
            <div class="album-title">
                <h1>踏实勤奋努力 注定技术到手</h1>
                <p>中大型互联网企业需要真正有技术的人</p>
            </div>
            <div class=" album-wrap">
                <ul class="list  js-list clearfix">

                </ul>
            </div>
        </div>
    </div>
    <div id="J_data" style="display: none;">
        [{"id":"1","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"15","img":"1.jpg"},
        {"id":"2","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5e7f\u5dde","salary":"11","img":"2.jpg"},
        {"id":"3","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u4e0a\u6d77","salary":"10","img":"3.jpg"},
        {"id":"4","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u6210\u90fd","salary":"9","img":"4.jpg"},
        {"id":"5","career":"\u540e\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"11","img":"5.jpg"},
        {"id":"6","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"13","img":"6.jpg"},
        {"id":"7","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u6df1\u5733","salary":"12","img":"7.jpg"},
        {"id":"8","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u4e0a\u6d77","salary":"10","img":"8.jpg"},
        {"id":"9","career":"\u540e\u7aef\u5de5\u7a0b\u5e08","city":"\u6210\u90fd","salary":"10","img":"9.jpg"},
        {"id":"10","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"18","img":"10.jpg"}]

    </div>

    </div>
    <script type="text/javascript" src="./js/2.js"></script>

    <script type="text/html" id="J_tpl">
        <li class="list-item">
            <div class="mask">
                <h3>{{career}}{{city}}</h3> <!---->
                <p>月薪{{salary}}K</p>
            </div>
            <img src="./img/{{img}}" alt="" />
        </li>
    </script>

2.js:

window.onload = function () {
    render();
}


function render() {
    var jsonData = document.getElementById('J_data').innerHTML,
        tpl = document.getElementById('J_tpl').innerHTML,
        data = JSON.parse(jsonData),
        len = data.length,
        oList = document.getElementsByClassName('js-list')[0],
        list = '',
        item;


    for (var i = 0; i < len; i++) {
        item = data[i];
        list += setTplToHTML(tpl, regTpl, {
            career: item.career,
            city: item.city,
            salary: item.salary,
            img: item.img  //此式中opt为{}这个整体， 没有传递对象名，而是把对象整体搬进来了
        })
    }
    oList.innerHTML = list;
}

function setTplToHTML(tpl, regExp, opt) {//模板，正则：匹配的规则，key值
    return tpl.replace(regExp(), function (node, key) {
        // console.log(node,key); node代表{{career}}等, key代表career等，即key就是去掉{}的node    
        return opt[key] //相当有opt.key即 对象.career等
    });
}
function regTpl() {
    return new RegExp(/{{(.*?)}}/, 'gim');
}
/* 这样做的目的是为了：缓解服务器压力（每点一次要去后台请求一次，还不如直接放在页面）*/

总结：

1.一般企业都用这种，用页面来缓存数据。这样做的目的是为了缓解服务器压力（每点一次要去后台请求一次，还不如直接放在页面）
 2.JSON数据一般都保存在 《 div id="J_data" style="display: none;" 》中
3.在html页面 JSON传输的数据不能打注释以及 ; 等标点符号，不然会传不了
4.利用 document.getElementById('J_data').innerHTML 将 html 中的JSON数据引入js中
5.利用 document.getElementById('J_tpl').innerHTML, 将其模板引入js中
6. replace（）方法： 数据整体 . replace（要被替换的，替换的新数据）

str = 'abc';
var R = str.replace('b', 'e')
console.log(R) /输出aec
  1. 自制setTplToHTML方法，主要功能为替换
function setTplToHTML(tpl, regExp, opt) {/模板，正则：匹配的规则，key值
    return tpl.replace(regExp(), function (node, key) {
     //console.log(node,key); node代表{{career}}等, key代表career等，即key就是去掉{}的node    
        return opt[key]  /相当有opt.key即 对象.career等
    });
}

下面就是调用setTplToHTML方法，上式中opt参数就为此式中对象整体，以便替换对象中的数据

  list += setTplToHTML(tpl, regTpl, {
            career: item.career,
            city: item.city,
            salary: item.salary,
            img: item.img  /此式中opt为{}这个整体， 没有传递对象名，而是把对象整体搬进来了
        })
avatar
文章
阅读
粉丝