0%

发表于 更新于 分类于 阅读次数：
本文字数： 5.2k 阅读时长 ≈ 5 分钟

2017年8月19日 上午11:34

官方网站：https://phpdoc.org/

起因：我最近在看TP的源码，想做出一个html文档作为辅助

牢骚

  1. 官方网站中的system requrement，能不能标明那些是必须的、哪些是附加的！出现错误的时候至少排除不是环境的问题
  2. 官方网站中能不能有一个Q&A，出了错我都不知道去哪找，百度中的资料，大家的情况基本上都不一样，抄来抄去，不但学不到东西、弄不懂原理，而且八成还解决不了问题
  3. phpDocument你行不行，不知道大家用的不同的系统的，能不能说一说不同电脑之间的区别。百度上都没有一个关于mac上用pear安装phpDocument的文档，注意是一个！我安装下来各种报错
  4. 最后埋怨埋怨我
    1. 看资料能不能不着急！尤其是english，你不知道english不好吗！
      1. 把 “PHAR”看成“PEAR”，这不是第一次了。这最起码就浪费了1个多小时
      2. 看Stack Overflow里的文章，先看懂人家的情况和自己一样不，不要就是着急找答案，人家问题你都不仔细看，能找见个屁！
    2. 学习不是一日之工，是水到渠成。还是不要着急，保持一个清晰的思维
  5. TP你能为啥就不按phpDocument的格式写，你瞧不起外国人的东西啊（做的好！）

这次的问题我做的比较好的地方（第三点是最核心的）

  1. 学习phpDocument首先想到是官方文档，先进行了文档的阅读，按着文档的思路来做
  2. 我最后实在解决不了问题1、问题2。是按着官方文档的方法去试的第二种，从百度中乱七八糟的东西中抽出身来。事实证明我是对的
  3. 对于那些报错，我最后觉得是我解决不了的问题，因为他的报错中涉及到了这个软件本身的代码，以及一些php整个原理上的东西。我首先对人家代码不了解，其次我对php整个的运行过程并不熟悉，只是会做不涉及php本质的项目。我既然目前的知识体系不足，就没必要在自己肯定解决不了的问题中徘徊，弄的自己蓬头垢面

附录：

Pear安装过程

1
2
3
4
5
6
7
8
9
10
11
czhdeMacBook-Pro:.ssh czh$ sudo pear channel-discover pear.phpdoc.org
Password:
Adding Channel "pear.phpdoc.org" succeeded
Discovery of channel "pear.phpdoc.org" succeeded
czhdeMacBook-Pro:.ssh czh$ pear install phpdoc/phpDocumentor
Cannot install, php_dir for channel "pear.phpdoc.org" is not writeable by the current user
czhdeMacBook-Pro:.ssh czh$ sudo pear install phpdoc/phpDocumentor
downloading phpDocumentor-2.9.0.tgz ...
Starting to download phpDocumentor-2.9.0.tgz (16,175,113 bytes)
...............................................................................done: 16,175,113 bytes
install ok: channel://pear.phpdoc.org/phpDocumentor-2.9.0

（第一个错）-解决不了

1
2
3
4
5
czhdeMacBook-Pro:thinkphp_3.2.3 czh$ php phpDocumentor.phar -d . -t docs/api
Could not open input file: phpDocumentor.phar
czhdeMacBook-Pro:thinkphp_3.2.3 czh$ sudo php phpDocumentor.phar -d . -t docs/api
Password:
Could not open input file: phpDocumentor.phar

（更改路径之后报的第二个错）—解决不了也

1
2
3
4
5
6
7
8
czhdeMacBook-Pro:thinkphp_3.2.3 czh$  phpdoc -d ./ThinkPHP -t ./docs/api
PHP Warning:  require_once(/dompdf/dompdf/dompdf_config.inc.php): failed to open stream: No such file or directory in /usr/local/pear/share/pear/phpDocumentor/src/phpDocumentor/Bootstrap.php on line 178

Warning: require_once(/dompdf/dompdf/dompdf_config.inc.php): failed to open stream: No such file or directory in /usr/local/pear/share/pear/phpDocumentor/src/phpDocumentor/Bootstrap.php on line 178
PHP Fatal error:  require_once(): Failed opening required '/dompdf/dompdf/dompdf_config.inc.php' (include_path='.:/usr/local/pear/share/pear') in /usr/local/pear/share/pear/phpDocumentor/src/phpDocumentor/Bootstrap.php on line 178

Fatal error: require_once(): Failed opening required '/dompdf/dompdf/dompdf_config.inc.php' (include_path='.:/usr/local/pear/share/pear') in /usr/local/pear/share/pear/phpDocumentor/src/phpDocumentor/Bootstrap.php on line 178
czhdeMacBook-Pro:thinkphp_3.2.3 czh$

我换用PHAR安装后，发现能行了（phpDocumentor.phar方式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
bogon:~ czh$ php phpDocumentor.phar -d test -t docs/api
Collecting files .. OK
Initializing parser .. OK
Parsing files
Parsing /Users/czh/test/test.php
Storing cache in "/Users/czh/docs/api" .. OK
Load cache                                                         ..    0.000s
Preparing template "clean"                                         ..    0.003s
Preparing 17 transformations                                       ..    0.000s
Build "elements" index                                             ..    0.000s
Replace textual FQCNs with object aliases                          ..    0.000s
Resolve @link and @see tags in descriptions                        ..    0.000s
Enriches inline example tags with their sources                    ..    0.000s
Build "packages" index                                             ..    0.000s
Build "namespaces" index and add namespaces to "elements"          ..    0.000s
Collect all markers embedded in tags                               ..    0.000s
Transform analyzed project into artifacts                          ..
Applying 17 transformations
  Initialize writer "phpDocumentor\Plugin\Core\Transformer\Writer\FileIo"
  Initialize writer "phpDocumentor\Plugin\Twig\Writer\Twig"
  Initialize writer "phpDocumentor\Plugin\Graphs\Writer\Graph"
  Execute transformation using writer "FileIo"
  Execute transformation using writer "FileIo"
  Execute transformation using writer "FileIo"
  Execute transformation using writer "FileIo"
  Execute transformation using writer "FileIo"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "twig"
  Execute transformation using writer "Graph"
Unable to find the `dot` command of the GraphViz package. Is GraphViz correctly installed and present in your path?   0.164s
Analyze results and write report to log                            ..    0.000s
bogon:~ czh$

（报的第三个错）（phpDocumentor.phar方式）
说明：phpDocumentor.phar 这个必须在当前目录下（我觉着改改路径其他目录也行，没试）

1
2
bogon:htdocs czh$ php phpDocumentor.phar -d test -t docs/api
Could not open input file: phpDocumentor.phar

看看成果吧！


注：我倒是没琢磨这个具体怎么用，和javadoc有区别

发表于 更新于 分类于 阅读次数：
本文字数： 425 阅读时长 ≈ 1 分钟

2017年8月19日 下午9:18

反思1

  1. 今天看源码看的看的就跳坑里了——自己的脑子一点都不清晰，学也学不进去
  2. 原因就是强迫自己去接受自己知识储配达不到的内容，eg：设计到php运行机制、php这么语言中自己不曾接触的东西，就类似于TP的使用者是不考虑这个框架他在不同系统兼容性好坏，着眼点在于完成功能，但是TP的设计者就得考虑，所以当我们从开发者转为设计者时，要求我们整个的视角会变大、变深，最后有可能由于自身水平有限一下达不到这么高的要求，脑子负载过高，就像cpu一样宕机了
  3. 对框架开发者的要求，同时也是我们能从看框架这个过程中能学到的知识。是扭转我们开发思路的重要一步

反思2

  1. 前两天忘记了php是在Thinkphp之下的。
  2. 在现阶段中，我们把php中的变量也好、函数也好、等等其他内容作为黑盒。
  3. 只需要能分辨出来，以及了解他的作用即可。不做深的研究
  4. 需要大量的去查php手册，这也就说明了基础的重要性

总结在这个学习过程中有哪些事物对自己产生触动

反思 + 问题 + 总结

发表于 更新于 分类于 阅读次数：
本文字数： 2.1k 阅读时长 ≈ 2 分钟

2017年8月19日 上午8:44

这节就开始去阅读源码

对自己的要求

  1. 实时问自己能不能写出这样的代码？
  2. 写出这样的代码需要怎样思考、基础有哪些？
  3. how：我的注释主要使用文档注释
  4. When：弄懂不懂的时候添加注释

步骤

  1. 按照TP手册中的
  2. 用户URL请求
  3. 调用应用入口文件(通常是网站的index.php)
  4. 载入框架入口文件(ThinkPHP.php)
    1. 记录初始运行时间和内存开销
    2. 系统常量判断及定义
  5. 载入框架引导类(Think\Think)并执行Think::start方法进行应用初始化
    1. 设置错误处理机制和自动加载机制
    2. 调用Think\Storage类进行存储初始化(由STORAGE_TYPE常量定义存储类型)
    3. 部署模式下如果存在应用编译缓存文件则直接加载(直接跳转到步骤22)
    4. 读取应用模式(由APP_MODE常量定义)的定义文件(以下以普通模式为例说明)
    5. 加载当前应用模式定义的核心文件(普通模式是 ThinkPHP_Mode_common.php)
    6. 加载惯例配置文件(普通模式是 ThinkPHP_Conf_convention.php)
    7. 加载应用配置文件(普通模式是 Application_Common_Conf/config.php)
    8. 加载系统别名定义
    9. 判断并读取应用别名定义文件(普通模式是 Application_Common_Conf/alias.php)
    10. 加载系统行为定义
    11. 判断并读取应用行为定义文件(普通模式是 Application_Common_Conf/tags.php)
    12. 加载框架底层语言包(普通模式是 ThinkPHP_Lang_zh-cn.php)
    13. 如果是部署模式则生成应用编译缓存文件
    14. 加载调试模式系统配置文件(ThinkPHP_Conf_debug.php)
    15. 判断并读取应用的调试配置文件(默认是 Application_Common_Conf/debug.php)
    16. 判断应用状态并读取状态配置文件(如果APP_STATUS常量定义不为空的话)
    17. 检测应用目录结构并自动生成(如果CHECK_APP_DIR配置开启并且RUNTIME_PATH目录不存在的情况下)
  6. 调用Think\App类的run方法启动应用
    1. 应用初始化(app_init)标签位侦听并执行绑定行为
    2. 判断并加载动态配置和函数文件
    3. 调用Think\Dispatcher::dispatch方法进行URL请求调度
      1. 自动识别兼容URL模式和命令行模式下面的$_SERVER[‘PATH_INFO’]参数
      2. 检测域名部署以及完成模块和控制器的绑定操作(APP_SUB_DOMAIN_DEPLOY参数开启)
      3. 分析URL地址中的PATH_INFO信息
      4. 获取请求的模块信息
      5. 检测模块是否存在和允许访问
      6. 判断并加载模块配置文件、别名定义、行为定义及函数文件
      7. 判断并加载模块的动态配置和函数文件
      8. 模块的URL模式判断
      9. 模块的路由检测(URL_ROUTER_ON开启)
      10. PATH_INFO处理(path_info)标签位侦听并执行绑定行为
      11. URL后缀检测(URL_DENY_SUFFIX以及URL_HTML_SUFFIX处理)
      12. 获取当前控制器和操作，以及URL其他参数
      13. URL请求调度完成(url_dispatch)标签位侦听并执行绑定行为
    4. 应用开始(app_begin)标签位侦听并执行绑定行为
    5. 调用SESSION_OPTIONS配置参数进行Session初始化(如果不是命令行模式)
    6. 根据请求执行控制器方法
      1. 如果控制器不存在则检测空控制器是否存在
      2. 控制器开始(action_begin)标签位侦听并执行绑定行为
      3. 默认调用系统的ReadHtmlCache行为读取静态缓存(HTML_CACHE_ON参数开启)
      4. 判断并调用控制器的_initialize初始化方法
      5. 判断操作方法是否存在，如果不存在则检测是否定义空操作方法
      6. 判断前置操作方法是否定义，有的话执行
      7. Action参数绑定检测，自动匹配操作方法的参数
      8. 如果有模版渲染(调用控制器display方法)
      9. 视图开始(view_begin)标签位侦听并执行绑定行为
      10. 调用Think\View的fetch方法解析并获取模版内容
      11. 自动识别当前主题以及定位模版文件
      12. 视图解析(view_parse)标签位侦听并执行绑定行为
      13. 默认调用内置ParseTemplate行为解析模版(普通模式下面)
      14. 模版引擎解析模版内容后生成模版缓存
      15. 模版过滤替换(template_filter)标签位侦听并执行绑定行为
      16. 默认调用系统的ContentReplace行为进行模版替换
      17. 输出内容过滤(view_filter)标签位侦听并执行绑定行为
      18. 默认调用系统的WriteHtmlCache行为写入静态缓存(HTML_CACHE_ON参数开启)
      19. 调用Think\View类的render方法输出渲染内容
      20. 视图结束(view_end)标签位侦听并执行绑定行为
      21. 判断后置操作方法是否定义，有的话执行
      22. 控制器结束(action_end)标签位侦听并执行绑定行为
    7. 应用结束(app_end)标签位侦听并执行绑定行为
  7. 执行系统的ShowPageTrace行为(SHOW_PAGE_TRACE参数开启并且不是AJAX请求)
  8. 日志信息存储写入

如果你绑定了更多的应用行为的话，流程可能会更加复杂。
如果是部署模式下面的第二次请求的话，上面的流程中的步骤10~21是可以省略的。

发表于 更新于 分类于 阅读次数：
本文字数： 4.7k 阅读时长 ≈ 4 分钟

2017年8月18日 下午5:39

这个文章的内容乱的厉害，用的时候（command+F）关键字查询，千万别一个一个的看，恶心🤢！！！！！！！！！！

js与其他语言的区别

  1. json 以及他的遍历——–新
  2. eval（）——–新
    1. JavaScript eval() 函数
  3. 三种输出————重要】】】】】
    1. JavaScript 消息框
  4. 触发————重要】】】】】】
  5. 标签为对象，css为属性————重要】】】】】】
  6. 无对象方法——–方便
  7. for in——–方便
    1. for…in 语句用于对数组或者对象的属性进行循环操作。
    2. JavaScript for…in 语句
  8. 弱类型——–方便
  9. 就是些处理字符串等其他函数
  10. 触发事件
    总结：最牛的地方是能操控的了html标签和css属性

这就理清了js html css的关系了，共同控制了整个页面

JS遇到问题怎么办

  1. 对出问题的地方去查手册，看手册中没有说限制
  2. 很多时候都是浏览器的问题
    1. 不同浏览器的效果不同
    2. 方法执行结果不同
    3. 有些方法在部分浏览器中不能用
  3. 要看开发者工中的报错
  4. js中的有些事件是不按代码顺序走的，而是按触发来执行的，这一点区别于其他语言，一定要小心

JS分语法，事件，对象，AJAX

1事件：onmouseover 和 onmouseout onclick onmousedown 和 onmouseup onload onkeyup onchange六种（还能传参）
2对象：document操作的自定义对象，windows下的对象（理解思路）
1：windows主要有四大对象history location nacigator screen
2：其他的都是一些小的属性和方法
3：windows是顶层，四大对象是中间，其他的就是属性和方法。一共就三层
3AJAX：格式很死

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
	function showCustomer(str)
	{
		var xmlhttp;    
		if (str=="")
		  {
			  document.getElementById("txtHint").innerHTML="";
			  return;
		  }


		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		 	 xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		 	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }


		xmlhttp.onreadystatechange=function()
		  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			   		 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
			    }
		  }
		xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
		xmlhttp.send();
	}
</script>

参考：
AJAX 教程 | 菜鸟教程
菜鸟教程在线编辑器

Js的一个

发表于 更新于 分类于 阅读次数：
本文字数： 5.5k 阅读时长 ≈ 5 分钟

2017年8月18日 下午3:12

阅读方式：

  1. 一定要结合例子去看
  2. Javascript相关知识 - 简书这个链接是我的主要参考的（熟练的看懂）
  3. 汇总的一个js笔记，有很多的文章JavaScript学习笔记 - 专题 - 简书可以后续的学
  4. 零基础打造自己的 js 类库

js中比较有特点的理解—–语法层

  1. 函数
    1. 函数也是一种类型，那么函数名其实就是一个变量，
    2. 同时，函数也可以当成一个对象，在函数中可以使用this指向本身
    3. 有哪些部分
      1. 属性：需要通过对象来调用
      2. 方法：需要通过对象来调用执行
      3. 过程：当函数作为对象new事件发生时，其中的过程会执行
  2. js的运行机制：定义和执行时不同的（读两次），c语言中遍读遍执行
  3. 闭包：函数中的函数，它的最大用处有两个，
    1. 一个是前面提到的可以读取函数内部的变量，
    2. 另一个就是让这些变量的值始终保持在内存中。有一部分static的作用
    3. javascript深入理解js闭包_javascript技巧_脚本之家中的闭包用途
  4. 作用域链
    1. 其实就是一个如何找变量的过程，和c一样，都是从内向外找。程序是一个俄罗斯套娃
  5. json是js中实现面向对象的方式。也就说，js和PHP一样，面向过程和面向对象都可以
    1. Json可以理解为数组
    2. 也可以理解为只带有变量的对象
  6. var参考：javascript定义全局变量的时候有var和没有var的区别 - CSDN博客
    1. 是局部变量，不带时时全局变量
  7. js数组
    1. 像是c++中的stl
    2. Javascript Array数组初探 - 简书
  8. call方法和apply方法：参考：js之this,call,apply用法
    1. 如果我们调用函数的时候，想让函数里的 this 代表别的对象，而不是当前函数的对象。有什么办法呢？那就只好使用call和apply了
    2. 都知道call的用法了，apply其实是一个意思。只不过是调用参数的形式不一样罢了。
    3. call是一个一个调用参数，而apply是调用一个数组。
  9. 对象原型：参考Javascript相关知识 - 简书
    1. 所有的对象都有一个原型对象，所有的对象都继承原型对象的属性。
  10. 原型链：参考：Javascript相关知识 - 简书
    1. 实现：Man.prototype = new Human();// Man的原型指向了Human
    2. 作用：
      1. 指定两个函数（对象）之间的继承关系
      2. 解决每个实例中的每个方法都独自占据一定的内存
    3. 缺点：
      1. 无法传参给超类，方法不能共享（）
2. [在JavaScript的原型链继承方式中，为什么子类在调用父类的构造函数时不能传参数](https://zhidao.baidu.com/question/467325883.html)
3. 对象（实例）才是属性的拥有者。理解了这句话说明懂了
  11. 对象冒充：参考：Javascript相关知识 - 简书
    1. 实现：使用call方法
    2. 理解：给一个已有属性和方法的函数（对象）换一个名字
    3. 作用
      1. 解决继承中向超类传参的问题
    4. a.call(b,“abc”,123) a,b 是两个对象 “abc” 123是两个变量
  12. 构造函数
    1. 函数首字母大写就是构造函数
  13. 继承
    1. js的面向对象和java的思想就不一样，java是自顶向下的，而js更加随意，给人的感觉是一点点扩展下来的，他的结构并不是一开始就想好的。
    2. js实现继承的方法主要依靠三个点：
      1. 原型链：可以继承属性，但无法传参给超类，方法不能共享（原型会被打断）
      2. 对象冒充：通过call的方式将自己假装成父类
      3. 闭包（函数中的函数）
  14. 关于js中循环带有触发的闭包的理解：参考：JS之经典for循环闭包问题解决方法 - CSDN博客
    1. 这个最本质的原因是js是一个像Android一样，是一个有状态的语言，体现上js是可以写触发的
    2. 这就导致一个程序中其实存在两部分：1：顺序执行的2：等待执行的
    3. 当等待执行的唤醒时，程序中的环境可能已经变了，并不是他睡觉时的那个状态了。
    4. 解决办法：
      1. 给等待执行的程序专门分配一个内存空间，用来存放他醒来时要使用的变量等———–使用函数包含（闭包）
      2. 把需要的变量先给到另一个地方暂为存放，到时候来拿就行了
  15. 函数定义多种方式 参考：Javascript相关知识 - 简书
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function add1(num1,num2){
        return num1 + num2;
    }

    var add2 = function(num1,num2){
        return num1 + num2;
    }

    var add3 = new Function("num1","num2","return num1 + num2");

    window.console.log("add1 = " + add1(10,20));
    window.console.log("add2 = " + add2(100,200));
    window.console.log("add3 = " + add3(1000,2000));
  16. 对象多种类型参考：Javascript相关知识 - 简书
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var obj = new Object();
    obj.name = "张三丰";
    alert(obj.name)

    var obj = Object();
    obj.name="zhangsanfeng";
    alert(obj.name);

    var obj = {};
    obj.name = "zhangjunbao";
    alert(obj.name);

    var obj = {
        name:"张三丰",
        age:28,
        add:function(num1,num2){
            return num1 + num2;
        }
    };
    alert(obj.name);
    alert(obj['name']);// 以数组的方式来访问属性，必须有单引号或是双引号
    alert(obj.add(10,20));
  17. 零基础打造自己的 js 类库零基础打造自己的 js 类库（1） - 简书
    1. 学到的知识
      1. 封装不是简单的方法的堆积，要考虑扩展性，客户端的简单操作性，面对需求更改时他的适应性是否够用
      2. 这里不仅仅是是方法的堆积就可以解决的问题，更重要的是一个有一个策略
      3. 最大的一个策略：这个类库给他一个dom对象，他就能返回操作这个dom对象各个属性的方法。要的很少，付出很多。

其他：

  1. 当2,4,6放在一起的时候就会变得很复杂，弄清楚这些仅仅是为了弄清楚js的运行机制。在编程的时候只要保证了，1：全局和局部变量不要同名2：只有多处使用的变量才成为全局变量3：声明变量一定要加上var附上值
  2. 总结：c中也存在类似的作用域链，但是从来都关注，编程的时候更注重的是算法。所以说，关注作用域链时，是从变量的角度进行分析的，但是在实际的编程过程中，只思考那些变量是多处使用的，其他的全部写成局部变量。这样就不用考虑作用域链的问题了 。所以，这个作用域链只能作为一个了解的东西，编程时时没用的。
  3. 今天对于语言来说又有了新的认识
    1. 以前的语言学习主要是侧重于语法层次，其实更重要的还有这么语言它本身所带有的类库。
    2. 他的类库支持，更加决定了他的用途，而语法更加影响程序员的编程思路。

附录：

声明原型链中传参

我认为，不是不能给父类构造函数传参数，而是传的参数最终不能起到作用。举个例子：

1
2
3
4
5
6
7
8
9
function Parents(ln) { this.lastName=ln; } //定义父类构造函数
function Children(fn,ln) { this.firstName=fn; } //定义子类，lastName 继承自父类
//原型链继承，给父类构造函数传入参数，试图用 Children 类构造函数中传入的 ln 初始化 lastName：
Children.prototype=new Parents(this ln);
//尝试建立对象实例：
var child=new Children("Bill","Gates");
//输出结果。很明显，lastNmae 并没有得到想要的值：
alert(child.firstName);//Bill
alert(child.lastName);//Undefine

这说明给父类构造函数传递参数是无效的。原因就在于原型链方式中，调用父类构造函数的代码并不在子类构造函数中，建立对象实例时给的属性值（即子类构造函数的参数）并不能影响到子类调用的父类构造函数。
当然，在继承时可以这样写：

1
Children.prototype=new Parents("Gates");//调用父类构造函数时给固定值

但是，这个固定的属性值必定会影响所有子类的对象实例，相当于子类构造函数“擅作主张”给所有对象实例的属性提前“赋了值”。这样写是不太符合面向对象编程的规则的。

匿名函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 匿名函数赋值给变量
var add = function(){
    window.console.log("hhhhhhhhhhhhhhhhhhh");
};
add();


// 自运行 (匿名函数)()
(function(name){
    window.console.log(name + "来自于中国。。。。。。。");
})("zhangsanfeng");

// 函数里面放置一个匿名函数
function userInfo (){
    return function(){ // 闭包：在一个函数中创建另外一个函数，通过另外一个函数访问这个函数的局部变量
        return "userInfo"
    }
}

window.console.log(userInfo()());

闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function increase(){
    var count = 0;
    return function(){
        count++;
        return count;
    }
}

window.console.log("count1 = " + increase()());
//这里的increase()()有两个括号：第一步执行increase()定义count=0并返回一个闭包（函数/对象）第二步执行这个闭包count++;
window.console.log("count2 = " + increase()());
window.console.log("count3 = " + increase()());
var f = increase();//f是increase()返回的闭包(函数/对象）
// 闭包的优点也是缺点：闭包作用域里面的局部变量资源不会被立刻销毁，如果使用不当，会造成内存泄漏
window.console.log("count11 = " + f());
window.console.log("count12 = " + f());
window.console.log("count13 = " + f());
//f()表示执行闭包
//两个的区别：increase()()是从头开始执行，每次都会重新定义count,而f()是把闭包拿出来，只执行闭包,count只定义了一次

作者：紫苓
链接：http://www.jianshu.com/p/c7ab5ca23ae8#
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function arrCreate(){
    var arr = [];
    for(var i=0;i<5;i++){
        // 匿名函数自我执行
        arr[i] = (function(num){
            return num;
        })(i);
    }
    return arr;
}

var arr = arrCreate();
for(var i=0;i<5;i++){
    window.console.log("arr[" + i + "] = " + arr[i]);
}
//////////////////////////////////////////////////////
function arrCreate(){
    var arr = [];
    for(var i=0;i<5;i++){
        arr[i] = (function(num){
            // 局部变量驻留在内存中
            return function(){
                return num;
            };
        })(i);
    }
    return arr;
}

var arr = arrCreate();
for(var i=0;i<5;i++){
    window.console.log("arr[" + i + "] = " + arr[i]());
}

作者：紫苓
链接：http://www.jianshu.com/p/c7ab5ca23ae8#
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这个例子和上一个例子知识点相同

发表于 更新于 分类于 阅读次数：
本文字数： 3.4k 阅读时长 ≈ 3 分钟

2017年8月18日 下午3:07

Div + CSS：

  1. DIV 内容
  2. CSS样式

使用css的方式

  1. 内嵌式
  2. 内联式
  3. 外联式

CSS常用操作

  1. 位置三种：float position padding和margin
  2. 大小：width height
  3. Css常用操作对象
    1. text
    2. line
    3. font
    4. list
    5. border
    6. background

设置了，但是在页面中找不到

  1. 考虑设置float，position的那些块的上下层关系，是否挡住了
  2. 空间是可以延伸要浏览器面积之外的

转换/过渡/动画/hover类：

  1. 关于文本效果：css3中有，但是把部分新增属性所有浏览器都不支持

  2. 关于转换_过渡_动画：我感觉就一种代替js的一种简单方式，需要的话去看手册就行了，以前做过，现在都忘干了！

    1. 转换：transform：在style中设置终点，直接显示出终点的效果

    2. 过渡：transition：可以在上面转换（只显示最终效果）基础上，显示出从起点—>终点的过程

      1. 可以看成转换是过渡的特例
      2. 一个标签 两个style来控制（就像c中的函数一样）
        1. 一个用来声明
        2. 一个用来定义过程

    3. 动画：

      1. 同样需要两个style来控制（就像c中的函数一样）
      2. 过渡是动画的特例，因为中间有很多的点，而过渡只有起点和中点

    4. 总结：

      1. 过渡和动画都是通过转换来设置每个点的形状的
      2. 过渡和动画只不过是将他们连接起来

  3. CSS :hover 选择器

    1. 这几个选择器的作用可以理解成位于转换和过渡之间
    2. 转换只有一个最终结果，过渡中间有动画
    3. 而这几个选择器通过给一个标签设置两个style，实现两个style之间的直接转换，没有中间的动画

如何分析一个动画

  1. 一个动画由几部分元素构成
  2. 再分别确定这个元素中，动画有几个过程，将过程分段研究
  3. 然后这个过程有几个因素影响
    1. 位置
    2. 长、宽
    3. 角度
    4. 透明度
    5. 等等很多属性

过渡eg：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

div:hover
{
width:200px;
}

动画eg：CSS3 动画第一个例子，从源码中找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#animated_div
	{
	width:60px;
	height:40px;
	background:#92B901;
	color:#ffffff;
	position:relative;
	font-weight:bold;
	font:bold 12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	animation:animated_div 5s 1;
	-moz-animation:animated_div 5s 1;
	-webkit-animation:animated_div 5s 1;
	-o-animation:animated_div 5s 1;
	border-radius:5px;
	-webkit-border-radius:5px;
	}

@keyframes animated_div
	{
	0%		{transform: rotate(0deg);left:0px;}
	25%		{transform: rotate(20deg);left:0px;}
	50%		{transform: rotate(0deg);left:500px;}
	55%		{transform: rotate(0deg);left:500px;}
	70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{transform: rotate(-360deg);left:0px;}
	}

@-webkit-keyframes animated_div
	{
	0%		{-webkit-transform: rotate(0deg);left:0px;}
	25%		{-webkit-transform: rotate(20deg);left:0px;}
	50%		{-webkit-transform: rotate(0deg);left:500px;}
	55%		{-webkit-transform: rotate(0deg);left:500px;}
	70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{-webkit-transform: rotate(-360deg);left:0px;}
	}

@-moz-keyframes animated_div
	{
	0%   {-moz-transform: rotate(0deg);left:0px;}
	25%  {-moz-transform: rotate(20deg);left:0px;}
	50%  {-moz-transform: rotate(0deg);left:500px;}
	55%  {-moz-transform: rotate(0deg);left:500px;}
	70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {-moz-transform: rotate(-360deg);left:0px;}
	}

@-o-keyframes animated_div
	{
	0%   {transform: rotate(0deg);left:0px;}
	25%  {transform: rotate(20deg);left:0px;}
	50%  {transform: rotate(0deg);left:500px;}
	55%  {transform: rotate(0deg);left:500px;}
	70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {transform: rotate(-360deg);left:0px;}
	}

多对多（标签和style之间）

注：这里的style1就用在了两个div的class中
第一个div用了style1，和style2两个css来设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.style1{
			background-color: red;
		}
		.style2{
			background-repeat:none; 
		}
	</style>
</head>
<body>
	<div class="style1,style2">
		
	</div>
	<div class="style1">
		
	</div>
</body>
</html>

发表于 更新于 分类于 阅读次数：
本文字数： 1k 阅读时长 ≈ 1 分钟

2017年8月17日 上午10:04

参考我的文章 看第三方开源组件的技巧（第二版）
后来还发现了：小拿大魔王 - 简书

这节主要是看源码思路的数理，准备阶段

和数学的学习过程有啥联系、区别、可以借鉴的、改进

  1. 如何对付难点
  2. 什么状态适合学习
  3. 要树立多遍的概念
  4. 最后一定要有所谓生活化的理解结论

心中疑惑记录

  1. 普通应用模式之外的应用模式
  2. 先弄懂业务逻辑是最核心的
    1. 知道一个功能他设计的原因，目的，作用
    2. 一个概念他设计的目的，原因，作用
      1. 第一遍很难理解这么深，都是摸着石头过河，其实是比较痛苦，并且最后的结论有可能不正确
      2. 这就和多遍学习的重要性

看框架思路清理

  1. 原来第一遍看TP手册的时候，是站在框架使用者的角度去思考的，目的是学会如何使用框架；现在是站在框架设计者的角度与思考，要弄明白设计者的目的、原因、作用。
  2. 第一步一定是要弄懂整个框架设计的业务流，也就是作者在没动笔之前，对系统的设想，这个设想其实要具体到每一个小模块。
  3. 然后，逐渐发现框架的设计有一个核心共通的特性：通过配置字符串去控制框架的各个功能
  4. 这个就类似于 我做的权限系统
  5. 但是，不得不说在一个框架中有太多的让使用这方便使用，但是实现起来却很难为特点的功能。时间有限，不能能全看，只能挑几个自己感兴趣的去看

对学习新的框架的启示

现在回过头来看框架，站在使用者的角度，我们也可以使用以配置字符串（数组）控制框架的角度去学，学习的重点是有哪些配置字符串（数组）、对应的什么功能、如何进行功能的配置这几个方面

站在业务的角度分
站在程序的角度分

摘抄

行为的存在让你无需改动框架和应用，而在外围通过扩展或者配置来改变或者增加一些功能。

而不同的行为之间也具有位置共同性，比如，有些行为的作用位置都是在应用执行前，有些行为都是在模板输出之后，我们把这些行为发生作用的位置称之为标签（位），也可以称之为钩子，当应用程序运行到这个标签的时候，就会被拦截下来，统一执行相关的行为，类似于AOP编程中的“切面”的概念，给某一个标签绑定相关行为就成了一种类AOP编程的思想。

说书对框架的理解

  1. 上面说的是：框架设计者的对于普通项目开发者使用的思考；还要一方面是对于方便框架开发者开发的思考。
  2. 但是，本质来说对于框架的开发者和使用者来说，开发方式其实是一样的
  3. 有以下几种操作方式
    1. 配置数组
    2. 使用字符串
    3. 使用下层函数
  4. 只不过他们之间有着上下层之间的关系：框架的开发者在核心的下层，普通项目开发者在框架开发者下面（金字塔型）
  5. 每层使用上层封装好的操作方式，实现自己的功能，并且要为本层的功能开发下层的使用方式

应用模式

发表于 更新于 分类于 阅读次数：
本文字数： 396 阅读时长 ≈ 1 分钟

2017年8月17日 上午8:03

目的：为以后解决一些问题，提供一些思路
官方文档：CSS3 用户界面

相应式布局：让一个网站能够兼容多个终端

官方文档：
1. HTML 标签的 media 属性
2. @media - CSS3参考手册
例子：

优点：

  1. 解决多设备的显示问题

缺点：

  1. 效率地下代码累赘
  2. 都浏览器、厂商、多终端、分辨率

语法

1
2
3
4
5
1. media =“******”
2. @media  ******{
		div {
		}
	 }

CSS3多列

CSS3 多列

打印页

CSS2 打印参考

background新增属性

不同浏览器特有的属性总结

CSS3那些不为人知的高级属性 - 酷赛瑞 - 博客园

给IE使用的判断（类似c的预处理中的判断）

HTML条件注释判断IE<!—if IE><!—if lt IE 9>—>

溢出

1
2
3
body{
	overflow-x:hidden;
}

发表于 更新于 分类于 阅读次数：
本文字数： 4.7k 阅读时长 ≈ 4 分钟

2017年8月16日 下午8:30

官方文档：CSS 定位

其实这个官方文档已经写得特别特别好，特别特别精炼了。
我在这里其实就是一些总结和补充

总结

一切皆为框

  1. div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
  2. 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
  3. 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
    1
    2
    3
    4
    <div>
    	some text
    	<p>Some more text.</p>
    </div>
    在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
  4. 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制

  1. CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
  2. 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
  3. 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
  4. 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

CSS position 属性

  1. static
    1. 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  2. relative
    1. 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  3. absolute
    1. 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  4. fixed
    1. 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

官方文档：CSS 浮动CSS clear 属性

总结

两条原则：

  1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

行框和清理（补充）

注：文档中和我实验出来的效果不同

第一种方式（外部div）

  1. 使用最外部div使用float
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style type="text/css">
    	.news {
    	  background-color: gray;
    	  border: solid 1px black;
    	  float: left;
    	  }

    	.news img {
    	  float: left;
    	  }

    	.news p {
    	  float: right;
    	  }

    	/*.clear {
    	  clear: both;
    	  }*/
    	</style>

    </head>

    <body>
    	<div class="news">
    		<img src="1.png"  style="width: 300px" />
    		<p>some textsome textsome textsome textsome textsome textsome textsome  </p>
    		<!-- <div class="clear"></div> -->
    	</div>
    </body>
    </html>
    总结：说明前面说的原则是不全的，加上同辈的标签之间是按边框是否碰见，父子类之间还是可以包含的

第二种方式（添加多余div块）

  1. 左右都float，但大的div不浮动，也没有clear
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style type="text/css">
    	.news {
    	  background-color: gray;
    	  border: solid 1px black;
    	  /*float: left;*/
    	  }

    	.news img {
    	  float: left;
    	  }

    	.news p {
    	  float: right;
    	  }

    	/*.clear {
    	  clear: both;
    	  }*/
    	</style>

    </head>

    <body>
    	<div class="news">
    		<img src="1.png"  style="width: 300px" />
    		<p>some textsome textsome textsome textsome textsome textsome textsome  </p>
    		<!--<div class="clear" ></div>-->
    	</div>
    </body>
    </html>

  1. 有内部div，但内部div 不clear（内部div比img长）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style type="text/css">
    	.news {
    	  background-color: gray;
    	  border: solid 1px black;
    	  /*float: left;*/
    	  }

    	.news img {
    	  float: left;
    	  }

    	.news p {
    	  float: right;
    	  }

    	/*.clear {
    	  clear: both;
    	  }*/
    	</style>

    </head>

    <body>
    	<div class="news">
    		<img src="1.png"  style="width: 300px" />
    		<p>some textsome textsome textsome textsome textsome textsome textsome  </p>
    		<div class="clear" style="background: red;height: 20px;width: 350px"></div>
    	</div>
    </body>
    </html>

  2. 有内部div，但内部div 不clear（内部div比img短，被img挡住了）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style type="text/css">
    	.news {
    	  background-color: gray;
    	  border: solid 1px black;
    	  /*float: left;*/
    	  }

    	.news img {
    	  float: left;
    	  }

    	.news p {
    	  float: right;
    	  }

    	/*.clear {
    	  clear: both;
    	  }*/
    	</style>

    </head>

    <body>
    	<div class="news">
    		<img src="1.png"  style="width: 300px" />
    		<p>some textsome textsome textsome textsome textsome textsome textsome  </p>
    		<div class="clear" style="background: red;height: 20px;width: 250px"></div>
    	</div>
    </body>
    </html>
  1. 加上一个内部div，并且把内部div clear
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<style type="text/css">
    	.news {
    	  background-color: gray;
    	  border: solid 1px black;
    	  /*float: left;*/
    	  }

    	.news img {
    	  float: left;
    	  }

    	.news p {
    	  float: right;
    	  }

    	.clear {
    	  clear: both;
    	  }
    	</style>

    </head>

    <body>
    	<div class="news">
    		<img src="1.png"  style="width: 300px" />
    		<p>some textsome textsome textsome textsome textsome textsome textsome  </p>
    		<div class="clear" style="background: red;height: 20px;width:250px"></div>
    	</div>
    </body>
    </html>

对比1-4：

  1. 说明clear不仅仅让左右两边没有浮动体，而且要求表面上面也不能有浮动体
  2. 左右不能有浮动体的例子W3School在线测试工具 V2