写给刚入行的程序员

源地址: 顶级程序员

1.作为前端开发者,使用双显示器能大幅提高开发效率。

2.学编程最好的语言不是PHP,是English。

3.自己做的东西交付之前先测试一遍。

4.问别人之前最好先自己百度,google一下,以免问出太低级的问题。

5.把觉得不靠谱的需求放到最后做,很可能到时候需求就变了,或者取消了。

6.读好书,垃圾书会浪费你时间。

7.不要炫技,面向人脑编程更便于维护。

8.没事别重复造轮子,你造的轮子大多数时候只有你觉得好用。接手你的轮子的人会在背后骂你上百遍。

9.不要先写框架再写实现。最好反过来,从原型中提炼框架。

10.新技术一定不要找书,书一旦印出来就过时了。

11.请勿久坐,多喝水,尤其是遇到很久都解决不了的问题的时候,多走动走动。

12.考虑可维护性比考虑性能更重要。

13.越难解决的bug往往犯的错误越低级。

14.比起鼓励师,不如给程序员找一个靠谱的产品经理。

15.熬夜低效率写代码,不如好好睡觉。

16.你遇到的问题,大多数人都遇到过,并且网上都有完整的解决方案,你找不到,只是你懒得去找。

17.多沟通,不少加班工作是由于沟通少造成的。

18.普通程序员+google=超级程序员。实在不行,百度也可以,学会利用搜索引擎来辅助自己解决问题。

19.早点找女朋友,生活作息会更健康。你懂的!

20.永远别小看程序媛。即使是青铜,说不定背后有个王者在帮她。

Ant Design

一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。

官网: https://ant.design/index-cn
文档: https://ant.design/docs/react/introduce-cn

Ant Design of React
这里是 Ant Design 的 React 实现,开发和服务于企业级后台产品。

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 全链路开发和设计工具体系。

支持环境

  • 现代浏览器和 IE9 及以上(需要 polyfills)。
  • 支持服务端渲染。
  • Electron

安装

使用 npm 或 yarn 安装#
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

  1. $ npm install antd --save
  2. $ yarn add antd

如果你的网络环境不佳,推荐使用 cnpm。

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。

我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过UNPKG 进行下载。

强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。
注意:3.0 之后引入 antd.js 前你需要自行引入 moment。

示例

  1. import { DatePicker } from 'antd';
  2. ReactDOM.render(<DatePicker />, mountNode);

引入样式:

  1. import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

按需加载

下面两种方式都可以只加载用到的组件。

  • 使用 babel-plugin-import(推荐)。

    1. // .babelrc or babel-loader option
    2. {
    3. "plugins": [
    4. ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
    5. ]
    6. }

    注意:webpack 1 无需设置 libraryDirectory。

    然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。

    1. // babel-plugin-import 会帮助你加载 JS 和 CSS
    2. import { DatePicker } from 'antd';
  • 手动引入

    1. import DatePicker from 'antd/lib/date-picker'; // 加载 JS
    2. import 'antd/lib/date-picker/style/css'; // 加载 CSS
    3. // import 'antd/lib/date-picker/style'; // 加载 LESS

Vant - 有赞移动端 Vue 组件库


logo



logo


A Vue.js 2.0 Mobile UI at YouZan

Build Status
downloads
Coverage Status
npm version
license

特性

  • 50+ 个经过有赞线上业务检验的组件
  • 单元测试覆盖率超过 90%
  • 完善的中英文文档和示例
  • 支持 babel-plugin-import
  • 支持 TypeScript
  • 支持 SSR

安装

  1. npm i -S vant

快速上手

方式一. 使用 babel-plugin-import (推荐)

  1. # 安装 babel-plugin-import 插件
  2. npm i babel-plugin-import -D
  1. // 在 .babelrc 或 babel-loader 中添加插件配置
  2. // 注意:webpack 1 无需设置 libraryDirectory。
  3. {
  4. "plugins": [
  5. ["import", {
  6. "libraryName": "vant",
  7. "libraryDirectory": "es",
  8. "style": true
  9. }]
  10. ]
  11. }

接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。

  1. import { Button } from 'vant';

方式二. 按需引入组件

  1. import Button from 'vant/lib/button';
  2. import 'vant/lib/vant-css/base.css';
  3. import 'vant/lib/vant-css/button.css';

方式三. 导入所有组件

  1. import Vue from 'vue';
  2. import Vant from 'vant';
  3. import 'vant/lib/vant-css/index.css';
  4. Vue.use(Vant);

CDN

  1. <!-- 引入样式 -->
  2. <link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
  3. <!-- 引入组件 -->
  4. <script src="https://unpkg.com/vant/lib/vant.min.js"></script>

更多内容请参考 快速上手.

贡献代码

修改代码请阅读我们的 开发指南

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

浏览器支持

现代浏览器以及 Android 4.0+, iOS 6+.

手机预览

可以手机扫码以下二维码访问手机端 demo:

qrcode

链接

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

前端框架Semantic-ui

官网: http://www.semantic-ui.cn/

更快地设计赏心悦目的网站

Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。

简洁的 HTML

Semantic UI中词语和类(css clases)是可以相互替换的概念

直观的使用自然语言中的语法,词汇和语序等来定义一个类(css class)。

取BEM 和 SMACSS 的精华,同时使之更易于使用。

直观明了的 Javascript

Semantic 使用被叫做 behaviors 的简单短语来触发功能

开发者可以更改任何组件中的配置来设置该组件中的某一设置

化繁为简的调试

记录日志使您很方便的追踪到性能瓶颈,而不必去堆栈轨迹中发掘问题所在。

官网: http://www.semantic-ui.cn/

MUI一个以IOS为参考的移动端前端框架

mui

性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

参考文档

mui官网文档使用Jekyll 构建,立即查看

快速体验

在线下载或扫描如下二维码下载Hello MUI,可在手机上体验MUI的控件UI及能力展示;



在线交流

若你在使用过程中有任何经验、想法、疑惑,都可以在问答社区 发起文章,和其它mui用户一起交流;

License

mui遵循MIT License;

开发工具

mui组件已被封装成HBuilder代码块,只需要简单几个字符,就可以快速生成各个组件对应的HTML代码,因此和Hbuilder两个一起用,效果会更好;



一个markdown编辑器editor.md

Editor.md






Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.

Features

README & Examples (English)


Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。

editormd-screenshot

主要特性

Examples

https://pandao.github.io/editor.md/examples/index.html

Download & install

Github download

Bower install :

  1. bower install editor.md

Usages

HTML:

```html


cms想法

关于字体图标

后台模块或按钮图标采用 http://www.iconfont.cn/ 的图标,
智能解析iconfont.css提取所有图标

关于模块

新建模块需要设置:
模块标识
模块名称
模块字段 (标识, 名称, 类型, 默认值, 新增验证函数, 更新验证函数)
  // 默认值可读取配置
  // 验证函数自动读取验证辅助类的方法和文档
列表显示字段
  // 字段显示有格式化方式, 自动读取格式化辅助类和文档
详情页显示字段
添加数据界面显示字段
编辑页面显示字段

排序字段和方式(asc|desc|自定义)
搜索字段
删除数据方式 (软删除, 直接删除)

验证辅助类

设计思想

  1. class Validate {
  2. public function username($value, $msg, $params...) {
  3. }
  4. }

分两个, 一个系统, 一个用户自定义

想到的辅助方法:
用户名,密码,邮箱,手机号,不能为空,长度限制,只允许英文,正则

通过获取类的注释, 在需要的地方列出验证方式列表

字段和数据格式化辅助类

设计思想

  1. class Format{
  2. public function toImgTag($value, $params....) {
  3. }
  4. }

分两个, 一个系统, 一个用户自定义

想到的辅助方法:
时间,状态,图片,关联表字段 (表名, 字段名, 分隔符)

通过获取类的注释, 在需要的地方列出格式化辅助方法列表

php内置服务器使用方法

1 启动Web服务器

  1. $ cd ~/public_html
  2. $ php -S localhost:8000

终端输出信息:

  1. PHP 5.4.0 Development Server started at Thu Jul 21 10:43:28 2011
  2. Listening on localhost:8000
  3. Document root is /home/me/public_html
  4. Press Ctrl-C to quit

当请求了 http://localhost:8000/http://localhost:8000/myscript.html 地址后,终端输出类似如下的信息:

  1. PHP 5.4.0 Development Server started at Thu Jul 21 10:43:28 2011
  2. Listening on localhost:8000
  3. Document root is /home/me/public_html
  4. Press Ctrl-C to quit.
  5. [Thu Jul 21 10:48:48 2011] ::1:39144 GET /favicon.ico - Request read
  6. [Thu Jul 21 10:48:50 2011] ::1:39146 GET / - Request read
  7. [Thu Jul 21 10:48:50 2011] ::1:39147 GET /favicon.ico - Request read
  8. [Thu Jul 21 10:48:52 2011] ::1:39148 GET /myscript.html - Request read
  9. [Thu Jul 21 10:48:52 2011] ::1:39149 GET /favicon.ico - Request read

2 启动web服务器时指定文档的根目录

  1. $ cd ~/public_html
  2. $ php -S localhost:8000 -t foo/

终端显示信息:

  1. PHP 5.4.0 Development Server started at Thu Jul 21 10:50:26 2011
  2. Listening on localhost:8000
  3. Document root is /home/me/public_html/foo
  4. Press Ctrl-C to quit

如果你在启动命令行后面附加一个php脚本文件,那这个文件将会被当成一个“路由器”脚本。这个脚本将负责所有的HTTP请求,如果这个脚本执行时返回FALSE,则被请求的资源会正常的返回。如果不是FALSE,浏览里显示的将会是这个脚本产生的内容。

3 使用路由器脚本

在这个例子中,对图片的请求会返回相应的图片,但对HTML文件的请求会显示“Welcome to PHP”:

  1. <?php
  2. // router.php
  3. if (preg_match('/\.(?:png|jpg|jpeg|gif)$/', $_SERVER["REQUEST_URI"])) {
  4. return false; // serve the requested resource as-is.
  5. } else {
  6. echo "<p>Welcome to PHP</p>";
  7. }
  8. ?>

执行:

  1. $ php -S localhost:8000 router.php

4 判断是否是在使用内置web服务器

通过程序判断来调整同一个PHP路由器脚本在内置Web服务器中和在生产服务器中的不同行为:

  1. <?php
  2. // router.php
  3. if (php_sapi_name() == 'cli-server') {
  4. /* route static assets and return false */
  5. }
  6. /* go on with normal index.php operations */
  7. ?>

执行:

  1. $ php -S localhost:8000 router.php

这个内置的web服务器能识别一些标准的MIME类型资源,它们的扩展有:.css, .gif, .htm, .html, .jpe, .jpeg, .jpg, .js, .png, .svg, and .txt。对.htm 和 .svg 扩展到支持是在PHP 5.4.4之后才支持的。

5 处理不支持的文件类型

如果你希望这个Web服务器能够正确的处理不被支持的MIME文件类型,这样做:

  1. <?php
  2. // router.php
  3. $path = pathinfo($_SERVER["SCRIPT_FILENAME"]);
  4. if ($path["extension"] == "ogg") {
  5. header("Content-Type: video/ogg");
  6. readfile($_SERVER["SCRIPT_FILENAME"]);
  7. }
  8. else {
  9. return FALSE;
  10. }
  11. ?>

执行:

  1. $ php -S localhost:8000 router.php

如果你希望能远程的访问这个内置的web服务器,你的启动命令需要改成下面这样:

6 远程访问这个内置Web服务器

  1. $ php -S 0.0.0.0:8000

这样你就可以通过 8000 端口远程的访问这个内置的web服务器了。

php-angular模板引擎

源码地址: https://github.com/php-angular/php-angular

仿angularjs的php模板引擎

目前实现了一下几种标签和用法

标签

  1. php-if
  2. php-for
  3. php-foreach
  4. php-repeat
  5. php-show
  6. php-hide
  7. php-include
  8. php-init
  9. php-exec

变量输出
{$var}
{$array.name}
{$array[‘name’]}
{:func()}
{$var ? ‘’ : ‘’}

结合框架使用

具体的框架驱动可以在 /drivers 目录中找到

直接使用方法 /test/index.php

  1. <?php
  2. require '../lib/angular.php';
  3. // 配置
  4. $config = array(
  5. 'tpl_path' => './view/',
  6. 'tpl_suffix' => '.html',
  7. 'cache_path' => './cache/',
  8. 'attr' => 'php-',
  9. 'debug' => true,
  10. );
  11. // 实例化
  12. $view = new Angular($config);
  13. // 数据
  14. $data = array(
  15. 'title' => 'Hello PHP Angular',
  16. 'list' => array(
  17. array('name' => 'name_1', 'email' => 'email_1@qq.com'),
  18. array('name' => 'name_2', 'email' => 'email_2@qq.com'),
  19. array('name' => 'name_3', 'email' => 'email_3@qq.com'),
  20. array('name' => 'name_4', 'email' => 'email_4@qq.com'),
  21. array('name' => 'name_5', 'email' => 'email_5@qq.com'),
  22. ),
  23. );
  24. // 向模板引擎设置数据
  25. $view->assign($data);
  26. // 输出解析结果
  27. $view->display('index');
  28. // 获取输出结果
  29. // $view->fetch('index');

模板实例 /test/view/index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>php-angular</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style type="text/css">
  8. .box {
  9. padding: 10px;
  10. font-size: 12px;
  11. margin: 10px 5px;
  12. background: #CCC;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="box" php-show="$title">{$title}</div>
  18. <div class="box" php-hide="$title">如果title的值为空, 则可以显示这条消息, 否则不显示</div>
  19. <div class="box">
  20. <span>foreach by [1,2,3,4,5]</span>
  21. <ul>
  22. <li php-foreach="[1,2,3,4,5] as $i">foreach {$i}</li>
  23. </ul>
  24. </div>
  25. <div class="box">
  26. <span>repeat by [1,2,3,4,5]</span>
  27. <ul>
  28. <li php-repeat="[1,2,3,4,5] as $i">foreach {$i}</li>
  29. </ul>
  30. </div>
  31. <div class="box" php-show="$list">
  32. <span>foreach by $list as $item</span>
  33. <ul>
  34. <li php-foreach="$list as $item">name:{$item.name} -- email: {$item.email}</li>
  35. </ul>
  36. </div>
  37. <div class="box" php-show="$list">
  38. <span>repeat by $list as $item</span>
  39. <ul>
  40. <li php-repeat="$list as $item">name:{$item.name} -- email: {$item.email}</li>
  41. </ul>
  42. </div>
  43. <div class="box" php-if="$list">
  44. <span>foreach by $list as $key => $item</span>
  45. <ul>
  46. <li php-foreach="$list as $key => $item">{$key} -- name:{$item.name} -- email: {$item.email}</li>
  47. </ul>
  48. </div>
  49. <div class="box">
  50. <span>for by ($i = 1; $i <= 10; $i++;)</span>
  51. <ul>
  52. <li php-for="$i = 1; $i <= 10; $i++">for {$i}</li>
  53. </ul>
  54. </div>
  55. <div class="box" php-if="$list">
  56. <span>$list 不为空</span>
  57. </div>
  58. </body>
  59. </html>

解析结果 /test/cache/6a992d5529f459a44fee58c733255e86.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>php-angular</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style type="text/css">
  8. .box {
  9. padding: 10px;
  10. font-size: 12px;
  11. margin: 10px 5px;
  12. background: #CCC;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <?php if ($title) { ?><div class="box" ><?php echo $title; ?></div><?php } ?>
  18. <?php if (!($title)) { ?><div class="box" >如果title的值为空, 则可以显示这条消息, 否则不显示</div><?php } ?>
  19. <div class="box">
  20. <span>foreach by [1,2,3,4,5]</span>
  21. <ul>
  22. <?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
  23. </ul>
  24. </div>
  25. <div class="box">
  26. <span>repeat by [1,2,3,4,5]</span>
  27. <ul>
  28. <?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
  29. </ul>
  30. </div>
  31. <?php if ($list) { ?><div class="box" >
  32. <span>foreach by $list as $item</span>
  33. <ul>
  34. <?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
  35. </ul>
  36. </div><?php } ?>
  37. <?php if ($list) { ?><div class="box" >
  38. <span>repeat by $list as $item</span>
  39. <ul>
  40. <?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
  41. </ul>
  42. </div><?php } ?>
  43. <?php if ($list) { ?><div class="box" >
  44. <span>foreach by $list as $key => $item</span>
  45. <ul>
  46. <?php foreach ($list as $key => $item) { ?><li ><?php echo $key; ?> -- name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
  47. </ul>
  48. </div><?php } ?>
  49. <div class="box">
  50. <span>for by ($i = 1; $i <= 10; $i++;)</span>
  51. <ul>
  52. <?php for ($i = 1; $i <= 10; $i++) { ?><li >for <?php echo $i; ?></li><?php } ?>
  53. </ul>
  54. </div>
  55. <?php if ($list) { ?><div class="box" >
  56. <span>$list 不为空</span>
  57. </div><?php } ?>
  58. </body>
  59. </html>

写了个jquery的自动填充form插件

最近发现每次做后台编辑数据的时候, 给表单设置默认值都很麻烦, 这次干脆写了一个jquery插件, 直接自动填充表单, 省去php一个一个的写, 这样代码可读性也好了很多.

jquery.autofill.js

  1. jQuery.fn.extend({
  2. autofill: function (data) {
  3. if (!data || !$.isPlainObject(data)) {
  4. return;
  5. }
  6. for (var name in data) {
  7. if ($.isArray(data[name])) {
  8. var field = $('[name="' + name + '[]"]', this);
  9. field.each(function () {
  10. if (data[name].indexOf($(this).val()) >= 0) {
  11. $(this).attr('checked', 'checked');
  12. }
  13. });
  14. } else {
  15. var field = $('[name="' + name + '"]', this);
  16. field.each(function () {
  17. switch ($(this).attr('type')) {
  18. case 'radio':
  19. if ($(this).val() === data[name].toString()) {
  20. $(this).attr('checked', 'checked');
  21. }
  22. break;
  23. default:
  24. $(this).val(data[name]);
  25. break;
  26. }
  27. });
  28. }
  29. }
  30. }
  31. });

使用方法 ./test.php

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  7. </head>
  8. <body>
  9. <div class="container">
  10. <form action="?" method="post" id="form">
  11. 姓名: <input type="text" name="name" id="" />
  12. <br />
  13. 年龄: <input type="number" name="age" id="" />
  14. <br />
  15. 性别:
  16. <input type="radio" name="sex" value="1" id="" />
  17. <input type="radio" name="sex" value="0" id="" />
  18. <br />
  19. 省份:
  20. <select name="area" id="">
  21. <option value="-1">选择省份</option>
  22. <option value="shanghai">上海</option>
  23. <option value="beijing">北京</option>
  24. <option value="henan">河南</option>
  25. </select>
  26. <br />
  27. 爱好:
  28. <input type="checkbox" name="hobby[]" value="book" id="" /> 看书
  29. <input type="checkbox" name="hobby[]" value="coding" id="" /> 写代码
  30. <input type="checkbox" name="hobby[]" value="games" id="" /> 打游戏<br />
  31. 简介:
  32. <textarea name="content"></textarea>
  33. <br />
  34. <input type="submit" value="提交" />
  35. </form>
  36. <!-- 这里是数据 -->
  37. <div class="hidden" id="data">
  38. <?php
  39. $data = [
  40. 'name' => 'shuai',
  41. 'age' => '25',
  42. 'area' => 'henan',
  43. 'sex' => 0,
  44. 'hobby' => ['book', 'games'],
  45. 'content' => 'hello world',
  46. ];
  47. echo json_encode($data);
  48. ?>
  49. </div>
  50. </div>
  51. <script src="jquery.min.js" type="text/javascript"></script>
  52. <script src="jquery.autofill.js" type="text/javascript"></script>
  53. <script type="text/javascript">
  54. $(function () {
  55. var data = $.parseJSON($('#data').text());
  56. $('#form').autofill(data);
  57. });
  58. </script>
  59. </body>
  60. </html>

访问