前端开发小技巧（来自知乎）

cangck_X 发布于2019-08-30 13:02 / 1406人阅读

摘要：原生越来越好了，如果是简单的页面，没必要引入一个庞大的，尤其在手机端，对速度流量敏感的地方，另外最好自己简单封装一些常用的函数，比如等。。。这时候它就不知所措了，只好待在中间。参考前端界有哪些越早知道越好的小技巧小知识

1.You Might Not Need jQuery

不用jQuery，原生js如何实现，可以参考这里：You Might Not Need jQuery 。原生js越来越好了，如果是简单的页面，没必要引入一个庞大的jQuery，尤其在手机端，对速度流量敏感的地方，另外最好自己简单封装一些常用的函数，比如toggleClass等。。。

2.Firefox查看源代码功能检查页面错误

页面写完后，记得用Firefox 查看页面源代码功能，可以一眼发现未闭合标签、未转义的HTML字符，如果不嫌麻烦，可以提交代码到 http://validator.w3.org/ 验证HTML、CSS，下面图片来自CSDN当前首页源码，可以看到Firefox红色高亮了错误的HTML代码，_blank后面多了一个双引号。

3.少用id

如果不在页面中用js引用元素，尽可能不要设置元素的id，也尽量不要用#main{}来设置元素css样式，而是用class方式.main{},因为

可以防止ID重复，造成错误

可以方便引入新CSS复写样式，另外应当绝对避免行内css样式.

4.max-device-width

使用 max-device-width检测而不是max-width来兼容手机、平板等，可以避免桌面浏览器因为窗口小，而看到丑陋的手机页面效果。

@media only screen and (max-device-width:980px){}

5.flex布局

多列布局，不考虑低级浏览器可以使用CSS3的flex布局，可以做到比浮动更好控制，如我写的样例代码，垂直、水平居中可以很容易实现：

6.二维码生成当前网址的插件

装个二维码生成当前网址的插件，以方便查看手机实际显示效果，现在移动端日益重要，作为前端，一定不能忽视移动端的显示效果，虽然浏览器都支持选择device来测试不同的设备显示效果，但毕竟和真实设备有差别，尤其在测试微信内的页面时候，非常方便。

7.让一个块级元素在某区域内上下左右居中

效果：

解释：原理就是让 box 自己既要往左也要往右，既要往上也要往下。这时候它就不知所措了，只好待在中间。

8.chrome中隐藏元素

在 Chrome 浏览器的 Elements 里面选中某个元素，按 h 可以隐藏该元素。

9.适当使用localStorage缓存HTML表单内容.

适当使用localStorage缓存HTML表单内容，防止浏览器崩溃、死机造成填写丢失.
具体事例移步这里cache form.通过‘查看网页源代码’可以看到实现的js，我还没研究明白。。。

10.liveload

使用一些chrome的liveload插件或者grunt、glup这些构建工具的liveload插件，这样可以边写代码变自动刷新页面，实时看效果.

未完待续。。。

参考：前端界有哪些越早知道越好的小技巧小知识？

云服务器 GPU云服务器前端开发技巧前端技巧知乎web前端小技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115255.html

前端开发小技巧（来自知乎）

摘要：原生越来越好了，如果是简单的页面，没必要引入一个庞大的，尤其在手机端，对速度流量敏感的地方，另外最好自己简单封装一些常用的函数，比如等。。。这时候它就不知所措了，只好待在中间。参考前端界有哪些越早知道越好的小技巧小知识 1.You Might Not Need jQuery 不用jQuery，原生js如何实现，可以参考这里：You Might Not Need jQuery 。原生js...

妤锋シ 2019-08-02 15:54 评论0 收藏0
前端开发小技巧（来自知乎）

摘要：原生越来越好了，如果是简单的页面，没必要引入一个庞大的，尤其在手机端，对速度流量敏感的地方，另外最好自己简单封装一些常用的函数，比如等。。。这时候它就不知所措了，只好待在中间。参考前端界有哪些越早知道越好的小技巧小知识 1.You Might Not Need jQuery 不用jQuery，原生js如何实现，可以参考这里：You Might Not Need jQuery 。原生js...

Freeman 2019-08-19 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0