JS核心语法全局对象知识框架笔记

这是一篇关于js和新语法全局对象的结构思维导图。共包括六个课时，其中详细的阐述了每一个课的常考点，知识点。适合预习以及复习的小伙伴。

JS核心语法全局对象知识框架笔记

• 第一课
  • 见整理-->项目02-JS核心语法2--->1.对象.html
    • 1.JS中对象的创建
    • 2.js中数组的遍历
      • 方式1:常用
      • 方式2:对象属性的遍历
  • 见整理-->项目02-JS核心语法2--->2.js中的技巧.html
    • 1.|| 运算符
    • 2.&& 运算符
    • 3.BOOL类型
  • 全局对象
    • 见整理-->项目02-JS核心语法2--->3.全局对象window.html
      • 1.window.location.href = 'http://jd.com';
      • 2.所有全局变量都是window的属性
    • 见整理-->项目02-JS核心语法2--->4.全局对象document1.html
      • 1.document代表整个网页
      • 2.dir把document对象的所有属性打印
        • console.dir(document);
      • 3.直接向网页写东西
        • document.write('123');
      • 4.点击图片换照片
        • 1.方法1
        • 2.方法2
        • 3.方法3
      • 5.将cs代码抽出
      • 6.将js代码抽出
        • 抽出后onclick后跟函数
        • 在标签里onclick后跟js代码
    • 见整理-->项目02-JS核心语法2--->5.document2.html
      • window.onload = function (){}
      • 讲到了防止代码被污染。定义成局部变量
      • canvas讲解
• 第二课
  • 案例1：将网页显示在手机端并且去掉一些内容
    • 将整理-->项目02-JS在移动端的使用
    • 1.响应式网站(既能在浏览器显示，也能在手机端显示，且不用修改任何代码)介绍。美工提供。v3.bootcss.com bootStrap
    • 需求
      • 1.在手机端下显示一个远程的网站，并且适应屏幕
        • step1:拖一个webView，自动布局，连线
        • step2:加载网页
          • [self.webView loadRequest:request];
      • 2.去掉某些广告等网络文字。
        • method1：让美工处理好给我们
          • 美工判断如果网页是显示在手机端，则广告文字不出现
        • method2:网页已经发布，美工和我们都无法再处理网页代码，只能我们程序员自己去处理
          • 方法:利用webView的代理方法；- (void)webViewDidFinishLoad:(UIWebView *)webView{}
          • OC 中调用JS代码:[webView stringByEvaluatingJavaScriptFromString:js]
      • 3.在手机端改变某些元素的 值
        • 首先需要知道怎样拿到这个标签，然后再修改
• 第三课
  • 网易新闻项目
    • 网易新闻给我们的不是完整的网页代码，而是零碎的代码(即文字和图片是分开的)。这样的好处就是我们可以按照自己的需求拼接，并且可以对图片进行单独处理，如图片轮播等
    • 步骤:
      • 1.做网易新闻的新闻列表
        • 见刀哥讲的网易新闻的步骤
      • 2.做新闻详情
• 第四课
  • 做新闻详情
    • 1.拖入新的UIViewController控制器HMNewDetailViewController，建立新闻详情控制器，并设置跳转
    • 2.在prepareSegue中传值
      • 2.1获得点击的行号
      • 2.2 获得对应的模型
      • 2.3将模型数据传递过去
        • 前提:在HMNewsDetailViewController中包含模型属性
    • 3.加载网页
      • 3.1 直接使用UIWebView的loadRequest方法加载
        • 解决一个问题：webView上方有64高度的间距
          • 出现这个问题的前提:
            • 在对webView进行自动布局时，在限制webView上面这个高度时是参考导航条设置的。
          • 这个问题是从ios7开始出现的，因为从ios7整个控制器是全屏的
          • 问题展示:
          • 原因；
            • WebView既然能滚动说明webView里有个UIScrollView。在导航控制器里如果发现有scrollView，系统就会自动将scrollView的顶部去掉64(状态栏20+导航条44)。因为（0，0）是在左上角，既然0在最上面那么就会有64被挡了，所以就把它切掉
          • 解决方法:
            • 方法1:改automaticallyAdjustsScrollViewInsets这个属性
              • self.automaticallyAdjustsScrollViewInsets = NO;
                • 这样做意味z着scrollView的顶部在导航条下面，不会有穿透效果了
            • 方法2:在自动布局将上面的约束改成相对view来设置。
              • 推荐这种做法，因为这样做说明scrollView的顶部是在屏幕的顶部，意味着上面的64仍属于webView，会做出一种穿透效果
      • 3.2我们发现使用上述方法有很多问题
        • 1.内容冗余
          • 1.新闻自带的导航条不是我们想要的
          • 2.底部有太多我们不想要的内容
        • 2.用给定的url我们无法再排版
        • 解决:利用js的语法将我们不想要的内容去掉。但是这不是主流做法，下面开始介绍现在的主流做法
      • 做新闻类APP的方法
        • 1.最好不要使用的方法:客户端直接发送http请求，服务器返回完整的网页在手机上显示。这样就会导致3.2所述的问题。而且如果公司网页想在安卓或者ios上显示个性化的效果，需要在服务器准备好几套html代码
        • 2. 让公司美工或者前端程序员做好手机版网页，直接加载就可以。不要像网易这样有这么多冗余内容
        • 3.让公司的服务器传一些零散的数据(网页文字与图片分开的数据)然后我们再拼接成完整的新闻。
          • 这样的好处；1是我们自己排版决定样式 2是我们可以单独拿到图片来处理，比如加个图片浏览器或者单独处理图片等
      • 3.3 利用我们自己包装的请求类及每条新闻的id得到文字和图片分开的数据
        • 这个地方在发送请求时可以直接使用自己已经包装好的HMHttpManager，就不要在包含AFNetWorking这个框架了，因为万一以后AFN框架不行了(比如已经死去的ASI)或者出现了更好的框架，我们只要改HMHttpManager的内容就行了，而不用到处改
        • 但是在这里我们接下来使用的还是AFN的方法，因为我们包装的还不彻底。以后会讲到怎样彻底屏蔽第三方框架的风险
      • 3.3将返回的数据responseObject写成plist方便查看
        • 但是如果服务器返回的字典数据非常大而且如果偶格式不太正规的内容，plist可能写不成功
      • 3.4 分析自己需要的数据。建模型转成模型
        • 模型1:HMNewsDetailModel
        • 模型2:HMNewsDetailImgModel
• 主题
• 第五课
  • 1.字典转模型，涉及到嵌套
    • 此处无技术含量，先暂时使用
  • 2.通过key(与新闻的id一样）直接取出字典转成模型
  • 3.[self showNewsDetail]（showNewsDetail是自定义的方法）
    • 3.0 我们在自定义的犯法showNewsDetail需要刚才那个模型。可以选择传参数，也可以将其声明为全局变量
    • 3.1 利用webView的loadHTMLString方法加载网页内容
      • [self.webView loadHTMLString:self.detailModel.body baseURL:nil];
    • 3.2 显示新闻详细内容 [self showNewsDetail]; (showNewDetail是自定义方法)
    • 3.3 在showNewsDetail中自己拼接html
    • 3.4 将图片插入body对应的标记。封装到setUpBody方法
      • 主要方法:replaceOccurenceOfString
      • 为了让图片分行显示，用div
        • [imgHtml appendString:@" "];----[imgHtml appendFormat:@"",width,height,img.src];----[imgHtml appendString:@" "];
      • 问题1:图片过大
        • 图片的宽高根据屏幕进行适配。如果图片宽度大于屏幕宽度，则进行图片的等比例缩放
        • 解决图片宽高
          • （1）在img的属性中写width和height
            • 利用model中的.pixel属性
          • （2）利用img.piel = 500 * 332 进行切割，用componentSeperateByString
          • (3)限制宽高
          • // 440*953 NSArray * pixel = [img.pixel componentsSeparatedByString:@"*"]; int width = [[pixel firstObject] intValue]; int height = [[pixel lastObject] intValue]; // 图片等比例缩小 int screenWidth = [UIScreen mainScreen].bounds.size.width * 0.8; if(width > screenWidth) { height = height * screenWidth / width; width = screenWidth; }
      • 问题2:没有居中
        • 解决:在父节点中设置style=\"text-align:center\"
    • 3.5 在拼接的内容前拼接标题和时间
      • 使用div，然后设置居中
      • // 拼接标题 [body appendFormat:@" %@">%@",self.detailModel.title]; // 拼接时间 [body appendFormat:@" %@">%@",self.detailModel.ptime];
        • 注意：这段代码前的代码
          • NSMutableString * body = [NSMutableString string];
        • 这段代码后的代码:
          • [body appendString:self.detailModel.body];
    • 3.6 抽出style属性
      • css文件可以让美工提供好
      • 利用other-->empty建立css文件
        • .title{}
          • .title { text-align : center; font-size : 25px; font-weight : bold; color : black; }
        • .time()
          • .time { text-align : center; font-size : 15px; color : gray; margin-top : 5px; margin-bottom : 5px; }
        • .img_parent()
          • .img-parent { text-align : center; }
      • 在showNewDetail的head之间加载css文件
        • [html appendString:@"<head>"]; [html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">", [[NSBundle mainBundle] URLForResource:@"HMNewsDetail.css" withExtension:nil]]; [html appendString:@"</head>"];
        • 注意其css 文件路径的加载
          • 如果这样放表示在当前网页文件夹下找css文件。但是我们这里没有网页，只有自己拼接的字符串
          • 所以这里应该放css文件的绝对路径，并且绝对路径一定要加协议头file:// 在这里获取绝对路径就是通过[[NSBundle mainBundle] URLForResource:@"HMNewsDetail.css" withExtension:nil]
    • 3.7 之后我们可以随便改css，弄出属性
• 第六课
  • 1.css文件是放到服务器的.我们放在本地只是为了演示
    • 也就以后css路径肯定是服务器路径http://xxx..../xx.css
  • 2.模板技术讲解(在前端经常使用)
    • 文件以任意结尾
    • 模板技术使用的原因在我们的代码中有很多固定的东西，比如<html></html>。我们希望把这些固定的东西单独抽取出来形成模板。在模板中将不确定的东西写好，然后再项目中替换即可
    • 有了模板的话皆就可以直接直接加载使用模板就可以了
  • 3.要实现的功能:图片加载完毕后，用户点击可以保存到相册
    • 补充:要实现分享的功能，一般使用百度社交化组件,ShareDK,友盟分享等第三方框架
    • 1.保存到相册肯定使用OC代码。先写好保存图片的方法:saveImageToAlbum
      • 当用户点击图片后，底部出现actionSheet让用户选择
        • 出现方法:1使用ActionSheet
        • 方法2:用AlertController（ios8中新增）
          • 创建alertController控制器
            • UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"友情提示" message:@"确定要保存图片吗?" preferredStyle:UIAlertControllerStyleActionSheet];
          • 添加按钮
            • // 是 按钮 [alert addAction:[UIAlertAction actionWithTitle:@"是" style:UIAlertActionStyleDestructive handler:^(UIAlertAction *action) { // 进行图片的保存 }] ]; // 否 按钮 [alert addAction:[UIAlertAction actionWithTitle:@"否" style:UIAlertActionStyleCancel handler:nil]];
          • 显示。统一用modal方式
            • [self presentViewController:alert animated:YES completion:nil];
    • 2.在img的onClick中怎样调用saveImageToAlbum:imgSrc
      • img的onclick方法:（url的协议头自己定义，并且协议头必须得添加，不添加的话苹果会自动添加，这样不利于判断。其中的//可以不加，因为协议头是:前面的window.location.href= 'hm:src='+this.src ）。在这里还可以将方法名传递过去，即window.location.href= 'saveToAlbum:src='+this.src.后面使用NSSelectorFromString和[self porfermSelector:...]我们这里写hm:是写死的做的，接下来再提高扩展性
        • onclick = \"window.location.href= 'hm://?src='+this.src \"
      • WebView是JS 和OC的桥梁.webView在发送请求前，都要调用shouldStartLoadWithRequest这个方法.在使用这个方法前需遵守代理协议<UIWebViewDelegate>，并且设置代理self.webView.delegate = self;
        • 这个方法中可以拦截请求
        • request.URL.absoluteString可以将url转成字符串
      • 拦截url.
        • NSString * url = request.url.absoluteString;
      • 判断需要发送
        • 拦截方法有两种
          • 方法1：if([url hasPrefix:@"hm://?src")]
          • 方法2；字符串截取；NSRange range = [url rangeOfString:@"hm://?src="]; if(range.location != NSNotFound) { NSUInteger loc = range.location + range.length; NSString * src = [url substringFromIndex:loc]; NSLog(@"%@",src); [self saveToAlbum:src]; }
    • 3.保存到相册
      • 将图片写进相册的方法
        • 先简单使用，即保存完后不做任何事情:UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
      • 方法1：使用SDWebImage从网络上再下载一遍
        • 如果在网络上下载图片使用SDWebImage。如果是下载文件或者别的使用AFN框架
        • 如何使用SDWebImage在网络下载图片
          • 1.#import "SDWebImageManager.h"
          • 2. [[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:imgSrc] options:SDWebImageRetryFailed progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) { // 写入相册 UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil); }];
        • 这种方法是直接在网络上将图片再下载一遍，并不会默认去webView的缓存中去取，所以这种方式浪费用户流量，不推荐
      • 方法2：从webView网页缓存中取图片
        • 注意；webView本身内置有缓存并且是单例。并且webview的缓存由NSURLCache来管理
        • 相关代码；
          • // 1.创建NSURLCache对象 NSURLCache * cache = [NSURLCache sharedURLCache]; // 2.将给定的请求返回的响应保存到cache中 NSURLRequest * request = [NSURLRequest requestWithURL:[NSURL URLWithString:imgSrc]]; NSCachedURLResponse * response = [cache cachedResponseForRequest:request]; // 3.从缓存的响应中得到二进制图片数据 NSData * imgData = response.data; // 4.将二进制图片数据转成图片并且保存 UIImage * image = [UIImage imageWithData:imgData]; UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
      • 避免用户在图片未下载完时就点击保存图片
        • 思路:当图片下载完时才给image绑定点击事件。
        • 示例代码:
          • NSString* onload = @"this.onclick = function(){" "window.location.href= 'hm://?src='+this.src" "};"; [imgHtml appendFormat:@"<img onload = \"%@\",width =\"%d\" height =\"%d\" src= \"%@\">",onload,width,height,img.src];
            • 注意点:
              • JS中绑定事件要使用function(){}.所以不能写成 NSString* onload = @"this.onclick = "window.location.href= 'hm://?src='+this.src";
  • 4.程序中存在的问题
    • 1.JS与OC的交互太复杂
    • 2.JS不能想调哪个就调哪个方法。在这个程序里我们是写死的。只要检测到是hm协议，就只能调saveToAlbum:方法，不够灵活。解决的整体思路就是下webView的delegate方法中将方法名和参数一般化，再利用performSelector调用方法。具体解决办法:见01-26号的课程
    • 3.当图片保存成功时应该提醒用户
      • 提醒的三种方式:
        • 1.中间弹窗转菊花提醒
        • 2.中间提醒打对勾
        • 3.上部提醒
          • 考虑自己写框架实现。
            • 见01-26号课程