【持续更新】一些前端的小技巧

本人原本是java后台程序员一枚，因为最近接触到微信公众号，不得不从事一些前端的工作。

作为一名前端小白，在项目的学习过程中，本着学习的原则，记录和累积自己收集和运用到的一些小技巧，方便以后的学习也希望能给其他小白一些干货和指出一些坑吧。大神勿喷，欢迎指导。

前端的开发工具：推荐 VS code

1，利用js遍历json对象数组(列表)

可以使用for in 没错，但是！！！（特别是有java或其他基础的人来说）坑点在于in前面的参数是下标！！！不是一个数组的元素（不是一个列表的一个项），所以注意！网上有些答案还是错的！正确例子如下：(当然也可以使用最基本的for循环的语句)

var all = ItemList for (var p in all) { 
    // 遍历json数组时，这么写p为索引，
    var Item = all[p] ;// 取出json对象 
}
           

2，单选按钮radio点击选项即可选中（不必要点按钮）

简单，使用一个<label></label>即可，如下：

<form>
    //方式一:
    <label for="male">男</label>
    <input type="radio" name="sex" id="male" />

    //方式二:
    <label>
      <input type="radio" name="radiobutton" value="radiobutton" />男
    </label>

</form>
           

3，使标签始终置于页面底部（顶端等 以此类推）

如手机端网页常见的下端的按钮，只需配置css样式：

   .atbottom{

    position:fixed;  // 这里最新更正，始终在底部的应该用position:fixed,absolute是相对于父级有position属性的元素进行的定位

    bottom: 0;

    width: 100%;

  }

4，当内容太长时用省略号代替

• 使用css的方法：

.title{ 
    width:300px; /* 一定要指定一个宽度 */ 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
           

参考：http://blog.csdn.net/u012531787/article/details/18553885

• 使用js的方法： 其实就是进行字段截取，然后用“...”替换拼接，个人很不建议，字数其实无法确认，还涉及到分辨率的问题，所以不推荐，所以也并不想描述。

• 如果是微信小程序的话：你会发现上面的css根本不起作用，不过还是有其特有的写法：

    单行：

.team-content {
  width: 500rpx;
  display:-webkit-box;
  -webkit-line-clamp:1;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
           

     多行：

.homework {
  display: -webkit-box;  /*设置为弹性盒子*/
  -webkit-line-clamp: 5;  /*最多显示5行*/
  overflow: hidden;  /*超出隐藏*/
  text-overflow: ellipsis;  /*超出显示为省略号*/
  -webkit-box-orient: vertical;
  word-break: break-all;  /*强制英文单词自动换行*/
}
           

参考：https://www.jianshu.com/p/ecf3910e2008

20200218 新增（视频笔记 ES6语法及H5性能优化）：

5，前端页面性能优化

• HTML中要少用table标签，因为table标签渲染时有许多子标签，建议使用div；
• 减少使用for -in 因为它需要同时搜索对象的实例和原型属性，直接使用for；
• 用变量对常用又比较大的变量（数组，对象）先缓存起来；
• 优化if-else，按照出现的几率从大到小 顺序排下；
• 减少ajax的请求数；
• 当浏览器顺序（单线程）读代码，当遇<script>标签时，或使用src属性加载其他元素时，先下载外链接文件中的代码，然后解析——这个过程页面渲染和用户交互都被阻塞了。
  • 如果有css和js文件引入，建议把css放在js前面，因为js要下载-解析-执行，这个过程较慢。
  • 将所有<script>标签放到页面底部，</body>闭合标签之前（除非是有缓存的，放在head）。
  • 尽可能合并脚本，减少<script>标签。
  • 公用的js代码抽出来，公共引入，只需下载一次，后续会从缓存读取更快。
  • <script>按需下载，用动态加载src的方式。
• 压缩数据量减少请求数
  • 体积，压缩图片，尽量减少图片的使用（可以使用css3），建议使用png，不要留白。
  • 减少http请求，css合并，sprites图片模块化拆分再合并（利用background进行背景图片定位）
  • 压缩js和css文件，使用xxx.min.js（用webpack  的mode改成生产 就可以压缩 / 在线压缩）
  • 压缩页面，gzip

6，页面性能工具

• Fiddler2-Miscrosoft
• ySlow-YAHOO
• Pagetest-AOL

7，ES6

• 变量，常量不能重复定义（会提示重复）
• 控制修改（比如，常量用const定义后不能被修改，而不是用原来的var）
• 块级作用域（let声明变量是块级的（一个大括号里面），ES5的var是函数级的（function），在用for循环会一直是最后一个，要改要用匿名函数传里面）
• 解构赋值：对赋值运算符的扩展，对对象或者数组进行属性和值进行匹配。如 let {a,b}= {'a':3,'b':4};  var [a,b]=[1,2];
  • 赋值两边的结构必须一样；
  • 赋值的右侧必须是一个标准的对象；
  • 赋值和解构必须在同一个语句完成(不能先定义后赋值)；
• 箭头函数：简洁。如 add(12,x=>x+5);
  • 没有自己的this,arguments,super；
  • 有且仅有一个参数，()可以不写；
  • 有且只有一个语句并且是return，{}可以不写；
  • 修正this：箭头函数的this是父作用域的this，不是调用时候的this，如在setTimout里面，本来this是指window，用箭头函数则表示的是其父作用域的this；

8，try-catch

对于有可能出错的代码，应该用try-catch包起来，防止报错后影响后面代码的运行

----------------------------------------------------------------------------------------------------------

20200416 

9，页面显示实时时间，加星期

https://www.cnblogs.com/luckyShuang/p/11858823.html

html
{{nowDate}}   {{nowTime}}   {{nowWeek}} 




js
data: function() {
    return {
      timer: null,
      nowWeek: '',
      nowDate: '',
      nowTime: '',
    };
  },
  methods: {
    setNowTimes: function (){
      var _this = this;
      var myDate = new Date()
      // console.log(myDate)
      var wk = myDate.getDay();
      var yy = String(myDate.getFullYear());
      var mm = myDate.getMonth() + 1;
      var dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
      var hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
      var min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
      var sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      var week = weeks[wk];
      _this.nowDate = yy + '年' + mm + '月' + dd + '日';
      _this.nowTime = hou + ' : ' + min + ' : ' + sec;
      _this.nowWeek = week;
    }
  },
  mounted () {
    // 时间跳转
    this.timer = setInterval(() => {
      this.setNowTimes()
    }, 1000);
  }
           

10，定时跳转回某页面

data:
count: "",//倒计时



methods
//  20秒后跳回首页
        backIndexCount: function () {
            const TIME_COUNT = 20;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        clearInterval(this.timer);
                        this.timer = null;
                        //跳转的页面写在此处
                        Artery.open("jdzd/lsjdindex");
                    }
                }, 1000)
            }
        },
           

11，websocket实现实时通信和心跳

https://www.cnblogs.com/mybug/p/11718549.html

对于5分钟超时的问题，通过心跳来解决，下面这个是简版：

https://www.javascriptc.com/interview-tips/zh_cn/javascript/working-with-websocket-timeout/

12，js中list两个元素交换位置

https://www.cnblogs.com/jxldjsn/p/10791692.html

https://blog.csdn.net/funche/article/details/106308936

// 一行代码两边办事
// splice 将目标元素替换并将原结果扔回来赋值给它

function swapArr(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
}
           

*************************目前只积累到这些，后期将不定期更新，欢迎批评指正！

对于与vue相关的实用技巧将单独整理

结束和声明

以上纯属个人观点和体会希望这篇文章能对你有所帮助！欢迎大家来一起讨论分享干货，或者批评指正！更加热切盼望各路大神前辈给些指导和建议！以后会不定期更新心得和总结，包括学习过程中各种异常和解决办法等等。再见！

转载请注明出处！或者联系我！（[email protected]）