查看源码
 
在浏览器界面，按下F12或者鼠标右击，在出现的选项中点击检查，即可查看网页源码
 
并且可以获取每个HTML标签元素的具体的属性
 
 
编写样式
 
浏览器中还有一个功能，就是可以直接在浏览器中编写标签的样式，效果直接就可以看到
 
截图框的位置即可编写样式
 
 
编写JS代码
 
 
 获取网页源代码，调试程序
 
 
 

1.应用场景
 
主要用于前端开发, 提升工作效率.
2.学习/操作
 
 
TBD
 
3.问题/补充
 
 
TBD
 
4.参考
 
https://blog.csdn.net/sinat_35299495/article/details/105715237  //50个前端开发小技巧总结，提升你的竞争力，抓住金三银四的小尾巴
后续补充
 
...
 
 
 
 

写在前面




和备忘录篇一样，这篇文章旨在总结Unity开发中的一些设计技巧，当然这里只是我通过所见所闻总结的东西，如果有不对之处欢迎指出。




技巧1：把全局常量放到一个单独的脚本中


很多时候我们需要一些常量，例如是否输出Log，正式服务器和测试服务器的IP等等，我们可以把这些常量写在同一个脚本里，并设置属性为public static，然后在其他脚本里直接访问该变量即可。当代码量越来越大时，你会发现这样会减少很多查找常量的时间。而且，这样更改时也非常方便，例如当需要发布新版本时，你只要把该脚本中的log开关设为false就可以了。又或者公司更改了服务器地址，一个简单字符串的更改就可以了。


例如，我们在名为Const.cs的脚本中添加如下代码：

public class Const {

	public static bool IsWriteMsg = true;

	public static bool IsDebugBuild = true;
}

其中IsWriteMsg表明是否需要将文本写到本地以供查看，IsDebugBuild表明是不是Debug模式（一般用于控制是否输出Log）。





技巧2：把全局函数放到一个单独的脚本中


和上一条类似，有时我们需要一些经常使用的、且无关对象的函数，例如解析系统某些特定含义的字符串、得到角色在场景中的位置等。我们可以把这些函数写在同一个脚本里，并设置函数属性为public static即可。




技巧3：保存字符串和JSON信息


我们经常需要和字符串打交道，例如得到服务器传来的消息等等，而且想要保存它们，复制粘贴又太麻烦了，作为一个很懒的程序员，怎么能一直重复做一件事情呢！
例如，我们在名为GlobalFunc.cs（即为技巧2中提到的全局函数脚本）的脚本中，添加如下代码（关于Json部分，需要LitJson插件，可参见这篇博文）（注意：其中有用到技巧1中的Const.cs脚本中的变量）：

using UnityEngine;
using System;
using System.Text;
using System.IO;
using System.Collections;
using System.Collections.Generic;
using LitJson;

public class GlobalFunc {

	static public void SaveJson(object obj, string filepathandname)
	{
		Debug.LogWarning("========> SaveJson:   " + filepathandname);
		
		// ELIMINATE WARNING
		//string levelnameLower = Application.loadedLevelName.ToLower();
		
		if(Application.isEditor)
		{
			string file = "./" + filepathandname;
			
			if (File.Exists(file) )
			{
				File.Delete (file);
			}
			
			System.IO.TextWriter writer = new System.IO.StreamWriter(file, false);
			
			LitJson.JsonWriter jw = new JsonWriter( writer as System.IO.TextWriter );
			
			jw.PrettyPrint = true;
			
			try
			{
				LitJson.JsonMapper.ToJson( obj, jw );
			}
			catch(Exception e)
			{
				UnityEngine.Debug.LogError(e);	
			}
			
			writer.Close();
		}
	}
	
	static public void SaveText(string tex, string filepathandname)
	{
		if(Const.IsWriteMsg || !Const.IsDebugBuild)
		{
			return;
		}
		Debug.LogWarning("========> SaveJson:   " + filepathandname);
		
		//string levelnameLower = Application.loadedLevelName.ToLower();
		
		string file = "";
		
		if(Application.platform == RuntimePlatform.Android )
		{
			file = Application.persistentDataPath+"/"+filepathandname;
		}
		else if(Application.isEditor)
		{
			file = "./" + filepathandname;
		}
		if(file == "")
		{
			return ;
		}
		if (File.Exists(file) )
		{
			File.Delete (file);
		}
		System.IO.TextWriter writer = new System.IO.StreamWriter(file, false);
		
		writer.Write(tex);
		
		writer.Close();
	}
	
	static public string LoadText(string filepathandname)
	{
		Debug.LogWarning("========> LoadJson: " + filepathandname);
		System.IO.TextReader r = new System.IO.StreamReader("./" + filepathandname);
		string tmp = r.ReadToEnd();

		r.Close();

		return tmp;
	}
}







技巧4：自定义弹出框


弹出框，类似于Windows编程中常见的各种MessageBox，它们有固定的界面格式，程序员一般只要指定style、title和内容即可。
详见这篇博文。




技巧5：暂停游戏


关于Time.timeScale来暂停游戏的细节，请见《Unity备忘录篇》。

如果使用Time.timeScale = 0来暂停游戏，那么下面两种方法可能可以帮助你：

把所有的移动都放到FixedUpdate中（不太可能）
Update中，所有的移动都使用Time.deltaTime控制

 



 当然，还有另一种比较麻烦但扩展性很强的方法。如果一个物体需要一个暂停动作，例如停止动画等等，可以让它的脚本实现OnPauseGame()函数，而在重启时实现OnResumeGame() 函数。那么暂停游戏可以通过调用所有对象上的OnPauseGame()函数：


 
 
Object[] objects = FindObjectsOfType (typeof(GameObject));
foreach (GameObject go in objects) {
    go.SendMessage ("OnPauseGame", SendMessageOptions.DontRequireReceiver);
}
 

 然后再调用OnResumeGame() 进行重启。


 



 一个基本的脚本类似下面这样：


 
 
protected bool paused;
 
void OnPauseGame ()
{
    paused = true;
}
 
void OnResumeGame ()
{
    paused = false;
}
 
void Update ()
{
    if (!paused) {
	// do movement
    }
}
 
这样方法有一个非常大的好处就是，你可以自己定制所有物体在暂停和重启时的行为，例如存储和加载数据等等。


 





技巧6：使用Vector3.Lerp移动物体


我们可以使用Lerp函数实现在两个点——start和to，进行插值，其中t是插值比率。

transform.position = Vector3.Lerp(start, to, t);

当t<=0时，Lerp函数返回start；当t>=1时，Lerp函数返回to。因此，如果你想要在某个时间内把物体从start移动到to位置，你可以通过不断增加t（通常每帧增加的值为
Time.deltaTime/NumberOfSecondsToComplete）来实现。像下面这样：


Vector3 _start;
Vector3 _target;
float _t;
 
void Update()
{
     transform.position = Vector3.Lerp(_start, _target, _t);
     _t += Time.deltaTime/2; //Take 2 seconds
}
 
public void SetTargetPosition(Vector3 newTargetPosition)
{
    _start = transform.position;
    _target = newTargetPosition;
    _t = 0;
}

还有一种情况就是，你想要从物体的当前位置开始进行一个平滑的移动。这时，我们需要把start替换成物体本身的位置，transform.position。


void Update(){
    transform.position = Vector3.Lerp(transform.position, target.position, Time.deltaTime);
}





 

  一些例子使用Time.time作为插值比率。但这种方法会发生一些莫名其妙的错误，因此你的移动可能只会发生在游戏的一开始几秒钟。
 
 




Shader中避免If语句


可以使用lerp和step函数来代替使用If语句。例如：

/* y1, y2, b1, b2 */
float4 constants = float4(5, 6, 2, 3);

float2 tmp = 10 * constants.xy + constants.zw;
x = lerp(tmp[1], tmp[0], step(x, 0.5));



参考：
http://gamedev.stackexchange.com/questions/45398/avoid-if-statements-in-directx-10-shaders

http://gamedev.stackexchange.com/questions/59476/using-two-shaders-instead-of-one-with-if-statements

 
 
最近俩月正好用 vue 做了一个大数据的项目，积累了很多心得。今天终于有机会分享出来了。
 
 
组件（component）的使用
 
vue 提供的模块化无疑是提高开发效率的神器，而且对于后期代码优化和维护也提供的极大地便利。
 
组件使用简介
 
vue 提供了组件功能，组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件
 
局部组件引用方式
import A from '@/component/A'
export default {
 data () {},
 components: { A }
}
 
全局组件引用方式
// index.js 文件
import A from '@/component/A'
A.install = function (Vue) {
 Vue.component(A.name, A)
}
export {
 A
}
// main.js 文件
import { A } from './components/index'
Vue.use(A)
 
这里针对引入全局组件有一个优化小技巧，上面的方式引入全局组件需要同时维护 index.js 文件和 main.js 文件很麻烦。采用下面的代码可以只维护 index.js 文件即可
 
// index.js 文件
import A from '@/component/A'
A.install = function (Vue) {
 Vue.component(A.name, A)
}
function InstallAll(Vue) {
 Vue.use(A)
}
export {
 A,
 InstallAll
}
// main.js 文件
import { InstallAll } from './components/index'
InstallAll(Vue)
 
验证码组件的复用
 
手机号 + 验证码进行登录已经是目前主流的登录方式之一了。但是一个项目要使用验证码的地方非常多，像登录、注册、修改密码、信息再次确认的时候都会进行二维码请求。每个地方重写验证码逻辑很麻烦，所以验证码是需要抽象出来的组件的。
 
验证码通常会对接多个接口，或者是一个接口但是需要传递获取验证码的类型。而这些接口通常都需要一个手机号。因此验证码需要接收俩个参数：phone, type。自身完成单击操作和读秒操作即可，不需要对引用的地方产生任何影响。
 
// 最后每个页面调用的时候大概涨这个样子
<auth-code :phone="phone" type="1"></auth-code>
 
收藏组件的复用
 
收藏功能使用的频率要比验证码更高，当然也更难。
 
像我最近做的大数据项目，用户可以对视频、音乐、话题进行收藏。同时他们出现的地方也非常多，像视频列表、音乐列表、话题列表、视频详情、音乐详情、话题详情... ... 都会有收藏的功能，不抽象成一个组件同样的逻辑写好几个地方后期维护是及其困难的。
 
像这种收藏，通常都会需要一个 id，是否收藏状态，以及完成收藏后的一系列的跳转功能。因此需要俩个参数: id 和 status。和 complete 回调方法
 
// 最后每个页面调用的时候大概涨这个样子
<collection :id="id" :status="status" @complete="complete"></collection>
 
我上面提到我会收藏音乐、视频、话题，很显然是三个收藏接口。难道要写三个收藏组件么？当然不是，既然同属于收藏功能，自然是一个组件搞定了。再加一个 type 参数区别一下即可了
 
// 最后每个页面调用的时候大概涨这个样子
<collection :id="id" :status="status" type="video" @complete="complete"></collection>
 
这样每次用到收藏的时候我只需要复制这一行代码就可以了
 
总结
 
第三方 UI 库会给我们引入非常多好用的组件，像轮播图、表单、图片上传。但是这些都是跟业务无关的组件，而我们在做项目的时候时候肯定会碰到大量重复的功能。为了代码的易维护性一定要有良好的组件抽象能力。合理运用好 component 功能。
 
上面提到的验证码和收藏功能使用次数频繁，我通常都会当做全局组件处理（个人会把使用次数 > 1 的组件当成全剧组件），但是有的页面及其复杂，一个页面上万行代码后期查找肯定费事巴拉的。也一定要对其进行拆分处理不要一个组件写到尾。针对这种情况我通常都会采用局部组建去维护，提高界面的简洁程度。
 
filters 使用技巧
 
数据过滤无疑也是 vue 的重要功能之一。像时间、数字的过滤，实在是太频繁了。掌握 filter 无疑能大大提高代码幸福度和可维护性
 
filter 使用简介
 
同 component 一样 filter 也分为全局过滤器和局部过滤器。
 
全局过滤器
vue.filter('date', function (value1, value2, ...) {
 return '处理之后的结果'
})
 
局部过滤器
export default {
 filters: {
 date (value1, value2, ...) {
 return '处理之后的结果'
 }
 }
}
 
使用方式(不管是全局的还是局部的使用方式都一样):
// 不带参数
{{value1 | date}}
// 带参数
{{value1 | date(value2, ...)}}
// 多个过滤器
{{value1 | filter1 | filter2}}
 
注意：第一个参数是管道符 (|) 前面的值
 
常见的使用场景
 
我大部分都是使用的全局过滤器。像局部过滤器，一是获取到原始数据的时候可以直接进行处理，二是发现早期使用的局部过滤器都升级为全局过滤器了。如果你有好的局部过滤器场景欢迎评论
 
日期处理。后端传的数据要么是 2019-03-14 09:00:00 这种字符串类型的。要么就是时间戳类型的，但是界面通常只会展示一部分，比如只展示年月日，或者是月日啊。因此有个全局 date 过滤器，幸福到哭。这个过滤器最好是同时支持以上俩种格式。要是不知道
数字处理。像保留几位小数、超过多少位以字母 w 代替，或者是汉字“亿”都很常见
上面俩种是我碰到的最多的，也欢迎你评论补充。
 
总结
 
该用 filters 的地方千万别手软，超过一处就要写成公共的。否则后期要是逻辑处理的不对，你不知道哪些地方用了相同的处理逻辑很容易造成 bug 漏改的情况。
 
mixins 使用场景
 
这个属性也分为全局和局部使用，全局使用了将会对之后的所有组件产生影响。因此我不建议在业务代码中使用全局 mixins。而且感觉全局 mixins 使用起来不利于代码维护，你想突然在 template 中使用了一个一个函数第一想法肯定是去 methods 中查找，找不到就很难受了。而且破坏性也比较大，所以我都采用局部注入的方式。让别人知道这里采用了 mixins，要是遇到了一些奇怪的情况，他知道这里有 mixins 就会主动去这里面查看相关代码了。
 
这个属性我用的最多的是引用第三方的列表库的时候他通常都会有个 formatter 的格式化数据属性。这里 filters 是用不了的。但像列表对于数据的处理重复性是特别多的，因此 注入一个 mixins 就方便多了。
 
一些第三方库时用到的技巧
 
router 中用到的一些技巧
 
钩子函数 beforeEach 做路由跳转的时候会先执行 beforeEach 。因此你可以在路由跳转的时候进行判定是否可以跳转，常见场景就是判定用户是否登录，有没有某个页面的权限
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
router.beforeEach((to, form, next) => {})
 

 
 
vuex 中用到的一些技巧
 
action 的技巧 action 是可以异步执行方法的。我在业务中通常会遇到这样的情况：获取某种信息，但是这个信息接口多个页面都用到了，每个页面都处理一下这个接口真的很麻烦。所以传入 vuex 中共享这部分信息就十分幸福了。因为是异步的所以用到了 action。提供一个参考代码：
actions: {
 getMemberShip ({ state, commit }) {
 return new Promise((resolve, reject) => {
 if (!state.memberShip) {
 // memberShip 为 ajax 请求方法
 memberShip(state.userInfo).then(res => {
 commit('setMemberShip', res)
 resolve(res)
 }).catch(err => {
 reject(err)
 })
 } else {
 resolve(state.memberShip)
 }
 })
 },
}
 
这个是我定义的一个获取会员套餐的情况，会员套餐很多个页面都会用到。但是他改动次数频繁，而且也没必要用户一登录就去加载，因此使用 action 存起来。如果没有这个值就执行 ajax 请求，如果有就直接返回结果。
 
echarts
 
echarts 图表界的老大哥了，支持 N 多种图表，配置项说好几千应该没夸大其词吧。不过也正因为繁多的配置项才给了你更多的自由配置的可能。那用 echarts 有什么技巧呢？
 
快速定位配置项
 
 
 
echarts 包含标题、图例、提示框、标注、标线... ... 等控件，调整个样式真的不好找。但是现在官方新加入了一个术语速查手册，之前我都是去旧官方上查，现在新官方上有了这个东西可是有福了。我需要调整那个控件的效果在上面一点就带我到相应的 API 简直是好用到飞起。
 
 
 
 
2. 优化项目代码 不是专门的数据展示项目，用到的图表类型其实不多。通常是一个图表反复用，而 echarts 配置一个图表通常都好几十行代码。把这个配置项拿出去只传进来一个参数代码多整洁。这个实现特别简单，要是还没这么做建议马上优化你的项目哦axios
 
axios 是类似于 ajax 的的第三方控件。所以这个我也是蛮有想法跟大家交流的。
 
我在开发中遇到一个坑，官方文档说支持 IE，但是 IE 压根不支持。是因为 axios 底层是用 promise 写的，IE 压根还不支持这个属性，因此需要引入 profill 。解决办法是引入 babel-polyfill
// 步骤1 
npm install --save babel-polyfill
// 步骤2 在 vue.config.js 文件中加入以下内容
module.exports = {
 configureWebpack: config => {
 return {
 entry: {
 app:['babel-polyfill', './src/main.js']
 }
 }
 }
}