我也是一个经历过柴米油盐酱醋茶、尝过酸甜苦辣咸的前端程序员。知道前端的东西入门简单，有深度却很难；表似好看无比的应用，其实背后逻辑复杂，然而要想成长的更快，一定要学会站在巨人的肩膀上，“学以师技以自长”。所以一些经验非常可贵，在此我想和大家分享一下我的经验。我是一个从jquery，zepto，到vue的比较常规的技术栈过渡过程。
This article covers include: jquery template approach to efficiently handle json data, how to name, how to build an appropriate web service, how to make cool animations h reasonable way vue component processes while covering how to manage your github projects and articles
1, jQuery.js in tmpl Dafa
At the time had not vue, react, etc. mvvm framework, these things are incredibly prolific use
<!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>
Direct rendering on comparable v-for; but now vue, angular frame may alternatively jquery, while the development of high efficiency
2, pits summary Dafa
When a plurality of data processing json virgin method toString () and Split (); to merge and split array, would be much higher efficiency
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 */
}3, pages dynamic effect artifact Gong
Add or cancel a class dynamically controlled best, to avoid a series of problems js code pattern;
animation Single Effect: Translate to move with their own, narrow method Scale, Rotation rotate
various combinations: cubic-bezier (0.500 , 0.250, 0.500, 0.750) curve
How to improve the effective dynamic effect feedback
Animation Reference Address: isux.tencent.com
animation enough for you to use
4, named Dafa
Doing a project, we often encounter the problem of naming confusion, when people see some non-professional code, see their messy code law, sometimes it is really miserable. Profound know the importance of a good naming norms, but also encountered some bottlenecks in the project name. It is necessary to write an article about the common way of naming. The following is by 3 years of programming experience, and online reference well-known open source project summary little experience.
1. Name the folder
1. the best described with a word
| Common project named | OMI element, master, project, test, view, iview |
|---|---|
| Secondary directory | build、static、config、src、examples、base、common、issues、assert |
| Three directory | libs、models、plugins、skins、images、css、js |
2. If a word can not be described with two words (noun plus verb)
color-pick、button-groups、date-picker、option-grounp、jquery-select、jquery-swiper
3. intermediate with - or _ connection for convenience categorized glance
node_models、async-demo、array-union、array-differ、babel-each。
2. File Naming
1. the best described with a word
The following variable names can be added css, js, html, such as index.html, index.js, index.css.
| Common components named | index, message, menu, slider (slider), page, progress (progress bar), tooltip (prompt), tree, upload, time, button, checkbox, dialog, cascader (three linkage) |
|---|---|
| Common file naming | index, shopping (shopping), share (share), integral (integration), advertisement (ad), pay (to pay), community (community), game, docs, bussiness |
Specific Optimization named article original article
5, the development of micro-channel public number Dafa
Based on micro-channel development, most fire is a small program and the public number development, and I do most of the public No. develop, there is the basis of
1, micro-channel public number purpose is to authorize, if required to pay function, we need to open micro-channel pay.
2, micro-channel Developer Tools (1) the purpose of the page after the authorization can not browse (2) micro-channel api in the pc browser needs to take effect in the micro-channel environment, we can use micro-channel Developer Tools track to realize the situation you micro letter api's.
3, need a cell phone, strictly speaking, you need two phones. An android, ios a mobile phone. The purpose is to Android phones inside their own micro-credit qq browser, but Apple is a mobile phone safari browser, so you need compatibility adaptation.
The main problem, said vouchers and payment cards. A little long, please click on the address
开发请时刻打开葵花宝典微信开发者文档：http://mp.weixin.qq.com/wiki/home/
ok现在工具有了，可以开始讲开发阶段了。第一授权，微信授权分为静默授权和弹皮授权、目的就是获取用户信息、取得用户的唯一openid、以便业务的开发。6, vue messaging Gong
1, the assembly messaging vue1.0
子向父传递消息：this.$dispatch('on-change', this.checked);
父向子传递消息：this.$broadcast('on-change', this.checked);
#### 2、在vue2中组件消息传递，已经去除$dispatch、$broadcast，官方推荐使用vuex或者全局的事件驱动；
防止子组件修改父组件的值已经去掉双向流动的特性sync。所以
父组件向子组件传递：props[]
子组件向父组件传递：$emit，this.$emit('on-change', this.checked);7, vue avoid some of the life cycle of execution only once problems
In doing vue items we usually write some public assembly components, and public components because frequently, taking into account the efficiency will certainly be using v-show controls the display hidden; but some ready v-show the (mounted) method will compile time has been performed, so the discovery method before ready (mounted) will not be executed again when the -v-show; do not rush usually have two options.
1, with the watch monitor
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`方法。2, with v-if forced end of life
<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>
这样对于公共组件效率并不高，所以适用于非公共组件8, web server selection
In fact, common tomcat, xampp web server and node built environment, nginx.
tomcat server: this 14 years ago web developers, almost too familiar. Note that the static file into the
webapps inside, can be accessed after the start. Cache too serious drawback, every time you need to clear the cache.xampp: php mainly for engineers, but the front-end access code is also very easy to use, only need to configure it
first, open the httpd.conf file. Its location in the XAMPP installation directory of "apacheconf" folder.
Second, modifying code. Find the following two lines of code in the httpd.conf file and modify it.
(根目录）
DocumentRoot “C:/xampp/htdocs”
<Directory “C:/xampp/htdocs”>
将两个目录更改为你所希望的目录即可，如我修改如下：（C:/Web为我本人新的网址根目录）
DocumentRoot “D:/Webs”
<Directory “D:/Web”>You can easily specify the directory;
-
node build a server environment ( source )
Use express services to build npm install -g express
npm install -g expresscreate project
express projectThe establishment of the project and install, execute npm start
cd project,npm install,npm startMounting template ejs modify resolution
npm install ejs
修改app文件把jade修改成html解析模板
var ejs = require('ejs'); app.engine('html', ejs.__express);app.set('view engine', 'html');Put your code into views inside, launch a browser to access: HTTP: // localhost: 3000 /
nginx
nginx function is not to say, the most important is the reverse proxy, to prevent concurrency. Use the occasion, the cooperative multiplayer, connected to different service requests, if and when the use of web services
Configuration is as follows:
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;
}
}Where (html | htm | gif | jpg | jpeg | bmp | png | ico | txt | js | css | exe | map | json) static files locally read, for example, other interfaces are in http://192.168.60.10: 8181 / test / very easy to read in this service, bigger project development time
9, vuex use Dafa
vuex is the use of state management mechanism to solve complex projects VUE in frequent communication components, as well as parallel peer problems, vue2.0 recommended.
vuex than the window can be a function of the use of global variables, but its advantage is more data modules and traceability definition.
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
})10, github blog and log Dafa
In fact, it will inevitably encounter many problems in the development of many pits, but if you own climb up out of the den, there must be a lot of feelings. So if you want to write down these feelings better, if you do not write down recommend that you write down the share will grow. Which can improve your blog and log in several ways
github in readme
such as UI design ideas you can put the resources, put notesgithub issue in the
example of aesthetics on you can take notes, write articlesgithub in the wiki
such as thinking about the aesthetics you can take notes, write articles, directories, nice