0%

技术收集

故天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。 ——《孟子·告子下》之《生于忧患,死于安乐》

一、连接

  1. HDFS,是一个易于扩展的分布式文件系统。
  2. opengl
  3. dx
  4. canvas
  5. webgl
  6. unity3d
  7. httpclient
  8. feign
  9. okhttp
  10. B/S与C/S架构的区别
  11. GPU/TPU
  12. 并发问题产生的三大根源
  13. Activiti与BPMN2.0规范
  14. 区块链
  15. 常见登录鉴权方案
  16. 前后端常见的几种鉴权方式
  17. 两个大数相加
  18. 单点登录
  19. 防盗链
  20. redis缓存兜底方案设计
  21. 消息队列设计精要
  22. redis实现防止重复提交
  23. redis高手
  24. 如何做好需求分析和设计?
  25. 网站无法访问原因探寻
  26. 栈是独立的,堆是共享的
  27. 大文件小内存排序问题
  28. Windows Terminal, Console and Command-Line
  29. Cygwin
  30. LMSTFY
  31. 并发之痛 Thread,Goroutine,Actor
  32. 程序员技术练级攻略
  33. 程序员怎样快速成长
  34. IT老兵:在Google供职十年整,到底能学到啥?
  35. 天天写「业务代码」,如何成为「技术大牛」?
  36. 技术人成长百科指南:给你一束光,路在你脚下
  37. PHP yield分析以及协程的实现

二、常用

  1. 使用vim时,如果不小心按了ctrl + s后,终端窗口就动不了了,只需按ctrl + q即可恢复正常。

  2. windows下安装composer

    1
    2
    3
    方式1、下载exe文件安装
    方式2、下载 composer.phar 文件
    命令行执行:echo @php "%~dp0composer.phar" %*>composer.bat (php.exe加入环境变量)
  3. linux下$PATH设置:查看PATH:echo $PATH
    以添加mongodb server为列

    修改方法一:修改$PATH

    1
    2
    3
    4
    5
    export PATH=/usr/local/mongodb/bin:$PATH
    //配置完后可以通过echo $PATH查看配置结果。
    生效方法:立即生效
    有效期限:临时改变,只能在当前的终端窗口中有效,当前窗口关闭后就会恢复原有的path配置
    用户局限:仅对当前用户

    修改方法二:
    通过修改.bashrc文件:

    1
    2
    3
    4
    5
    6
    7
    8
    vim ~/.bashrc 
    //在最后一行添上:
    export PATH=/usr/local/mongodb/bin:$PATH
    生效方法:(有以下两种)
    1、关闭当前终端窗口,重新打开一个新终端窗口就能生效
    2、输入“source ~/.bashrc”命令,立即生效
    有效期限:永久有效
    用户局限:仅对当前用户

    修改方法三:
    通过修改profile文件:

    1
    2
    3
    4
    5
    6
    vim /etc/profile
    /export PATH //找到设置PATH的行,添加
    export PATH=/usr/local/mongodb/bin:$PATH
    生效方法:系统重启
    有效期限:永久有效
    用户局限:对所有用户

    修改方法四:
    通过修改environment文件:

    1
    2
    3
    4
    5
    vim /etc/environment
    在PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"中加入“:/usr/local/mongodb/bin”
    生效方法:系统重启
    有效期限:永久有效
    用户局限:对所有用户
  4. 背景:git config全局配置了公司的user.nameuser.email,在练手项目中单独配置了自己的user.nameuser.email。将自己本地代码推到github网上有各种教程,在此就不再赘述了。其中有一步配置SSH-KEY时一直提示git@github.com: Permission denied (publickey).,网上也搜了但都没有解决,直到遇见了它:ssh-add ~/.ssh/自定义的id_rsa,执行一下就好了!

  5. 将本地项目跟远程github账户关联起来后,执行git push origin master时报错:

    1
    2
    3
    4
    5
    6
    failed to push some refs to 'git@github.com:liusirdotme/learngit.git'
    hint: Updates were rejected because the remote contains work that you do
    hint: not have locally. This is usually caused by another repository pushing
    hint: to the same ref. You may want to first integrate the remote changes
    hint: (e.g., 'git pull ...') before pushing again.
    hint: See the 'Note about fast-forwards' in 'git push --help' for details.git

    因为我在github初始化仓库是勾选了README,这样就导致远程仓库比本地多了一个文件。根据报错执行pull origin master时报fatal: refusing to merge unrelated histories.然后接下来主角出场:git pull origin master –allow-unrelated-histories

  6. linux 下切换用户的时候,提示 su: Authentication failure

    1
    sudo passwd username #设置初始密码或更改密码
  7. root 用户执行某命令时提示 Operation not permitted. chattr是用来更改文件属性,lsattr可用来查看文件的属性,执行命令lsattr filename 便可以看到当前文件的属性;当文件有i属性的文件是不能修改的,更不可被删除,即使是root用户也不可。既然知道了文件不能删除的原因是加了i属性,所以相应的解决方案就是把文件的i属性去除,然后再删除。chattr -i filename,然后在执行相应命令就好了。

  8. 查看 linux 系统上的 php 位数是 32 位的还是 64 位

    1
    2
    3
    file /usr/bin/php  #替换成php课执行文件目录
    输出:
    /usr/bin/php: ELF 64-bit LSB shared object, x86-64, version 1 (SYSV), dynamically linked (uses shared libs), for GNU/Linux 2.6.32, BuildID[sha1]=82ae48b988b1acf24ae08a575e58a8981d968a54, stripped

    其中 ELF 64-bit LSB shared object, x86-64 就代表 php 是 64位的。

  9. 编译安装 phalcon 扩展,make install 之后,make test 报错

    1
    2
    3
    4
    5
    6
    Warning: PHP Startup: Unable to load dynamic 
    library '/usr/local/src/cphalcon-phalcon-v2.0.13
    /build/64bits/modules/phalcon.so' -
    /usr/local/src/cphalcon-phalcon-v2.0.13
    /build/64bits/modules/phalcon.so: undefined symbol:
    php_json_decode_ex in Unknown on line 0

    问题原因:扩展加载顺序导致,正常情况下应先加载 json.so 后加载 phalcon.so

    解决方案:设置扩展加载优先权重

    1
    2
    3
    在 php.d 文件夹添加 phalcon.ini,添加一下内容:
    extension=phalcon.so
    priority=100 #尽量大一点
  10. 编译安装php时,未明确指出 –with-config-file-path = 路径,后期安装redis等扩展后一直未生效,查看 phpinfo() 输出信息 Configuration File (php.ini) Path 和 Loaded Configuration File 选项是否和手动复制的 php.ini 路径一致,不一致则改为一致。

  11. msi文件安装时提示2502 2503 cmd msiexec /package D:\xxxx.msi

  12. php中,静态方法随着类的加载而加载,优先于对象而存在。this代表的是对象的引用,即为当前对象,静态方法是通过类调用的方法,不需要实例化,既然不需要实例化,就没有当前对象,既然没有当前对象,就不会有this。

  13. [warn] 6332#0: *9 a client request body is buffered to a temporary file /usr/local/nginx/client_body_temp/0000000001处理方法:client_body_buffer_size 1024k; 加大到1024K,默认16K太小

  14. 将源码编译为dll

  15. 知识形成体系

    • 设计模式和算法
    • 面向对象和接口
    • 计算机网络
    • 数据库
    • Linux命令
    • 操作系统
    • 主流架构
  16. 一秒内可以执行多少次for循环

  17. 解释型语言和编译型语言

    • 编译型语言:使用专门的编译器,针对特定的平台,将高级语言源代码一次性的编译成可被该平台硬件执行的机器码,并包装成该平台所能识别的可执行性程序的格式。

    • 在程序执行之前,需要一个专门的编译过程,把源代码编译成机器语言的文件,如exe格式的文件。以后要再运行时直接使用编译结果即可,如直接运行exe文件。因为只需编译一次,以后运行时不需要编译,所以编译型语言执行效率高。

    • 总结

    • 一次性的编译成平台相关的机器语言文件,运行时脱离开发环境,运行效率高

    • 与特定平台相关,一般无法移植到其他平台

    • Go、C、C++、Objective等属于编译型语言

    • 解释型语言:使用专门的解释器对高级语言源代码逐行解释成特定平台的机器码并立即执行。

    • 不需要事先编译,其直接将源代码解释成机器码并立即执行,所以只要某一平台提供了相应的解释器即可运行该程序。

    • 总结:

    • 解释型语言每次运行都需要将源代码解释称机器码并执行,效率较低;

    • 只要平台提供相应的解释器,就可以运行源代码,所以可以方便源程序移植;

    • C#、PHP、Python等属于解释型语言。

    Java是个特例,它需要编译,但是却没有直接编译为机器语言,而是编译为字节码,然后在Java虚拟机上以解释方式执行字节码。

  18. 全双工-半双工通信

  19. 指针和引用

    • 有些语言有“指针”的概念,比如C语言;有些语言没有指针,取而代之的是“引用”,比如Java、PHP。不管是“指针”还是“引用”,实际上它们的意思都是一样的,都是存储所指对象的内存地址。
    • 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指针。或者反过来说,指针中存储了这个变量的内存地址,指向了这个变量,通过指针就能找到这个变量。
    • 在编写链表代码的时候经常会有这样的代码:p->next=q,这行代码是说p结点中的next指针存储了q结点的内存地址。
    • 编写链表代码更复杂的经常会用到的:p->next=p->next->next,这行代码表示p结点的next指针存储了p结点的下下一个结点的内存地址。
  20. 中间件:中间件是一种独立的系统软件或服务程序,分布式应用软件借助这种软件在不同的技术之间共享资源。中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。是连接两个独立应用程序或独立系统的软件。相连接的系统,即使它们具有不同的接口,但通过中间件相互之间仍能交换信息。执行中间件的一个关键途径是信息传递。通过中间件,应用程序可以工作于多平台或OS环境。

    • 终端仿真/屏幕转换中间件
    • 远程过程调用中间件
    • 数据库中间件
    • 消息中间件
    • 交易中间件
    • 对象中间件
  21. C10问题

    • c10k问题是同时处理大量客户端请求的网络sockets优化问题。c10k用来命名并发处理10k连接的问题。人们一直研究socket服务优化,这其中有大量因素需要考虑来允许服务器支持大量服务端。这需要结合操作系统和web服务器软件的限制。根据服务的可提供范围以及操作系统和硬件限制如多进程能力,多线程模型或者单线程模型可以优先考虑。与此同时需要考虑内存管理(通常依赖操作系统),这些策略隐含了I/O管理的各个方面。
    • 参考
    • C10K
    • C10K中文翻译
    • C10K中文翻译
  22. 各种O

    • CEO【Chief Executive Officer 首席执行官】:一个企业中负责日常经营管理的最高级管理人员。
    • CFO【Chief Financial Officer 首席财务官】:财务总监,掌握着企业的财务信息和现金资源。
    • COO【Chief Operating Officer 首席运营官】:公司团体里负责监督管理每日活动的高阶官员,监测每日的公司运作。
    • CIO【Chief Information Officer 首席信息官】:属于公司的最高决策层,主要负责制定公司的信息政策、标准、程序的方法,并对全公司的信息资源进行管理和控制。
    • CTO【Chief Technology Officer 首席技术官】:企业内负责技术的最高负责人,由于计算机的迅猛发展,CTO一般为IT精英,有时CT0和CIO是同一个人,毕竟是信息时代嘛!
    • CKO【Chief Knowledge Officer 知识长】:掌管企业内所有知识管理相关的工作。
    • CPO【Chief Procurement Officer 首席采购官】:主持采购部全面工作,直接向首席执行官汇报。
    • CGO【Chief Game Officer 首席游戏官】:这个现在一般指锐起公司专为网吧推出的管理系统,不是一般指的企业里的高层官员了。
    • CMO【Chief Marketing Officer 市场总监】:是企业中负责市场运营工作的高级管理人员。
    • CSO【Chief Solution Officer 首席问题官】:是企业里负责挖掘问题、协调缓解问题和解决问题的高级管理人员。
  23. wget/yum/rpm/apt-get/dpkg/deb/pip/easy_install

    • wget:wget是一个从网络上自动下载文件的自由工具,支持通过 HTTP、HTTPS、FTP 三个最常见的TCP/IP协议下载,并可以使用HTTP代理。wget这个名称来源于World Wide Webget的结合。
    • 用法:wget [选项]... [URL]...,具体见wget -h
    • Yum,全称为 Yellow dog Updater Modified,是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。基于RPM包管理,能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性关系,并且一次安装所有依赖的软件包,无须繁琐地一次次下载、安装。
    • RPM是Red-Hat Package Manager,RPM软件包管理器的缩写。是一种用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中。它生成具有.RPM扩展名的文件,与Dpkg类似。这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLinux、S.u.S.E.以及Turbo Linux等Linux的分发版本都有采用,可以算是公认的行业标准了。
    • apt-get,Advanced Package Tool,是一款适用于Unix和Linux系统的应用程序管理器。适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索、安装、升级、卸载软件或操作系统。
    • dpkg是Debian Packager的简写,为 Debian专门开发的套件管理系统,方便软件的安装、更新及移除。所有源自Debian的Linux发行版都使用 dpkg,例如Ubuntu、Knoppix等。dpkg是Debian软件包管理器的基础,它被伊恩·默多克创建于1993年。dpkg与RPM十分相似,同样被用于安装、卸载和供给.deb软件包相关的信息。
    • dpkg本身是一个底层的工具,上层的工具如APT,被用于从远程获取软件包以及处理复杂的软件包关系。
    • DEB是Debian软件包格式的文件扩展名,跟Debian的命名一样,DEB也是因Debra Murdock而得名,她是Debian创始人Ian Murdock的太太。
    • easy_install,用来下载安装python的一个公共资源库PyPI的相关资源包。是由PEAK(全称Python Enterprise Application Kit)开发的setuptools包里带的一个命令,所以使用easy_install实际上是在调用setuptools来完成安装模块的工作。
    • pip是一个现代的通用的python包管理工具,提供了对python包的查找、下载、安装、卸载的功能,是easy_install的改进版
  24. Hadoop-Dubbo-Zookeeper-RPC-HBase-Hive-Spark-Kylin-Mahout-Kafka

    • RPC
    • Hadoop
    • Dubbo
    • Zookeeper
    • HBase
    • Hive
    • Spark
    • Kylin
    • Mahout
    • Kafka
  25. 优化网站速度:优化网站速度总的方向:减少请求数、减少资源大小、找最快的服务器。

    • 优化图片资源的格式和大小
    • 开启网络压缩
    • 使用浏览器缓存
    • 减少重定向请求
    • 使用CDN存储静态资源
    • 减少DNS查询次数
    • 压缩css和js内容
  26. 中台

  27. web架构

    • 服务器:基于nginx实现负载均衡
    • 应用
    • 基于git+gitlab+jenkins实现持续集成
    • 基于jira实现需求收集、任务分配、bug处理等
    • 基于cdn实现图片、样式、js等内容分发,提高响应速度
    • 数据库
    • 基于mysql主从实现读写分离和高可用
    • 基于redis主从和哨兵机制等实现高并发和高可用
    • 消息队列:基于RabbitMQ实现消息的异步处理和应用解耦
    • 研发
    • 基于前后分离开发实现快速开发迭代
    • 基于常用设计模式提高研发效率和易于扩展
    • 基于psr*规范封装自定义包实现代码复用
    • 基于swoole框架进行异步、网络、多线程、RPC调用等
    • 基于Elasticsearch实现全文检索和日志分析处理等
    • 压测:基于abjmeter等应用进行压力测试
    • 监控
    • 基于shell脚本实时监控异常接口请求并邮件通知处理
    • 基于ELK stack实现日志分析平台
  28. windows下安装虚拟机

1
2
3
4
5
6
7
8
9
10
11
sudo dd if=/dev/zero of=/swapfile bs=64M count=16
#count的大小就是增加的swap空间的大小,64M是块大小,所以空间大小是bs*count=1024MB

sudo mkswap /swapfile
#把刚才空间格式化成swap格式

sudo swapon /swapfile
#使用刚才创建的swap空间

sudo swapoff /swapfile
sudo rm /swapfile
  1. 数据埋点
    • 埋点分析,是网站分析的一种常用的数据采集方法,是数据采集领域(尤其是用户行为数据采集领域)的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程,如用户某个icon点击次数、观看某个视频的时长等。
    • 数据埋点分为初级、中级、高级三种方式。
    • 数据埋点是一种良好的私有化部署数据采集方式。
    • 埋点的作用就是用来做用户动作行为分析的,即时有效的埋点可以为产品的下一步推广、实施、改进等做导向。
    • 参考
    • 如何理解埋点
    • 数据埋点意义
  1. 编程几人
    • 蔡德明
    • 惠新宸
    • 廖雪峰
    • 尤雨溪
    • 阮一峰
  1. CSS动效集锦
  1. Vue知识点

    • vue的生命周期(共11个)
    • vue父子组件之间传值
    • vue获取DOM元素
    • router几种跳转方式,如何传参和接受参数,导航守卫是什么
    • vuex五种状态(state, getter, mutation, action, module)
    • vue 中的 data 为什么是一个函数
    • vue 双向绑定原理
    • vue等单页面的优缺点
    • 加了keep-alivce后增加了什么周期?多了什么钩子函数?分别是做什么的
    • vue双向数据绑定在什么时候收集订阅者,怎么收集的
    • 会话存储和本地存储的区别
    • 什么是WebSQL,是H5的一部分吗
    • vue、react、angular的区别?vuex和axios的作用?用过哪些UI框架?
    • vue的路由实现:hash模式和history模式
    • node.js文件读写方式和实现
    • JavaScript几种异步方法和原理
    • addEventListener的使用和作用域
  2. 面试题

    • 用到了es6的哪些特性,有什么感受,跟es5对比有什么不同?
    • webpack常用的哪些功能,自己的理解,和gulp对比有什么不同?
    • 闭包的作用与举例
    • js的原型链和继承
    • vue生命周期
    • 父组件和子组件之间的通信
    • 3个vue常用的生命周期的钩子函数
    • vue.cli怎么使用自定义组件
    • vuex有哪几种特性
    1. ajax技术
    • Ajax,异步JavaScript和XML,全称Asynchronous Javascript And XML,是指一种创建交互式网页应用的网页开发技术。它用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,可以在无需重新加载整个网页的情况下异步更新部分网页的内容
    • 支持的方法
    • $.ajax():返回其创建的 XMLHttpRequest 对象。
    • $.get():通过远程 HTTP GET 请求载入信息
    • $.post():通过远程 HTTP POST 请求载入信息。
    • $.getJSON():通过 HTTP GET 请求载入 JSON 数据。
    • ajax请求失败:
    • dataType错误:后台返回的dataType类型和前台写的不一致
    • async请求同步异步问题:async默认是true(异步请求),如果想一个ajax执行完后再执行另一个ajax, 需要把async=false
    • data不能不写data为空也一定要传”{}”
    • 传递的参数:必须是ajax支持的编码格式(xml html json script jsonp text) E. URL路径问题
    • 问题
    • ajax跨域请求
    • ajax同步异步
    • ajax请求可以正常返回json数据,但弹窗没反应
  3. 前端三大框架

    • React
    • 特性
    • 原理
    • Vue
    • 特性
    • 原理
    • Angular
    • 特性
    • 原理
  4. 跨域请求

    • 浏览器同源策略:只有当协议、域名和端口号相同才成为同源。
    • 非同源限制
    • cookie、localStorage、indexDB无法读取
    • DOM 无法获得
    • ajax请求不能发送
  5. sass和less

    • sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等加快了css开发效率。
    • 对比
    • less是基于JavaScript的在客户端处理,所以安装的时候用npm
    • sass是基于ruby所以在服务器处理
  6. js中null和空字符串

    • 类型
    • null表示的是一个对象的值,而并不是一个字符串,如声明一个变量 var str = null;
    • “”表示的是一个长度为0空字符串,如声明一个变量 var str = "";
    • 内存分配
    • var str = null ; 表示声明一个字符串对象的引用,但指向为null,也就是说还没有指向任何的内存空间;
    • var str = “”; 表示声明一个字符串类型的引用,其值为””空字符串,这个str引用指向的是空字符串的内存空间;
    1
    2
    console.log(typeof null)  //object
    console.log(typeof "") //string
    • 等值判断
    1
    console.log('' == null) // false
    • 扩展
    1
    2
    3
    4
    5
    6
    7
    8
    console.log(0 == '')   //true 
    console.log(0 == null) //false

    console.log(false == '') //true
    console.log(false == null) //false

    console.log(undefined == '') //false
    console.log(undefined == null) //true
  7. ES/ECMAScript

    • ECMAScript 和 JavaScript 是什么关系?
    • 1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
    • 该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。
    • 因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。
    • ES6 与 ECMAScript 2015 的关系
    • 2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意是指 JavaScript 语言的下一个版本。
    • 但是因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等。但是标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。如果经过多次会议以后,一个提案足够成熟了,就可以正式进入标准了。这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动。
    • 标准委员会最终决定,标准在每年的 6 月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。
    • ES6 的第一个版本,就这样在 2015 年 6 月发布了,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。2016 年 6 月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符),基本上是同一个标准。根据计划,2017 年 6 月发布 ES2017 标准。
    • 因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。
    • ES5、ES6对比
    • 参考
  8. 包管理grunt-gulp-webpack

  9. jquery选择器

    • 基本选择器

    • #id

    • element

    • class

    • *

    • selector1,selector2,selectorN

    • 层级选择器

    • ancestor descendant

    • parent>child

    • prev+next

    • prev ~ siblings

    • 过滤选择器

    • 基本过滤选择器 :first/:last :not :even、:odd :eq、:gt、:lt :header :animated

    • 内容过滤选择器 :contains、:empty、:has、:parent

    • 可见性过滤选择器 :hidden :visible

    • 属性过滤选择器

    1
    2
    [attribute]  [attribute=value]  [attribute!=value]  [attribute^=value]
    [attribute$=value] [attribute*=value] [selector][selector2]
    • 子元素过滤选择器 ·:nth-child :first-child last-child :only-child`

    • 表单对象属性过滤选择器

    1
    2
    3
    :enabled、:disabled  :checked  :selected
    :input :text、:password :radio、:checkbox
    :submit、:image、:reset、:button、:file :hidden
  10. JSONP:JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于server1.example.com的网页无法与不是server1.example.com的服务器沟通,而HTML<script>元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的JSON资料,而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON,而是任意的JavaScript,用JavaScript直译器执行而不是用JSON解析器解析。

  • index.html
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
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsonp</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<script type="text/javascript">
$(function(){
// 方式一
// $.ajax({
// url:"index.php",//将要请求的方式
// type:'get',
// data:"",
// dataType:'jsonp',
// jsonp: "callback",
// contentType: "application/json",//contentTy类型
// jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称
// success: function(data) {
// alert(data);
// },
// error: function() {
// alert(0);
// }
// });
});
// 方式二步骤1
function flightHandler(data) {
alert(data);
}
</script>
<!-- 方式二步骤2 -->
<script src="index.php?callback=flightHandler"></script>
<body>
<div id="showcontent">Result:</div>
</body>
</html>
  • index.php
1
2
3
$call = $_GET['callback'];
$data = '["111","222"]';
echo $call."(" . $data . ")";