个人前端实践

时间  2019-11-15
标签 个人 前端 实践 繁體版
原文   原文链接

我也是一个经历过柴米油盐酱醋茶、尝过酸甜苦辣咸的前端程序员。知道前端的东西入门简单，有深度却很难；表似好看无比的应用，其实背后逻辑复杂，然而要想成长的更快，必定要学会站在巨人的肩膀上，“学以师技以自长”。因此一些经验很是难得，在此我想和你们分享一下个人经验。我是一个从jquery，zepto，到vue的比较常规的技术栈过渡过程。
本文涉及面包括：jquery处理模板的办法，高效处理json数据，如何有效命名，如何搭建合适的web服务，如何作出有效炫酷的动画，vue组件处理的方式，同时覆盖如何使用github管理你的项目和文章javascript

一、jQuery.js中的tmpl大法

在当初没有vue、react等mvvm框架的时候，这些都是很是牛逼使用的东西php

<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>jquery-tmpl</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.tmpl.js"></script> </head> <style> .left-box { float: left; width: 50%; } .right-box { float: right; width: 50%; } ul,li { overflow: hidden; margin: 10px; width: 100%; } </style> <body> <script type="text/x-jquery-tmpl" id="reuse"> <li> <div class="left-box"> <p>${name}</p> <p>${prize}￥</p> </div> <div class="right-box">点击</div> </li> </script> <div> <ul id="list"> </ul> </div> </body> <script> $(function() { var list = [{name:"计算机科学",prize:11},{name:"JAVA",prize:55},{name:"CSS",prize:42}] $( "#reuse" ).tmpl(list).appendTo("#list" ); }) </script> </html>复制代码

tmpl.png

直接渲染上，堪比v-for；然而如今vue，angular框架能够替代jquery，同时开发效率高

二、小坑总结大法

在处理json数据的时候多用原生方法toString()和split();来合并和分割数组，效率会高不少。如下只是举了一些小例子
更多的我都总结在连接地址day-by-day里面css

1.采用 text-align: justify; 实现段落对齐；
2.采用 text-justify: inter-ideograph; 解决 IE 下中英混排问题；
3.部分 webkit 浏览器在处理中英混排时会出现超过 1em 的间隙，可采用 word-break: break-all; 解决，但会致使行首行尾禁则失效。
 p {
    text-align: justify;
    text-justify: inter-ideograph; /* IE 私有，解决中英混排 */
    word-break: break-all; /* For webkit */
}复制代码

三、页面动效神器大法

用添加或者取消class来控制动态效果最好，避免在js代码中有一系列样式问题；
动画单一效果时：就用自带的移动translate、方法缩小scale、旋转rotate
多种组合：cubic-bezier(0.500, 0.250, 0.500, 0.750)曲线html

四、命名大法

在作一个项目的时候，咱们每每遭遇命名问题的困惑，当看到一些非专业人的代码，看到他们凌乱的码法，有时候真的苦不堪言。深入知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。因此有必要写一篇关于常见命名的方式。如下是经过3年的编程经验，以及参考网上知名的开源项目总结的一点经验。前端

1.文件夹命名

  • 1.最好用一个单词描述
经常使用项目命名 omi、element、master、project、test、vue、iview
二级目录 build、static、config、src、examples、base、common、issues、assert
三级目录 libs、models、plugins、skins、images、css、js

  • 2.若是一个单词描述不了，用2个词（名词加动词）vue

    color-pick、button-groups、date-picker、option-grounp、jquery-select、jquery-swiperjava

  • 3.中间用-或者_链接为了方便归类、一目了然node

    node_models、async-demo、array-union、array-differ、babel-each。react

2.文件命名

  • 1.最好用一个单词描述

如下变量名能够加css、js、html，例如index.html、index.js、index.css。jquery

经常使用组件命名 index、message、menu、slider（滑块）、page、progress（进度条）、tooltip（提示）、tree、upload、time、button、checkbox、dialog、cascader（三级联动）
经常使用文件命名 index、shopping（购物）、 share（分享）、integral（积分）、advertisement（广告）、pay（支付）、community（社区）、game、docs、bussiness

具体优化命名文章原文章

五、微信公众号开发大法

基于微信开发，目前最火的是小程序和公众号开发，而我作的最多的是公众号开发,基础的有
一、微信公众号 目的是进行受权 要是须要支付功能，则需开通微信支付。
二、微信开发者工具 （1）目的是受权以后的网页没法在pc浏览器中浏览 （2）微信api须要在微信环境下生效，能够利用微信开发者工具跟踪你微信api的实现情况。
三、须要一部手机、严格的说你须要两部手机。一部安卓、一部ios手机。目的是安卓手机里面微信用的是本身的qq浏览器、可是苹果手机是safari浏览器，所以兼容性你须要适配。
主要说下卡券和支付的问题。有点长请点击地址

![Paste_Image.png](https://user-gold-cdn.xitu.io/2017/4/17/0a769ba168157b96a319d9eea620dd18)
开发请时刻打开葵花宝典微信开发者文档：http://mp.weixin.qq.com/wiki/home/

![Paste_Image.png](https://user-gold-cdn.xitu.io/2017/4/17/67b5199573c297f5117c1f15739bc9c2)
ok如今工具备了，能够开始讲开发阶段了。第一受权，微信受权分为静默受权和弹皮受权、目的就是获取用户信息、取得用户的惟一openid、以便业务的开发。复制代码

六、vue消息传递大法

一、在vue1.0中组件消息传递

子向父传递消息：this.$dispatch('on-change', this.checked);
父向子传递消息：this.$broadcast('on-change', this.checked);
#### 二、在vue2中组件消息传递，已经去除$dispatch、$broadcast，官方推荐使用vuex或者全局的事件驱动；
防止子组件修改父组件的值已经去掉双向流动的特性sync。因此
父组件向子组件传递：props[]
子组件向父组件传递：$emit，this.$emit('on-change', this.checked);复制代码

七、vue避免某些生命周期只执行一遍问题

在作vue项目的时候咱们一般会写一些公共组件组件，而公共组件由于会频繁，考虑到效率问题确定会采用v-show来控制显示隐藏；可是v-show的一些ready(mounted)方法会在编译时就已经执行了，因此当再次-v-show时发现ready(mounted)以前的方法不会执行;不要急一般会有两种办法。

一、用watch监听

watch: {
            visible (val) {
                if (val === false) {
                    this.buttonLoading = false;
                    setTimeout(() => {
                        this.wrapShow = false;
                    }, 300);
                    this.removeScrollEffect();
                } else {
                    this.wrapShow = true;
                    this.addScrollEffect();
                }
            },
            loading (val) {
                if (!val) {
                    this.buttonLoading = false;
                }
            }
        }
    这就是监听'visible'、`loading`这两个变量的值来从新执行`removeScrollEffect`和`addScrollEffect`方法。复制代码

二、用v-if强制结束生命周期

<template>
    <div v-if="!closed" :class="classes" transition="fade">
        <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
    </div>
</template>
这样对于公共组件效率并不高，因此适用于非公共组件复制代码

八、web服务器选择

其实经常使用的tomcat、xampp和node搭建的web服务器环境、nginx。

  • tomcat服务器：这个14年之前的web开发者，几乎再熟悉不过了。注意把静态文件放到
    webapps里面，启动后就能够访问。缺点缓存太严重，每次须要清除缓存。
  • xampp：主要是针对php工程师的，不过前端访问代码也很方便，只须要配置一下
    第一，打开httpd.conf文件。其位置位于XAMPP安装目录下面的“apache\conf”文件夹里。
    第二，修改代码。在httpd.conf文件中找到以下两行代码，并进行修改。
    (根目录）
DocumentRoot “C:/xampp/htdocs”
<Directory “C:/xampp/htdocs”>
将两个目录更改成你所但愿的目录便可，如我修改以下：（C:/Web为我本人新的网址根目录）
DocumentRoot “D:/Webs”
<Directory “D:/Web”>复制代码
    能够方便的指定目录;

  • node搭建服务器环境（源码）

    • 利用express来搭建服务 npm install -g express
      npm install -g express复制代码
    • 创建项目
      express project复制代码
    • 创建项目并install,执行npm start
      cd project,npm install,npm start复制代码
    • 安装ejs修改解析的模板
      npm install ejs
修改app文件把jade修改为html解析模板
var ejs = require('ejs'); app.engine('html', ejs.__express);app.set('view engine', 'html');复制代码
    • 把你的代码放到views里面，启动浏览器访问：http://localhost:3000/
      Paste_Image.png

  • nginx
    nginx的功能不说了，最主要是反向代理，防止并发。运用场合是，多人合做，链接不一样的服务请求，若是当web服务使用
    配置以下：

    server {
      listen       9006;#登陆配置访问地址
      server_name  localhost;
      index index.html index.htm index.php;
      autoindex on;
      ssi  on;
      limit_rate 2000k;
      client_max_body_size 2048m;

      location ~* .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|exe|map|json)$ {
          root D:/resource/public; #
          index index.html index.htm;
      }

      location ^~ /test/ {
          proxy_pass http://192.168.60.10:8181/test/;
          proxy_redirect  default;
          proxy_cookie_path   / / /;
          proxy_set_header    Host    $host:$server_port;
          proxy_set_header    X-Real-IP $remote_addr;
          proxy_set_header    X-Forwarded-Host $host:$server_port;
          proxy_set_header    X-Forwarded-Server $host:$server_port;
          proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
      }
  }复制代码

    其中(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|exe|map|json)静态文件在本地读取,其余例如接口则在 http://192.168.60.10:8181/test/这个服务中读取，比较大的项目开发来讲是很是方便的。

九、vuex使用大法

vuex主要是利用状态管理机制，来解决VUE中复杂项目频繁组件通讯，以及平行同行的问题，vue2.0推荐使用。
vuex比window能够当全局变量的功能用，可是其优点是定义的数据更有模块性和追踪性。

1、编写store对象

define([], function() {
    var Vue = require('vue')
    var Vuex = require('src/libs/vuex/vuex.js')
    Vue.use(Vuex)
    var modelA= require('src/libs/vuex/modelA.js')
    // 应用初始状态
    var state = {
        count: 2
    }

    // 定义所需的 mutations
    var mutations = {
        INCREMENT: function(state) {
            state.count++
        },
        DECREMENT: function(state) {
            state.count--
        }
    }
//这一块能够引入模块对象
     var store = new Vuex.Store({
            state: state,
            mutations: mutations,
            modules: {
                test: modelA
            }
        })
        // 建立 store 实例
    return store
})复制代码

vuex参考实例

十、github博客和日志大法

其实在开发的时候不免会遇到许多问题，许多坑，然而你若是本身从坑里爬起来了，确定有不少感觉。那么若是你想把这些感觉写下来更好，若是不想写下来建议你写下来，分享便会成长。其中能够经过如下几种方式来完善你的博客和日志

本次活动地址：juejin.im/post/58d8e9… 但愿出现更多优秀的做品

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程